/* ============================================================
   MonitoringHive, production stylesheet.
   System font stack (no third-party font CDN).
   No JavaScript dependencies, switchers and dropdowns use
   semantic <details>/<summary>.
   ============================================================ */

:root {
  /* Brand */
  --blue: #003CCB;
  --blue-700: #002FA3;
  --blue-300: #93c5fd;
  --blue-100: #DCE5FF;
  --blue-50: #EEF2FF;
  --navy: #06162E;

  /* Ink + neutrals */
  --slate-900: #102033;
  --slate-800: #1E293B;
  --slate-700: #2F3D52;
  --slate-600: #475569;
  --slate-500: #65738A;
  --slate-400: #94A3B8;
  --slate-300: #B8C2D2;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50: #F8FAFC;
  --border: #D8E1F0;
  --border-soft: #E6ECF6;
  --bg: #F7F9FD;
  --bg-2: #F0F4FB;
  --white: #FFFFFF;

  --honey: #B9770E;
  --honey-soft: #F3D8A2;
  --honey-50: #FFF6E6;
  --green: #168A4A;

  --shadow-sm: 0 1px 2px rgba(6,22,46,0.04);
  --shadow-md: 0 1px 2px rgba(6,22,46,0.04), 0 8px 24px -12px rgba(6,22,46,0.10);
  --shadow-lg: 0 1px 2px rgba(6,22,46,0.04), 0 24px 48px -24px rgba(6,22,46,0.18);
  --radius: 20px;
  --radius-sm: 12px;
  --maxw: 1488px;

  /* System font stacks */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans), sans-serif;
  color: var(--slate-900);
  background: var(--white);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.mono { font-family: var(--font-mono), monospace; letter-spacing: 0.02em; }

.eyebrow {
  font-family: var(--font-mono), monospace;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue); font-weight: 500;
}
.eyebrow.honey { color: var(--honey); }
.eyebrow.muted { color: var(--slate-500); }

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; color: var(--slate-900); margin: 0; line-height: 1.15; }
h1 { font-size: clamp(34px, 4.6vw, 52px); letter-spacing: -0.03em; line-height: 1.08; }
h2 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.025em; line-height: 1.15; }
h3 { font-size: 19px; letter-spacing: -0.012em; }
p { margin: 0; color: var(--slate-700); }

/* Skip link for keyboard users */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--blue); color: white;
  padding: 10px 14px; border-radius: 0 0 8px 0;
  font-size: 14px; z-index: 100;
}
.skip-link:focus { left: 0; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ============ HEADER ============ */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.nav { display: flex; align-items: center; gap: 28px; min-height: 68px; padding: 12px 28px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 30px; height: 30px; flex-shrink: 0; }
.brand-name { display: block; font-weight: 600; font-size: 17px; letter-spacing: -0.015em; color: var(--slate-900); }
.brand-byline {
  display: block;
  font-family: var(--font-mono), monospace;
  font-size: 10.5px; color: var(--slate-500); letter-spacing: 0.06em;
  margin-top: 1px;
}

.nav-links { display: flex; gap: 22px; margin-left: 12px; align-items: center; flex-wrap: wrap; list-style: none; padding: 0; }
.nav-links a, .nav-links .nav-trigger {
  font-size: 14.5px; color: var(--slate-700); font-weight: 500;
  transition: color .15s ease;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit;
}
.nav-links a.active, .nav-links .nav-trigger.active { color: var(--blue); }
.nav-links a:hover, .nav-links .nav-trigger:hover { color: var(--blue); }

.nav-dd { position: relative; }
.nav-dd .nav-trigger { display: inline-flex; align-items: center; gap: 4px; }
.nav-dd .nav-trigger svg { width: 12px; height: 12px; opacity: 0.6; }
.nav-dd-panel {
  position: absolute; top: calc(100% + 14px); left: -20px;
  background: white; border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-md);
  padding: 10px; min-width: 280px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 60;
}
.nav-dd:hover .nav-dd-panel,
.nav-dd:focus-within .nav-dd-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dd-item {
  display: block; padding: 10px 12px; border-radius: 8px;
  color: var(--slate-900);
}
.nav-dd-item:hover { background: var(--bg-2); color: var(--blue); }
.nav-dd-item .lbl { font-size: 14px; font-weight: 500; }
.nav-dd-item .ds { font-size: 12px; color: var(--slate-500); margin-top: 2px; line-height: 1.4; }

.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ============ REGION + LANGUAGE SELECTOR (semantic <details>) ============ */
.region-selector { position: relative; }
.region-selector > summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  background: white; border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px; color: var(--slate-900); font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.region-selector > summary::-webkit-details-marker { display: none; }
.region-selector > summary::after {
  content: ""; width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px; opacity: 0.6;
}
.region-selector > summary:hover { border-color: var(--blue); color: var(--blue); }
.region-selector[open] > summary { border-color: var(--blue); color: var(--blue); }
.region-selector .rl-flag { font-size: 14px; line-height: 1; }
.region-selector .rl-label { display: inline-flex; align-items: baseline; }
.region-selector .rl-sep { color: var(--slate-300); font-weight: 400; padding: 0 6px; }
.region-selector .rl-lang { color: var(--slate-500); font-weight: 400; }
.region-selector > summary:hover .rl-lang { color: var(--blue); }
.region-selector .rl-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 460px; max-width: calc(100vw - 32px);
  background: white; border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(13, 25, 56, 0.12), 0 2px 6px rgba(13, 25, 56, 0.04);
  padding: 18px;
  z-index: 60;
}
.region-selector .rl-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
.region-selector .rl-col-head {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate-500); font-weight: 600;
  margin: 0 0 10px;
}
.region-selector .rl-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.region-selector .rl-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  font-size: 14px; color: var(--slate-900);
  transition: background .12s ease, color .12s ease;
}
.region-selector .rl-list a:hover { background: var(--bg-2); color: var(--blue); }
.region-selector .rl-list a.is-current { background: rgba(0, 60, 203, 0.06); color: var(--blue); font-weight: 500; }
.region-selector .rl-list .rl-flag { width: 22px; text-align: center; flex-shrink: 0; }
.region-selector .rl-list .rl-name { flex: 1; }
.region-selector .rl-list .rl-tag { font-family: var(--font-mono), monospace; font-size: 10.5px; color: var(--slate-500); letter-spacing: 0.04em; }
.region-selector .rl-list a.is-current .rl-tag { color: var(--blue); }
.region-selector .rl-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px; line-height: 1.55;
  color: var(--slate-700);
}
@media (max-width: 720px) {
  .region-selector .rl-panel { right: -8px; width: calc(100vw - 32px); }
  .region-selector .rl-cols { grid-template-columns: 1fr; gap: 16px; }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border-radius: 10px;
  font-size: 14.5px; font-weight: 500;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--blue); color: white;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-primary:hover { background: var(--blue-700); color: white; }
.btn-secondary {
  background: white; color: var(--slate-900);
  border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--slate-300); }
.btn-ghost { color: var(--slate-700); background: transparent; }
.btn-ghost:hover { color: var(--blue); transform: none; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 12px; }
.btn-on-blue { background: white; color: var(--blue); }
.btn-on-blue:hover { background: #F1F5FF; color: var(--blue-700); }
.btn-on-blue-outline {
  background: transparent; color: white; border-color: rgba(255,255,255,0.3);
}
.btn-on-blue-outline:hover { border-color: white; }

.arr { width: 14px; height: 14px; }

/* ============ SECTIONS ============ */
section.block { padding: 88px 0; position: relative; }
section.block.tight { padding: 64px 0; }
.section-head { margin-bottom: 40px; }
.section-head .eyebrow { display: block; margin-bottom: 12px; }
.section-head h2 + p { margin-top: 14px; font-size: 17px; color: var(--slate-700); line-height: 1.6; }

/* ============ HERO ============ */
.hero {
  position: relative; overflow: hidden;
  background: var(--white);
  padding: 80px 0 64px;
}
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(820px 480px at 78% 22%, rgba(0,60,203,0.08), transparent 65%),
    radial-gradient(560px 360px at 18% 78%, rgba(0,60,203,0.04), transparent 70%);
}
.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(15,23,42,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(900px 600px at 60% 40%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(900px 600px at 60% 40%, black, transparent 80%);
}
.hero .container { position: relative; z-index: 1; }
.hero-loc {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono), monospace; font-size: 11px;
  color: var(--slate-700); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: white;
}
.hero-loc .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(22,138,74,0.18); }
.hero h1 { margin-top: 22px; max-width: 18ch; }
.hero h1.wide { max-width: 22ch; }
.hero h1 .accent { color: var(--blue); }
.hero-sub {
  margin-top: 22px; font-size: 18px; line-height: 1.6;
  color: var(--slate-700); max-width: 60ch;
}
.hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-trust {
  margin-top: 26px; display: flex; align-items: flex-start; gap: 12px;
  color: var(--slate-500); font-size: 13.5px; max-width: 60ch;
  padding-top: 22px; border-top: 1px solid var(--border-soft);
}

/* Two-column hero (text + visual) */
.hero-split {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 48px; align-items: center;
}
@media (max-width: 980px) { .hero-split { grid-template-columns: 1fr; gap: 32px; } }

/* Home page hero: text-left + .h3p-right */
.home-hero { padding: 40px 0 36px; }
.home-hero-grid {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 40px; align-items: center;
}
.home-hero h1 .accent { color: var(--blue); }

/* ============ HERO ILLUSTRATION: three diverging paths ============ */
.h3p {
  position: relative;
  aspect-ratio: 1.57 / 1;
  width: 100%;
  border-radius: 22px;
  background: linear-gradient(180deg, #fbfcfe 0%, #eff3fa 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.h3p .grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(15,23,42,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.h3p .glow {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 360px; height: 240px;
  background: radial-gradient(closest-side, rgba(0,60,203,0.18), transparent 75%);
  pointer-events: none;
}
.h3p svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* Top-left status pill */
.h3p .badge-row {
  position: absolute; top: 14px; left: 14px;
  display: flex; gap: 8px; z-index: 4;
}
.h3p .b-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 999px;
  background: white; border: 1px solid var(--border);
  font-family: var(--font-mono), monospace; font-size: 10px;
  color: var(--slate-700); letter-spacing: 0.1em; text-transform: uppercase;
}
.h3p .b-pill .d { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }

/* Top-right protocol/system feed */
.h3p .infra {
  position: absolute; right: 4%; top: 8%;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 3;
}
.h3p .node {
  background: white; border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 9px;
  font-family: var(--font-mono), monospace; font-size: 9.5px;
  color: var(--slate-700); letter-spacing: 0.05em;
  display: inline-flex; align-items: center; gap: 6px;
}
.h3p .node .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--honey); }

/* Center platform core */
.h3p .core {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  z-index: 3;
  width: 240px;
  background: white; border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 40px -22px rgba(0,60,203,0.35), 0 1px 2px rgba(0,0,0,0.04);
  padding: 14px 16px;
}
.h3p .core-top { display: flex; align-items: center; justify-content: space-between; }
.h3p .core-name { font-size: 13px; font-weight: 600; color: var(--slate-900); }
.h3p .core-tag {
  font-family: var(--font-mono), monospace; font-size: 9.5px;
  color: var(--blue); background: var(--blue-50);
  padding: 3px 6px; border-radius: 4px; letter-spacing: 0.06em;
}
.h3p .core-illu {
  margin-top: 12px; height: 56px;
  background: linear-gradient(180deg, #131c2c 0%, #06111F 100%);
  border-radius: 8px; position: relative; overflow: hidden;
  display: flex; align-items: center; padding: 0 12px; gap: 10px;
}
.h3p .core-illu::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--blue), transparent);
}
.h3p .led { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(22,138,74,0.7); }
.h3p .led.b { background: var(--blue); box-shadow: 0 0 8px rgba(0,60,203,0.8); }
.h3p .led.h { background: var(--honey); box-shadow: 0 0 6px rgba(185,119,14,0.55); }
.h3p .core-ports { display: flex; gap: 5px; margin-left: auto; }
.h3p .core-port { width: 9px; height: 14px; border-radius: 2px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); }
.h3p .core-foot {
  margin-top: 10px; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono), monospace; font-size: 9.5px; color: var(--slate-500);
}
.h3p .core-foot .ok { color: #0d6635; display: inline-flex; align-items: center; gap: 5px; }
.h3p .core-foot .ok::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }

/* Three satellite cards */
.h3p .path {
  position: absolute; z-index: 3;
  background: white; border: 1px solid var(--border);
  border-radius: 12px; padding: 11px 13px;
  box-shadow: var(--shadow-sm);
  min-width: 156px; max-width: 200px;
  display: flex; flex-direction: column; gap: 4px;
}
.h3p .path .lab {
  font-family: var(--font-mono), monospace; font-size: 9.5px;
  color: var(--blue); letter-spacing: 0.1em; text-transform: uppercase;
}
.h3p .path .nm { font-size: 12.5px; font-weight: 600; color: var(--slate-900); margin-top: 4px; }
.h3p .path .ds {
  font-size: 11px; color: var(--slate-500); margin-top: 4px; line-height: 1.4;
  font-family: var(--font-mono), monospace; letter-spacing: 0.02em;
}
.h3p .p-direct { left: 4%;  top: 18%; }
.h3p .p-wl     { left: 4%;  bottom: 10%; }
.h3p .p-oem    { right: 4%; top: 50%; transform: translateY(-50%); }

@media (max-width: 720px) {
  .h3p { aspect-ratio: 1.1 / 1; }
  .h3p .core { width: 180px; padding: 10px 12px; }
  .h3p .path { min-width: 120px; padding: 8px 10px; }
  .h3p .infra { display: none; }
}

/* Headline accent (blue highlight phrase) */
h1 .accent, h2 .accent { color: var(--blue); }

/* ============ TRUST BAR ============ */
.trustbar {
  background: var(--bg-2);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 28px 0;
}
.trustbar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.trust-item { display: flex; gap: 12px; align-items: flex-start; }
.trust-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  background: white; border: 1px solid var(--border);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue);
  font-family: var(--font-mono), monospace; font-size: 13px; font-weight: 600;
}
.trust-item .lbl { font-size: 14px; font-weight: 600; color: var(--slate-900); }
.trust-item .ds { font-size: 13px; color: var(--slate-700); margin-top: 2px; line-height: 1.45; }
.trust-item .tech {
  display: inline-block; margin-top: 8px;
  font-size: 10.5px; color: var(--blue-700);
  background: var(--blue-50); padding: 3px 8px; border-radius: 6px;
}

/* ============ AUDIENCE CARDS ============ */
.aud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.aud-card {
  position: relative;
  background: white; border: 1px solid var(--border);
  border-radius: 22px; padding: 28px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.aud-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--blue-100); }
.aud-card .aud-tag {
  font-family: var(--font-mono), monospace; font-size: 10.5px;
  letter-spacing: 0.12em; color: var(--blue); text-transform: uppercase;
}
.aud-card h3 { font-size: 22px; margin-top: 10px; letter-spacing: -0.018em; }
.aud-card .aud-sub { margin-top: 10px; font-size: 14.5px; color: var(--slate-700); line-height: 1.5; }
.aud-card .aud-bullets {
  list-style: none; padding: 0; margin: 18px 0;
  display: flex; flex-direction: column; gap: 8px;
}
.aud-card .aud-bullets li {
  font-size: 13.5px; color: var(--slate-700);
  display: flex; gap: 8px; align-items: flex-start;
}
.aud-card .aud-bullets li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue); margin-top: 8px; flex-shrink: 0;
}
.aud-card .aud-cta, .aud-card a.aud-cta { margin-top: auto; align-self: flex-start; }

/* ============ FEATURE GRID ============ */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.feature-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.feature-card {
  background: white; border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border); }
.feature-card .num {
  font-family: var(--font-mono), monospace; font-size: 11px;
  color: var(--slate-500); letter-spacing: 0.1em;
}
.feature-card h3 { margin-top: 12px; }
.feature-card p { margin-top: 10px; font-size: 14.5px; color: var(--slate-700); line-height: 1.55; }

