:root {
  color-scheme: dark;
  /* The navy ground, desaturated to ~37% (from 61%) at the same hue and
     lightness. Luminance contrast is unchanged — blue carries only 7% of
     relative luminance — but pulling chroma out of the ground stops the deck
     reading as one blue-on-blue wash and lets --sky sit on it as a deliberate
     mark rather than a lighter shade of the background. */
  --ink: #1a2a39;
  --ink-deep: #0f1b26;
  --blue: #274872;
  --blue-bright: #5783ab;
  --blue-pale: #dbe8f0;
  --paper: #f7f8f5;
  --white: #ffffff;
  --muted: #6b7d8d;
  /* Accent blue, from the Peakscale palette: its "accent on dark" tone
     (#7ac0e8, itself a lightened form of the brand blue #0580c4), lifted a
     further 8% in lightness at the same hue and saturation. That lift puts it
     at 8.9:1 on --ink — the contrast the old mint accent carried — while
     keeping it in the same family as Capsule's own --blue / --blue-bright,
     which are lifted straight from the Capsule logo. */
  --sky: #9dd0ee;
  /* Lifted from #ff8c73 for the same reason: as a mark on a panel's inner box
     the old coral bottomed out at 4.7:1, the weakest colour in the deck. */
  --coral: #ffa18d;
  --yellow: #f4d35e;

  /* Theme tokens: dark is the default deck theme. */
  --theme-background: var(--ink);
  --theme-vertical-background: var(--ink-deep);
  /* A hair darker than --ink so the nested panel recedes a little further,
     while still sitting one clear step above --ink-deep (the vertical bg). */
  --theme-vertical-panel: #16232f;
  /* The one highlight surface for the vertical stack: a box that needs to stand
     out from its neighbours (the forwarded request, the proxy node, a section
     header). One step lighter than a panel — the emphasis is tonal, not a
     colour accent, so the stack stays a single navy ladder. */
  --theme-panel-emphasis: #253744;
  --theme-text: var(--white);
  --theme-muted: rgba(255, 255, 255, .72);
  --theme-subtle: rgba(255, 255, 255, .62);
  --theme-accent: var(--sky);
  --theme-accent-strong: var(--sky);
  --theme-denied-emphasis: #ffccd8;
  --theme-card: rgba(255, 255, 255, .065);
  --theme-card-subtle: rgba(255, 255, 255, .045);
  --theme-card-tinted: rgba(157, 208, 238, .12);
  --theme-border: rgba(255, 255, 255, .15);
  --theme-border-soft: rgba(255, 255, 255, .09);
  --theme-divider: rgba(255, 255, 255, .18);
  --theme-accent-line: rgba(157, 208, 238, .28);
  --theme-accent-faint: rgba(157, 208, 238, .12);
  --theme-grid: rgba(157, 208, 238, .36);
  --theme-meter-track: rgba(255, 255, 255, .1);
  --theme-shadow: 0 24px 64px rgba(0, 0, 0, .24);
  --panel-background: #253744;

  /* Code and QR surfaces intentionally stay high-contrast in both themes. */
  --code-background: #0d1821;
  --code-text: var(--white);
  --code-muted: rgba(255, 255, 255, .42);
  --qr-background: var(--white);
  --qr-text: var(--ink);

  /* Shared panel language used by the conceptual and capability slides. */
  --panel-radius: 28px;
  --panel-inner-radius: 16px;
  --panel-shadow: 0 20px 56px rgba(0, 0, 0, .2);

  /* Fixed design surface, scaled into Reveal's 1920x1080 canvas. */
  --pad-x: 72px;
  --pad-y: 34px;
  --display: 98px;
  --headline: 69px;
  --headline-line-height: 1.08;
  --body: 26px;
  --small: 16px;
}

body[data-theme="light"] {
  color-scheme: light;
  --theme-background: var(--paper);
  --theme-vertical-background: var(--paper);
  --theme-vertical-panel: var(--white);
  --theme-panel-emphasis: var(--blue-pale);
  --theme-text: var(--ink);
  --theme-muted: var(--muted);
  --theme-subtle: rgba(26, 42, 57, .62);
  --theme-accent: var(--blue-bright);
  --theme-accent-strong: var(--blue);
  --theme-denied-emphasis: #c23855;
  --theme-card: var(--white);
  --theme-card-subtle: #edf1f3;
  --theme-card-tinted: var(--blue-pale);
  --theme-border: rgba(39, 72, 114, .13);
  --theme-border-soft: rgba(39, 72, 114, .09);
  --theme-divider: rgba(39, 72, 114, .18);
  --theme-accent-line: rgba(39, 72, 114, .28);
  --theme-accent-faint: rgba(87, 131, 171, .12);
  --theme-grid: rgba(39, 72, 114, .2);
  --theme-meter-track: #edf1f3;
  --theme-shadow: 0 24px 64px rgba(5, 25, 44, .14);
  --panel-background: var(--white);
  --panel-shadow: 0 20px 56px rgba(5, 25, 44, .12);
}

/* Reveal.js integration
   ---------------------- */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink-deep);
}

.reveal {
  background: var(--ink-deep);
  font-family: Inter, "Helvetica Neue", Arial, ui-sans-serif, sans-serif;
  font-synthesis: none;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

.reveal-viewport {
  background: var(--ink-deep);
}

/* Reveal owns the <section> (position, display, transitions); we keep the
   section itself transparent and declare the surface colour via
   data-background-color (index.html) so Reveal paints it in its dedicated
   .backgrounds layer. Painting the colour on the section instead makes the
   fade transition crossfade the section's own opacity, exposing the parent
   stack's lighter background between vertical slides. */
.reveal .slides > section {
  height: 100%;
  color: var(--theme-text);
  font-size: var(--body);
  text-align: left;
  isolation: isolate;
  overflow: hidden;
}

/* Keep the top slide of a vertical stack on the main deck background, then
   drop its deeper slides onto a darker surface (see data-background-color in
   index.html). Panels darken to match, so the light-blue cards don't pop
   against the deeper background. */
.reveal .slides > section > section:not(:first-child) {
  height: 100%;
  --panel-background: var(--theme-vertical-panel);
}

/* Author at the original 1440x810 size, then fill Reveal's fixed 1920x1080
   canvas. Reveal applies the final display scale without reflowing the deck. */
.slide-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 810px;
  transform: scale(1.3333333333);
  transform-origin: top left;
}