/* ============ DARK BAND ============ */
section.dark-band {
  background: var(--navy);
  color: white;
  position: relative;
  overflow: hidden;
  padding: 88px 0;
}
.dark-band h2, .dark-band h3, .dark-band h4 { color: white; }
.dark-band p, .dark-band .section-head h2 + p, .section-head.dark h2 + p { color: #C7D5F5; }
.dark-band .eyebrow, .section-head.dark .eyebrow { color: #93B4FF; }
.section-head.dark h2 { color: white; }
.dark-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(147,180,255,0.10) 0%, transparent 35%),
    radial-gradient(circle at 82% 78%, rgba(255,204,102,0.07) 0%, transparent 38%),
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
  pointer-events: none;
}
.dark-band > .container { position: relative; z-index: 1; }
.dark-band .feature-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: white;
}
.dark-band .feature-card h3 { color: white; }
.dark-band .feature-card p { color: #C7D5F5; }

/* ============ COMPARISON ============ */
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.comp-card {
  border: 1px solid var(--border-soft); border-radius: 16px;
  background: white; padding: 26px;
}
.comp-card.before { background: var(--bg-2); }
.comp-card.after { border-color: var(--blue-100); background: var(--blue-50); }
.comp-card .comp-tag {
  font-family: var(--font-mono), monospace; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-500);
}
.comp-card.after .comp-tag { color: var(--blue); }
.comp-card h3 { margin-top: 8px; }
.comp-card ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.comp-card ul li { font-size: 14px; color: var(--slate-700); display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.comp-card.before ul li::before {
  content: "—"; color: var(--slate-500); font-weight: 600; flex-shrink: 0;
  font-family: var(--font-mono), monospace; font-size: 12px; margin-top: 1px;
}
.comp-card.after ul li::before {
  content: "✓"; color: var(--blue); font-weight: 600; flex-shrink: 0;
  font-family: var(--font-mono), monospace; font-size: 12px; margin-top: 1px;
}

/* ============ PROCESS STEPS ============ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.steps.cols-4 { grid-template-columns: repeat(4, 1fr); }
.steps .step {
  background: white; border: 1px solid var(--border-soft);
  border-radius: 18px; padding: 24px;
  position: relative;
  counter-increment: step;
}
.steps .step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono), monospace; font-size: 12px; color: var(--blue);
  letter-spacing: 0.08em;
  display: block; margin-bottom: 8px;
}
.steps .step h3 { font-size: 17px; margin-bottom: 8px; }
.steps .step p { font-size: 14px; color: var(--slate-700); line-height: 1.55; }

/* ============ FIT NOTE ============ */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fit-card {
  border: 1px solid var(--border-soft); border-radius: 16px;
  background: white; padding: 26px;
}
.fit-card.fit { border-color: var(--blue-100); background: var(--blue-50); }
.fit-card.notfit { background: var(--bg-2); }
.fit-card .fit-tag {
  font-family: var(--font-mono), monospace; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue);
}
.fit-card.notfit .fit-tag { color: var(--slate-500); }
.fit-card h3 { font-size: 17px; margin-top: 8px; }
.fit-card ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.fit-card ul li { font-size: 13.5px; color: var(--slate-700); display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.fit-card.fit ul li::before {
  content: "✓"; color: var(--blue); font-weight: 600; flex-shrink: 0;
  font-family: var(--font-mono), monospace; font-size: 12px; margin-top: 1px;
}
.fit-card.notfit ul li::before {
  content: "—"; color: var(--slate-500); font-weight: 600; flex-shrink: 0;
  font-family: var(--font-mono), monospace; font-size: 12px; margin-top: 1px;
}

/* ============ CTA SECTION ============ */
.cta-section { padding: 88px 0; background: var(--white); }
.cta-card {
  position: relative; overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(135deg, #001E80 0%, #003CCB 60%, #0048E8 100%);
  color: white;
  padding: 48px;
  box-shadow: 0 30px 80px -30px rgba(0,60,203,0.55);
}
.cta-card::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(700px 400px at 70% 50%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(700px 400px at 70% 50%, black, transparent 80%);
}
.cta-card > * { position: relative; z-index: 1; }
.cta-card .eyebrow { color: #93B4FF; }
.cta-card h2 { color: white; margin-top: 12px; max-width: 22ch; }
.cta-card p { color: #C7D5F5; font-size: 17px; margin-top: 16px; max-width: 60ch; line-height: 1.55; }
.cta-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ============ EU MARKETS ============ */
.eu-markets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.eu-card {
  display: flex; flex-direction: column; gap: 10px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.eu-card:hover {
  border-color: var(--blue-100);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(13, 25, 56, 0.08);
}
.eu-card .flag { font-size: 26px; line-height: 1; }
.eu-card .market { font-size: 17px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.012em; }
.eu-card .domain { font-family: var(--font-mono), monospace; font-size: 12px; color: var(--blue); letter-spacing: 0.02em; }
.eu-card .ds { font-size: 13.5px; color: var(--slate-500); line-height: 1.5; margin-top: 2px; }
.eu-card .arr-link {
  margin-top: auto; padding-top: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--blue); font-weight: 500;
}
.eu-fallback {
  margin-top: 18px;
  padding: 18px 22px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--bg);
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.eu-fallback p { font-size: 14px; color: var(--slate-700); margin: 0; max-width: 580px; }
.eu-fallback a { color: var(--blue); font-weight: 500; font-size: 14px; }
.eu-fallback a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============ INTEGRATIONS LISTS ============ */
.proto-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; }
.proto-item {
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: white;
}
.proto-item.live { border-color: var(--blue-100); background: var(--blue-50); }
.proto-item.coming { background: var(--bg-2); }
.proto-item .proto-head { display: flex; align-items: center; gap: 10px; }
.proto-item .proto-name { font-family: var(--font-mono), monospace; font-size: 13px; color: var(--slate-900); letter-spacing: 0.04em; font-weight: 600; }
.proto-item.live .proto-name { color: var(--blue); }
.proto-item .proto-status {
  margin-left: auto; font-size: 10.5px;
  font-family: var(--font-mono), monospace;
  color: var(--slate-500); letter-spacing: 0.10em;
  padding: 3px 8px; border-radius: 4px;
  background: white; border: 1px solid var(--border-soft);
}
.proto-item.live .proto-status { color: var(--blue); border-color: var(--blue-100); background: white; }
.proto-item .proto-desc { font-size: 13px; color: var(--slate-700); margin-top: 8px; line-height: 1.55; }

/* ============ CONTACT BLOCK ============ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.contact-card {
  background: white; border: 1px solid var(--border-soft);
  border-radius: 18px; padding: 28px;
}
.contact-card h3 { font-size: 18px; margin-bottom: 12px; }
.contact-card p { font-size: 14.5px; color: var(--slate-700); line-height: 1.6; }
.contact-card a { color: var(--blue); }
.contact-card a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }

/* ============ LANGUAGE SWITCHER (in footer) ============ */
.language-switcher { margin-top: 20px; }
.language-switcher h4 {
  color: white; font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; font-family: var(--font-mono), monospace; font-weight: 500;
  margin-bottom: 12px;
}
.language-switcher ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.language-switcher a {
  color: #B8C2D2; font-size: 13.5px;
  font-family: var(--font-mono), monospace; letter-spacing: 0.04em;
}
.language-switcher a:hover { color: white; }
.language-switcher a.is-current { color: white; }

/* ============ FOOTER ============ */
.foot {
  background: var(--navy); color: #B8C2D2;
  padding: 56px 0 28px;
}
.foot-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 30px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.foot .brand-name, .foot .nm { color: white; }
.foot .brand-byline { color: #93B4FF; }
.foot p { color: #B8C2D2; font-size: 13.5px; margin-top: 14px; line-height: 1.55; max-width: 360px; }
.foot-col h3, .foot-col h4 { color: white; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-mono), monospace; font-weight: 500; margin: 0 0 16px; }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-col a { color: #B8C2D2; font-size: 14px; transition: color .15s ease; }
.foot-col a:hover { color: white; }
.foot-bot {
  margin-top: 28px; display: flex; justify-content: space-between;
  font-size: 12.5px; color: #94a3b8;
  font-family: var(--font-mono), monospace; letter-spacing: 0.05em;
  flex-wrap: wrap; gap: 12px;
}

/* ============ PLAT-STRIP (post-hero summary) ============ */
.plat-strip {
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  padding: 32px 36px;
  background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  display: grid; grid-template-columns: 1.2fr repeat(4, 1fr);
  gap: 28px; align-items: center;
  box-shadow: var(--shadow-sm);
}
.plat-strip h3 { font-size: 18px; }
.plat-strip p { font-size: 13.5px; color: var(--slate-500); margin-top: 6px; line-height: 1.5; }
.plat-pill {
  display: flex; flex-direction: column; gap: 4px;
  padding-left: 18px; border-left: 1px solid var(--border-soft);
}
.plat-pill .lab {
  font-family: var(--font-mono), monospace; font-size: 10.5px;
  letter-spacing: 0.1em; color: var(--blue); text-transform: uppercase;
}
.plat-pill .v { font-size: 14px; font-weight: 600; color: var(--slate-900); }
.plat-pill .s { font-size: 12px; color: var(--slate-500); line-height: 1.4; }

/* ============ AUDIENCE CARD ILLUSTRATIONS ============ */
.aud-card .aud-illus {
  position: relative;
  margin: 18px -8px 18px;
  height: 193px;
  border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.ai-direct, .ai-wl, .ai-oem {
  position: absolute; inset: 0;
  padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.mini-row {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono), monospace; font-size: 10px;
  color: var(--slate-700); letter-spacing: 0.04em;
  background: white; border: 1px solid var(--border-soft);
  border-radius: 6px; padding: 5px 8px;
}
.mini-row .l { color: var(--slate-500); }
.mini-row .v { color: var(--slate-900); font-weight: 500; margin-left: auto; }
.mini-row .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.mini-row.b .pip { background: var(--blue); }
.mini-row.h .pip { background: var(--honey); }
.ai-direct .head {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px;
  font-family: var(--font-mono), monospace; font-size: 9.5px;
  color: var(--slate-700); letter-spacing: 0.06em;
}
.ai-direct .head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.ai-wl .brand {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border: 1px solid var(--border);
  background: white; border-radius: 7px;
  font-family: var(--font-mono), monospace; font-size: 10px; color: var(--slate-900);
}
.ai-wl .brand .sw {
  width: 14px; height: 14px; border-radius: 4px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-700) 100%);
}
.ai-wl .arrow { text-align: center; color: var(--slate-600); font-family: var(--font-mono), monospace; font-size: 10px; }
.ai-wl .tenants {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  flex: 0 0 auto;
  margin-top: 0;
  padding: 5px;
  background: var(--blue-100);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.ai-wl .tenant {
  background: white; border: 1px solid var(--border-soft); border-radius: 7px;
  padding: 6px 8px;
  font-family: var(--font-mono), monospace; font-size: 9.5px; color: var(--slate-700);
  display: flex; flex-direction: column; gap: 2px;
}
.ai-wl .tenant .nm { color: var(--slate-900); font-size: 10px; font-weight: 500; }
.ai-wl .tenant .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 4px; }
.ai-oem .device {
  display: flex; align-items: center; gap: 8px;
  background: var(--navy); color: white; border-radius: 8px;
  padding: 7px 10px;
}
.ai-oem .device .nm { font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: 0.08em; }
.ai-oem .device .v  { font-family: var(--font-mono), monospace; font-size: 9px; color: rgba(255,255,255,0.55); margin-left: auto; }
.ai-oem .device .led { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 6px rgba(0,60,203,0.7); }
.ai-oem .arrow { text-align: center; color: var(--slate-600); font-family: var(--font-mono), monospace; font-size: 10px; }
.ai-oem .api {
  background: white; border: 1px solid var(--border); border-radius: 7px;
  padding: 6px 8px;
  font-family: var(--font-mono), monospace; font-size: 9.5px; color: var(--slate-700);
  display: flex; align-items: center; gap: 6px;
}
.ai-oem .api .tag { color: var(--blue); background: var(--blue-50); padding: 2px 5px; border-radius: 3px; font-size: 9px; }

/* ============ DASHBOARD / STUDIO (ds-split) ============ */
.ds-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 36px; }
.ds-col {
  background: white; border: 1px solid var(--border-soft);
  border-radius: 18px; padding: 28px;
  display: flex; flex-direction: column;
}
.ds-col.dark { background: var(--navy); border-color: var(--navy); color: white; }
.ds-col .ds-tag {
  font-family: var(--font-mono), monospace; font-size: 10.5px;
  letter-spacing: 0.12em; color: var(--blue); text-transform: uppercase;
}
.ds-col.dark .ds-tag { color: #93B4FF; }
.ds-col h3 { font-size: 22px; margin-top: 10px; letter-spacing: -0.015em; }
.ds-col.dark h3 { color: white; }
.ds-col .ds-sub {
  margin-top: 4px; font-family: var(--font-mono), monospace; font-size: 12px;
  color: var(--slate-500); letter-spacing: 0.04em;
}
.ds-col.dark .ds-sub { color: #93B4FF; }
.ds-col p { margin-top: 14px; font-size: 14.5px; color: var(--slate-700); line-height: 1.55; }
.ds-col.dark p { color: #C7D5F5; }
.ds-col .ds-mock {
  margin-top: 18px; padding: 14px;
  border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 6px;
}
.ds-col.dark .ds-mock { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.ds-col .ds-mock .row {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono), monospace; font-size: 11px;
  color: var(--slate-700);
  background: white; border: 1px solid var(--border-soft); border-radius: 6px;
  padding: 6px 10px;
}
.ds-col.dark .ds-mock .row { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #C7D5F5; }
.ds-col .ds-mock .row .v { margin-left: auto; color: var(--slate-900); font-weight: 600; }
.ds-col.dark .ds-mock .row .v { color: white; }
.ds-col .ds-mock .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.ds-col.dark .ds-mock .pip { background: var(--honey); }
.ds-examples { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ds-ex { background: white; border: 1px solid var(--border-soft); border-radius: 12px; padding: 16px 18px; }
.ds-ex-tag {
  display: inline-block;
  font-family: var(--font-mono), monospace; font-size: 10.5px;
  color: var(--blue); letter-spacing: 0.10em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  background: var(--blue-50); border: 1px solid var(--blue-100);
  margin-bottom: 8px;
}
.ds-ex p { font-size: 14px; color: var(--slate-700); line-height: 1.5; margin: 0; }

/* ============ WHY-NOW ============ */
.why-now {
  background: var(--slate-900);
  color: white;
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}
.why-now::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.why-now-inner {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: start;
}
.why-now-eyebrow {
  font-family: var(--font-mono), monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #93c5fd; margin-bottom: 16px;
  display: inline-flex; align-items: center; gap: 10px;
}
.why-now-eyebrow::before {
  content: ""; width: 24px; height: 1px; background: #93c5fd;
}
.why-now h2 {
  font-size: 30px; line-height: 1.2; font-weight: 600;
  color: white; margin: 0; letter-spacing: -0.01em;
}
.why-now h2 .accent { color: #93c5fd; }
.why-now-copy {
  font-size: 15px; line-height: 1.65;
  color: rgba(255,255,255,0.78);
  margin: 0 0 22px;
}
.why-now-bullets {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.why-now-bullets li {
  display: grid; grid-template-columns: 14px 1fr;
  gap: 14px; align-items: start;
  font-size: 14.5px; line-height: 1.55;
  color: rgba(255,255,255,0.92);
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border-left: 2px solid #93c5fd;
  border-radius: 0 8px 8px 0;
}
.why-now-bullets li::before {
  content: ""; width: 6px; height: 6px;
  border-radius: 50%; background: #93c5fd;
  margin-top: 8px;
}
.why-now-bullets li b { font-weight: 600; color: white; }
@media (max-width: 880px) { .why-now-inner { grid-template-columns: 1fr; gap: 28px; } }

/* ============ ENTRY SCENARIOS ============ */
.entry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.entry-card {
  background: white; border: 1px solid var(--border);
  border-radius: 16px; padding: 26px;
  display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.entry-card:hover { border-color: var(--blue-100); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.entry-card .tg {
  font-family: var(--font-mono), monospace; font-size: 10.5px;
  color: var(--blue); letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 14px;
}
.entry-card h3 { font-size: 22px; font-weight: 600; color: var(--slate-900); line-height: 1.2; }
.entry-card .sub { font-size: 13.5px; color: var(--slate-600); margin-top: 6px; line-height: 1.5; }
.entry-card ul {
  margin-top: 16px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px dashed var(--border-soft); padding-top: 16px;
}
.entry-card li {
  font-size: 13px; color: var(--slate-700); line-height: 1.5;
  display: flex; gap: 8px; align-items: flex-start;
}
.entry-card li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--blue); flex-shrink: 0; margin-top: 8px;
}
.entry-card .cta-link {
  margin-top: auto; padding-top: 18px;
  font-size: 13.5px; font-weight: 600; color: var(--blue);
  display: inline-flex; align-items: center; gap: 6px;
}

/* Offer callout */
.offer-callout {
  margin-top: 36px;
  background: white;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 28px 32px;
}
.offer-callout-inner { max-width: 820px; }
.offer-callout h3 { font-size: 19px; font-weight: 600; color: var(--slate-900); margin: 0 0 10px; }
.offer-callout > .offer-callout-inner > p { font-size: 14.5px; color: var(--slate-700); line-height: 1.6; margin: 0; }
.offer-chips { margin: 16px 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.offer-chips li {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  background: var(--bg-2); border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-family: var(--font-mono), monospace; font-size: 11.5px;
  letter-spacing: 0.04em; color: var(--slate-700);
}
.offer-close { font-size: 13.5px !important; color: var(--slate-600) !important; font-style: italic; }
.offer-actions { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ============ EXAMPLE NARRATIVE (ex-section) ============ */
.ex-section { background: white; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.ex-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.ex-eyebrow {
  display: inline-block;
  font-family: var(--font-mono), monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 12px;
}
.ex-h { font-size: 28px; font-weight: 600; line-height: 1.22; color: var(--slate-900); margin: 0 0 16px; letter-spacing: -0.01em; }
.ex-copy { font-size: 15.5px; line-height: 1.65; color: var(--slate-700); margin: 0 0 22px; }
.ex-cta { margin-top: 8px; }
.ex-steps {
  list-style: none; margin: 0; padding: 0;
  position: relative; counter-reset: ex;
}
.ex-steps::before {
  content: ""; position: absolute;
  left: 17px; top: 22px; bottom: 22px;
  width: 1px;
  background: linear-gradient(to bottom, var(--blue) 0%, var(--border) 100%);
  opacity: 0.5;
}
.ex-steps li { position: relative; padding: 14px 0 14px 56px; counter-increment: ex; }
.ex-steps li::before {
  content: counter(ex, decimal-leading-zero);
  position: absolute; left: 0; top: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: white; border: 1px solid var(--blue);
  color: var(--blue);
  font-family: var(--font-mono), monospace; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.ex-step-h { font-size: 16px; font-weight: 600; color: var(--slate-900); margin: 0 0 4px; }
.ex-step-p { font-size: 14px; line-height: 1.55; color: var(--slate-700); margin: 0; }
@media (max-width: 880px) { .ex-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ============ BEFORE / AFTER (ba-grid) ============ */
.ba-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  max-width: 1080px; margin: 0 auto;
}
.ba-col {
  background: #fff; border: 1px solid var(--slate-200); border-radius: 4px;
  padding: 26px 28px 28px;
  display: flex; flex-direction: column;
}
.ba-col.after { border-color: var(--slate-900); box-shadow: 0 1px 0 var(--slate-900); }
.ba-tag {
  font-family: var(--font-mono), monospace; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--slate-500);
}
.ba-col.after .ba-tag { color: var(--slate-900); }
.ba-col h3 {
  font-size: 22px; font-weight: 600;
  color: var(--slate-900); letter-spacing: -0.015em;
  margin: 6px 0 18px;
}
.ba-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ba-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px; line-height: 1.5;
  color: var(--slate-700);
}
.ba-ico { flex-shrink: 0; margin-top: 3px; }
.ba-col.before .ba-ico { color: var(--slate-400); }
.ba-col.after  .ba-ico { color: var(--blue); }
.ba-col.after li { color: var(--slate-900); }
@media (max-width: 768px) { .ba-grid { grid-template-columns: 1fr; } }

/* ============ FIRST-PROJECT OUTCOMES (fp-grid) ============ */
.fp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--slate-200);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  overflow: hidden;
}
.fp-item {
  background: white;
  padding: 22px 24px;
  display: flex; align-items: baseline; gap: 16px;
}
.fp-num { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--blue); flex-shrink: 0; }
.fp-label { font-size: 16px; font-weight: 500; color: var(--slate-900); line-height: 1.4; }
.fp-close {
  margin: 28px 0 0; padding-top: 22px;
  border-top: 1px solid var(--border-soft);
  font-size: 16px; color: var(--slate-700); line-height: 1.6; max-width: 880px;
}
@media (max-width: 880px) { .fp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fp-grid { grid-template-columns: 1fr; } }

/* ============ SECURITY PILLARS + FAQ ============ */
.sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sec-pill {
  background: white; border: 1px solid var(--border-soft);
  border-radius: 14px; padding: 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.sec-pill .ico {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--blue-50); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.sec-pill h3, .sec-pill h4 { font-size: 14.5px; font-weight: 600; }
.sec-pill p { font-size: 13px; color: var(--slate-700); line-height: 1.5; }

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; align-items: start; }
.faq {
  border: 1px solid var(--border-soft); border-radius: 12px;
  background: white; padding: 18px 20px;
}
.faq summary {
  cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 600; color: var(--slate-900);
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--font-mono), monospace; font-size: 18px; color: var(--blue);
}
.faq[open] summary::after { content: "−"; }
.faq p { margin-top: 10px; font-size: 13.5px; color: var(--slate-700); line-height: 1.6; }
@media (max-width: 880px) { .sec-grid, .faq-grid { grid-template-columns: 1fr; } }

/* ============ SUPPORTED INTEGRATIONS (custom proto-grid) ============ */
.integ-divider {
  margin-top: 36px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 14px;
}
.integ-divider .lb {
  font-family: var(--font-mono), monospace; font-size: 10.5px;
  color: var(--slate-500); letter-spacing: 0.16em; text-transform: uppercase;
  flex-shrink: 0; white-space: nowrap;
}
.integ-divider .ln { flex: 1; height: 1px; background: var(--border-soft); }
.proto-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.proto-cell {
  padding: 16px 14px 16px 30px; border: 1px solid var(--border-soft);
  border-radius: 10px; background: white;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.proto-cell::before {
  content: ""; position: absolute; left: 14px; top: 22px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); opacity: 0.65;
}
.proto-cell .proto-name { font-family: var(--font-mono), monospace; font-size: 13px; color: var(--slate-900); font-weight: 600; letter-spacing: 0.02em; }
.proto-cell .proto-tag { font-size: 12px; color: var(--slate-600); }
.proto-cells.soon .proto-cell { background: var(--bg-2); border-style: dashed; }
.proto-cells.soon .proto-cell::before { background: var(--slate-300); opacity: 1; }
.proto-cells.soon .proto-cell .proto-name { color: var(--slate-700); }
.direct-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.direct-cell {
  padding: 18px 22px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,193,108,0.06), rgba(255,193,108,0.01));
  display: flex; align-items: flex-start; gap: 14px;
}
.direct-cell > div:not(.dot) { display: flex; flex-direction: column; min-width: 0; }
.direct-cell .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--honey); flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(255,193,108,0.18);
  margin-top: 6px;
}
.direct-cell .d-name { font-family: var(--font-mono), monospace; font-size: 13px; color: var(--slate-900); font-weight: 600; letter-spacing: 0.02em; }
.direct-cell .d-tag { font-size: 12px; color: var(--slate-600); margin-top: 3px; }
.integ-note { margin-top: 14px; font-size: 13.5px; color: var(--slate-600); line-height: 1.55; max-width: 760px; }
.integ-note a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.integ-foot { margin-top: 22px; text-align: center; font-family: var(--font-mono), monospace; font-size: 12px; color: var(--slate-500); }
.integ-foot a { color: var(--blue); letter-spacing: 0.04em; }
.integ-foot a:hover { text-decoration: underline; }
@media (max-width: 980px) { .proto-cells, .direct-cells { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .proto-cells, .direct-cells { grid-template-columns: 1fr; } }

/* ============ FIT-NOTE (single card with blue left border) ============ */
.fit-note {
  padding: 56px 0;
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.fit-note .fit-card {
  max-width: 880px; margin: 0 auto;
  background: white;
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--blue);
  border-radius: 0 12px 12px 0;
  padding: 28px 32px;
}
.fit-note .fit-card h3 { font-size: 18px; font-weight: 600; color: var(--slate-900); margin: 0 0 10px; }
.fit-note .fit-card > p { font-size: 14.5px; line-height: 1.6; color: var(--slate-700); margin: 0 0 18px; }
.fit-note .fit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fit-note .fit-list li {
  position: relative; padding-left: 22px;
  font-size: 14px; line-height: 1.55; color: var(--slate-800);
}
.fit-note .fit-list li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}

/* ============ WHITE-LABEL PAGE ============ */
.wl-hero { padding: 80px 0 64px; }
.wl-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.dark-band-aside { margin: 14px auto 0; max-width: 880px; text-align: center; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.78); }

/* Stacked dual-portal mock */
.wl-stack { position: relative; height: 520px; }
.wl-portal { position: absolute; width: 88%; background: white; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.wl-portal .top { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border-soft); }
.wl-portal .lights { display: flex; gap: 5px; }
.wl-portal .lights span { width: 8px; height: 8px; border-radius: 50%; background: #d8dde6; }
.wl-portal .brand-block { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono), monospace; font-size: 11px; color: var(--slate-900); font-weight: 500; }
.wl-portal .brand-block .sw { width: 18px; height: 18px; border-radius: 5px; }
.wl-portal .body { padding: 16px 18px; min-height: 220px; }
.wl-portal .body .head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.wl-portal .body .ttl { font-size: 13.5px; font-weight: 600; color: var(--slate-900); }
.wl-portal .body .pill { font-family: var(--font-mono), monospace; font-size: 10px; padding: 4px 8px; border-radius: 999px; }
.wl-portal .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.wl-portal .stat { border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px; }
.wl-portal .stat .l { font-family: var(--font-mono), monospace; font-size: 9.5px; color: var(--slate-500); letter-spacing: 0.06em; text-transform: uppercase; }
.wl-portal .stat .v { font-size: 16px; font-weight: 600; margin-top: 4px; }
.wl-portal.a { top: 0; left: 0; transform: rotate(-2deg); z-index: 2; }
.wl-portal.a .accent-bar { background: linear-gradient(90deg, #B9770E, #7A4D08); }
.wl-portal.a .brand-block .sw { background: linear-gradient(135deg, #B9770E, #7A4D08); }
.wl-portal.a .body .pill { color: #7A4D08; background: var(--honey-50); }
.wl-portal.a .stat .v { color: #7A4D08; }
.wl-portal.b { bottom: 0; right: 0; transform: rotate(2.5deg); z-index: 1; }
.wl-portal.b .accent-bar { background: linear-gradient(90deg, #168A4A, #0D5A30); }
.wl-portal.b .brand-block .sw { background: linear-gradient(135deg, #168A4A, #0D5A30); }
.wl-portal.b .body .pill { color: #0D5A30; background: rgba(22,138,74,0.08); }
.wl-portal.b .stat .v { color: #0D5A30; }
.wl-portal .accent-bar { height: 3px; background: linear-gradient(90deg, var(--blue), var(--blue-700)); }
.wl-portal .row { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono), monospace; font-size: 10.5px; color: var(--slate-700); padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border-soft); background: white; }
.wl-portal .rows { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.wl-portal .row .v { color: var(--slate-900); margin-left: auto; font-weight: 500; }
.wl-portal .row .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.wl-base-tag { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); background: white; border: 1px solid var(--border); padding: 5px 11px; border-radius: 999px; font-family: var(--font-mono), monospace; font-size: 10.5px; color: var(--slate-700); letter-spacing: 0.08em; box-shadow: var(--shadow-md); z-index: 5; }


/* 3-col ds-split extension */
.ds-split.ds-split-3 { grid-template-columns: 1fr 1fr 1fr; }
.ds-col ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.ds-col ul li { position: relative; padding-left: 18px; font-size: 14px; color: var(--slate-700); line-height: 1.5; }
.ds-col ul li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.ds-col.dark ul li { color: #C7D5F5; }
.ds-col.dark ul li::before { background: #93B4FF; }
.dark-band-quote { margin: 28px auto 0; max-width: 760px; text-align: center; font-size: 22px; font-weight: 500; color: white; line-height: 1.4; letter-spacing: -0.01em; }

/* Reskin spec */
.reskin { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.reskin .item { background: white; border: 1px solid var(--border-soft); border-radius: 14px; padding: 22px; }
.reskin .item h4, .reskin .item h3 { font-size: 14px; font-weight: 600; color: var(--slate-900); margin-bottom: 8px; }
.reskin .item p { font-size: 13px; color: var(--slate-500); line-height: 1.5; }
.reskin .swatches { display: flex; gap: 6px; margin-bottom: 12px; }
.reskin .sw { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.06); }
.reskin .typo { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--slate-900); margin-bottom: 12px; }
.reskin .logo-box { height: 36px; margin-bottom: 12px; border-radius: 8px; border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono), monospace; font-size: 11px; color: var(--slate-500); }
.reskin .domain { height: 36px; margin-bottom: 12px; border-radius: 8px; border: 1px solid var(--border-soft); display: flex; align-items: center; padding: 0 10px; gap: 6px; font-family: var(--font-mono), monospace; font-size: 11px; color: var(--slate-700); background: var(--bg-2); }
.reskin .domain b { color: var(--slate-900); font-weight: 500; }

/* Tenant table */
.tenants { border: 1px solid var(--border-soft); border-radius: 16px; overflow: hidden; background: white; margin-top: 32px; }
.tenants .tr { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 0.7fr; gap: 16px; padding: 14px 22px; align-items: center; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.tenants .tr:last-child { border-bottom: 0; }
.tenants .tr.head { background: var(--bg-2); font-family: var(--font-mono), monospace; font-size: 10.5px; color: var(--slate-500); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
.tenants .name { font-weight: 600; color: var(--slate-900); }
.tenants .sub { font-family: var(--font-mono), monospace; font-size: 10.5px; color: var(--slate-500); margin-top: 2px; letter-spacing: 0.04em; }
.tenants .qa { display: flex; align-items: center; gap: 6px; }
.tenants .qa .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.tenants .qa.warn .pip { background: var(--honey); }
.tenants .meta { font-family: var(--font-mono), monospace; font-size: 11.5px; color: var(--slate-700); }
.tenants .meta.good { color: var(--green); }
.tenants .meta.warn { color: var(--honey); }

/* Boundary (you / TRRT) */
.boundary { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 32px; }
.boundary .col { border: 1px solid var(--border-soft); border-radius: 16px; padding: 24px; background: white; }
.boundary .col h4, .boundary .col .b-eyebrow { display: block; font-size: 13px; font-family: var(--font-mono), monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.boundary .col h3 { font-size: 17px; margin-bottom: 14px; }
.boundary ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.boundary li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--slate-700); line-height: 1.5; }
.boundary li svg { flex-shrink: 0; margin-top: 4px; color: var(--blue); }
.boundary .col.platform h4 { color: var(--honey); }
.boundary .col.platform li svg { color: var(--honey); }

/* Timeline */
.timeline { position: relative; padding-left: 22px; margin-top: 32px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 1px; background: var(--border); }
.timeline .step { position: relative; padding: 18px 0 18px 28px; border-bottom: 1px solid var(--border-soft); }
.timeline .step:last-child { border-bottom: 0; }
.timeline .step::before { content: ""; position: absolute; left: -22px; top: 24px; width: 13px; height: 13px; border-radius: 50%; background: white; border: 2px solid var(--blue); }
.timeline .step .num { font-family: var(--font-mono), monospace; font-size: 10.5px; color: var(--blue); letter-spacing: 0.12em; }
.timeline .step h3 { font-size: 17px; margin-top: 6px; }
.timeline .step p { font-size: 14px; color: var(--slate-700); margin-top: 6px; line-height: 1.55; max-width: 720px; }

/* Commercial opportunity (wl-comm) */
.wl-comm { padding: 72px 0; background: white; position: relative; overflow: hidden; }
.wl-comm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.wl-comm-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.wl-comm-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--blue); }
.wl-comm h2 { font-size: 32px; line-height: 1.2; font-weight: 600; color: var(--slate-900); margin: 0 0 20px; letter-spacing: -0.012em; }
.wl-comm-copy { font-size: 15.5px; line-height: 1.65; color: var(--slate-700); margin: 0; }
.wl-comm-outcomes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.wl-comm-outcomes li { display: grid; grid-template-columns: 32px 1fr; gap: 16px; align-items: start; padding: 18px 20px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 12px; transition: border-color .2s, transform .2s; }
.wl-comm-outcomes li:hover { border-color: var(--blue); transform: translateX(2px); }
.wl-comm-outcomes .ico { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wl-comm-outcomes p { font-size: 14.5px; line-height: 1.5; color: var(--slate-800); margin: 4px 0 0; font-weight: 500; }
.wl-comm-bigline { margin-top: 36px; padding: 28px 32px; background: var(--slate-900); color: white; border-radius: 14px; font-size: 19px; font-weight: 500; line-height: 1.45; letter-spacing: -0.005em; position: relative; overflow: hidden; }
.wl-comm-bigline::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 90% 50%, rgba(59,130,246,0.15), transparent 60%); pointer-events: none; }
.wl-comm-bigline span { position: relative; color: #93c5fd; font-weight: 600; }

/* Service packages */
.wl-pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; margin-top: 32px; }
.wl-pkg { background: white; border: 1px solid var(--slate-200); border-radius: 4px; padding: 24px 22px; display: flex; flex-direction: column; }
.wl-pkg-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--slate-200); margin-bottom: 14px; }
.wl-pkg-step { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--slate-500); text-transform: uppercase; }
.wl-pkg h3 { font-size: 19px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.01em; margin: 0; }
.wl-pkg-lede { color: var(--slate-700); font-size: 14.5px; line-height: 1.55; margin: 0 0 16px; }
.wl-pkg-uc-label { font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.1em; color: var(--slate-500); text-transform: uppercase; margin-bottom: 8px; }
.wl-pkg-uc { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.wl-pkg-uc li { font-size: 13.5px; color: var(--slate-700); padding-left: 14px; position: relative; line-height: 1.45; }
.wl-pkg-uc li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 1px; background: var(--slate-400); }
.wl-pkg-price { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--slate-200); }
.wl-pkg-price-label { font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.1em; color: var(--slate-900); text-transform: uppercase; margin-bottom: 6px; }
.wl-pkg-price p { color: var(--slate-700); font-size: 13px; line-height: 1.5; margin: 0; }

.wl-billing { position: relative; margin-top: 28px; padding: 24px 26px; background: var(--slate-900); color: white; border-radius: 4px; display: flex; gap: 22px; align-items: flex-start; }
.wl-billing-flag { flex-shrink: 0; font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-900); background: white; padding: 5px 9px; border-radius: 2px; margin-top: 4px; }
.wl-billing-body { flex: 1; }
.wl-billing-body h3 { font-size: 19px; font-weight: 600; color: white; letter-spacing: -0.01em; line-height: 1.35; margin: 0 0 10px; }
.wl-billing-body p { color: rgba(255,255,255,0.82); font-size: 14px; line-height: 1.6; margin: 0; max-width: 880px; }

.wl-factors { margin-top: 22px; background: white; border: 1px solid var(--slate-200); border-radius: 4px; padding: 22px 26px; }
.wl-factors-label { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--slate-500); text-transform: uppercase; margin-bottom: 12px; }
.wl-factors-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; }
.wl-factors-list li { font-size: 13.5px; color: var(--slate-700); padding-left: 16px; position: relative; line-height: 1.55; padding-top: 4px; padding-bottom: 4px; }
.wl-factors-list li::before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 1px; background: var(--blue); }

.wl-pkg-actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }

.wl-mon { margin-top: 22px; background: white; border: 1px solid var(--slate-200); border-radius: 4px; padding: 24px 26px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.wl-mon-eyebrow { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--slate-500); text-transform: uppercase; display: block; margin-bottom: 8px; }
.wl-mon-head h3 { font-size: 18px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.01em; margin: 0 0 8px; }
.wl-mon-head p { color: var(--slate-700); font-size: 14px; line-height: 1.55; margin: 0; }
.wl-mon-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
.wl-mon-list li { font-size: 13.5px; color: var(--slate-800); padding: 8px 12px; background: var(--bg); border: 1px solid var(--slate-200); border-radius: 3px; font-family: var(--font-mono), monospace; letter-spacing: -0.005em; }

.wl-pkg-note { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--slate-200); max-width: 820px; }
.wl-pkg-note-lead { font-size: 16px; font-weight: 600; color: var(--slate-900); line-height: 1.45; margin: 0 0 8px; letter-spacing: -0.005em; }
.wl-pkg-note-sub { color: var(--slate-600); font-size: 13.5px; line-height: 1.55; margin: 0; }

@media (max-width: 980px) {
  .wl-hero-grid { grid-template-columns: 1fr; }
  .wl-stack { height: 480px; }
  .wl-portal { width: 92%; }
  .reskin { grid-template-columns: 1fr 1fr; }
  .tenants .tr { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tenants .tr.head { display: none; }
  .ds-split.ds-split-3, .boundary { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .wl-comm-grid { grid-template-columns: 1fr; gap: 32px; }
  .wl-comm h2 { font-size: 26px; }
  .wl-comm-bigline { font-size: 17px; padding: 22px 24px; }
}
@media (max-width: 900px) {
  .wl-pkg-grid { grid-template-columns: 1fr; }
  .wl-mon { grid-template-columns: 1fr; gap: 18px; }
  .wl-mon-list { grid-template-columns: 1fr; }
  .wl-billing { flex-direction: column; gap: 14px; }
  .wl-factors-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .reskin { grid-template-columns: 1fr; }
}

/* ============ OPERATORS PAGE (betreiber) ============ */
.ops-hero { padding: 80px 0 64px; }
.ops-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }

.ops-mock { background: white; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; }
.ops-mock .top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); background: linear-gradient(180deg,#fbfcfe,#f4f7fc); }
.ops-mock .top .lights { display: flex; gap: 5px; }
.ops-mock .top .lights span { width: 9px; height: 9px; border-radius: 50%; background: #d8dde6; }
.ops-mock .top .url { flex: 1; height: 24px; border: 1px solid var(--border-soft); border-radius: 6px; background: white; padding: 0 10px; display: flex; align-items: center; gap: 6px; font-family: var(--font-mono), monospace; font-size: 11px; color: var(--slate-500); }
.ops-mock .top .url b { color: var(--slate-900); font-weight: 500; }
.ops-mock .top .acct { font-family: var(--font-mono), monospace; font-size: 10.5px; color: var(--slate-700); background: white; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border-soft); }
.ops-mock .body { display: grid; grid-template-columns: 170px minmax(0, 1fr); min-height: 460px; }
.ops-mock .side { border-right: 1px solid var(--border-soft); padding: 16px 12px; background: #fbfcfe; min-width: 0; }
.ops-mock .side .lab { font-family: var(--font-mono), monospace; font-size: 9.5px; color: var(--slate-500); letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 8px 6px; }
.ops-mock .side .item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; font-size: 12.5px; color: var(--slate-700); border-radius: 6px; }
.ops-mock .side .item.active { background: var(--blue-50); color: var(--blue); font-weight: 500; }
.ops-mock .side .item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--slate-300); }
.ops-mock .side .item.active .dot { background: var(--blue); }
.ops-mock .main { padding: 18px 22px; min-width: 0; }
.ops-mock .main h4 { font-size: 14px; }
.ops-mock .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.ops-mock .stat { border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px; background: white; min-width: 0; }
.ops-mock .stat .l { font-family: var(--font-mono), monospace; font-size: 9.5px; color: var(--slate-500); letter-spacing: 0.04em; text-transform: uppercase; white-space: normal; }
.ops-mock .stat .v { font-size: 18px; font-weight: 600; margin-top: 4px; letter-spacing: -0.015em; }
.ops-mock .stat .d { font-size: 10.5px; font-family: var(--font-mono), monospace; margin-top: 4px; color: var(--green); }
.ops-mock .stat.warn .d { color: var(--honey); }
.ops-mock .grid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-top: 14px; }
.ops-mock .panel { border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px; background: white; min-width: 0; }
.ops-mock .panel .head { display: flex; align-items: center; justify-content: space-between; }
.ops-mock .panel .head .ttl { font-size: 12.5px; font-weight: 600; color: var(--slate-900); }
.ops-mock .panel .head .tag { font-family: var(--font-mono), monospace; font-size: 10px; color: var(--slate-500); }
.ops-chart { height: 100px; margin-top: 10px; position: relative; }
.ops-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ops-list .row { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono), monospace; font-size: 10.5px; color: var(--slate-700); padding: 5px 8px; border-radius: 6px; background: var(--bg-2); }
.ops-list .row .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.ops-list .row.b .pip { background: var(--blue); }
.ops-list .row.h .pip { background: var(--honey); }
.ops-list .row .v { color: var(--slate-900); font-weight: 500; margin-left: auto; }

/* Kurz gesagt */
.kg-head { margin-bottom: 36px; max-width: 880px; }
.kg-head .eyebrow { display: block; margin-bottom: 14px; }
.kg-head h2 { margin: 0; }
.kg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kg-grid.kg-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.kg-grid.kg-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.kg-grid.kg-grid-cols-1 { grid-template-columns: 1fr; }
.kg-col { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 26px 26px 28px; }
.kg-num { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--blue); margin-bottom: 14px; }
.kg-col h3 { margin: 0 0 10px; font-size: 18px; font-weight: 600; color: var(--slate-900); line-height: 1.35; }
.kg-col p { margin: 0; font-size: 14.5px; color: var(--slate-700); line-height: 1.6; }
.kg-note { margin: 24px 0 0; padding: 14px 18px; border-left: 3px solid var(--blue); background: white; border-radius: 0 8px 8px 0; font-size: 14px; color: var(--slate-700); line-height: 1.55; }

/* Im Betriebsalltag */
.alltag-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 28px; }
.alltag-card { background: white; border: 1px solid var(--border-soft); border-radius: 14px; padding: 24px 26px; position: relative; transition: border-color .2s, box-shadow .2s, transform .2s; }
.alltag-card:hover { border-color: var(--blue); box-shadow: 0 6px 20px rgba(15,23,42,0.05); transform: translateY(-1px); }
.alltag-card .num { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--blue); margin-bottom: 12px; display: block; }
.alltag-card h3 { font-size: 17px; font-weight: 600; color: var(--slate-900); line-height: 1.3; margin: 0 0 10px; letter-spacing: -0.005em; }
.alltag-card p { font-size: 14.5px; line-height: 1.6; color: var(--slate-700); margin: 0; }

/* What-you-get list + locations */
.ops-list-block { background: white; border: 1px solid var(--border-soft); border-radius: 22px; padding: 36px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; margin-top: 32px; }
.ops-list-block ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ops-list-block li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--slate-700); }
.ops-list-block li b { color: var(--slate-900); font-weight: 600; }
.ops-list-block li .check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-50); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.ops-locs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.loc-card { border: 1px solid var(--border-soft); border-radius: 14px; background: white; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.loc-card .name { font-size: 14px; font-weight: 600; }
.loc-card .meta { font-family: var(--font-mono), monospace; font-size: 10.5px; color: var(--slate-500); }
.loc-card .bar { height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.loc-card .bar > i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.loc-card.warn .bar > i { background: var(--honey); }
.loc-card .meta.good { color: var(--green); }
.loc-card .meta.warn { color: var(--honey); }

/* Workflow steps */
.ops-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; margin-top: 32px; }
.ops-flow .step { background: white; border: 1px solid var(--border-soft); border-radius: 16px; padding: 22px; position: relative; }
.ops-flow .step .num { font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.12em; color: var(--blue); }
.ops-flow .step h3 { font-size: 16px; margin-top: 8px; }
.ops-flow .step p { font-size: 13.5px; margin-top: 6px; line-height: 1.5; color: var(--slate-700); }
.ops-flow .step .ico { width: 36px; height: 36px; border-radius: 9px; background: var(--blue-50); color: var(--blue); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }

/* Generic N-column cards (data ownership, why-white-label, etc.) */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 32px; }
@media (max-width: 1100px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .grid-4, .grid-5 { grid-template-columns: 1fr; } }

/* Bullet list inside icon-cards (security-style mono bullets) */
.icon-cards .card-bullets { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.icon-cards .card-bullets li { position: relative; padding-left: 14px; font-size: 13px; color: var(--slate-700); line-height: 1.5; font-family: var(--font-mono), monospace; letter-spacing: 0.01em; }
.icon-cards .card-bullets li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 1px; background: var(--blue); }

/* decision-fit optional body paragraph above items list */
.dec-card .dec-body { font-size: 13.5px; color: var(--slate-700); margin: 0 0 12px; line-height: 1.5; }

/* dashboard-studio optional centred CTA below the split */
.ds-cta-row { margin-top: 22px; display: flex; justify-content: center; }
.card { background: white; border: 1px solid var(--border-soft); border-radius: 14px; padding: 24px 26px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border); }
.card .num { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--blue); margin-bottom: 12px; display: block; }
.card h3 { font-size: 17px; font-weight: 600; color: var(--slate-900); line-height: 1.3; margin: 0 0 10px; letter-spacing: -0.005em; }
.card p { font-size: 14.5px; line-height: 1.6; color: var(--slate-700); margin: 0; }
.card .ico-wrap { width: 40px; height: 40px; border-radius: 10px; background: var(--blue-50); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }

/* "Extra card" inside three-views (Mustererkennung) */
.extra-card { margin-top: 32px; max-width: 920px; margin-left: auto; margin-right: auto; background: white; border: 1px solid var(--border-soft); border-radius: 14px; padding: 28px 32px; box-shadow: var(--shadow-sm); }
.extra-card .num { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--blue); text-transform: uppercase; display: block; margin-bottom: 8px; }
.extra-card h3 { font-size: 18px; font-weight: 600; color: var(--slate-900); line-height: 1.35; margin: 0 0 10px; }
.extra-card p { font-size: 15px; line-height: 1.6; color: var(--slate-700); margin: 0; }
.extra-card-bullets { margin-top: 14px; font-size: 14.5px; line-height: 1.7; color: var(--slate-700); padding-left: 20px; }
.extra-card-note { margin-top: 14px !important; font-size: 13.5px !important; color: var(--slate-600) !important; line-height: 1.55 !important; }

/* Operating model */
.op-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.op-card { position: relative; background: white; border: 1px solid var(--slate-200); border-radius: 6px; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.op-card-recommended { border-color: var(--slate-900); box-shadow: 0 1px 0 var(--slate-900); }
.op-card-recommended::before { content: attr(data-flag); position: absolute; top: -10px; left: 22px; background: var(--slate-900); color: white; font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; }
.op-step { font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.1em; color: var(--slate-500); text-transform: uppercase; }
.op-tag { font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.08em; color: white; text-transform: uppercase; background: var(--slate-900); padding: 3px 7px; border-radius: 3px; align-self: flex-start; }
.op-tag-quiet { background: transparent; color: var(--slate-500); padding: 3px 0; }
.op-card h3 { font-size: 18px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.01em; margin: 4px 0 0; }
.op-card p { color: var(--slate-700); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* Entry scenarios — extended structure (overlays existing) */
.entry-card-stage { display: flex; flex-direction: column; }
.entry-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--slate-200); margin-bottom: 14px; }
.entry-step { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--slate-500); text-transform: uppercase; }
.entry-card-stage .entry-head h3 { font-size: 19px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.01em; margin: 0; }
.entry-lede { color: var(--slate-700); font-size: 14.5px; line-height: 1.55; margin: 0 0 16px; }
.entry-uc-label { font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.1em; color: var(--slate-500); text-transform: uppercase; margin-bottom: 8px; }
.entry-uc { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.entry-uc li { font-size: 13.5px; color: var(--slate-700); padding-left: 14px; position: relative; line-height: 1.45; }
.entry-uc li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 1px; background: var(--slate-400); }
.entry-price { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--slate-200); }
.entry-price-label { font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.1em; color: var(--slate-500); text-transform: uppercase; margin-bottom: 6px; }
.entry-price p { color: var(--slate-700); font-size: 13.5px; line-height: 1.5; margin: 0; }
.entry-card-stage.entry-card-recommended { border-color: var(--slate-900); box-shadow: 0 1px 0 var(--slate-900); position: relative; }
.entry-card-stage.entry-card-recommended::before { content: attr(data-flag); position: absolute; top: -10px; left: 22px; background: var(--slate-900); color: white; font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; }
.entry-mode { position: relative; margin-top: 32px; padding: 24px 26px; background: var(--slate-900); color: white; border-radius: 4px; display: flex; gap: 22px; align-items: flex-start; }
.entry-mode-flag { flex-shrink: 0; font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-900); background: white; padding: 5px 9px; border-radius: 2px; margin-top: 4px; }
.entry-mode-body { flex: 1; }
.entry-mode h3 { font-size: 19px; font-weight: 600; color: white; letter-spacing: -0.01em; margin: 0 0 8px; }
.entry-mode p { color: rgba(255,255,255,0.82); font-size: 14px; line-height: 1.6; margin: 0; max-width: 880px; }
.entry-actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Stages (bv-grid) */
.bv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }
.bv-card { background: white; border: 1px solid var(--slate-200); border-radius: 6px; padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.bv-step { font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.1em; color: var(--slate-500); text-transform: uppercase; }
.bv-card h3 { font-size: 17px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.01em; margin: 2px 0 0; }
.bv-card p { color: var(--slate-700); font-size: 14px; line-height: 1.55; margin: 0; }

/* Decision confidence */
.dec-block { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 32px; }
.dec-card { background: white; border: 1px solid var(--slate-200); border-radius: 12px; padding: 26px 28px; }
.dec-card.fit { border-left: 3px solid var(--blue); }
.dec-card.notfit { border-left: 3px solid var(--slate-400); }
.dec-tag { font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.1em; color: var(--slate-500); text-transform: uppercase; }
.dec-card h3, .dec-card h4 { font-size: 17px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.01em; margin: 8px 0 14px; line-height: 1.35; }
.dec-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.dec-card li { font-size: 14px; color: var(--slate-700); line-height: 1.5; padding-left: 16px; position: relative; }
.dec-card.fit li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.dec-card.notfit li::before { content: "−"; position: absolute; left: 0; top: -1px; color: var(--slate-400); font-family: var(--font-mono), monospace; }

/* Plain Q/A grid */
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; margin-top: 32px; }
.qa-grid .q { font-weight: 600; font-size: 15px; color: var(--slate-900); }
.qa-grid .a { font-size: 14px; color: var(--slate-700); margin-top: 6px; line-height: 1.55; }