/* deck.js keeps slide content separate from Reveal's section element. The
   wrapper recreates the original full-canvas positioning context. */
.slide-body {
  position: absolute;
  inset: 0;
  padding: var(--pad-y) var(--pad-x);
}

.slide--namespace-flat .slide-body,
.slide--tenant .slide-body,
.slide--roles .slide-body,
.slide--rules .slide-body,
.slide--workload-rules .slide-body,
.slide--metadata-rules .slide-body,
.slide--integrations .slide-body,
.slide--headlamp .slide-body,
.slide--auth .slide-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Neutralise reveal's default framed-image styling. Scoped to .slides so it
   outranks reveal's `.reveal section img` rule; per-image margins are restored
   with higher specificity where needed (e.g. .tenant__mark). */
.reveal .slides img {
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Controls, progress bar, and the autoplay indicator stay dimmed until the
   visitor moves the pointer (or drives with the keyboard); deck.js toggles
   .deck-chrome-active, and they fade back out after a short idle delay. */
.reveal .controls,
.reveal .progress {
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

/* The autoplay ring stays faintly visible at rest so the deck reads as live,
   then brightens with the rest of the chrome on activity. */
.reveal .playback {
  opacity: .2;
  transition: opacity .3s ease;
}

body.deck-chrome-active .reveal .controls,
body.deck-chrome-active .reveal .progress,
body.deck-chrome-active .reveal .playback {
  opacity: 1;
}

body.deck-chrome-active .reveal .controls {
  pointer-events: auto;
}

/* Vertical-stack hint: a down chevron in the bottom-right corner, shown only
   while another vertical slide sits below the current one so the deck reads as
   continuing downward. Like the autoplay ring it stays faintly lit at rest and
   brightens with the rest of the chrome on activity. It's a dedicated element
   rather than Reveal's own down arrow because (a) Reveal keeps that arrow
   "enabled" everywhere under loop:true, so it can't tell a stack's bottom from
   its middle, and (b) Reveal re-evaluates and re-animates its arrow on every
   slide change, which made the reused arrow flash. deck.js injects the element
   and toggles .has-slide-below.

   The three rules below mirror Reveal's own .controls / .navigate-down /
   .controls-arrow geometry exactly (same 10px em base, same bottom-right
   anchor, same two-bar chevron) so the hint sits pixel-for-pixel where Reveal's
   real down arrow appears — the swap on activity reads as the same arrow. */
.deck-below-hint {
  position: absolute;
  z-index: 11;
  right: var(--r-controls-spacing, 12px);
  bottom: var(--r-controls-spacing, 12px);
  color: var(--theme-accent);
  font-size: 10px;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.deck-below-hint__btn {
  position: absolute;
  right: 3.2em;
  bottom: -1.4em;
  padding-bottom: 1.4em;
}

.deck-below-hint__arrow {
  position: relative;
  display: block;
  width: 3.6em;
  height: 3.6em;
  transform: rotate(-90deg);
}

.deck-below-hint__arrow::before,
.deck-below-hint__arrow::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.6em;
  height: .5em;
  border-radius: .25em;
  background-color: currentColor;
  transform-origin: .2em;
  content: "";
}

.deck-below-hint__arrow::before {
  transform: translate(.5em) translateY(1.55em) rotate(45deg);
}

.deck-below-hint__arrow::after {
  transform: translate(.5em) translateY(1.55em) rotate(-45deg);
}

body.has-slide-below .deck-below-hint {
  opacity: .45;
}

/* Once the visitor is active, Reveal's real controls (with their own down
   arrow) take over, so the hint steps aside to avoid a duplicate arrow. This
   rule follows the one above so it wins when both classes are present. */
body.deck-chrome-active .deck-below-hint {
  opacity: 0;
}

.reveal .controls {
  color: var(--theme-accent);
}

.reveal .progress {
  height: 4px;
  color: var(--theme-accent);
  background: rgba(255, 255, 255, .08);
}

/* Booth chrome (logo + CNCF mark), cloned into every slide by deck.js. */
.deck-chrome {
  position: absolute;
  z-index: 5;
  top: var(--pad-y);
  right: var(--pad-x);
  left: var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  margin: 0;
  color: var(--theme-text);
  font-size: 21.6px;
  font-weight: 780;
  letter-spacing: -0.035em;
}

.brand img {
  width: 46px;
  height: 42px;
  object-fit: contain;
}

.brand__descriptor {
  margin-left: 9px;
  padding-left: 22px;
  border-left: 1px solid currentColor;
  opacity: .62;
  font-size: 13px;
  font-weight: 680;
  letter-spacing: .09em;
  line-height: 1;
  text-transform: uppercase;
}

.cncf-brand {
  display: flex;
  align-items: center;
  width: 180px;
  height: 44px;
}

.cncf-brand img {
  display: block;
  width: 100%;
  height: auto;
}

.cncf-brand img.cncf-brand__light,
body[data-theme="light"] .cncf-brand img.cncf-brand__dark {
  display: none;
}

body[data-theme="light"] .cncf-brand img.cncf-brand__light {
  display: block;
}

/* Typography
   ---------- */

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

h1,
h2,
h3 {
  text-wrap: normal;
}

h1,
h2 {
  margin-bottom: 0;
  font-weight: 760;
  letter-spacing: -.045em;
}

h2 {
  font-size: var(--headline);
  line-height: var(--headline-line-height);
}

h1 span,
h2 span {
  color: var(--theme-accent);
}

.slide-heading {
  position: relative;
  z-index: 2;
  margin-top: 64.8px;
}

.slide-heading--center {
  margin-top: 52.7px;
  text-align: center;
}

.slide--namespace-flat .slide-heading,
.slide--tenant .slide-heading {
  margin-top: 0;
}

.supporting-copy {
  max-width: 900px;
  margin: 30px 0 0;
  color: var(--theme-muted);
  font-size: var(--body);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.3;
}

.slide-footer {
  position: absolute;
  z-index: 8;
  right: var(--pad-x);
  bottom: 25px;
  left: 80.6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--theme-subtle);
  font-size: var(--small);
  font-weight: 670;
  letter-spacing: .01em;
}

/* Two-column layout shared by the terminal, budget, adoption and CTA slides. */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100.8px;
  align-items: center;
  width: 100%;
}

/* Shared panels
   ------------- */

.panel {
  border: 1px solid var(--theme-border);
  border-radius: var(--panel-radius);
  background: var(--panel-background);
  box-shadow: var(--panel-shadow);
}

.panel--cluster {
  border-width: 3px;
}

.panel__item {
  border: 1px solid var(--theme-border-soft);
  border-radius: var(--panel-inner-radius);
  background: var(--theme-card-subtle);
}

/* Hero
   ---- */

.ambient {
  position: absolute;
  z-index: -1;
  border: 1px solid var(--theme-accent-line);
  border-radius: 50%;
}

.ambient--one {
  top: -316.8px;
  right: -230.4px;
  width: 892.8px;
  height: 892.8px;
  box-shadow: inset 0 0 120px var(--theme-accent-faint);
}

.ambient--two {
  right: -43.2px;
  bottom: -417.6px;
  width: 835.2px;
  height: 835.2px;
}

.hero-lockup {
  position: absolute;
  top: 52%;
  left: var(--pad-x);
  display: grid;
  grid-template-columns: 288px 1fr;
  gap: 72px;
  align-items: center;
  width: calc(100% - var(--pad-x) * 2);
  transform: translateY(-47%);
}

.hero-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 288px;
  height: 288px;
  border: 1px solid var(--theme-border);
  border-radius: 50%;
  background: var(--theme-card-subtle);
  box-shadow: var(--theme-shadow);
}

.hero-mark::before,
.hero-mark::after {
  position: absolute;
  border: 1px solid var(--theme-accent-line);
  border-radius: inherit;
  content: "";
}

.hero-mark::before { inset: -26px; }
.hero-mark::after { inset: 18px; }

.hero-mark img {
  position: relative;
  z-index: 2;
  width: 64%;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .22));
}

.hero-lockup h1 {
  font-size: var(--display);
  line-height: 1.04;
}

.hero-subtitle {
  margin: 30.8px 0 0;
  color: var(--theme-muted);
  font-size: 31px;
  font-weight: 520;
  letter-spacing: -.03em;
  line-height: 1.25;
}

/* Flat namespaces
   --------------- */

.namespace-flat-visual {
  width: 840px;
  margin: 36.5px auto 0;
}

.namespace-shared-cluster {
  min-height: 225px;
  padding: 59px 18px 18px;
}

.namespace-flat-card {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 10.5px;
}

.namespace-flat-card b {
  font-size: 18px;
  letter-spacing: -.03em;
}

.namespace-flat-card--more {
  color: var(--theme-accent);
}

.namespace-flat-card--more b {
  font-size: 28.8px;
  letter-spacing: .08em;
}

/* Cluster sprawl
   -------------- */

.slide--sprawl h2 {
  max-width: none;
}

.slide--sprawl .slide-heading {
  margin-top: 92.6px;
  text-align: center;
}

.sprawl-visual {
  position: absolute;
  top: 54%;
  left: 50%;
  display: grid;
  grid-template-columns: 270px 100px minmax(470px, 670px);
  gap: 20px;
  align-items: center;
  width: 1080px;
  transform: translate(-50%, -41%);
}

.sprawl-side {
  align-self: stretch;
  text-align: center;
}

.cluster-label {
  color: var(--theme-accent-strong);
  font-size: 16.6px;
  font-weight: 840;
  letter-spacing: .13em;
  line-height: 1.15;
  text-transform: uppercase;
}

.sprawl-side__label {
  margin: 25px 0 24px;
  text-align: left;
  white-space: nowrap;
}

.mini-clusters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.mini-cluster {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--panel-inner-radius);
  color: var(--theme-text);
  font-size: 25px;
  font-weight: 850;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
}

.transform-arrow {
  display: grid;
  place-items: center;
}

.transform-arrow span {
  position: relative;
  width: 72px;
  height: 12px;
}

.transform-arrow span::before {
  content: "";
  position: absolute;
  top: calc(50% - .5px);
  right: 7px;
  left: 0;
  height: 1px;
  background: var(--theme-divider);
}

.transform-arrow span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid var(--theme-divider);
}

.shared-cluster {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  min-height: 260px;
  padding: 68px 20px 20px;
}

.shared-cluster__label {
  position: absolute;
  top: 25px;
  left: 28px;
}

.tenant {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  padding: 18px 16px;
  color: var(--theme-text);
}

.tenant b {
  font-size: 25px;
  letter-spacing: -.035em;
}

/* .reveal .slides scope beats the image reset so the mark floats to the top
   with the tenant name pinned to the bottom of the card. */
.reveal .slides .tenant__mark {
  align-self: center;
  width: 40.3px;
  margin-bottom: auto;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .2));
}