/* Bullet list inside ds-col (extends dashboard-studio) */
.ds-col ul.ds-bullets { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.ds-col ul.ds-bullets li { position: relative; padding-left: 18px; font-size: 14px; color: var(--slate-700); line-height: 1.5; }
.ds-col ul.ds-bullets li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.ds-col.dark ul.ds-bullets li { color: #C7D5F5; }
.ds-col.dark ul.ds-bullets li::before { background: #93B4FF; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1000px) { .bv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) {
  .nav-links { display: none; }
  .hero-split,
  .home-hero-grid, .pl-hero-grid, .mb-hero-grid, .ops-hero-grid,
  .wl-hero-grid, .ex-hero-grid, .oem-hero-grid, .kt-hero-grid { grid-template-columns: 1fr; }
  .aud-grid, .trustbar-grid, .eu-markets,
  .feature-grid, .feature-grid.cols-4, .feature-grid.cols-2,
  .steps, .steps.cols-4,
  .grid-3, .grid-4, .grid-6, .grid-2,
  .ds-split, .ds-split-3,
  .comparison, .fit-grid, .contact-grid, .proto-grid, .ds-examples,
  .entry-grid, .qa-grid, .ops-flow,
  .sec-grid, .faq-grid, .dec-block, .dv-grid,
  .op-grid, .bv-grid, .kg-grid, .alltag-grid,
  .wl-pkg-grid, .ba-grid, .boundary,
  .reskin, .ad-grid, .ispec .row,
  .specs-grid, .health,
  .pillars, .pillars-5,
  .paths,
  .ew-offline-buckets,
  .ops-mock .body, .ops-mock .grid2,
  .dm-grid, .dq-block, .stats-strip,
  .wl-comm-grid, .ops-list-block,
  .mb-flow {
    grid-template-columns: 1fr;
  }
  .ops-mock .stats { grid-template-columns: 1fr 1fr; }
  .ops-mock .side { border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .ops-list-block { padding: 28px; }
  section.block, section.dark-band, .cta-section, .why-now { padding: 56px 0; }
  .cta-card { padding: 36px 28px; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .plat-strip { grid-template-columns: 1fr; }
  .plat-pill { padding-left: 0; border-left: 0; border-top: 1px solid var(--border-soft); padding-top: 18px; }
}
@media (max-width: 720px) {
  .entry-mode { flex-direction: column; gap: 14px; }
  .ops-mock .stats { grid-template-columns: 1fr; }
  .ops-locs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav { gap: 14px; padding: 10px 20px; }
  .nav-actions { margin-left: auto; }
  .foot-top { grid-template-columns: 1fr; }
  .container { padding: 0 20px; }
  h1 { font-size: clamp(28px, 8vw, 38px); }
  .hero-actions, .cta-actions, .mode-cta, .pl-mode-cta, .mb-note-cta, .pl-bv-cta-actions, .entry-actions, .wl-pkg-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; justify-content: center; }
}


/* ============================================================
   DESIGN PAGE STYLES
   Merged from /design/*.html inline <style> blocks.
   Selectors are page-scoped (.pl-*, .mb-*, .ex-*, .ops-*, .oem-*, .kt-*).
   ============================================================ */
/* ============================================================
   plattform.html inline CSS
   ============================================================ */
  /* /plattform, technical platform page */
  .pl-hero { padding: 80px 0 64px; }
  .pl-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }

  /* Layered architecture diagram */
  .arch {
    background: white; border: 1px solid var(--border);
    border-radius: 22px; padding: 28px;
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; gap: 12px;
  }
  .arch-layer {
    border: 1px solid var(--border-soft); border-radius: 14px;
    padding: 16px; background: linear-gradient(180deg,#fbfcfe,#f4f7fc);
    position: relative;
  }
  .arch-layer .lab {
    font-family:var(--font-mono), monospace; font-size: 10px;
    letter-spacing: 0.12em; color: var(--blue); text-transform: uppercase;
  }
  .arch-layer .ttl { font-size: 14px; font-weight: 600; color: var(--slate-900); margin-top: 4px; }
  .arch-layer .blocks {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px;
  }
  .arch-layer .block {
    background: white; border: 1px solid var(--border-soft);
    border-radius: 8px; padding: 8px 10px;
    font-family:var(--font-mono), monospace; font-size: 10.5px;
    color: var(--slate-700); display: flex; align-items: center; gap: 6px;
  }
  .arch-layer .block .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
  .arch-layer.edge { background: var(--navy); border-color: var(--navy); }
  .arch-layer.edge .lab { color: #93B4FF; }
  .arch-layer.edge .ttl { color: white; }
  .arch-layer.edge .block { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #C7D5F5; }
  .arch-layer.edge .block .pip { background: var(--honey); }
  .arch-conn {
    text-align: center;
    font-family:var(--font-mono), monospace; font-size: 10px;
    color: var(--slate-500); letter-spacing: 0.1em;
    padding: 4px 0;
  }
  .arch-conn::before { content: "↓"; margin-right: 6px; color: var(--slate-300); }

  /* Pillar grid */
  .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .pillars-5 { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  @media (max-width: 1180px) {
    .pillars-5 { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  }
  .pillar {
    background: white; border: 1px solid var(--border-soft);
    border-radius: 18px; padding: 28px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .pillar:hover { transform: translateY(-2px); border-color: var(--border); box-shadow: var(--shadow-md); }
  .pillar .ico {
    width: 42px; height: 42px; border-radius: 11px;
    background: var(--blue-50); color: var(--blue);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
  }
  .pillar h3 { font-size: 17px; }
  .pillar p { font-size: 14px; color: var(--slate-700); margin-top: 8px; line-height: 1.55; }

  /* Data model section */
  .dm-grid {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: center;
  }
  .dm-tree {
    background: white; border: 1px solid var(--border-soft);
    border-radius: 18px; padding: 26px;
    font-family: var(--font-mono), monospace;
    box-shadow: var(--shadow-sm);
  }
  .dm-tree .node {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0;
    font-size: 12.5px; color: var(--slate-700);
  }
  .dm-tree .node b { color: var(--slate-900); font-weight: 600; }
  .dm-tree .node .id { margin-left: auto; color: var(--slate-500); font-size: 11px; }
  .dm-tree .indent-1 { padding-left: 20px; }
  .dm-tree .indent-2 { padding-left: 40px; }
  .dm-tree .indent-3 { padding-left: 60px; }
  .dm-tree .ico {
    width: 18px; height: 18px; border-radius: 4px;
    background: var(--blue-50); color: var(--blue);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .dm-tree .ico.h { background: var(--honey-50); color: var(--honey); }
  .dm-tree .ico.s { background: var(--bg-2); color: var(--slate-500); }
  .dm-tree .line { border-top: 1px dashed var(--border); margin: 8px 0; }

  /* Security section */
  .sec-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px;
  }
  .sec-card {
    background: white; border: 1px solid var(--border-soft);
    border-radius: 16px; padding: 24px;
  }
  .sec-card .ico {
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--blue-50); color: var(--blue);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
  }
  .sec-card h3 { font-size: 16px; }
  .sec-card p { font-size: 13.5px; color: var(--slate-700); margin-top: 8px; line-height: 1.5; }
  .sec-card ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; }
  .sec-card li {
    font-family:var(--font-mono), monospace; font-size: 11px;
    color: var(--slate-700); display: flex; gap: 6px; align-items: center;
  }
  .sec-card li::before { content:""; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); }

  /* Data quality visual */
  .dq-block {
    background: white; border: 1px solid var(--border-soft);
    border-radius: 22px; padding: 36px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center;
  }
  .dq-vis {
    background: var(--bg-2); border: 1px solid var(--border-soft);
    border-radius: 14px; padding: 18px;
  }
  .dq-vis .head {
    display: flex; align-items: center; justify-content: space-between;
    font-family:var(--font-mono), monospace; font-size: 11px; color: var(--slate-500);
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .dq-vis .score {
    margin-top: 14px;
    display: flex; align-items: baseline; gap: 8px;
  }
  .dq-vis .score .v { font-size: 36px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.025em; }
  .dq-vis .score .u { font-size: 18px; color: var(--slate-500); }
  .dq-vis .score .tag { margin-left: auto; font-family:var(--font-mono), monospace; font-size: 10.5px; color: var(--green); background: rgba(22,138,74,0.08); padding: 4px 8px; border-radius: 4px; }
  .dq-vis .bars { margin-top: 18px; display: flex; gap: 3px; height: 56px; align-items: end; }
  .dq-vis .bar { flex: 1; background: var(--blue); border-radius: 2px 2px 0 0; opacity: 0.85; }
  .dq-vis .bar.dim { background: var(--honey); opacity: 0.65; }
  .dq-vis .lst { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
  .dq-vis .row {
    display: flex; gap: 8px; align-items: center;
    font-family: var(--font-mono), monospace; font-size: 11px;
    background: white; border: 1px solid var(--border-soft); border-radius: 6px;
    padding: 6px 10px;
    color: var(--slate-700);
  }
  .dq-vis .row .v { margin-left: auto; color: var(--slate-900); font-weight: 500; }
  .dq-vis .row .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
  .dq-vis .row.h .pip { background: var(--honey); }

  /* Stats strip */
  .stats-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    border: 1px solid var(--border-soft); border-radius: 16px;
    background: white; overflow: hidden;
  }
  .stats-strip .item {
    padding: 24px 26px; border-right: 1px solid var(--border-soft);
  }
  .stats-strip .item:last-child { border-right: 0; }
  .stats-strip .lab {
    font-family: var(--font-mono), monospace; font-size: 10.5px;
    letter-spacing: 0.1em; color: var(--blue); text-transform: uppercase;
  }
  .stats-strip h3 { font-size: 28px; margin-top: 6px; letter-spacing: -0.022em; font-weight: 600; }
  .stats-strip .sub { font-size: 13px; color: var(--slate-500); margin-top: 4px; }

  @media (max-width: 980px) {
    .pl-hero-grid { grid-template-columns: 1fr; }
    .pillars, .pillars-5, .sec-grid { grid-template-columns: 1fr; }
    .arch-layer .blocks { grid-template-columns: 1fr; }
    .dm-grid, .dq-block { grid-template-columns: 1fr; padding: 28px; }
    .stats-strip { grid-template-columns: 1fr 1fr; }
    .stats-strip .item { border-right: 0; border-bottom: 1px solid var(--border-soft); }
  }
  .pl-mode-callout { background: #fff; border: 1px solid var(--slate-200); border-left: 3px solid var(--slate-900); border-radius: 4px; padding: 28px 30px; }
  .pl-mode-callout-head { margin-bottom: 14px; }
  .pl-mode-callout-eyebrow { display: block; font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--slate-500); text-transform: uppercase; margin-bottom: 8px; }
  .pl-mode-callout h2 { font-size: 22px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.01em; margin: 0; line-height: 1.3; }
  .pl-mode-callout-copy { color: var(--slate-700); font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; max-width: 880px; }
  .pl-mode-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
  .pl-mode-chip { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--slate-700); background: var(--slate-100); padding: 6px 10px; border-radius: 3px; }
  .pl-mode-chip-strong { background: var(--slate-900); color: #fff; }
  .pl-mode-cta { display: flex; flex-wrap: wrap; gap: 12px; }
  .pl-bv-questions { margin-top: 28px; padding: 18px 22px; background: #fff; border: 1px solid var(--slate-200); border-radius: 4px; }
  .pl-bv-questions-title { display: block; font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--slate-700); text-transform: uppercase; margin-bottom: 10px; }
  .pl-bv-questions ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .pl-bv-questions li { font-size: 14.5px; line-height: 1.5; color: var(--slate-800); padding-left: 18px; position: relative; }
  .pl-bv-questions li::before { content: '→'; position: absolute; left: 0; top: 0; color: var(--slate-500); font-family: var(--font-mono), monospace; font-size: 13px; }

  .pl-bv-tldr {
    margin-top: 14px;
    padding: 22px 26px;
    background: var(--slate-900, #0a0f1c);
    color: #fff;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }
  .pl-bv-tldr::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
  }
  .pl-bv-tldr-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono), monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue-300, #93c5fd);
    margin-bottom: 14px;
  }
  .pl-bv-tldr-label::before {
    content: "";
    width: 24px; height: 1px;
    background: var(--blue-300, #93c5fd);
  }
  .pl-bv-tldr-list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px 28px;
  }
  .pl-bv-tldr-list li {
    position: relative;
    padding-left: 18px;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
  }
  .pl-bv-tldr-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue-300, #93c5fd);
  }
  .pl-bv-tldr-list b {
    color: #fff;
    font-weight: 600;
  }

  .pl-bv-zero { background: #0a0f1c; color: #fff; padding: 28px 32px; border-radius: 4px; margin-bottom: 18px; }
  .pl-bv-zero-mono { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.14em; color: rgba(255,255,255,0.5); text-transform: uppercase; }
  .pl-bv-zero h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: #fff; margin: 8px 0 10px; }
  .pl-bv-zero > p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.85); margin: 0 0 18px; max-width: 880px; }
  .pl-bv-zero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
  .pl-bv-zero-grid p { color: rgba(255,255,255,0.92); font-size: 14px; line-height: 1.55; margin: 0; }
  .pl-bv-zero-grid .pl-bv-mini { color: rgba(255,255,255,0.55); border-bottom-color: rgba(255,255,255,0.15); }
  .pl-bv-zero-grid .pl-bv-mini-v { color: #fff; border-bottom-color: #fff; }

  .pl-bv-mini-pb { margin-top: 14px !important; }
  .pl-bv-sub { font-size: 13px; line-height: 1.45; color: var(--slate-600); margin: 4px 0 0; font-style: italic; }
  .pl-bv-roles { list-style: none; padding: 14px 0 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; border-top: 1px dashed var(--slate-200); }
  .pl-bv-roles li { font-size: 13.5px; color: var(--slate-700); line-height: 1.5; }
  .pl-bv-roles li span { font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.08em; color: var(--slate-900); text-transform: uppercase; padding: 2px 6px; background: var(--slate-100); border: 1px solid var(--slate-200); border-radius: 2px; margin-right: 6px; }

  .pl-bv-cross { margin-top: 32px; background: #fff; border: 1px solid var(--slate-200); border-radius: 4px; padding: 28px 32px; }
  .pl-bv-mono { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--slate-500); text-transform: uppercase; }
  .pl-bv-cross-head h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--slate-900); margin: 8px 0 14px; line-height: 1.25; }
  .pl-bv-cross-head p { font-size: 14px; line-height: 1.55; color: var(--slate-700); margin: 0 0 6px; max-width: 880px; }
  .pl-bv-cross-head p strong { color: var(--slate-900); font-weight: 600; }
  .pl-bv-cross-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--slate-200); }
  .pl-bv-cross-tier { padding: 14px 16px; border: 1px solid var(--slate-200); border-radius: 3px; background: var(--bg); }
  .pl-bv-tier-label { display: block; font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-700); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--slate-200); }
  .pl-bv-cross-tier ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
  .pl-bv-cross-tier li { font-size: 13px; color: var(--slate-800); line-height: 1.45; }
  .pl-bv-tier-now { border-color: var(--slate-900); background: #fff; }
  .pl-bv-tier-now .pl-bv-tier-label { color: var(--slate-900); border-bottom-color: var(--slate-900); }

  .pl-bv-example-headline { font-size: 18px !important; font-weight: 600; color: #fff !important; margin: 0 0 10px !important; letter-spacing: -0.01em; }

  .pl-bv-cta { margin-top: 32px; padding: 28px 32px; background: var(--slate-100); border: 1px solid var(--slate-200); border-radius: 4px; display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 24px; align-items: center; }
  .pl-bv-cta h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--slate-900); margin: 8px 0 8px; line-height: 1.25; }
  .pl-bv-cta p { font-size: 14.5px; line-height: 1.55; color: var(--slate-700); margin: 0; max-width: 720px; }
  .pl-bv-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

  @media (max-width: 1080px) {
    .pl-bv-cross-grid { grid-template-columns: repeat(2, 1fr); }
    .pl-bv-zero-grid { grid-template-columns: 1fr; }
    .pl-bv-cta { grid-template-columns: 1fr; }
  }
  .pl-bv-section { padding: 96px 0; background: linear-gradient(180deg, #fff 0%, var(--bg) 100%); border-top: 1px solid var(--slate-200); border-bottom: 1px solid var(--slate-200); position: relative; }
  .pl-bv-section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--slate-200) 1px, transparent 1px); background-size: 100% 96px; opacity: 0.35; pointer-events: none; }
  .pl-bv-section > .container { position: relative; }

  .pl-bv-head { max-width: none; margin-bottom: 56px; }
  .pl-bv-head-meta { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--slate-300); margin-bottom: 28px; }
  .pl-bv-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--slate-700); text-transform: uppercase; }
  .pl-bv-eyebrow-dot { width: 6px; height: 6px; background: var(--slate-900); border-radius: 50%; }
  .pl-bv-head-count { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--slate-500); text-transform: uppercase; }
  .pl-bv-h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--slate-900); margin: 0 0 18px; text-wrap: balance; }
  .pl-bv-h2-accent { color: var(--slate-500); }
  .pl-bv-intro { font-size: 16px; line-height: 1.6; color: var(--slate-700); margin: 0 0 22px; max-width: 720px; }
  .pl-bv-legend { display: flex; gap: 22px; flex-wrap: wrap; }
  .pl-bv-legend-item { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--slate-600); }
  .pl-bv-chip { font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.08em; padding: 4px 9px; border-radius: 2px; text-transform: uppercase; }
  .pl-bv-chip-tech { background: var(--slate-100); color: var(--slate-700); border: 1px solid var(--slate-300); }
  .pl-bv-chip-value { background: var(--slate-900); color: #fff; }

  .pl-bv-list { list-style: none; padding: 0; margin: 0; background: #fff; border: 1px solid var(--slate-200); border-radius: 4px; box-shadow: 0 1px 0 rgba(15,23,42,0.04); overflow: hidden; }
  .pl-bv-row { display: grid; grid-template-columns: 64px minmax(190px, 1fr) minmax(0, 1.05fr) minmax(0, 1.4fr); gap: 28px; padding: 28px 28px 28px 0; border-top: 1px solid var(--slate-200); align-items: start; position: relative; transition: background 0.15s ease; }
  .pl-bv-row:first-child { border-top: 0; }
  .pl-bv-row:hover { background: var(--bg); }

  .pl-bv-index { display: flex; flex-direction: column; align-items: center; padding-top: 4px; align-self: stretch; }
  .pl-bv-index-num { font-family: var(--font-mono), monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--slate-400); writing-mode: vertical-rl; transform: rotate(180deg); padding: 12px 0; }
  .pl-bv-index-line { width: 1px; flex: 1; background: var(--slate-200); margin-top: 6px; }
  .pl-bv-row-last .pl-bv-index-line { display: none; }

  .pl-bv-name { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
  .pl-bv-name h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--slate-900); margin: 0; line-height: 1.2; }
  .pl-bv-tag { display: inline-flex; align-self: flex-start; font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--slate-500); padding: 3px 7px; border: 1px solid var(--slate-200); border-radius: 2px; text-transform: uppercase; background: var(--bg); }

  .pl-bv-mini { display: block; font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--slate-200); }
  .pl-bv-mini-v { color: var(--slate-900); border-bottom-color: var(--slate-900); font-weight: 600; }
  .pl-bv-tech p { font-size: 14px; line-height: 1.55; color: var(--slate-600); margin: 0; font-feature-settings: "ss01"; }
  .pl-bv-value p { font-size: 15.5px; line-height: 1.55; color: var(--slate-900); margin: 0; font-weight: 450; text-wrap: pretty; }

  .pl-bv-example { display: grid; grid-template-columns: 240px 1fr; margin-top: 32px; background: var(--slate-900); color: #fff; border-radius: 4px; overflow: hidden; }
  .pl-bv-example-rail { padding: 28px 24px; background: #0a0f1c; border-right: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 12px; justify-content: space-between; }
  .pl-bv-example-mono { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.14em; color: rgba(255,255,255,0.5); text-transform: uppercase; }
  .pl-bv-example-flow { font-family: var(--font-mono), monospace; font-size: 11.5px; line-height: 1.7; color: rgba(255,255,255,0.85); letter-spacing: 0.02em; }
  .pl-bv-example-body { padding: 28px 32px; }
  .pl-bv-example-body p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.92); margin: 0; max-width: 760px; }
  .pl-bv-example-body p strong { color: #fff; font-weight: 600; }
  .pl-bv-example-caption { margin-top: 14px !important; font-size: 13px !important; color: rgba(255,255,255,0.55) !important; font-style: italic; }

  @media (max-width: 1080px) {
    .pl-bv-row { grid-template-columns: 48px 1fr; gap: 18px; padding: 24px 22px 24px 0; }
    .pl-bv-name, .pl-bv-tech, .pl-bv-value { grid-column: 2; }
    .pl-bv-tech { margin-top: 6px; }
    .pl-bv-value { margin-top: 8px; }
    .pl-bv-index-num { writing-mode: horizontal-tb; transform: none; padding: 0; }
    .pl-bv-index-line { display: none; }
    .pl-bv-example { grid-template-columns: 1fr; }
    .pl-bv-example-rail { flex-direction: row; align-items: center; gap: 16px; padding: 16px 22px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  }

/* ============================================================
   monitoring-box.html inline CSS
   ============================================================ */
  /* /monitoring-box */
  .mb-hero { padding: 80px 0 64px; }
  .mb-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

  /* Device illustration */
  .mb-device {
    background: linear-gradient(180deg, #fbfcfe 0%, #eff3fa 100%);
    border: 1px solid var(--border); border-radius: 22px;
    padding: 38px 32px; box-shadow: var(--shadow-lg);
    position: relative; overflow: hidden;
  }
  .mb-device::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      linear-gradient(to right, rgba(15,23,42,0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15,23,42,0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(420px 320px at 50% 50%, black, transparent 80%);
    -webkit-mask-image: radial-gradient(420px 320px at 50% 50%, black, transparent 80%);
  }
  .mb-device > * { position: relative; z-index: 1; }

  .mb-box {
    background: linear-gradient(180deg, #131c2c 0%, #06111F 100%);
    border-radius: 14px;
    padding: 22px 24px;
    color: white;
    border: 1px solid #1f2c44;
    box-shadow: 0 24px 60px -28px rgba(6,17,31,0.6);
    position: relative;
  }
  .mb-box .top {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .mb-box .nm {
    font-family:var(--font-mono), monospace; font-size: 11.5px;
    letter-spacing: 0.12em; color: white; font-weight: 500;
  }
  .mb-box .nm .ds { display: block; font-size: 9.5px; color: #93B4FF; letter-spacing: 0.06em; margin-top: 2px; font-weight: 400; }
  .mb-box .vers {
    font-family:var(--font-mono), monospace; font-size: 9.5px;
    color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.05); padding: 4px 8px; border-radius: 4px;
  }
  .mb-box .leds {
    display: flex; gap: 14px; padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .mb-box .led-grp { display: flex; flex-direction: column; gap: 4px; }
  .mb-box .led-grp .lab { font-family:var(--font-mono), monospace; font-size: 8.5px; color: #65738A; letter-spacing: 0.08em; }
  .mb-box .led-row { display: flex; align-items: center; gap: 6px; }
  .mb-box .led { width: 7px; height: 7px; border-radius: 50%; }
  .mb-box .led.g { background: var(--green); box-shadow: 0 0 8px rgba(22,138,74,0.7); }
  .mb-box .led.b { background: var(--blue); box-shadow: 0 0 8px rgba(0,60,203,0.8); animation: pulseBlueMb 2.4s ease-in-out infinite; }
  .mb-box .led.h { background: var(--honey); box-shadow: 0 0 6px rgba(185,119,14,0.55); }
  .mb-box .led.off { background: rgba(255,255,255,0.1); }
  .mb-box .led-row .v { font-family:var(--font-mono), monospace; font-size: 9px; color: #C7D5F5; letter-spacing: 0.05em; }
  @keyframes pulseBlueMb { 0%,100% { box-shadow: 0 0 0 0 rgba(0,60,203,0.4); } 50% { box-shadow: 0 0 0 5px rgba(0,60,203,0); } }

  .mb-box .ports {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .mb-box .ports .lab { font-family:var(--font-mono), monospace; font-size: 8.5px; color: #65738A; letter-spacing: 0.08em; margin-bottom: 8px; }
  .mb-box .port-row { display: flex; gap: 6px; }
  .mb-box .port {
    flex: 1; height: 22px; border-radius: 3px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    font-family:var(--font-mono), monospace; font-size: 8.5px;
    color: rgba(255,255,255,0.45);
  }
  .mb-box .port.act { background: rgba(0,60,203,0.18); border-color: rgba(127,168,255,0.5); color: #93B4FF; }
  .mb-box .meta {
    padding-top: 14px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  }
  .mb-box .meta .item .l { font-family:var(--font-mono), monospace; font-size: 9px; color: #65738A; letter-spacing: 0.06em; text-transform: uppercase; }
  .mb-box .meta .item .v { font-family:var(--font-mono), monospace; font-size: 11px; color: white; margin-top: 3px; }

  /* Connections diagram (left side: incoming protocols, right side: platform) */
  .mb-flow {
    margin-top: 26px;
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px;
    align-items: center;
  }
  .mb-side {
    background: white; border: 1px solid var(--border-soft);
    border-radius: 10px; padding: 12px;
  }
  .mb-side .lab {
    font-family:var(--font-mono), monospace; font-size: 9.5px;
    color: var(--blue); letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: 8px;
  }
  .mb-side .it {
    font-family:var(--font-mono), monospace; font-size: 10px;
    color: var(--slate-700);
    padding: 5px 7px; border-radius: 4px;
    background: var(--bg-2); margin-top: 4px;
    display: flex; align-items: center; gap: 5px;
  }
  .mb-side .it::before { content:""; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); }
  .mb-arrow {
    font-family:var(--font-mono), monospace; font-size: 10px;
    color: var(--slate-500); letter-spacing: 0.06em;
    text-align: center;
  }
  .mb-arrow .l { display: block; font-size: 14px; color: var(--blue); margin-bottom: 4px; }

  /* Specs */
  .specs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .spec {
    background: white; border: 1px solid var(--border-soft);
    border-radius: 14px; padding: 22px;
  }
  .spec .ico {
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--blue-50); color: var(--blue);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
  }
  .spec h3, .spec h4 { font-size: 14.5px; font-weight: 600; }
  .spec .v { font-family:var(--font-mono), monospace; font-size: 12px; color: var(--slate-700); margin-top: 6px; }
  .spec p { font-size: 13px; color: var(--slate-500); margin-top: 6px; line-height: 1.5; }

  /* Health monitor mock */
  .health {
    display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center;
    background: white; border: 1px solid var(--border-soft);
    border-radius: 22px; padding: 36px;
  }
  .health-mock {
    background: var(--bg-2); border: 1px solid var(--border-soft);
    border-radius: 14px; padding: 18px;
  }
  .health-mock .head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 12px; border-bottom: 1px solid var(--border-soft);
  }
  .health-mock .head .ttl { font-size: 13px; font-weight: 600; }
  .health-mock .head .pill {
    font-family:var(--font-mono), monospace; font-size: 10px;
    color: var(--green); background: rgba(22,138,74,0.08);
    padding: 4px 8px; border-radius: 4px; letter-spacing: 0.06em;
  }
  .health-mock .grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px;
  }
  .health-mock .stat {
    border: 1px solid var(--border-soft); border-radius: 8px;
    background: white; padding: 10px;
  }
  .health-mock .stat .l { font-family:var(--font-mono), monospace; font-size: 9.5px; color: var(--slate-500); letter-spacing: 0.06em; text-transform: uppercase; }
  .health-mock .stat .v { font-size: 16px; font-weight: 600; margin-top: 4px; color: var(--slate-900); }
  .health-mock .lst { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
  .health-mock .row {
    display: flex; gap: 8px; align-items: center;
    background: white; border: 1px solid var(--border-soft); border-radius: 6px;
    padding: 6px 9px;
    font-family:var(--font-mono), monospace; font-size: 11px; color: var(--slate-700);
  }
  .health-mock .row .v { margin-left: auto; color: var(--slate-900); font-weight: 500; }
  .health-mock .row .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
  .health-mock .row.h .pip { background: var(--honey); }

  /* Use cards */
  .use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

  @media (max-width: 980px) {
    .mb-hero-grid, .health { grid-template-columns: 1fr; }
    .specs-grid, .use-grid { grid-template-columns: 1fr; }
    .mb-flow { grid-template-columns: 1fr; }
    .mb-arrow { transform: rotate(90deg); }
  }
  .mb-note { background: #fff; border: 1px solid var(--slate-200); border-left: 3px solid var(--slate-900); border-radius: 4px; padding: 28px 30px; max-width: 880px; }
  .mb-note-head { margin-bottom: 14px; }
  .mb-note-eyebrow { display: block; font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--slate-500); text-transform: uppercase; margin-bottom: 8px; }
  .mb-note h2 { font-size: 22px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.01em; margin: 0; line-height: 1.3; }
  .mb-note-copy { color: var(--slate-700); font-size: 14.5px; line-height: 1.6; margin: 0 0 12px; }
  .mb-note-copy:last-of-type { margin-bottom: 18px; }
  .mb-note-warn { color: var(--slate-900); font-weight: 500; }
  .mb-note-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   erweiterbarkeit.html inline CSS
   ============================================================ */
  .ex-hero { padding: 80px 0 64px; }
  .ex-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

  /* Adapter / protocol map */
  .ex-map {
    background: white; border: 1px solid var(--border);
    border-radius: 22px; padding: 28px;
    box-shadow: var(--shadow-lg);
  }
  .ex-map .ttl {
    font-family:var(--font-mono), monospace; font-size: 11px;
    letter-spacing: 0.12em; color: var(--blue); text-transform: uppercase;
    margin-bottom: 18px;
  }
  .ex-map .group { margin-bottom: 16px; }
  .ex-map .group:last-child { margin-bottom: 0; }
  .ex-map .group h4 {
    font-size: 13px; font-weight: 600; color: var(--slate-900);
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px;
  }
  .ex-map .group h4 .ico {
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--blue-50); color: var(--blue);
    display: flex; align-items: center; justify-content: center;
  }
  .ex-map .group h4 .tag {
    margin-left: auto;
    font-family:var(--font-mono), monospace; font-size: 10px;
    color: var(--slate-500); letter-spacing: 0.06em;
  }
  .ex-map .chips {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .ex-map .ch {
    font-family:var(--font-mono), monospace; font-size: 10.5px;
    color: var(--slate-700); letter-spacing: 0.04em;
    padding: 5px 9px; border-radius: 6px;
    background: var(--bg-2); border: 1px solid var(--border-soft);
  }
  .ex-map .ch.b { color: var(--blue); border-color: var(--blue-100); background: var(--blue-50); }
  .ex-map .ch.h { color: var(--honey); border-color: rgba(185,119,14,0.25); background: var(--honey-50); }
  .ex-map .ch.s { color: var(--slate-500); }

  /* Path cards */
  .paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .paths.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .path-card {
    background: white; border: 1px solid var(--border-soft);
    border-radius: 18px; padding: 26px;
    display: flex; flex-direction: column;
  }
  .path-card .num {
    font-family:var(--font-mono), monospace; font-size: 10.5px;
    letter-spacing: 0.12em; color: var(--blue);
  }
  .path-card h3 { font-size: 17px; margin-top: 8px; }
  .path-card p { font-size: 14px; color: var(--slate-700); margin-top: 8px; line-height: 1.55; flex: 1; }
  .path-card .lst { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 6px; }
  .path-card .lst li {
    font-family:var(--font-mono), monospace; font-size: 11px;
    color: var(--slate-700); display: flex; align-items: center; gap: 6px;
  }
  .path-card .lst li::before { content:""; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); }
  .path-card .badge {
    align-self: flex-start;
    font-family:var(--font-mono), monospace; font-size: 10px;
    letter-spacing: 0.1em; color: var(--blue);
    background: var(--blue-50); padding: 4px 8px; border-radius: 4px;
    margin-bottom: 12px;
  }
  .path-card.honey .badge { color: var(--honey); background: var(--honey-50); }
  .path-card.honey .num, .path-card.honey .lst li::before { color: var(--honey); background: var(--honey); }
  .path-card.honey .num { background: transparent; }
  .path-card.dark { background: var(--navy); border-color: var(--navy); color: white; }
  .path-card.dark h3, .path-card.dark p { color: white; }
  .path-card.dark p { color: #C7D5F5; }
  .path-card.dark .num { color: #93B4FF; }
  .path-card.dark .lst li { color: #C7D5F5; }
  .path-card.dark .lst li::before { background: var(--honey); }
  .path-card.dark .badge { color: #93B4FF; background: rgba(255,255,255,0.08); }

  /* Adapter contract diagram */
  .ad-diag {
    background: white; border: 1px solid var(--border-soft);
    border-radius: 22px; padding: 36px;
  }
  .ad-grid {
    display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 18px; align-items: center;
  }
  .ad-block {
    background: var(--bg-2); border: 1px solid var(--border-soft);
    border-radius: 14px; padding: 18px;
  }
  .ad-block.dark { background: var(--navy); color: white; border-color: var(--navy); }
  .ad-block.dark .lab { color: #93B4FF; }
  .ad-block.dark .nm { color: white; }
  .ad-block.dark .ds { color: #C7D5F5; }
  .ad-block .lab {
    font-family:var(--font-mono), monospace; font-size: 10px;
    letter-spacing: 0.12em; color: var(--blue); text-transform: uppercase;
  }
  .ad-block .nm { font-size: 14px; font-weight: 600; color: var(--slate-900); margin-top: 6px; }
  .ad-block .ds { font-size: 12px; color: var(--slate-500); margin-top: 4px; line-height: 1.5; }
  .ad-block .pts { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
  .ad-block .pts .pt {
    font-family:var(--font-mono), monospace; font-size: 10.5px; color: var(--slate-700);
    background: white; border: 1px solid var(--border-soft); border-radius: 5px;
    padding: 4px 7px;
  }
  .ad-block.dark .pts .pt { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #C7D5F5; }
  .ad-conn {
    text-align: center;
    font-family:var(--font-mono), monospace; font-size: 10px;
    color: var(--slate-500); letter-spacing: 0.08em;
    line-height: 1.4;
  }
  .ad-conn .l { color: var(--blue); font-size: 14px; display: block; margin-bottom: 4px; }

  /* Integration spec table */
  .ispec {
    border: 1px solid var(--border-soft); border-radius: 16px;
    overflow: hidden; background: white;
  }
  .ispec .row {
    display: grid; grid-template-columns: 1fr 1fr 1fr 0.8fr;
    gap: 16px; padding: 14px 22px;
    align-items: center;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13.5px;
  }
  .ispec .row:last-child { border-bottom: 0; }
  .ispec .row.head {
    background: var(--bg-2);
    font-family:var(--font-mono), monospace; font-size: 10.5px;
    color: var(--slate-500); letter-spacing: 0.1em; text-transform: uppercase;
  }
  .ispec .name { font-weight: 600; color: var(--slate-900); font-family:var(--font-mono), monospace; font-size: 12.5px; letter-spacing: 0.04em; }
  .ispec .meta { font-family:var(--font-mono), monospace; font-size: 12px; color: var(--slate-700); }
  .ispec .pill {
    display: inline-block;
    font-family:var(--font-mono), monospace; font-size: 10px;
    padding: 3px 7px; border-radius: 4px;
    letter-spacing: 0.06em;
  }
  .ispec .pill.std { color: var(--blue); background: var(--blue-50); }
  .ispec .pill.adp { color: var(--honey); background: var(--honey-50); }
  .ispec .pill.cust { color: var(--slate-700); background: var(--bg-2); border: 1px solid var(--border-soft); }

  /* API endpoint sample */
  .api-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
  .api-code {
    background: var(--navy); color: #C7D5F5;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }
  .api-code .bar {
    background: rgba(255,255,255,0.04);
    padding: 10px 16px;
    font-family:var(--font-mono), monospace; font-size: 11px;
    color: #93B4FF; letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex; justify-content: space-between;
  }
  .api-code pre {
    margin: 0; padding: 18px 20px;
    font-family: var(--font-mono), monospace; font-size: 12px;
    line-height: 1.65; overflow-x: auto;
  }
  .api-code .m { color: #7FA8FF; font-weight: 600; }
  .api-code .p { color: #F3D8A2; }
  .api-code .c { color: #65738A; }
  .api-code .s { color: #93D8B0; }

  @media (max-width: 980px) {
    .ex-hero-grid, .api-grid { grid-template-columns: 1fr; }
    .paths { grid-template-columns: 1fr; }
    .ad-grid { grid-template-columns: 1fr; }
    .ad-conn { transform: rotate(90deg); padding: 4px 0; }
    .ispec .row { grid-template-columns: 1fr 1fr; gap: 8px; }
    .ispec .row.head { display: none; }
  }

  /* Base / direct integrations dark band */
  .ex-base {
    background: var(--navy);
    color: white;
    position: relative;
    overflow: hidden;
  }
  .ex-base::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      radial-gradient(circle at 18% 22%, rgba(147,180,255,0.10) 0%, transparent 35%),
      radial-gradient(circle at 82% 78%, rgba(255,204,102,0.08) 0%, transparent 38%),
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: auto, auto, 48px 48px, 48px 48px;
    pointer-events: none;
    opacity: 0.9;
  }
  .ex-base .container { position: relative; z-index: 1; }
  .api-plan { max-width: 880px; }
  .api-plan-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--slate-200); }
  .api-plan-list > li { display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--slate-200); }
  .api-plan-num { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--slate-500); padding-top: 4px; }
  .api-plan-list h4, .api-plan-list h3 { font-size: 16.5px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.01em; margin: 0 0 6px; }
  .api-plan-list p { color: var(--slate-700); font-size: 14.5px; line-height: 1.6; margin: 0; }
  .api-plan-note { margin: 22px 0 0; padding: 14px 18px; border-left: 3px solid var(--slate-900); background: #fff; font-size: 14px; line-height: 1.6; color: var(--slate-800); }

  /* Offline-Vorplanung, 4 buckets + collapsible details */
  .ew-offline-buckets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  @media (max-width: 1024px) { .ew-offline-buckets { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .ew-offline-buckets { grid-template-columns: 1fr; } }
  .ew-offline-bucket {
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: 4px;
    padding: 22px 22px 24px;
    position: relative;
  }
  .ew-offline-num {
    font-family: var(--font-mono), monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--slate-500);
    margin-bottom: 14px;
  }
  .ew-offline-bucket h3 {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.3;
    color: var(--slate-900);
    font-weight: 600;
  }
  .ew-offline-bucket p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--slate-700);
  }

  .ew-offline-details {
    margin-top: 18px;
    border-top: 1px solid var(--slate-200);
  }
  .ew-offline-details > summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--font-mono), monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate-700);
    transition: color 0.15s;
  }
  .ew-offline-details > summary::-webkit-details-marker { display: none; }
  .ew-offline-details > summary:hover { color: var(--slate-900); }
  .ew-offline-summary-icon {
    font-family: var(--font-mono), monospace;
    font-size: 18px;
    color: var(--slate-500);
    line-height: 1;
    transition: transform 0.2s;
  }
  .ew-offline-details[open] .ew-offline-summary-icon { transform: rotate(45deg); }
  .ew-offline-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--slate-200);
    border: 1px solid var(--slate-200);
    margin-top: 4px;
  }
  @media (max-width: 900px) { .ew-offline-detail-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .ew-offline-detail-grid { grid-template-columns: 1fr; } }
  .ew-offline-item {
    background: #fff;
    padding: 18px 20px;
  }
  .ew-offline-item h4 {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--slate-900);
  }
  .ew-offline-item p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--slate-700);
  }

/* ============================================================
   betreiber.html inline CSS
   ============================================================ */
  /* ===== /betreiber page styles ===== */
  .ops-hero { padding: 80px 0 64px; }
  .ops-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }

  /* operator dashboard mock */
  .ops-mock {
    background: white; border: 1px solid var(--border);
    border-radius: 18px; box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
  .ops-mock .top {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-bottom: 1px solid var(--border-soft);
    background: linear-gradient(180deg,#fbfcfe,#f4f7fc);
  }
  .ops-mock .top .lights { display: flex; gap: 5px; }
  .ops-mock .top .lights span { width: 9px; height: 9px; border-radius: 50%; background: #d8dde6; }
  .ops-mock .top .url {
    flex: 1; height: 24px; border: 1px solid var(--border-soft);
    border-radius: 6px; background: white; padding: 0 10px;
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-mono), monospace; font-size: 11px; color: var(--slate-500);
  }
  .ops-mock .top .url b { color: var(--slate-900); font-weight: 500; }
  .ops-mock .top .acct {
    font-family: var(--font-mono), monospace; font-size: 10.5px;
    color: var(--slate-700); background: white; padding: 4px 8px;
    border-radius: 6px; border: 1px solid var(--border-soft);
  }
  .ops-mock .body { display: grid; grid-template-columns: 200px 1fr; min-height: 460px; }
  .ops-mock .side { border-right: 1px solid var(--border-soft); padding: 16px 12px; background: #fbfcfe; }
  .ops-mock .side .lab {
    font-family: var(--font-mono), monospace; font-size: 9.5px;
    color: var(--slate-500); letter-spacing: 0.12em; text-transform: uppercase;
    padding: 12px 8px 6px;
  }
  .ops-mock .side .item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; font-size: 12.5px; color: var(--slate-700);
    border-radius: 6px;
  }
  .ops-mock .side .item.active { background: var(--blue-50); color: var(--blue); font-weight: 500; }
  .ops-mock .side .item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--slate-300); }
  .ops-mock .side .item.active .dot { background: var(--blue); }
  .ops-mock .main { padding: 18px 22px; }
  .ops-mock .main h4 { font-size: 14px; }
  .ops-mock .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
  .ops-mock .stat {
    border: 1px solid var(--border-soft); border-radius: 10px;
    padding: 10px 12px; background: white;
  }
  .ops-mock .stat .l { font-family:var(--font-mono), monospace; font-size: 9.5px; color: var(--slate-500); letter-spacing: 0.04em; text-transform: uppercase; white-space: normal; }
  .ops-mock .stat .v { font-size: 18px; font-weight: 600; margin-top: 4px; letter-spacing: -0.015em; }
  .ops-mock .stat .d { font-size: 10.5px; font-family: var(--font-mono), monospace; margin-top: 4px; color: var(--green); }
  .ops-mock .stat.warn .d { color: var(--honey); }
  .ops-mock .grid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-top: 14px; }
  .ops-mock .panel {
    border: 1px solid var(--border-soft); border-radius: 10px;
    padding: 12px; background: white;
  }
  .ops-mock .panel .head { display: flex; align-items: center; justify-content: space-between; }
  .ops-mock .panel .head .ttl { font-size: 12.5px; font-weight: 600; color: var(--slate-900); }
  .ops-mock .panel .head .tag { font-family:var(--font-mono), monospace; font-size: 10px; color: var(--slate-500); }
  .ops-chart { height: 100px; margin-top: 10px; position: relative; }
  .ops-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
  .ops-list .row {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-mono), monospace; font-size: 10.5px;
    color: var(--slate-700);
    padding: 5px 8px; border-radius: 6px; background: var(--bg-2);
  }
  .ops-list .row .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
  .ops-list .row.b .pip { background: var(--blue); }
  .ops-list .row.h .pip { background: var(--honey); }
  .ops-list .row .v { color: var(--slate-900); font-weight: 500; margin-left: auto; }

  /* Workflow / journey */
  .ops-flow {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
    position: relative;
  }
  .ops-flow .step {
    background: white; border: 1px solid var(--border-soft);
    border-radius: 16px; padding: 22px; position: relative;
  }
  .ops-flow .step .num {
    font-family:var(--font-mono), monospace; font-size: 10.5px;
    letter-spacing: 0.12em; color: var(--blue);
  }
  .ops-flow .step h3 { font-size: 16px; margin-top: 8px; }
  .ops-flow .step p { font-size: 13.5px; margin-top: 6px; line-height: 1.5; }
  .ops-flow .step .ico {
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--blue-50); color: var(--blue);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
  }

  /* Capabilities table */
  .cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .cap {
    border: 1px solid var(--border-soft); border-radius: 16px;
    padding: 24px; background: white;
    display: flex; gap: 18px;
  }
  .cap .cap-ico {
    width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
    background: var(--blue-50); color: var(--blue);
    display: flex; align-items: center; justify-content: center;
  }
  .cap h3 { font-size: 16px; }
  .cap p { font-size: 13.5px; color: var(--slate-700); margin-top: 6px; line-height: 1.55; }
  .cap ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
  .cap li {
    font-family: var(--font-mono), monospace; font-size: 11.5px;
    color: var(--slate-700); display: flex; gap: 6px; align-items: center;
  }
  .cap li::before { content:""; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); }

  /* What you get list */
  .ops-list-block {
    background: white; border: 1px solid var(--border-soft);
    border-radius: 22px; padding: 36px;
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center;
  }
  .ops-list-block ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
  .ops-list-block li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--slate-700); }
  .ops-list-block li b { color: var(--slate-900); font-weight: 600; }
  .ops-list-block li .check {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: var(--blue-50); color: var(--blue);
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 2px;
  }

  /* Locations example */
  .loc-card {
    border: 1px solid var(--border-soft); border-radius: 14px;
    background: white; padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .loc-card .name { font-size: 14px; font-weight: 600; }
  .loc-card .meta { font-family:var(--font-mono), monospace; font-size: 10.5px; color: var(--slate-500); }
  .loc-card .bar { height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
  .loc-card .bar > i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
  .loc-card.warn .bar > i { background: var(--honey); }

  @media (max-width: 980px) {
    .ops-hero-grid { grid-template-columns: 1fr; }
    .ops-mock .body { grid-template-columns: 1fr; }
    .ops-mock .side { border-right: 0; border-bottom: 1px solid var(--border-soft); }
    .ops-mock .stats { grid-template-columns: 1fr 1fr; }
    .ops-mock .grid2 { grid-template-columns: 1fr; }
    .ops-flow, .cap-grid { grid-template-columns: 1fr; }
    .ops-list-block { grid-template-columns: 1fr; padding: 28px; }
  }
  .kg-head { margin-bottom: 36px; max-width: 880px; }
  .kg-head .eyebrow { display: block; margin-bottom: 14px; }
  .kg-head h2 { margin: 0; }
  .kg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .kg-col {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 26px 26px 28px;
  }
  .kg-num {
    font-family: var(--font-mono), monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--blue);
    margin-bottom: 14px;
  }
  .kg-col h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--slate-900);
    line-height: 1.35;
  }
  .kg-col p {
    margin: 0;
    font-size: 14.5px;
    color: var(--slate-700);
    line-height: 1.6;
  }
  .kg-note {
    margin: 24px 0 0;
    padding: 14px 18px;
    border-left: 3px solid var(--blue);
    background: white;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    color: var(--slate-700);
    line-height: 1.55;
  }
  @media (max-width: 880px) {
    .kg-grid { grid-template-columns: 1fr; }
  }
  .alltag-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 28px;
  }
  .alltag-card {
    background: white;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 24px 26px;
    position: relative;
    transition: border-color .2s, box-shadow .2s, transform .2s;
  }
  .alltag-card:hover {
    border-color: var(--blue);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
    transform: translateY(-1px);
  }
  .alltag-card .num {
    font-family: var(--font-mono), monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--blue);
    margin-bottom: 12px;
    display: block;
  }
  .alltag-card h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--slate-900);
    line-height: 1.3;
    margin: 0 0 10px;
    letter-spacing: -0.005em;
  }
  .alltag-card p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--slate-700);
    margin: 0;
  }
  @media (max-width: 760px) {
    .alltag-grid { grid-template-columns: 1fr; }
  }
  .op-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
  .op-card { position: relative; background: #fff; border: 1px solid var(--slate-200); border-radius: 6px; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; }
  .op-card-recommended { border-color: var(--slate-900); box-shadow: 0 0 0 1px var(--slate-900) inset; }
  .op-step { font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.1em; color: var(--slate-500); text-transform: uppercase; }
  .op-tag { font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.08em; color: #fff; text-transform: uppercase; background: var(--slate-900); padding: 3px 7px; border-radius: 3px; align-self: flex-start; }
  .op-tag-quiet { background: transparent; color: var(--slate-500); padding: 3px 0; }
  .op-card h3 { font-size: 18px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.01em; margin: 4px 0 0; }
  .op-card p { color: var(--slate-700); font-size: 14.5px; line-height: 1.6; margin: 0; }
  .op-note { margin: 22px 0 0; padding: 14px 18px; border-left: 3px solid var(--slate-900); background: var(--bg); font-size: 14.5px; line-height: 1.55; color: var(--slate-900); font-weight: 500; }
  @media (max-width: 900px) { .op-grid { grid-template-columns: 1fr; } }
  .entry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
  .entry-card { background: #fff; border: 1px solid var(--slate-200); border-radius: 4px; padding: 24px 22px; display: flex; flex-direction: column; position: relative; }
  .entry-card-recommended { border-color: var(--slate-900); box-shadow: 0 1px 0 var(--slate-900); }
  .entry-card-recommended::before { content: 'Empfohlen für Betreiber'; position: absolute; top: -10px; left: 22px; background: var(--slate-900); color: #fff; font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; }
  .entry-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--slate-200); margin-bottom: 14px; }
  .entry-step { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--slate-500); text-transform: uppercase; }
  .entry-card h3 { font-size: 19px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.01em; margin: 0; }
  .entry-lede { color: var(--slate-700); font-size: 14.5px; line-height: 1.55; margin: 0 0 16px; }
  .entry-uc-label { font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.1em; color: var(--slate-500); text-transform: uppercase; margin-bottom: 8px; }
  .entry-uc { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
  .entry-uc li { font-size: 13.5px; color: var(--slate-700); padding-left: 14px; position: relative; line-height: 1.45; }
  .entry-uc li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 1px; background: var(--slate-400); }
  .entry-price { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--slate-200); }
  .entry-price-label { font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.1em; color: var(--slate-500); text-transform: uppercase; margin-bottom: 6px; }
  .entry-price p { color: var(--slate-700); font-size: 13.5px; line-height: 1.5; margin: 0; }
  .entry-mode { position: relative; margin-top: 32px; padding: 24px 26px; background: var(--slate-900); color: #fff; border-radius: 4px; display: flex; gap: 22px; align-items: flex-start; }
  .entry-mode-flag { flex-shrink: 0; font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-900); background: #fff; padding: 5px 9px; border-radius: 2px; margin-top: 4px; }
  .entry-mode-body { flex: 1; }
  .entry-mode h3 { font-size: 19px; font-weight: 600; color: #fff; letter-spacing: -0.01em; margin: 0 0 8px; }
  .entry-mode p { color: rgba(255,255,255,0.82); font-size: 14px; line-height: 1.6; margin: 0; max-width: 880px; }
  .entry-actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
  @media (max-width: 900px) {
    .entry-grid { grid-template-columns: 1fr; }
    .entry-mode { flex-direction: column; gap: 14px; }
  }
  .bv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .bv-card { background: #fff; border: 1px solid var(--slate-200); border-radius: 6px; padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
  .bv-step { font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.1em; color: var(--slate-500); text-transform: uppercase; }
  .bv-card h3 { font-size: 17px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.01em; margin: 2px 0 0; }
  .bv-card p { color: var(--slate-700); font-size: 14px; line-height: 1.55; margin: 0; }
  @media (max-width: 1000px) { .bv-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .bv-grid { grid-template-columns: 1fr; } }

/* ============================================================
   white-label.html inline CSS
   ============================================================ */
  /* ===== /white-label page styles ===== */
  .wl-hero { padding: 80px 0 64px; }

  .dark-band-aside {
    margin: 14px auto 0;
    max-width: 880px;
    text-align: center;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255,255,255,0.78);
  }
  .wl-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }

  /* Reskinnable portal mock, two stacked tinted variants */
  .wl-stack { position: relative; height: 520px; }
  .wl-portal {
    position: absolute; width: 88%;
    background: white; border: 1px solid var(--border);
    border-radius: 16px; box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
  .wl-portal .top {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-soft);
  }
  .wl-portal .lights { display: flex; gap: 5px; }
  .wl-portal .lights span { width: 8px; height: 8px; border-radius: 50%; background: #d8dde6; }
  .wl-portal .brand-block {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono), monospace; font-size: 11px;
    color: var(--slate-900); font-weight: 500;
  }
  .wl-portal .brand-block .sw { width: 18px; height: 18px; border-radius: 5px; }
  .wl-portal .body { padding: 16px 18px; min-height: 220px; }
  .wl-portal .body .head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 12px; border-bottom: 1px solid var(--border-soft);
  }
  .wl-portal .body .ttl { font-size: 13.5px; font-weight: 600; color: var(--slate-900); }
  .wl-portal .body .pill {
    font-family:var(--font-mono), monospace; font-size: 10px;
    padding: 4px 8px; border-radius: 999px;
  }
  .wl-portal .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
  .wl-portal .stat {
    border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px;
  }
  .wl-portal .stat .l { font-family:var(--font-mono), monospace; font-size: 9.5px; color: var(--slate-500); letter-spacing: 0.06em; text-transform: uppercase; }
  .wl-portal .stat .v { font-size: 16px; font-weight: 600; margin-top: 4px; }

  .wl-portal.a {
    top: 0; left: 0;
    transform: rotate(-2deg);
    z-index: 2;
  }
  .wl-portal.a .accent-bar { background: linear-gradient(90deg, #B9770E, #7A4D08); }
  .wl-portal.a .brand-block .sw { background: linear-gradient(135deg, #B9770E, #7A4D08); }
  .wl-portal.a .body .pill { color: #7A4D08; background: var(--honey-50); }
  .wl-portal.a .stat .v { color: #7A4D08; }

  .wl-portal.b {
    bottom: 0; right: 0;
    transform: rotate(2.5deg);
    z-index: 1;
  }
  .wl-portal.b .accent-bar { background: linear-gradient(90deg, #168A4A, #0D5A30); }
  .wl-portal.b .brand-block .sw { background: linear-gradient(135deg, #168A4A, #0D5A30); }
  .wl-portal.b .body .pill { color: #0D5A30; background: rgba(22,138,74,0.08); }
  .wl-portal.b .stat .v { color: #0D5A30; }

  .wl-portal .accent-bar {
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--blue-700));
  }

  .wl-portal .row {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-mono), monospace; font-size: 10.5px;
    color: var(--slate-700);
    padding: 6px 8px; border-radius: 6px;
    border: 1px solid var(--border-soft); background: white;
  }
  .wl-portal .rows { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
  .wl-portal .row .v { color: var(--slate-900); margin-left: auto; font-weight: 500; }
  .wl-portal .row .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }

  .wl-base-tag {
    position: absolute; left: 50%; top: -8px; transform: translateX(-50%);
    background: white; border: 1px solid var(--border);
    padding: 5px 11px; border-radius: 999px;
    font-family:var(--font-mono), monospace; font-size: 10.5px; color: var(--slate-700);
    letter-spacing: 0.08em;
    box-shadow: var(--shadow-sm); z-index: 5;
  }

  /* Reskin spec strip */
  .reskin {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  }
  .reskin .item {
    background: white; border: 1px solid var(--border-soft);
    border-radius: 14px; padding: 22px;
  }
  .reskin .item h4, .reskin .item h3 { font-size: 14px; font-weight: 600; color: var(--slate-900); margin-bottom: 8px; }
  .reskin .item p { font-size: 13px; color: var(--slate-500); line-height: 1.5; }
  .reskin .swatches {
    display: flex; gap: 6px; margin-bottom: 12px;
  }
  .reskin .sw { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.06); }
  .reskin .typo {
    font-family: var(--font-sans), sans-serif /*tx-inter*/, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
    color: var(--slate-900); margin-bottom: 12px;
  }
  .reskin .logo-box {
    height: 36px; margin-bottom: 12px;
    border-radius: 8px; border: 1px dashed var(--border);
    display: flex; align-items: center; justify-content: center;
    font-family:var(--font-mono), monospace; font-size: 11px; color: var(--slate-500);
  }
  .reskin .domain {
    height: 36px; margin-bottom: 12px;
    border-radius: 8px; border: 1px solid var(--border-soft);
    display: flex; align-items: center; padding: 0 10px; gap: 6px;
    font-family:var(--font-mono), monospace; font-size: 11px; color: var(--slate-700);
    background: var(--bg-2);
  }
  .reskin .domain b { color: var(--slate-900); font-weight: 500; }

  /* Tenants table */
  .tenants {
    border: 1px solid var(--border-soft); border-radius: 16px;
    overflow: hidden; background: white;
  }
  .tenants .row {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 0.7fr;
    gap: 16px; padding: 14px 22px;
    align-items: center;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13.5px;
  }
  .tenants .row:last-child { border-bottom: 0; }
  .tenants .row.head {
    background: var(--bg-2);
    font-family:var(--font-mono), monospace; font-size: 10.5px;
    color: var(--slate-500); letter-spacing: 0.1em; text-transform: uppercase;
    font-weight: 500;
  }
  .tenants .name { font-weight: 600; color: var(--slate-900); }
  .tenants .sub { font-family:var(--font-mono), monospace; font-size: 10.5px; color: var(--slate-500); margin-top: 2px; letter-spacing: 0.04em; }
  .tenants .qa { display: flex; align-items: center; gap: 6px; }
  .tenants .qa .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
  .tenants .qa.warn .pip { background: var(--honey); }
  .tenants .meta { font-family:var(--font-mono), monospace; font-size: 11.5px; color: var(--slate-700); }

  /* Operating model split */
  .ops-model {
    display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  }
  .ops-model .col {
    background: white; border: 1px solid var(--border-soft);
    border-radius: 18px; padding: 28px;
  }
  .ops-model .col h3 { font-size: 18px; }
  .ops-model .col p { font-size: 14px; color: var(--slate-700); margin-top: 10px; line-height: 1.6; }
  .ops-model .col h3 .tag {
    display: inline-block; vertical-align: middle; margin-left: 8px;
    font-family:var(--font-mono), monospace; font-size: 10px;
    background: var(--blue-50); color: var(--blue);
    padding: 3px 8px; border-radius: 4px; letter-spacing: 0.06em;
  }
  .ops-model .col.dark { background: var(--navy); border-color: var(--navy); }
  .ops-model .col.dark h3, .ops-model .col.dark p { color: white; }
  .ops-model .col.dark p { color: #C7D5F5; }
  .ops-model .col.dark .tag { background: rgba(255,255,255,0.1); color: #93B4FF; }
  .ops-model .lst { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
  .ops-model .lst li {
    display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--slate-700);
  }
  .ops-model .col.dark .lst li { color: #C7D5F5; }
  .ops-model .lst li::before {
    content:""; width: 5px; height: 5px; border-radius: 50%;
    background: var(--blue); margin-top: 8px; flex-shrink: 0;
  }
  .ops-model .col.dark .lst li::before { background: var(--honey); }

  /* Process steps timeline */
  .timeline { position: relative; padding-left: 22px; }
  .timeline::before {
    content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px;
    width: 1px; background: var(--border);
  }
  .timeline .step {
    position: relative; padding: 18px 0 18px 28px;
    border-bottom: 1px solid var(--border-soft);
  }
  .timeline .step:last-child { border-bottom: 0; }
  .timeline .step::before {
    content: ""; position: absolute; left: -22px; top: 24px;
    width: 13px; height: 13px; border-radius: 50%;
    background: white; border: 2px solid var(--blue);
  }
  .timeline .step .num {
    font-family:var(--font-mono), monospace; font-size: 10.5px;
    color: var(--blue); letter-spacing: 0.12em;
  }
  .timeline .step h3 { font-size: 17px; margin-top: 6px; }
  .timeline .step p { font-size: 14px; color: var(--slate-700); margin-top: 6px; line-height: 1.55; max-width: 720px; }

  /* Boundary lists (you / TRRT) */
  .boundary {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  }
  .boundary .col {
    border: 1px solid var(--border-soft); border-radius: 16px;
    padding: 24px; background: white;
  }
  .boundary .col h4 { font-size: 13px; font-family:var(--font-mono), monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
  .boundary .col h3 { font-size: 17px; margin-bottom: 14px; }
  .boundary ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .boundary li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--slate-700); line-height: 1.5; }
  .boundary li svg { flex-shrink: 0; margin-top: 4px; color: var(--blue); }
  .boundary .col.platform h4 { color: var(--honey); }
  .boundary .col.platform li svg { color: var(--honey); }

  @media (max-width: 980px) {
    .wl-hero-grid { grid-template-columns: 1fr; }
    .wl-stack { height: 480px; }
    .wl-portal { width: 92%; }
    .ops-model, .boundary { grid-template-columns: 1fr; }
  }
  .wl-comm {
    padding: 72px 0;
    background: white;
    position: relative;
    overflow: hidden;
  }
  .wl-comm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .wl-comm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono), monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 14px;
  }
  .wl-comm-eyebrow::before {
    content: "";
    width: 24px; height: 1px;
    background: var(--blue);
  }
  .wl-comm h2 {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--slate-900);
    margin: 0 0 20px;
    letter-spacing: -0.012em;
  }
  .wl-comm-copy {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--slate-700);
    margin: 0;
  }
  .wl-comm-outcomes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .wl-comm-outcomes li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 16px;
    align-items: start;
    padding: 18px 20px;
    background: var(--bg, #f8fafc);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    transition: border-color .2s, transform .2s;
  }
  .wl-comm-outcomes li:hover {
    border-color: var(--blue);
    transform: translateX(2px);
  }
  .wl-comm-outcomes .ico {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .wl-comm-outcomes p {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--slate-800, var(--slate-900));
    margin: 4px 0 0;
    font-weight: 500;
  }
  .wl-comm-bigline {
    margin-top: 36px;
    padding: 28px 32px;
    background: var(--slate-900);
    color: white;
    border-radius: 14px;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.005em;
    position: relative;
    overflow: hidden;
  }
  .wl-comm-bigline::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 90% 50%, rgba(59,130,246,0.15), transparent 60%);
    pointer-events: none;
  }
  .wl-comm-bigline span {
    position: relative;
    color: var(--blue-300, #93c5fd);
    font-weight: 600;
  }
  @media (max-width: 920px) {
    .wl-comm-grid { grid-template-columns: 1fr; gap: 32px; }
    .wl-comm h2 { font-size: 26px; }
    .wl-comm-bigline { font-size: 17px; padding: 22px 24px; }
  }
  .wl-pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
  .wl-pkg { background: #fff; border: 1px solid var(--slate-200); border-radius: 4px; padding: 24px 22px; display: flex; flex-direction: column; }
  .wl-pkg-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--slate-200); margin-bottom: 14px; }
  .wl-pkg-step { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--slate-500); text-transform: uppercase; }
  .wl-pkg h3 { font-size: 19px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.01em; margin: 0; }
  .wl-pkg-lede { color: var(--slate-700); font-size: 14.5px; line-height: 1.55; margin: 0 0 16px; }
  .wl-pkg-uc-label { font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.1em; color: var(--slate-500); text-transform: uppercase; margin-bottom: 8px; }
  .wl-pkg-uc { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
  .wl-pkg-uc li { font-size: 13.5px; color: var(--slate-700); padding-left: 14px; position: relative; line-height: 1.45; }
  .wl-pkg-uc li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 1px; background: var(--slate-400); }
  .wl-pkg-price { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--slate-200); }
  .wl-pkg-price-label { font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.1em; color: var(--slate-900); text-transform: uppercase; margin-bottom: 6px; }
  .wl-pkg-price p { color: var(--slate-700); font-size: 13px; line-height: 1.5; margin: 0; }
  .wl-pkg-uc { margin-bottom: 16px; }

  .wl-billing { position: relative; margin-top: 28px; padding: 24px 26px; background: var(--slate-900); color: #fff; border-radius: 4px; display: flex; gap: 22px; align-items: flex-start; }
  .wl-billing-flag { flex-shrink: 0; font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-900); background: #fff; padding: 5px 9px; border-radius: 2px; margin-top: 4px; }
  .wl-billing-body { flex: 1; }
  .wl-billing-body h3 { font-size: 19px; font-weight: 600; color: #fff; letter-spacing: -0.01em; line-height: 1.35; margin: 0 0 10px; }
  .wl-billing-body p { color: rgba(255,255,255,0.82); font-size: 14px; line-height: 1.6; margin: 0; max-width: 880px; }

  .wl-factors { margin-top: 22px; background: #fff; border: 1px solid var(--slate-200); border-radius: 4px; padding: 22px 26px; }
  .wl-factors-label { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--slate-500); text-transform: uppercase; margin-bottom: 12px; }
  .wl-factors-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; }
  .wl-factors-list li { font-size: 13.5px; color: var(--slate-700); padding-left: 16px; position: relative; line-height: 1.55; padding-top: 4px; padding-bottom: 4px; }
  .wl-factors-list li::before { content: ''; position: absolute; left: 0; top: 13px; width: 8px; height: 1px; background: var(--blue, #2160d4); }

  .wl-pkg-actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }

  .wl-mon { margin-top: 22px; background: #fff; border: 1px solid var(--slate-200); border-radius: 4px; padding: 24px 26px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .wl-mon-eyebrow { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--slate-500); text-transform: uppercase; display: block; margin-bottom: 8px; }
  .wl-mon-head h3 { font-size: 18px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.01em; margin: 0 0 8px; }
  .wl-mon-head p { color: var(--slate-700); font-size: 14px; line-height: 1.55; margin: 0; }
  .wl-mon-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
  .wl-mon-list li { font-size: 13.5px; color: var(--slate-800); padding: 8px 12px; background: var(--bg); border: 1px solid var(--slate-200); border-radius: 3px; font-family: var(--font-mono), monospace; letter-spacing: -0.005em; }

  .wl-pkg-note { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--slate-200); max-width: 820px; }
  .wl-pkg-note-lead { font-size: 16px; font-weight: 600; color: var(--slate-900); line-height: 1.45; margin: 0 0 8px; letter-spacing: -0.005em; }
  .wl-pkg-note-sub { color: var(--slate-600); font-size: 13.5px; line-height: 1.55; margin: 0; }

  @media (max-width: 900px) {
    .wl-pkg-grid { grid-template-columns: 1fr; }
    .wl-mon { grid-template-columns: 1fr; gap: 18px; }
    .wl-mon-list { grid-template-columns: 1fr; }
    .wl-billing { flex-direction: column; gap: 14px; }
    .wl-factors-list { grid-template-columns: 1fr; }
  }

/* ============================================================
   oem.html inline CSS
   ============================================================ */
  /* ===== /oem page styles ===== */
  .oem-hero { padding: 80px 0 64px; }
  .oem-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

  /* OEM device → API → service portal flow */
  .oem-vis {
    background: linear-gradient(180deg, #fbfcfe 0%, #eff3fa 100%);
    border: 1px solid var(--border); border-radius: 22px;
    padding: 28px; box-shadow: var(--shadow-lg);
    position: relative; overflow: hidden;
  }
  .oem-vis::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(to right, rgba(15,23,42,0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15,23,42,0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(420px 320px at 50% 50%, black, transparent 80%);
    -webkit-mask-image: radial-gradient(420px 320px at 50% 50%, black, transparent 80%);
  }
  .oem-vis > * { position: relative; z-index: 1; }

  .oem-row { display: flex; flex-direction: column; gap: 14px; }
  .oem-tile {
    background: white; border: 1px solid var(--border);
    border-radius: 12px; padding: 14px 16px;
    box-shadow: var(--shadow-sm);
  }
  .oem-tile .lab {
    font-family:var(--font-mono), monospace; font-size: 10px;
    letter-spacing: 0.12em; color: var(--blue); text-transform: uppercase;
  }
  .oem-tile .ttl { font-size: 13.5px; font-weight: 600; color: var(--slate-900); margin-top: 4px; }
  .oem-tile .sub { font-family:var(--font-mono), monospace; font-size: 10.5px; color: var(--slate-500); margin-top: 2px; letter-spacing: 0.04em; }

  .oem-device {
    background: var(--navy); color: white; border-color: var(--navy);
    display: flex; align-items: center; gap: 14px;
  }
  .oem-device .led { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px rgba(0,60,203,0.7); }
  .oem-device .nm { font-family:var(--font-mono), monospace; font-size: 12px; letter-spacing: 0.06em; }
  .oem-device .ports { display: flex; gap: 4px; margin-left: auto; }
  .oem-device .port { width: 8px; height: 14px; border-radius: 2px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); }
  .oem-device .v { font-family:var(--font-mono), monospace; font-size: 10px; color: rgba(255,255,255,0.55); }

  .oem-arrow {
    text-align: center;
    font-family:var(--font-mono), monospace; font-size: 10.5px;
    color: var(--slate-500); letter-spacing: 0.08em;
    display: flex; align-items: center; gap: 8px; justify-content: center;
  }
  .oem-arrow::before, .oem-arrow::after {
    content: ""; flex: 1; height: 1px; background: var(--border);
  }

  .oem-api {
    background: white;
  }
  .oem-api code {
    display: block; margin-top: 8px;
    font-family: var(--font-mono), monospace; font-size: 11px;
    color: var(--slate-700); background: var(--bg-2);
    border-radius: 6px; padding: 8px 10px;
    border: 1px solid var(--border-soft);
  }
  .oem-api code .m { color: var(--blue); font-weight: 600; }
  .oem-api code .p { color: var(--honey); }
  .oem-api-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--slate-600); }
  .oem-api-chips {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .oem-api-chips li {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: var(--bg, #f8fafc);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    font-family: var(--font-mono), monospace;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: var(--slate-700);
  }
  .oem-api-disclaimer {
    margin-top: 10px;
    font-family: var(--font-mono), monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--slate-500);
    text-transform: uppercase;
  }

  .oem-portal {
    background: white;
  }
  .oem-portal .head { display: flex; align-items: center; gap: 8px; }
  .oem-portal .pill {
    margin-left: auto;
    font-family:var(--font-mono), monospace; font-size: 9.5px;
    color: var(--blue); background: var(--blue-50);
    padding: 3px 7px; border-radius: 4px; letter-spacing: 0.06em;
  }
  .oem-portal .grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 10px;
  }
  .oem-portal .stat {
    border: 1px solid var(--border-soft); border-radius: 6px; padding: 7px 9px;
  }
  .oem-portal .stat .l { font-family:var(--font-mono), monospace; font-size: 9px; color: var(--slate-500); letter-spacing: 0.06em; text-transform: uppercase; }
  .oem-portal .stat .v { font-size: 14px; font-weight: 600; color: var(--slate-900); margin-top: 2px; }

  /* Why OEM cards */
  .oem-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

  /* Architecture diagram */
  .oem-arch {
    background: white; border: 1px solid var(--border-soft);
    border-radius: 22px; padding: 36px;
  }
  .oem-arch-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
    position: relative;
  }
  .oem-arch-col {
    padding: 0 22px;
    border-right: 1px dashed var(--border);
  }
  .oem-arch-col:last-child { border-right: 0; }
  .oem-arch-col h4 {
    font-family:var(--font-mono), monospace; font-size: 11px;
    color: var(--blue); letter-spacing: 0.12em; text-transform: uppercase;
    margin-bottom: 18px;
  }
  .oem-arch-col h3 { font-size: 17px; }
  .oem-arch-col p { font-size: 13.5px; color: var(--slate-700); margin-top: 8px; line-height: 1.5; }
  .oem-arch-col ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; }
  .oem-arch-col li {
    font-family: var(--font-mono), monospace; font-size: 11px;
    color: var(--slate-700); display: flex; gap: 6px; align-items: center;
  }
  .oem-arch-col li::before { content:""; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); }

  /* Code/spec snippet */
  .oem-spec {
    display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch;
  }
  .oem-spec .codecard {
    background: var(--navy); color: #C7D5F5;
    border-radius: 16px; padding: 0;
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }
  .oem-spec .codecard .bar {
    background: rgba(255,255,255,0.04);
    padding: 10px 16px;
    font-family:var(--font-mono), monospace; font-size: 11px;
    color: #93B4FF; letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex; justify-content: space-between; align-items: center;
  }
  .oem-spec .codecard pre {
    margin: 0; padding: 18px 20px;
    font-family: var(--font-mono), monospace; font-size: 12px;
    line-height: 1.65; color: #C7D5F5;
    overflow-x: auto;
  }
  .oem-spec .codecard .k { color: #7FA8FF; }
  .oem-spec .codecard .s { color: #F3D8A2; }
  .oem-spec .codecard .c { color: #65738A; }
  .oem-spec .codecard .n { color: #93D8B0; }

  /* Use cases */
  .uc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  .uc {
    background: white; border: 1px solid var(--border-soft);
    border-radius: 18px; padding: 28px;
  }
  .uc .tag {
    font-family: var(--font-mono), monospace; font-size: 10.5px;
    color: var(--blue); letter-spacing: 0.12em; text-transform: uppercase;
  }
  .uc h3 { font-size: 18px; margin-top: 8px; }
  .uc p { font-size: 14px; color: var(--slate-700); margin-top: 10px; line-height: 1.55; }

  /* Process timeline */
  .timeline { position: relative; padding-left: 22px; }
  .timeline::before {
    content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px;
    width: 1px; background: var(--border);
  }
  .timeline .step { position: relative; padding: 18px 0 18px 28px; border-bottom: 1px solid var(--border-soft); }
  .timeline .step:last-child { border-bottom: 0; }
  .timeline .step::before {
    content: ""; position: absolute; left: -22px; top: 24px;
    width: 13px; height: 13px; border-radius: 50%;
    background: white; border: 2px solid var(--blue);
  }
  .timeline .step .num {
    font-family:var(--font-mono), monospace; font-size: 10.5px;
    color: var(--blue); letter-spacing: 0.12em;
  }
  .timeline .step h3 { font-size: 17px; margin-top: 6px; }
  .timeline .step p { font-size: 14px; color: var(--slate-700); margin-top: 6px; line-height: 1.55; max-width: 720px; }

  @media (max-width: 980px) {
    .oem-hero-grid { grid-template-columns: 1fr; }
    .oem-why { grid-template-columns: 1fr; }
    .oem-arch-grid { grid-template-columns: 1fr; }
    .oem-arch-col { border-right: 0; border-bottom: 1px dashed var(--border); padding: 22px 0; }
    .oem-arch-col:last-child { border-bottom: 0; }
    .oem-spec, .uc-grid { grid-template-columns: 1fr; }
  }

/* ============================================================
   kontakt.html inline CSS
   ============================================================ */
  .kt-hero { padding: 80px 0 56px; }
  .kt-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }

  /* Form card */
  .kt-form {
    background: white; border: 1px solid var(--border);
    border-radius: 22px; padding: 36px;
    box-shadow: var(--shadow-lg);
  }
  .kt-form h3 { font-size: 20px; font-weight: 600; }
  .kt-form .ds { font-size: 14px; color: var(--slate-500); margin-top: 6px; }

  .kt-reassure {
    margin: 14px 0 0;
    padding: 12px 14px;
    background: var(--blue-50, #eef2ff);
    border-left: 3px solid var(--blue);
    border-radius: 0 8px 8px 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--slate-800, var(--slate-700));
  }
  .kt-adv-note {
    margin: 0 0 14px;
    font-family: var(--font-mono), monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--slate-500);
    text-transform: uppercase;
  }

  .kt-form form { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
  .kt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .kt-field { display: flex; flex-direction: column; gap: 6px; }
  .kt-field label {
    font-family:var(--font-mono), monospace; font-size: 10.5px;
    letter-spacing: 0.1em; color: var(--slate-500); text-transform: uppercase;
  }
  .kt-field label .req { color: var(--blue); }
  .kt-field input, .kt-field select, .kt-field textarea {
    border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit; font-size: 14px; color: var(--slate-900);
    background: white; transition: border-color .15s, box-shadow .15s;
  }
  .kt-field input:focus, .kt-field select:focus, .kt-field textarea:focus {
    outline: none; border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0,60,203,0.12);
  }
  .kt-field textarea { resize: vertical; min-height: 110px; }

  .kt-radio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .kt-radio {
    display: flex; align-items: flex-start; gap: 10px;
    border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 12px; cursor: pointer; background: white;
    transition: border-color .15s, background .15s;
  }
  .kt-radio:hover { border-color: var(--slate-300); }
  .kt-radio input { margin-top: 3px; accent-color: var(--blue); }
  .kt-radio .nm { font-size: 13px; font-weight: 600; color: var(--slate-900); }
  .kt-radio .ds { font-size: 11.5px; color: var(--slate-500); margin-top: 2px; }
  .kt-radio.sel { border-color: var(--blue); background: var(--blue-50); }

  .kt-sub-label {
    font-family:var(--font-mono), monospace; font-size: 10.5px;
    color: var(--slate-500); letter-spacing: 0.10em; text-transform: uppercase;
    margin-bottom: 8px;
  }
  .kt-mini {
    display: inline-block;
    font-family:var(--font-mono), monospace; font-size: 9.5px;
    color: var(--honey); letter-spacing: 0.06em; text-transform: uppercase;
    padding: 1px 5px; border-radius: 3px;
    background: var(--honey-50); border: 1px solid rgba(185,119,14,0.20);
    margin-left: 4px; vertical-align: middle;
  }
  .kt-check-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  @media (max-width: 720px) { .kt-check-grid { grid-template-columns: 1fr 1fr; } }
  .kt-check {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 12px; cursor: pointer; background: white;
    transition: border-color .15s, background .15s;
    font-size: 12.5px; font-family: var(--font-mono), monospace; color: var(--slate-700);
  }
  .kt-check:hover { border-color: var(--slate-300); }
  .kt-check input { accent-color: var(--blue); }
  .kt-check.sel { border-color: var(--blue); background: var(--blue-50); color: var(--slate-900); }

  .kt-submit-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 6px; gap: 16px;
  }
  .kt-priv { font-size: 12px; color: var(--slate-500); line-height: 1.5; }

  /* Right column */
  .kt-side { display: flex; flex-direction: column; gap: 22px; }
  .kt-card {
    background: white; border: 1px solid var(--border-soft);
    border-radius: 16px; padding: 24px;
  }
  .kt-card h4 {
    font-size: 11px; font-family:var(--font-mono), monospace; letter-spacing: 0.12em;
    color: var(--blue); text-transform: uppercase; margin-bottom: 14px;
  }
  .kt-card .item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--border-soft); }
  .kt-card .item:last-child { border-bottom: 0; padding-bottom: 0; }
  .kt-card .item:first-child { padding-top: 0; }
  .kt-card .ico {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--blue-50); color: var(--blue);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .kt-card .lab {
    font-family:var(--font-mono), monospace; font-size: 10px;
    color: var(--slate-500); letter-spacing: 0.06em; text-transform: uppercase;
  }
  .kt-card .v { font-size: 14px; color: var(--slate-900); margin-top: 2px; font-weight: 500; }
  .kt-card .v a { color: var(--slate-900); text-decoration: none; border-bottom: 1px solid var(--slate-300); }
  .kt-card .v a:hover { border-bottom-color: var(--blue); color: var(--blue); }

  .kt-process {
    background: var(--navy); color: white;
    border-radius: 16px; padding: 28px;
    position: relative; overflow: hidden;
  }
  .kt-process::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(360px 240px at 100% 0%, black, transparent 80%);
    -webkit-mask-image: radial-gradient(360px 240px at 100% 0%, black, transparent 80%);
  }
  .kt-process > * { position: relative; z-index: 1; }
  .kt-process h4 {
    font-size: 11px; font-family:var(--font-mono), monospace; letter-spacing: 0.12em;
    color: #93B4FF; text-transform: uppercase; margin-bottom: 18px;
  }
  .kt-process .step {
    display: flex; gap: 14px; align-items: flex-start; padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .kt-process .step:first-of-type { border-top: 0; padding-top: 0; }
  .kt-process .step .n {
    font-family:var(--font-mono), monospace; font-size: 11px;
    color: #93B4FF; letter-spacing: 0.08em; min-width: 28px;
  }
  .kt-process .step .nm { font-size: 14px; font-weight: 500; color: white; }
  .kt-process .step .ds { font-size: 12.5px; color: #C7D5F5; margin-top: 3px; line-height: 1.5; }

  .kt-sla {
    border: 1px solid var(--border-soft); border-radius: 16px;
    padding: 22px; background: white;
    display: flex; align-items: center; gap: 14px;
  }
  .kt-sla .ico {
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--honey-50); color: var(--honey);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .kt-sla .nm { font-size: 14px; font-weight: 600; color: var(--slate-900); }
  .kt-sla .ds { font-size: 12.5px; color: var(--slate-500); margin-top: 2px; }

  /* Multi-step flow */
  .kt-stepper {
    display: flex; gap: 6px; margin-bottom: 20px;
  }
  .kt-stepper .stp {
    flex: 1; height: 4px; border-radius: 2px;
    background: var(--border); transition: background .25s;
  }
  .kt-stepper .stp.done { background: var(--blue); }
  .kt-stepper .stp.cur { background: var(--blue); }

  .kt-step-meta {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 4px;
  }
  .kt-step-meta .num {
    font-family:var(--font-mono), monospace; font-size: 10.5px;
    color: var(--blue); letter-spacing: 0.12em; text-transform: uppercase;
  }
  .kt-step-meta .of {
    font-family:var(--font-mono), monospace; font-size: 10.5px;
    color: var(--slate-500); letter-spacing: 0.08em;
  }
  .kt-step-q {
    font-size: 22px; font-weight: 600; color: var(--slate-900);
    line-height: 1.25; margin-bottom: 18px;
  }
  .kt-help {
    font-size: 13.5px; color: var(--slate-600); line-height: 1.55;
    margin: -8px 0 18px 0; max-width: 640px;
  }

  .kt-step { display: none; }
  .kt-step.active { display: block; }

  .kt-opt-list { display: flex; flex-direction: column; gap: 8px; }
  .kt-opt {
    display: flex; align-items: flex-start; gap: 12px;
    border: 1px solid var(--border); border-radius: 10px;
    padding: 14px 16px; cursor: pointer; background: white;
    transition: border-color .15s, background .15s;
  }
  .kt-opt:hover { border-color: var(--slate-300); }
  .kt-opt input { margin-top: 3px; accent-color: var(--blue); flex-shrink: 0; }
  .kt-opt .nm { font-size: 14px; font-weight: 600; color: var(--slate-900); }
  .kt-opt .ds { font-size: 12.5px; color: var(--slate-500); margin-top: 3px; line-height: 1.5; }
  .kt-opt.sel { border-color: var(--blue); background: var(--blue-50); }

  .kt-opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  @media (max-width: 720px) { .kt-opt-grid { grid-template-columns: 1fr; } }

  .kt-step-nav {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 22px; gap: 12px;
  }
  .kt-back {
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; font-size: 13.5px; color: var(--slate-600);
    padding: 10px 14px; border-radius: 8px;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .kt-back:hover { color: var(--slate-900); background: var(--bg); }
  .kt-back[disabled] { visibility: hidden; }

  .kt-microcopy {
    margin-top: 16px; padding: 14px 16px;
    background: var(--bg); border-left: 3px solid var(--blue);
    border-radius: 6px;
    font-size: 13px; color: var(--slate-700); line-height: 1.55;
  }

  /* Advanced collapsible */
  .kt-advanced {
    margin-top: 22px;
    background: white; border: 1px solid var(--border-soft);
    border-radius: 14px; overflow: hidden;
  }
  .kt-advanced summary {
    cursor: pointer; list-style: none;
    padding: 16px 20px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 14px; font-weight: 600; color: var(--slate-900);
  }
  .kt-advanced summary::-webkit-details-marker { display: none; }
  .kt-advanced summary::after {
    content: "+"; font-family:var(--font-mono), monospace; font-size: 18px;
    color: var(--blue);
  }
  .kt-advanced[open] summary::after { content: "−"; }
  .kt-advanced summary .hint {
    font-family:var(--font-mono), monospace; font-size: 10.5px;
    color: var(--slate-500); letter-spacing: 0.06em; text-transform: uppercase;
    font-weight: 400; margin-left: auto; margin-right: 12px;
  }
  .kt-advanced .body {
    padding: 0 20px 20px;
    border-top: 1px dashed var(--border-soft);
    padding-top: 18px;
  }
  .kt-adv-group { margin-bottom: 16px; }
  .kt-adv-group:last-child { margin-bottom: 0; }
  .kt-adv-group .lab {
    font-family:var(--font-mono), monospace; font-size: 10.5px;
    color: var(--slate-500); letter-spacing: 0.10em; text-transform: uppercase;
    margin-bottom: 8px;
  }

  /* Confirmation */
  .kt-ok {
    display: none;
    background: var(--blue-50); border: 1px solid var(--blue-100);
    border-radius: 12px; padding: 18px;
    color: var(--blue-700); font-size: 14px;
    align-items: flex-start; gap: 12px;
  }
  .kt-ok.show { display: flex; }
  /* Backend-failure card (contact.php redirected with ?error=1) */
  .kt-err {
    display: none;
    background: #fff5f5; border: 1px solid #e5484d;
    border-radius: 12px; padding: 18px;
    color: #7a1f1f; font-size: 14px;
    align-items: flex-start; gap: 12px;
  }
  .kt-err.show { display: flex; }
  .kt-err b { color: #b42318; }
  .kt-ok .ico {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--blue); color: white;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .kt-ok b { color: var(--blue-700); }

  /* FAQ */
  .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .faq {
    border: 1px solid var(--border-soft); border-radius: 12px;
    background: white; padding: 18px 20px;
  }
  .faq summary {
    cursor: pointer; list-style: none;
    font-size: 14.5px; font-weight: 600; color: var(--slate-900);
    display: flex; justify-content: space-between; gap: 12px; align-items: center;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "+"; font-family:var(--font-mono), monospace; font-size: 18px;
    color: var(--blue); transition: transform .2s;
  }
  .faq[open] summary::after { content: "−"; }
  .faq p { margin-top: 10px; font-size: 13.5px; color: var(--slate-700); line-height: 1.6; }

  @media (max-width: 980px) {
    .kt-hero-grid, .kt-row, .kt-radio-grid, .faq-grid { grid-template-columns: 1fr; }
  }


/* ============================================================
   Missing styles from design/shared.css that weren't in any
   per-page inline <style> block. Critical: feat-list, proto-tile,
   direct-list, ex-base dark cols, chip, card variants.
   ============================================================ */

/* Generic grid variants (cols 2, 6 not previously covered) */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .grid-6 { grid-template-columns: 1fr; } }

/* Card variants */
.card.warn .ico-wrap { background: var(--bg-2); color: var(--slate-700); }
.card.dark { background: var(--navy); border-color: var(--navy); color: white; }
.card.dark h3, .card.dark .num, .card.dark p { color: white; }
.card.dark p { color: #C7D5F5; }
.card.dark .num { color: #93B4FF; }

/* Generic chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 6px;
  font-family: var(--font-mono), monospace; font-size: 10.5px;
  letter-spacing: 0.05em; color: var(--slate-700);
  background: white; border: 1px solid var(--border);
}
.chip.blue { color: var(--blue); border-color: var(--blue-100); background: var(--blue-50); }
.chip.green { color: var(--green); border-color: rgba(22,138,74,0.25); background: rgba(22,138,74,0.06); }
.chip.honey { color: var(--honey); border-color: rgba(185,119,14,0.25); background: var(--honey-50); }

/* Feat-list (checked feature list — used by oem boundary, plattform data-model, data-quality, gateway-health, section-intro features extension) */
.feat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.feat-list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14.5px; color: var(--slate-700); line-height: 1.5;
}
.feat-list li .check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue-50); color: var(--blue);
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.feat-list li .check svg { width: 11px; height: 11px; }
.feat-list li b { color: var(--slate-900); font-weight: 600; }

/* ex-base / dark-band ds-col dark variant (integration-spotlight) */
.ex-base .ds-col.dark,
.dark-band .ds-col.dark {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.ex-base .ds-col.dark.accent-honey,
.dark-band .ds-col.dark.accent-honey {
  border-color: rgba(255,204,102,0.18);
}

/* Proto-tiles inside dark band ds-col */
.proto-tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 22px;
}
.proto-tile {
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  transition: border-color .15s, background .15s, transform .15s;
}
.proto-tile:hover {
  border-color: rgba(147,180,255,0.35);
  background: rgba(147,180,255,0.05);
  transform: translateY(-1px);
}
.proto-tile .pt-name {
  font-family: var(--font-mono), monospace; font-size: 12.5px;
  color: #93B4FF; letter-spacing: 0.06em; font-weight: 600;
}
.proto-tile .pt-desc {
  font-size: 12.5px; color: #C7D5F5; margin-top: 5px; line-height: 1.5;
}
@media (max-width: 720px) { .proto-tiles { grid-template-columns: 1fr; } }

/* Direct-list inside accent-honey dark col */
.direct-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 22px;
}
.direct-item {
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
}
.direct-item.live {
  border-color: rgba(255,204,102,0.25);
  background: linear-gradient(180deg, rgba(255,204,102,0.07), rgba(255,204,102,0.02));
}
.direct-item .di-head { display: flex; align-items: center; gap: 10px; }
.direct-item .di-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #93B4FF; flex-shrink: 0;
}
.direct-item.live .di-dot {
  background: var(--honey);
  box-shadow: 0 0 0 4px rgba(255,204,102,0.15);
}
.direct-item .di-name {
  font-family: var(--font-mono), monospace; font-size: 13px;
  color: white; letter-spacing: 0.04em; font-weight: 600;
}
.direct-item .di-status {
  margin-left: auto; font-size: 10.5px;
  font-family: var(--font-mono), monospace;
  color: var(--honey); letter-spacing: 0.10em;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(255,204,102,0.10);
  border: 1px solid rgba(255,204,102,0.25);
}
.direct-item .di-status.alt {
  color: #93B4FF;
  background: rgba(147,180,255,0.08);
  border-color: rgba(147,180,255,0.20);
}
.direct-item .di-desc {
  font-size: 13px; color: #C7D5F5;
  margin-top: 8px; line-height: 1.55;
}
.di-note {
  font-size: 12.5px; color: #93B4FF;
  margin-top: 16px; line-height: 1.55;
  font-style: italic;
}

/* Divider */
.divider { height: 1px; background: var(--border-soft); }

/* ============ NARROW-WIDTH OVERRIDES ============
   These must live at the end of the file so they win source-order
   priority over duplicate page-scoped @media (max-width: 980px) blocks
   that otherwise re-introduce 2-col grids at narrow widths.            */
@media (max-width: 720px) {
  .paths.cols-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ispec .row { grid-template-columns: 1fr; gap: 4px; padding: 12px 18px; }
  .ispec .row.head { display: none; }
  .tenants .tr,
  .tenants .row { grid-template-columns: 1fr; gap: 4px; padding: 12px 18px; }
  .tenants .tr.head,
  .tenants .row.head { display: none; }
  .reskin { grid-template-columns: 1fr; }
  .kt-check-grid { grid-template-columns: 1fr; }
  .ad-grid { grid-template-columns: 1fr; }
  .ds-split.ds-split-3 { grid-template-columns: 1fr; }
  .bv-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .pl-bv-tldr-list { grid-template-columns: 1fr; }
}

/* Demo caption on the hero product mocks (operators, white-label, OEM). The sites, customer
   names, counts, dates and percentages in those mocks are invented; the caption says so next to
   them, so a screenshot of the mock alone cannot pass as customer evidence. */
.mock-note { margin: 0; font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-700); }
.ops-mock .mock-note { border-top: 1px solid var(--border-soft); background: #fbfcfe; padding: 8px 16px; }
.oem-vis .mock-note { margin-top: 12px; text-align: center; }
.wl-stack .mock-note { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); background: white; border: 1px solid var(--border); padding: 5px 11px; border-radius: 999px; box-shadow: var(--shadow-md); z-index: 5; white-space: nowrap; }
.tenants .mock-note { padding: 9px 14px; border-top: 1px solid var(--border-soft); background: #fbfcfe; }
/* In-page anchors (e.g. #first-site) land below the sticky header; the story pages get this from
   scroll-padding on .has-story, every other page needs it here. Same height as the story header. */
section[id] { scroll-margin-top: var(--story-header, 68px); }
/* Caption inside the small audiences illustration: same size as the main .tenants note, so it reads
   as a label, not a footnote. */
.ai-wl .tenants .mock-note { font-size: 10.5px; letter-spacing: 0.06em; padding: 6px 6px 2px; color: var(--slate-500); }

/* ============ Visual fixes 2026-09-30 (site review feedback) ============ */
/* Header CTA: the short/compact label variants are swapped in by story.css on story pages only;
   every other page loads site.css alone and showed all three labels side by side. */
.btn-label-short, .btn-label-compact { display: none; }

/* Contact aside: the process heading is an h2 in the markup but only h4 was styled, so it
   rendered as a dark default h2 on the navy panel. */
.kt-process h2 {
  font-size: 11px; font-family: var(--font-mono), monospace; font-weight: 500; line-height: 1.4;
  letter-spacing: 0.12em; color: #93B4FF; text-transform: uppercase; margin: 0 0 18px;
}

/* Betreiber entry stages: the generic .entry-card ul (dashed rule, 16px + 16px spacing) also hit
   the use-case list under its label, and its 6x1 px marker read as an underscore. */
.entry-card .entry-uc { margin-top: 0; border-top: 0; padding-top: 0; }
.entry-card .entry-uc li { display: block; }
.entry-card .entry-uc li::before { top: 8px; width: 4px; height: 4px; margin-top: 0; border-radius: 50%; background: var(--slate-400); }

/* Betreiber hero mock: four stat tiles and two panels did not fit next to the 170px sidebar;
   values and alert rows wrapped word by word. Desktop only: at 980px and below the existing rules
   stack the sidebar and panels. */
@media (min-width: 981px) {
  .ops-mock .body { grid-template-columns: 132px minmax(0, 1fr); }
  .ops-mock .side { padding: 16px 8px; }
  .ops-mock .main { padding: 18px 18px; }
  .ops-mock .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-mock .grid2 { grid-template-columns: minmax(0, 1fr); }
  .ops-chart { height: 72px; }
}
.ops-mock .stat .v { white-space: nowrap; }
.ops-mock .top .url { min-width: 0; overflow: hidden; white-space: nowrap; }
.ops-mock .top .acct { flex-shrink: 0; }
.ops-list .row { display: grid; grid-template-columns: 5px minmax(0, 1fr) auto; align-items: center; }
.ops-list .row .v { margin-left: 0; white-space: nowrap; }

/* White-label hero: the tag pill wrapped onto two lines on top of portal A, and portal A covered
   the header of portal B. The pill now sits above the stack, portal B clears portal A's header
   and ends above the demo caption. */
.wl-stack { height: 590px; margin-top: 44px; }
.wl-stack .wl-base-tag { top: -40px; white-space: nowrap; }
.wl-portal.b { bottom: 26px; }

/* OEM "Kurz gesagt" head: lead paragraph sat directly under the h2 (same spacing as .section-head). */
.kg-head h2 + p { margin-top: 14px; font-size: 17px; color: var(--slate-700); line-height: 1.6; }

/* Platform "Kurz gesagt": five short items wrapped 4 + 1 at desktop width. */
@media (min-width: 1100px) {
  .pl-bv-tldr-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 561px) and (max-width: 1099px) {
  .pl-bv-tldr-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============ Responsive fixes 2026-09-30 (phone/tablet sweep) ============ */
/* Header. Phones: one row with the short CTA label (where the market has one) and the region
   code only. This was scoped to
   the story pages (story.css) and every other page wrapped the header into two or three rows. */
@media (max-width: 720px) {
  .header .nav { position: relative; flex-wrap: nowrap; min-height: 0; gap: 6px; padding: 6px 14px; }
  .header .brand { flex: 0 1 auto; min-width: 0; gap: 7px; }
  .header .nav-actions { position: static; flex: 0 0 auto; flex-wrap: nowrap; gap: 5px; margin-left: auto; }
  .header .region-selector { position: static; }
  .header .region-selector > summary { gap: 5px; padding: 5px 7px; font-size: 11px; }
  .header .region-selector .rl-panel { top: calc(100% + 8px); right: 14px; left: 14px; width: auto; max-width: none; max-height: calc(100svh - 82px); overflow-y: auto; }
  .header .region-selector .rl-sep,
  .header .region-selector .rl-lang { display: none; }
  .header .btn { height: 32px; gap: 6px; padding: 0 9px; font-size: 11px; }
  .btn.has-short .btn-label-full { display: none; }
  .btn.has-short .btn-label-short { display: inline; }
}
@media (max-width: 370px) {
  .header .nav { gap: 5px; padding: 6px 10px; }
  .header .btn { padding: 0 8px; }
  .btn.has-compact .btn-label-full, .btn.has-compact .btn-label-short { display: none; }
  .btn.has-compact .btn-label-compact { display: inline; }
}
/* Small laptops / landscape tablets: links + actions need ~1080px on one row; tighter spacing and
   the short CTA label keep the header on one row down to the 981px menu breakpoint. */
@media (min-width: 981px) and (max-width: 1099px) {
  .nav { gap: 16px; padding-left: 20px; padding-right: 20px; }
  .nav-links { gap: 16px; margin-left: 0; }
  .header .btn.has-short .btn-label-full { display: none; }
  .header .btn.has-short .btn-label-short { display: inline; }
}

/* Grids whose modifier class (two classes) outranked the one-class mobile rule, or whose later
   duplicate block overrode the earlier media query, so they never collapsed. */
@media (max-width: 980px) {
  .kg-grid.kg-grid-cols-2, .kg-grid.kg-grid-cols-4 { grid-template-columns: 1fr; }
  .reskin { grid-template-columns: 1fr 1fr; }
  .ds-split, .ds-split.ds-split-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .reskin { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .pl-bv-cross-grid { grid-template-columns: 1fr; }
}
.ds-col { min-width: 0; overflow-wrap: break-word; }

/* ============ Mobile/tablet menu (below 980px) ============ */
/* A <details> burger at the end of the header actions; the panel drops down under the header,
   full width. Hidden on desktop, where .nav-links shows the same links. header.js adds Escape /
   click-outside closing; without it the menu still opens and closes by tapping the button. */
.nav-menu { display: none; }
@media (max-width: 980px) {
  .header .nav { position: relative; }
  .header .nav-actions { position: static; }
  .nav-menu { display: block; position: static; }
  .nav-menu > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: white; color: var(--slate-900);
  }
  .nav-menu > summary::-webkit-details-marker { display: none; }
  .nav-menu > summary:focus-visible { outline: 3px solid #5b8fff; outline-offset: 2px; }
  .nav-menu > summary svg { width: 20px; height: 20px; }
  .nav-menu .nav-menu-close { display: none; }
  .nav-menu[open] .nav-menu-open { display: none; }
  .nav-menu[open] .nav-menu-close { display: block; }
  .nav-menu-panel {
    position: absolute; top: 100%; left: 0; right: 0;
    background: white; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(15, 30, 60, 0.12);
    padding: 8px 20px 16px; max-height: calc(100svh - 70px); overflow-y: auto;
  }
  .nav-menu-panel ul { list-style: none; margin: 0; padding: 0; }
  .nav-menu-panel a {
    display: flex; align-items: center; min-height: 48px; padding: 0 4px;
    font-size: 16px; font-weight: 500; color: var(--slate-900); border-bottom: 1px solid var(--border-soft);
  }
  .nav-menu-panel a[aria-current="page"] { color: var(--blue); font-weight: 600; box-shadow: inset 3px 0 0 var(--blue); padding-left: 12px; }
  .nav-menu-group ul a[aria-current="page"] { padding-left: 24px; }
  .nav-menu-heading {
    display: block; padding: 16px 4px 4px; font-family: var(--font-mono), monospace; font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-500);
  }
  .nav-menu-group ul a { padding-left: 16px; font-size: 15px; }
}
@media (max-width: 720px) {
  .nav-menu > summary { width: 34px; height: 34px; border-radius: 8px; }
  .nav-menu > summary svg { width: 18px; height: 18px; }
  .nav-menu-panel { padding: 4px 14px 12px; }
}
/* Narrow phones: wordmark + CH pill + CTA + burger need more room than 320-400px gives; the
   wordmark ran under the region pill. Smaller wordmark, pill without its chevron. */
@media (max-width: 400px) {
  .header .brand-name { font-size: 15px; }
  .header .region-selector > summary::after { display: none; }
}
@media (max-width: 370px) {
  .header .brand-name { font-size: 13px; }
}
@media (max-width: 370px) {
  .header .btn .arr { display: none; }
}

/* ============ Full-matrix fixes 2026-09-30 (all listed screen sizes) ============ */
/* /plattform/ "Vier Linien" strip (items "Prinzip 01-04", .stats-strip): two 1fr columns cannot shrink below "Schichtentrennung" at 28px
   (~300px each), so phones cut off the right column. One column up to 640px, shrinkable above. */
@media (max-width: 980px) {
  .stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-strip h3 { font-size: 24px; hyphens: auto; overflow-wrap: break-word; }
}
@media (max-width: 640px) {
  .stats-strip { grid-template-columns: minmax(0, 1fr); }
}
/* Monitoring Box note card: its two large buttons are nowrap and ~250px wide; the card's content box
   is narrower below ~360px, so they ran into the padding and past the border at 320px. */
@media (max-width: 480px) {
  .mb-note { padding: 24px 20px; }
  .mb-note-cta .btn { white-space: normal; text-align: center; justify-content: center; max-width: 100%; }
}
/* "Vier Linien" strip: four columns clip "Mandantenfähig" up to ~1180px. */
@media (min-width: 981px) and (max-width: 1180px) {
  .stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-strip .item:nth-child(2n) { border-right: 0; }
  .stats-strip .item:nth-child(-n+2) { border-bottom: 1px solid var(--border-soft); }
}
/* Platform "Eine Grundlage" strip: heading column squeezed to one word per line at 981-1180px.
   Heading on its own row, the four pills below. */
@media (min-width: 981px) and (max-width: 1180px) {
  .plat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
  .plat-strip > div:first-child { grid-column: 1 / -1; }
}
/* White-label customer table: below 981px the header row is hidden, so each value gets its column
   name as a label (data-label from the template). Name on its own row, four labelled values below. */
@media (max-width: 980px) {
  .tenants .tr:not(.head) { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 10px; align-items: start; }
  .tenants .qa[data-label] { align-items: center; row-gap: 0; }
  .tenants .tr:not(.head) > div:first-child { grid-column: 1 / -1; }
  .tenants [data-label]::before {
    content: attr(data-label); display: block; font-family: var(--font-mono), monospace; font-size: 9.5px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 2px;
  }
  .tenants .qa[data-label] { flex-wrap: wrap; }
  .tenants .qa[data-label]::before { flex-basis: 100%; }
}
@media (max-width: 560px) {
  .tenants .tr:not(.head) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Integrations table: one long word ("Notlicht-/Sicherheitsbeleuchtungsdaten") widened its row's
   columns, so that row no longer lined up with the others and overflowed at 320px. */
.ispec .row > * { min-width: 0; }
.ispec .meta { overflow-wrap: anywhere; hyphens: auto; }
/* Long German words in card headings break with a hyphen where the browser can, not mid-word. */
.ds-col h3, .mb-note h3 { hyphens: auto; }
@media (max-width: 380px) {
  .ds-col h3 { font-size: 19px; }
}
/* Buttons in content: nowrap labels ran past the button edge on 320px phones. */
@media (max-width: 480px) {
  main .btn { white-space: normal; height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; text-align: center; justify-content: center; line-height: 1.3; }
  main .btn-lg { min-height: 48px; }
}
/* White-label hero at 320-400px: the tag pill ran past the screen edges, a stat label was cut. */
@media (max-width: 400px) {
  .wl-stack .wl-base-tag { font-size: 9px; letter-spacing: 0.02em; padding: 5px 9px; }
  .wl-portal .stat .l { letter-spacing: 0; font-size: 8.5px; hyphens: manual; }
}
/* Short pages (imprint) left a blank band under the footer on tall screens. */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
/* Studio/Dashboard mock rows: the value ("12 Standorte") wrapped and touched the row edge at 320px. */
.ds-col .ds-mock .row { display: grid; grid-template-columns: 5px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; }
.ds-col .ds-mock .row .v { white-space: nowrap; margin-left: 0; }
@media (max-width: 400px) {
  .ds-col .ds-mock .row { grid-template-columns: 5px minmax(0, 1fr); row-gap: 2px; overflow-wrap: normal; }
  .ds-col .ds-mock .row .v { grid-column: 2; }
}
@media (max-width: 400px) {
  /* the portal brand line wrapped to two lines and portal A covered portal B's header */
  .wl-portal .brand-block { font-size: 10px; white-space: nowrap; }
}
@media (max-width: 560px) {
  .wl-stack { height: 640px; }
}
@media (min-width: 561px) and (max-width: 980px) {
  /* single-column hero: the portals are 92% of the full column and grow with it; at 980px portal A
     reached into portal B's header at 590px */
  .wl-stack { height: 620px; }
}
/* Value-ladder example card on phones: label and flow side by side squeezed both into 4-5 line
   columns at 320px; stack them (side by side still needs 3 lines each up to ~640px). */
@media (max-width: 640px) {
  .pl-bv-example-rail { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* Desktop "Solutions" dropdown dismissed with Escape (header.js) stays closed while hovered/focused. */
.nav-dd.is-dismissed .nav-dd-panel { opacity: 0; visibility: hidden; pointer-events: none; }

/* ============ Large screens at 100% scaling (QHD / 4K) ============ */
/* The site is sized in px for a ~1920x1080 reference; on a QHD or 4K screen without OS scaling the
   1488px column and 16px type ended up at a fraction of the screen. The content columns (every
   visible block sits in exactly one .container or .chapter-inner, none nested) and the fixed story
   controls are zoomed so the content keeps its ~1920x1080 proportions. Not html/body: zoom there
   also scales vw/svh, which doubled the full-height story chapters and overflowed the page.
   Gated on width plus aspect ratio, not height: a maximised browser window never reaches the screen
   height (taskbar + browser UI), e.g. ~2560x1300 on a QHD and ~3840x2025 on a 4K screen. Ultrawides
   (wider than 21:10) are handled separately below.
   The sticky header grows with its zoomed container, so the anchor offset follows it. */
/* Ultrawides are gated by height instead: a maximised 3440x1440 / 3840x1600 window (~1300-1465px
   tall) gets 1.2, keeping ~1080px of effective height; 2560x1080 / 3840x1080 stay at 1. */
@media (min-width: 2560px) and (min-aspect-ratio: 21/10) and (min-height: 1250px) {
  .container, .chapter-inner, .chapter-nav, .motion-toggle { zoom: 1.2; }
  :root { --story-header: 82px; }
}
@media (min-width: 2560px) and (max-aspect-ratio: 21/10) {
  .container, .chapter-inner, .chapter-nav, .motion-toggle { zoom: 1.3333; }
  :root { --story-header: 91px; }
}
@media (min-width: 3200px) and (max-aspect-ratio: 21/10) {
  .container, .chapter-inner, .chapter-nav, .motion-toggle { zoom: 1.6667; }
  :root { --story-header: 114px; }
}
@media (min-width: 3840px) and (max-aspect-ratio: 21/10) {
  .container, .chapter-inner, .chapter-nav, .motion-toggle { zoom: 2; }
  :root { --story-header: 137px; }
}
/* Story pages already offset anchors with scroll-padding-top (story.js); the scroll-margin above
   added the header height a second time, so chapter links landed one header height too low. */
.has-story section[id] { scroll-margin-top: 0; }