.tenant span {
  margin-top: 7px;
  color: var(--theme-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
}

/* Tenant map
   ---------- */

.grid-field {
  position: absolute;
  inset: 42% 0 0;
  z-index: -1;
  opacity: .14;
  background-image:
    linear-gradient(var(--theme-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--theme-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, transparent 90%);
}

.tenant-layer-map {
  position: relative;
  width: 1036.8px;
  margin: 27.5px auto 0;
}

.tenant-workspace {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 15px 28.8px 17px;
}

.tenant-workspace--secondary {
  position: absolute;
  top: calc(100% + 14.6px);
  left: 0;
  opacity: .32;
}

.tenant-workspace--tertiary {
  top: calc(200% + 29.2px);
  opacity: .12;
}

.tenant-layer-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 21.6px;
  align-items: center;
  min-height: 50px;
}

.tenant-layer-card__mark {
  display: grid;
  place-items: center;
  width: 48px;
  aspect-ratio: 1;
  border-radius: 15px;
  background: var(--theme-accent-faint);
}

.tenant-layer-card__mark img {
  width: 68%;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .24));
}

.tenant-layer-card__copy b {
  font-size: 24.5px;
  letter-spacing: -.04em;
  line-height: 1;
}

.namespace-group-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 9px;
  color: var(--theme-accent);
  font-size: 13px;
  font-weight: 820;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.namespace-group-label::after {
  flex: 1;
  border-top: 1px solid var(--theme-divider);
  content: "";
}

.layer-namespace-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28.8px;
  margin-top: 9px;
}

.layer-namespace {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 62px;
  padding: 21.6px;
}

.layer-namespace b {
  font-size: 18px;
  letter-spacing: -.035em;
  line-height: 1;
}

/* Roles
   ----- */

.slide--roles .slide-heading {
  margin-top: 0;
}

.roles-layout {
  width: 100%;
}

.delegation-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr) 62px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  width: 1180px;
  margin: 52px auto 0;
}

.delegation-role {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  min-width: 0;
  min-height: 224px;
  padding: 30px 24px;
  text-align: center;
}

.delegation-role > p {
  align-self: end;
  margin: 0 0 8px;
  color: var(--theme-accent);
  font-size: 18px;
  font-weight: 850;
  letter-spacing: .12em;
}

.delegation-role > h3 {
  margin: 0;
  font-size: 37px;
  letter-spacing: -.045em;
  line-height: 1.06;
}

.delegation-role > span {
  align-self: start;
  margin-top: 12px;
  color: var(--theme-muted);
  font-size: 21px;
  font-weight: 620;
  white-space: nowrap;
}

.delegation-connector {
  position: relative;
  height: 2px;
  background: var(--theme-accent-line);
}

.delegation-connector::after {
  position: absolute;
  top: 50%;
  right: -1px;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--theme-accent);
  content: "";
}

.role-flow {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(150px, .35fr) minmax(340px, 1fr);
  gap: 28px;
  align-items: center;
  width: 1152px;
  margin: 48.6px auto 0;
}

.role-card {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  min-height: 200px;
  padding: 36px 44px;
  border-radius: 26px;
  background: var(--theme-card);
  box-shadow: var(--theme-shadow);
  text-align: center;
}

.role-card > p {
  align-self: end;
  margin: 0 0 7px;
  color: var(--theme-accent);
  font-size: 18px;
  font-weight: 850;
  letter-spacing: .12em;
}

.role-card > h3 {
  margin: 0;
  font-size: 40.3px;
  letter-spacing: -.045em;
  line-height: 1.06;
}

.role-card > span {
  align-self: start;
  margin-top: 11px;
  color: var(--theme-muted);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.capsule-gate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--theme-accent-strong);
}

.capsule-gate::before,
.capsule-gate::after {
  position: absolute;
  top: 44%;
  width: 70px;
  border-top: 2px dashed var(--theme-accent-line);
  content: "";
}

.capsule-gate::before { right: calc(100% + 4px); }
.capsule-gate::after { left: calc(100% + 4px); }

.capsule-gate img {
  width: 78px;
}

.capsule-gate b {
  margin-top: 7px;
  font-size: 22px;
}

/* Native terminal
   --------------- */

.slide--native .two-col,
.slide--proxy .two-col,
.slide--replications .two-col {
  position: absolute;
  top: 50%;
  right: var(--pad-x);
  left: var(--pad-x);
  grid-template-columns: 1fr minmax(480px, .85fr);
  gap: 100.8px;
  width: auto;
  transform: translateY(-45%);
}

.slide--native .slide-heading,
.slide--proxy .slide-heading,
.slide--replications .slide-heading {
  margin-top: 0;
}

.terminal {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 28px;
  color: var(--code-text);
  background: var(--code-background);
  box-shadow: 0 32px 85px rgba(0, 0, 0, .3);
}

.terminal__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 54px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .04);
}

.terminal__bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}

.terminal__bar i:first-child { background: var(--coral); }
.terminal__bar i:nth-child(2) { background: var(--yellow); }
.terminal__bar i:nth-child(3) { background: var(--sky); }

.terminal__bar span {
  margin-left: auto;
  color: rgba(255, 255, 255, .32);
  font: 14px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.terminal__body {
  padding: 49px;
  font: 24.5px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.terminal__body p { margin: 0; }
.terminal__body b { color: var(--sky); }
.terminal__body strong { color: var(--white); }

.terminal__result {
  margin-top: 25px !important;
  color: var(--code-muted);
}

.terminal__stamp {
  padding: 15px 24px;
  color: var(--ink-deep);
  background: var(--sky);
  font-size: 15px;
  font-weight: 880;
  letter-spacing: .11em;
  text-align: center;
}

/* Capsule Proxy
   ------------- */

.terminal--proxy .terminal__body {
  padding-top: 38.9px;
  padding-bottom: 38.9px;
  font-size: 20.2px;
}

.terminal__table {
  display: grid;
  margin-top: 25px;
  color: var(--code-muted);
  font-size: .7em;
  line-height: 1.25;
}

.terminal__table > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.terminal__table > div:first-child {
  padding-top: 0;
  border-top: 0;
  color: rgba(255, 255, 255, .3);
  font-size: .8em;
  letter-spacing: .1em;
}

.terminal__table strong {
  color: var(--code-text);
  font-weight: 650;
}

/* Capsule Proxy — deep dive (vertical, one subtopic per slide)
   ----------------------------------------------------------- */

/* Reuse the two-column framing of the parent proxy slide. */
.slide--proxy-step .two-col {
  position: absolute;
  top: 50%;
  right: var(--pad-x);
  left: var(--pad-x);
  grid-template-columns: 1fr minmax(460px, .8fr);
  gap: 100.8px;
  width: auto;
  transform: translateY(-45%);
}

.slide--proxy-step .slide-heading {
  margin-top: 0;
}

.supporting-copy em {
  color: var(--theme-text);
  font-style: normal;
  font-weight: 700;
}

/* Hint on each slide that another vertical deep-dive sits beneath it. */
.slide-more {
  color: var(--theme-accent);
  font-weight: 750;
}

/* Shared framing for the focused visual panel on the right column. */
.proxy-visual {
  padding: 40px;
}

.proxy-visual__arrow {
  position: relative;
  height: 28px;
  margin: 18px 0;
}

.proxy-visual__arrow::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 11px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--theme-divider);
}

.proxy-visual__arrow::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 7px solid var(--theme-divider);
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.proxy-visual code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Problem — RBAC is all-or-nothing */
.rbac-rule {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 26px;
  border-radius: var(--panel-inner-radius);
  background: var(--theme-card-subtle);
}

.rbac-rule span {
  color: var(--theme-accent-strong);
  font-size: 14px;
  font-weight: 840;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rbac-rule code {
  color: var(--theme-text);
  font-size: 24px;
}

.rbac-result {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.rbac-result b {
  padding: 18px 0;
  border: 1px solid var(--theme-border-soft);
  border-radius: 14px;
  background: var(--theme-card-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 19px;
  text-align: center;
}

.rbac-result--more {
  color: var(--theme-accent);
  letter-spacing: .08em;
}

.proxy-rbac > p {
  margin: 24px 0 0;
  color: var(--theme-muted);
  font-size: 16px;
  font-weight: 560;
  line-height: 1.4;
}

/* Step 1 — authenticate. The layout reads top-to-bottom: the request enters
   Capsule Proxy, Kubernetes validates it, and a trusted identity comes back. */
.proxy-auth-flow {
  padding: 34px 36px 36px;
}

.auth-request {
  display: flex;
  width: 126px;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 11px 10px;
  border: 1px solid var(--theme-border-soft);
  border-radius: 14px;
  background: var(--theme-card-subtle);
  text-align: center;
}

.auth-request span {
  color: var(--theme-muted);
  font-size: 14px;
  font-weight: 780;
}

.auth-request code {
  color: var(--theme-text);
  font-size: 17px;
}

.auth-request__arrow {
  position: relative;
  width: 126px;
  height: 35px;
}

.auth-request__arrow::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 11px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--theme-divider);
}

.auth-request__arrow::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 7px solid var(--theme-divider);
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.auth-exchange {
  display: grid;
  grid-template-columns: 126px 1fr 126px;
  align-items: center;
  gap: 14px;
}

.auth-service {
  display: flex;
  min-height: 116px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 10px;
  border: 1px solid var(--theme-border-soft);
  border-radius: var(--panel-inner-radius);
  background: var(--theme-card-subtle);
  text-align: center;
}

.auth-service--proxy {
  border-color: var(--theme-border);
  background: var(--theme-panel-emphasis);
}

.auth-service img {
  width: 42px;
  height: 42px;
}

.auth-service b {
  color: var(--theme-text);
  font-size: 15px;
  line-height: 1.15;
}

.auth-exchange__arrows {
  display: grid;
  gap: 18px;
  color: var(--theme-muted);
  font-size: 14px;
  text-align: center;
}

.auth-exchange__arrows span {
  position: relative;
  padding-bottom: 7px;
  background: linear-gradient(var(--theme-divider), var(--theme-divider)) left bottom / calc(100% - 7px) 1px no-repeat;
  white-space: nowrap;
}

.auth-exchange__arrows span:first-child::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid var(--theme-divider);
}

.auth-exchange__arrows span:last-child {
  padding-top: 7px;
  padding-bottom: 0;
  background-position: right top;
}

.auth-exchange__arrows span:last-child::before {
  content: "";
  position: absolute;
  top: .25px;
  left: 0;
  transform: translateY(-50%);
  border-top: 4px solid transparent;
  border-right: 7px solid var(--theme-divider);
  border-bottom: 4px solid transparent;
}

.auth-exchange__arrows b {
  color: var(--theme-accent);
  font-weight: 780;
}

.auth-identity {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding: 18px 22px;
}

.auth-identity__avatar {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-deep);
  background: var(--theme-accent);
  font-size: 19px;
  font-weight: 880;
}

.auth-identity > div:last-child {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 5px 12px;
}

.auth-identity span {
  grid-column: 1 / -1;
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 820;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.auth-identity code {
  color: var(--theme-text);
  font-size: 17px;
}

.auth-identity small {
  color: var(--theme-muted);
  font-size: 13px;
}

.auth-identity small b {
  color: var(--theme-accent);
}

/* Step 2 — resolve every access path to one concrete namespace set. */
.access-match {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  text-align: center;
}

.access-match code {
  color: var(--theme-accent);
  font-size: 18px;
}

.access-match span {
  position: relative;
  width: 36px;
  height: 12px;
}

.access-match span::before {
  content: "";
  position: absolute;
  top: calc(50% - .5px);
  right: 7px;
  left: 0;
  height: 1px;
  background: var(--theme-divider);
}

.access-match span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid var(--theme-divider);
}

.access-match b {
  color: var(--theme-text);
  font-size: 18px;
}

.allowed-set {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.allowed-set > span {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: var(--theme-accent-strong);
  font-size: 14px;
  font-weight: 840;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.allowed-set code {
  min-width: 0;
  padding: 14px 5px;
  border: 1px solid var(--theme-border-soft);
  border-radius: 13px;
  color: var(--theme-text);
  background: var(--theme-card-subtle);
  font-size: 12px;
  text-align: center;
}

.access-grants {
  margin: 18px 0 0;
  color: var(--theme-muted);
  font-size: 14px;
  text-align: center;
}

.access-grants b {
  color: var(--theme-accent);
  font-size: 18px;
}

/* Step 3 — show the request transformation without implying a shell command. */
.proxy-request-flow {
  width: 100%;
}

/* Match the panel surface used across the vertical stack so these two request
   cards read as the same kind of panel, not a lighter translucent card. */
.request-stage {
  padding: 22px 24px;
  border: 1px solid var(--theme-border);
  border-radius: 18px;
  background: var(--panel-background);
  box-shadow: var(--panel-shadow);
}

/* The forwarded ("narrowed") request is the result of the transform, so lift it
   one tonal step above the incoming request panel. */
.request-stage--narrowed {
  background: var(--theme-panel-emphasis);
}

.request-line {
  display: flex;
  align-items: center;
  gap: 18px;
}

.request-line > b {
  display: grid;
  min-width: 64px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  color: var(--ink-deep);
  background: var(--theme-accent);
  font-size: 15px;
  font-weight: 880;
  letter-spacing: .08em;
}

.request-line code {
  color: var(--theme-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 21px;
  font-weight: 650;
}

.request-transform {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--theme-accent-strong);
  font-size: 15px;
}

.request-transform span {
  position: relative;
  width: 12px;
  height: 32px;
}

.request-transform span::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 10px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--theme-divider);
}

.request-transform span::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 7px solid var(--theme-divider);
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.request-selector {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--theme-border-soft);
}

.request-selector code {
  display: grid;
  gap: 4px;
  color: var(--theme-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 19px;
  line-height: 1.4;
}

.request-selector code > span {
  color: var(--theme-muted);
  font-size: 15px;
}

.request-selector strong {
  color: inherit;
  font-weight: 650;
}

/* Beyond namespaces — summarize the existing, resource-specific proxy routes
   without implying support for the alpha generic cluster-resource path. */
.proxy-resource-scope {
  padding: 32px 36px 36px;
}

.resource-scope-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 17px 20px;
  border: 1px solid var(--theme-border);
  border-radius: var(--panel-inner-radius);
  background: var(--theme-panel-emphasis);
}

.resource-scope-head img {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .18));
}

.resource-scope-head div {
  display: grid;
  gap: 3px;
}

.resource-scope-head span {
  color: var(--theme-accent-strong);
  font-size: 13px;
  font-weight: 840;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.resource-scope-head b {
  color: var(--theme-text);
  font-size: 20px;
  letter-spacing: -.025em;
}

.proxy-resource-scope .proxy-visual__arrow {
  margin: 15px 0;
}

/* Standalone — the proxy forwards to any cluster, no operator required. Two
   nodes and a connector, no outer panel. */
.proxy-standalone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.standalone-arrow {
  position: relative;
  width: 56px;
  height: 1px;
  background: var(--theme-divider);
}

.standalone-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border-left: 7px solid var(--theme-divider);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.standalone-node {
  display: flex;
  min-width: 160px;
  min-height: 160px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 20px;
  border: 1px solid var(--theme-border-soft);
  border-radius: var(--panel-inner-radius);
  background: var(--panel-background);
  box-shadow: var(--panel-shadow);
  text-align: center;
}

.standalone-node--proxy {
  border-color: var(--theme-border);
  background: var(--theme-panel-emphasis);
}

.standalone-node img {
  width: 60px;
  height: 60px;
}

.standalone-node b {
  color: var(--theme-text);
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.resource-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.resource-scope-item {
  display: flex;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
}

.resource-scope-item--wide {
  grid-column: 1 / -1;
}

.resource-scope-item i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--theme-accent);
  box-shadow: 0 0 0 5px var(--theme-accent-faint);
}

.resource-scope-item b {
  overflow: hidden;
  color: var(--theme-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-scope-item--excluded {
  opacity: 0.45;
}

.resource-scope-item--excluded i {
  background: var(--coral);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--coral) 15%, transparent);
}

/* Integrations — standard tools proxy impersonated requests and get a
   correctly-scoped view. Tool chips reuse the resource-scope grid; the outcome
   sits in the single emphasis box. */
.proxy-integrations .tool-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  /* Monochrome marks (kubectl terminal, Lens symbol) render in the accent via
     currentColor; the Headlamp <img> carries its own brand colours. */
  color: var(--theme-accent);
}

.proxy-integrations .integrations-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--theme-border);
  border-radius: var(--panel-inner-radius);
  background: var(--theme-panel-emphasis);
  text-align: center;
}

.proxy-integrations .integrations-result img {
  width: 34px;
  height: 34px;
}

.proxy-integrations .integrations-result span {
  color: var(--theme-text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.02em;
}

/* Budget
   ------ */

.slide--budget .two-col {
  display: block;
  width: auto;
}

.slide--budget .slide-heading {
  position: absolute;
  top: 50%;
  left: var(--pad-x);
  width: 52%;
  max-width: 930px;
  margin-top: 0;
  transform: translateY(-50%);
}

.slide--budget .supporting-copy {
  max-width: 100%;
}

.budget-board {
  position: absolute;
  top: 51%;
  right: var(--pad-x);
  width: 34%;
  padding: 36px;
  transform: translateY(-42%);
}

.budget-board__head {
  display: flex;
  align-items: baseline;
  color: var(--theme-muted);
  font-size: 20px;
  font-weight: 650;
}

.budget-board__head span {
  margin-right: auto;
  color: var(--theme-accent-strong);
  font-size: 17px;
  font-weight: 840;
  letter-spacing: .11em;
}

.budget-board__head b {
  margin-right: 7px;
  color: var(--theme-text);
  font-size: 49px;
  letter-spacing: -.05em;
}

.meter {
  height: 28px;
  margin: 30px 0 35px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--theme-meter-track);
}

.meter i {
  display: block;
  width: var(--used);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue-bright), var(--sky));
}

.budget-items {
  display: grid;
  gap: 17px;
}

.budget-items div {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 13px;
  align-items: center;
  padding: 15px 18px;
  font-size: 19px;
  font-weight: 670;
}

.budget-items b { color: var(--theme-accent); }

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot--coral { background: var(--coral); }
.dot--sky { background: var(--sky); }
.dot--yellow { background: var(--yellow); }

.budget-board > p {
  margin: 28px 0 0;
  color: var(--theme-muted);
  font-size: 17px;
  font-weight: 640;
  text-align: center;
}

/* Policy capabilities
   ------------------- */

.slide--workload-rules .two-col {
  grid-template-columns: minmax(0, 1.15fr) minmax(500px, .8fr);
  gap: 82px;
}

.slide--workload-rules .slide-heading {
  margin-top: 0;
}

.policy-panel {
  padding: 34px;
}

/* Per-tenant admission rules — two compact horizontal lanes make the
   relationship read left-to-right: tenant → rule → inherited namespaces. */

.rules-layout {
  width: 100%;
}

.slide--rules .slide-heading {
  margin-top: 0;
}

.tenant-rule-flow {
  width: 100%;
  margin-top: 64px;
  padding: 22px 32px 26px;
}

.tenant-rule-flow__lane {
  display: grid;
  grid-template-columns: 180px 54px 300px 110px 340px;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.tenant-rule-flow__lane {
  min-height: 106px;
  padding: 14px 0;
}

.tenant-rule-flow__lane + .tenant-rule-flow__lane {
  border-top: 1px solid var(--theme-divider);
}

.tenant-rule-flow__tenant {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tenant-rule-flow__tenant .dot {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.tenant-rule-flow__rule,
.tenant-rule-flow__scope {
  display: grid;
  gap: 7px;
}

.tenant-rule-flow__rule span,
.tenant-rule-flow__scope > span {
  color: var(--theme-muted);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: .1em;
}

.tenant-rule-flow__tenant b {
  color: var(--theme-text);
  font-size: 23px;
  letter-spacing: -.02em;
}

.tenant-rule-flow__arrow {
  position: relative;
  height: 1px;
  background: var(--theme-divider);
}

.tenant-rule-flow__arrow::after {
  position: absolute;
  top: 50%;
  right: -1px;
  transform: translateY(-50%);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid var(--theme-divider);
  content: "";
}

.tenant-rule-flow__decision {
  position: relative;
  height: 72px;
}

.tenant-rule-flow__decision .tenant-rule-flow__arrow {
  position: absolute;
  top: 36px;
  right: 0;
  left: 0;
}

.tenant-rule-flow__decision span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 820;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tenant-rule-flow__allowed {
  top: 17px;
  color: var(--theme-accent);
}

.tenant-rule-flow__denied {
  top: 17px;
  color: var(--coral);
}

.tenant-rule-flow__decision i {
  font-style: normal;
}

.tenant-rule-flow__rule,
.tenant-rule-flow__scope {
  min-height: 72px;
  align-content: center;
  padding: 16px 20px;
}

.tenant-rule-flow code {
  color: var(--theme-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.tenant-rule-flow__rule code {
  font-size: 19px;
  font-weight: 680;
}

.tenant-rule-flow__denied-host {
  color: var(--theme-denied-emphasis);
  font-weight: 820;
}

.tenant-rule-flow__scope b {
  color: var(--theme-text);
  font-size: 18px;
  letter-spacing: -.015em;
}

.policy-workload {
  display: grid;
  padding: 18px 20px;
}

.policy-workload code {
  color: var(--theme-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  font-weight: 680;
}

.policy-evaluation {
  position: relative;
  height: 64px;
}

.policy-evaluation::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--theme-divider);
  content: "";
}

.policy-evaluation::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-top: 7px solid var(--theme-divider);
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
}

.policy-evaluation span {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 5px 10px;
  transform: translate(-50%, -50%);
  background: var(--panel-background);
  color: var(--theme-muted);
  font-size: 18px;
  font-weight: 760;
  letter-spacing: .04em;
  white-space: nowrap;
}

.policy-tenants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.policy-tenant {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
}

.policy-tenant--allowed {
  border: 1px solid var(--theme-border);
  border-radius: var(--panel-inner-radius);
  background: var(--theme-panel-emphasis);
}

.policy-tenant > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.policy-tenant .dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
}

.policy-tenant b {
  color: var(--theme-text);
  font-size: 19px;
  letter-spacing: -.015em;
}

.policy-tenant strong {
  flex: 0 0 auto;
  color: var(--coral);
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.policy-tenant--allowed strong {
  color: var(--theme-accent);
}

/* Metadata policy — one simple visual sentence: a shared standard fans out
   into each tenant's namespaces. */

.metadata-layout {
  width: 100%;
  transform: translateY(46px);
}

.slide--metadata-rules .slide-heading {
  max-width: 1080px;
  margin: 0 auto;
}

.slide--metadata-rules .supporting-copy {
  max-width: 980px;
  margin: 22px auto 0;
}

.metadata-map {
  width: 1060px;
  margin: 42px auto 0;
}

.metadata-map__standard {
  display: flex;
  width: 600px;
  min-height: 78px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 17px 28px;
  background: var(--theme-panel-emphasis);
  text-align: center;
}

.metadata-map__standard b {
  color: var(--theme-text);
  font-size: 19px;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.metadata-map__standard b span {
  color: var(--theme-accent);
}

.metadata-map__branches {
  position: relative;
  width: 66.666%;
  height: 44px;
  margin: 0 auto;
}

.metadata-map__branches::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 22px;
  background: var(--theme-divider);
  content: "";
}

.metadata-map__branches::after {
  position: absolute;
  top: 21px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--theme-divider);
  content: "";
}

.metadata-map__branches i {
  position: absolute;
  top: 21px;
  bottom: 5px;
  z-index: 1;
  width: 1px;
  background: var(--theme-divider);
}

.metadata-map__branches i:first-child { left: 0; }
.metadata-map__branches i:nth-child(2) { left: 50%; }
.metadata-map__branches i:last-child { right: 0; }

.metadata-map__branches i::after {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 6px solid var(--theme-divider);
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
}

.metadata-map__tenants {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  opacity: .32;
}

.metadata-map__tenant {
  padding: 18px;
}

.metadata-map__tenant-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px 14px;
}

.metadata-map__tenant-head .dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
}

.metadata-map__tenant-head b {
  color: var(--theme-text);
  font-size: 18px;
  letter-spacing: -.01em;
}

.metadata-map__namespace {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 10px 13px;
}

.metadata-map__namespace + .metadata-map__namespace {
  margin-top: 8px;
}

.metadata-map__namespace span {
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 670;
}

.metadata-map__namespace i {
  color: var(--theme-accent);
  font-size: 14px;
  font-style: normal;
  font-weight: 820;
}

/* Integrations
   ------------ */

.integrations-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 60px 20px;
  width: 1300px;
  margin: 100px auto 0;
}

.integration-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.integration-item img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  /* Add a subtle drop shadow to make logos stand out professionally,
     and increase brightness slightly for dark mode legibility */
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
}

.integration-item span {
  font-size: 21.6px;
  font-weight: 650;
  color: var(--theme-text);
  letter-spacing: -0.01em;
}

/* Headlamp
   -------- */

.headlamp-layout {
  display: grid;
  grid-template-columns: 370px minmax(0, 1fr);
  gap: 50px;
  align-items: center;
  width: 1296px;
  margin: 0 auto;
}

.slide--headlamp .slide-heading {
  margin-top: 0;
}

.slide--headlamp .supporting-copy {
  font-size: 22px;
}

.headlamp-preview {
  margin: 0;
  overflow: hidden;
}

.headlamp-preview img {
  display: block;
  width: 100%;
  height: auto;
}

/* Adoption
   -------- */

.slide--adopt .two-col {
  position: absolute;
  top: 52%;
  right: var(--pad-x);
  left: var(--pad-x);
  grid-template-columns: .85fr 1.15fr;
  gap: 115.2px;
  width: auto;
  transform: translateY(-47%);
}

.slide--adopt .slide-heading {
  margin-top: 0;
}

.adopt-list {
  display: grid;
}

.adopt-list > div {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 25px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--theme-divider);
}

.adopt-list > div:first-child {
  border-top: 1px solid var(--theme-divider);
}

.adopt-list strong {
  color: var(--theme-accent);
  font-size: 19px;
  letter-spacing: .1em;
}

.adopt-list p {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.adopt-list b {
  font-size: 31.7px;
  letter-spacing: -.035em;
}

.adopt-list span {
  margin-top: 7px;
  color: var(--theme-muted);
  font-size: 18px;
  line-height: 1.3;
}

/* CTA
   --- */

.cta-orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid var(--theme-accent-line);
  border-radius: 50%;
}

.cta-orbit--one {
  top: -432px;
  right: -316.8px;
  width: 1080px;
  height: 1080px;
}

.cta-orbit--two {
  top: 72px;
  right: -14.4px;
  width: 576px;
  height: 576px;
}

.cta-layout {
  position: absolute;
  top: 51%;
  right: var(--pad-x);
  left: var(--pad-x);
  grid-template-columns: 1fr minmax(370px, .55fr);
  gap: 144px;
  width: auto;
  transform: translateY(-46%);
}

.cta-layout h2 {
  font-size: 103.7px;
  line-height: 1.05;
}

.cta-copy {
  margin: 34px 0 0;
  color: var(--theme-subtle);
  font-size: 23.8px;
  font-weight: 560;
  letter-spacing: -.02em;
}

.cta-links {
  display: flex;
  gap: 25px;
  margin-top: 36px;
  color: var(--theme-accent);
  font-size: 17px;
  font-weight: 750;
}

.cta-links span + span {
  padding-left: 25px;
  border-left: 1px solid var(--theme-divider);
}

.qr-card {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 388.8px;
  margin-right: 72px;
  padding: 34.6px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 30px;
  color: var(--qr-text);
  background: var(--qr-background);
  box-shadow: 0 35px 90px rgba(0, 0, 0, .28);
}

.qr-card img {
  width: 100%;
  aspect-ratio: 1;
}

.qr-card b {
  margin-top: 20px;
  font-size: 27.4px;
  letter-spacing: -.035em;
}

.qr-card span {
  margin-top: 7px;
  color: var(--muted);
  font-size: 14.4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}