@charset "UTF-8";
/* ==========================================================================
   Design tokens — CSS custom properties for light and dark themes.
   Everything else in the stylesheet should reference these, not inline hexes.
   ========================================================================== */
:root {
  color-scheme: light;
  /* ---------- Brand ---------- */
  --dex-blue:        #449FD8;
  --dex-blue-300:    #9DD0F0;
  --dex-blue-400:    #7CC5ED;
  --dex-blue-600:    #2E86C0;
  --dex-blue-700:    #1F6FA3;
  --dex-red:         #F04D5C;
  --dex-red-300:     #FCA5A5;
  --dex-red-400:     #FF8A94;
  --dex-red-500:     #FF5B6A;
  --dex-red-600:     #D63848;
  /* ---------- Brand tints (reusable alpha overlays) ---------- */
  --blue-tint-1:     rgba(68, 159, 216, 0.04);
  --blue-tint-2:     rgba(68, 159, 216, 0.08);
  --blue-tint-3:     rgba(68, 159, 216, 0.12);
  --blue-tint-4:     rgba(68, 159, 216, 0.20);
  --red-tint-1:      rgba(240, 77, 92, 0.04);
  --red-tint-2:      rgba(240, 77, 92, 0.08);
  --red-tint-3:      rgba(240, 77, 92, 0.12);
  --red-tint-4:      rgba(240, 77, 92, 0.20);
  /* ---------- Semantic alert colors ---------- */
  --color-info:          #0EA5E9;
  --color-info-text:     #0369A1;
  --color-info-text-dk:  #7DD3FC;
  --color-info-bg:       rgba(56, 189, 248, 0.08);
  --color-success:          #10B981;
  --color-success-text:     #047857;
  --color-success-text-dk:  #6EE7B7;
  --color-success-bg:       rgba(16, 185, 129, 0.08);
  --color-warning:          #F59E0B;
  --color-warning-text:     #B45309;
  --color-warning-text-dk:  #FCD34D;
  --color-warning-bg:       rgba(245, 158, 11, 0.09);
  /* ---------- Neutrals (light theme) ---------- */
  --bg-page:         #FFFFFF;
  --bg-muted:        #F8FAFC;
  --bg-card:         #FFFFFF;
  --bg-code:         #F1F5F9;
  --border-subtle:   #E5E7EB;
  --border-strong:   #CBD5E1;
  --text-primary:    #0F172A;
  --text-secondary:  #475569;
  /* #55647A gives ~5.7:1 on --bg-muted (WCAG AA with cushion). The lighter
     Slate-500 #64748B was only 4.55:1 — passed AA for normal text but failed
     for small mono labels (.feature-label et al.) at 0.72rem. */
  --text-muted:      #55647A;
  --text-on-dark:    #F8FAFC;
  --link:            var(--dex-blue-600);
  --link-hover:      var(--dex-red);
  /* ---------- Hero (always dark) ---------- */
  --hero-bg:         #0B1220;
  --hero-bg-accent:  #111A30;
  --hero-text:       #F8FAFC;
  --hero-text-muted: #94A3B8;
  /* ---------- Typography scale ---------- */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-2xs:  0.72rem;
  /* mono labels, identifiers */
  --text-xs:   0.8rem;
  /* eyebrows, meta */
  --text-sm:   0.875rem;
  /* card titles, small captions */
  --text-base: 0.95rem;
  /* body in dense contexts */
  --text-md:   1.05rem;
  /* body in spacious contexts, section leads */
  --text-lg:   1.15rem;
  /* card headings */
  --text-xl:   1.3rem;
  /* feature/use-case headings */
  --text-2xl:  1.625rem;
  /* h2 in docs */
  --text-3xl:  2rem;
  /* h1 in docs, mobile band h2 */
  --text-4xl:  2.5rem;
  /* band h2 */
  --text-hero: clamp(2.25rem, 4.6vw, 4rem);
  /* hero headline */
  --tracking-tighter: -0.035em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  -0.005em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.14em;
  /* ---------- Shape ---------- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  /* ---------- Shadows ---------- */
  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.12); }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-page:        #0B1220;
  --bg-muted:       #0F172A;
  --bg-card:        #111A30;
  --bg-code:        #0F172A;
  --border-subtle:  #1E293B;
  --border-strong:  #334155;
  --text-primary:   #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-muted:     #94A3B8;
  --link:           var(--dex-blue-400);
  --link-hover:     var(--dex-red-400);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.6); }

/* ==========================================================================
   Typography — body, headings, inline code, links (inc. refined underlines
   for running prose). All values reference tokens from _tokens.scss.
   ========================================================================== */
body {
  font-family: var(--font-sans);
  background-color: var(--bg-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text-primary);
  letter-spacing: var(--tracking-normal); }

pre, code, kbd, samp {
  font-family: var(--font-mono); }

code {
  background-color: var(--bg-code);
  padding: 0.15em 0.35em;
  border-radius: 4px;
  font-size: 0.9em; }

pre code {
  background: none;
  padding: 0; }

a {
  color: var(--link);
  transition: color 0.15s ease; }
  a:hover {
    color: var(--link-hover); }

/* Refined editorial underlines for inline links inside running prose.
   Scoped to text paragraphs and lists — buttons, cards and nav untouched. */
:is(.td-content, .content) :is(p, li, td) > a,
.band p:not(.section-label):not(.section-lead):not(.cncf-card-text) > a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--blue-tint-4);
  transition: text-decoration-color 0.15s ease, color 0.15s ease; }

:is(.td-content, .content) :is(p, li, td) > a:hover {
  text-decoration-color: var(--dex-red);
  color: var(--dex-red); }

/* ==========================================================================
   Components — navbar, search, theme toggle, heading anchor, cards, footer,
   doc-cards, offline-search popover.
   ========================================================================== */
/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.td-navbar {
  background-color: var(--hero-bg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
  min-height: 64px;
  /* SVG logo already contains the wordmark — the accompanying `.visually-hidden`
     span gives the brand link an accessible name without duplicating the
     wordmark visually. We rely on Bootstrap's `.visually-hidden` utility. */ }
  .td-navbar .nav-link {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    transition: color 0.15s ease; }
    .td-navbar .nav-link:hover, .td-navbar .nav-link.active {
      color: #FFFFFF; }
  .td-navbar .navbar-brand__logo svg {
    height: 38px;
    width: auto; }

.logo {
  max-height: 250px; }

/* --------------------------------------------------------------------------
   Theme toggle
   -------------------------------------------------------------------------- */
.theme-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  font-size: var(--text-base);
  margin-left: 0.5rem;
  flex-shrink: 0;
  padding: 0; }

.theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.35); }

.theme-toggle .icon-sun {
  display: none; }

.theme-toggle .icon-moon {
  display: inline-block; }

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: inline-block; }

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none; }

/* Docsy has a global `#main_navbar li i { padding-right: 0.5em }` rule meant
   for FA icons inside ordinary nav links. It ends up pushing the sun/moon
   glyph of our theme-toggle off-centre. Kill the padding on our icons. */
#main_navbar .theme-toggle i,
.td-navbar .theme-toggle i {
  padding: 0; }

/* Mobile: theme toggle sits inside .navbar-nav as a <li>. Nav-item padding
   would shift the square; reset it and give an explicit gap. */
.td-navbar .navbar-nav .nav-item.d-lg-none .theme-toggle {
  margin-left: 0.75rem; }

/* On mobile Docsy turns the navbar-nav into a horizontally-scrollable strip.
   We keep that UX but:
     - make the strip a flex container so items (incl. the 36px theme-toggle)
       are vertically centred instead of top-aligned;
     - hide the scrollbar with `scrollbar-width: none` + `::-webkit-scrollbar`
       instead of Docsy's `padding-bottom: 2rem` hack, which pushed items up;
     - bump the height to 3.5rem so the 36px toggle fits without clipping.
   Breakpoint matches Docsy's lg-down (991.98px) so there's no fractional-
   pixel gap where only Docsy's rule would apply. */
@media (max-width: 991.98px) {
  .td-navbar .td-navbar-nav-scroll {
    max-width: 100%;
    height: 3.5rem;
    overflow: hidden;
    font-size: 0.9rem;
    display: flex;
    align-items: center; }
  .td-navbar .navbar-nav {
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
    scrollbar-width: none;
    width: 100%; }
  .td-navbar .navbar-nav::-webkit-scrollbar {
    display: none; }
  .td-navbar .nav-item.d-lg-none {
    display: flex;
    align-items: center; } }

/* --------------------------------------------------------------------------
   Search input — global, theme-aware base; navbar context adds a dark tint.
   Docsy uses `text-indent: 1.25em` to clear the absolutely-positioned icon;
   we use explicit padding-left instead so the placeholder can never slide
   under the icon.
   -------------------------------------------------------------------------- */
.td-search__input,
input.td-search__input.form-control {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.75rem 0.45rem 2.75rem;
  text-indent: 0;
  font-size: 0.9rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }

/* In dark theme `--bg-card` (#111A30) is almost identical to the sidebar
   `--bg-muted` (#0F172A) — the input disappears visually. Use a lighter
   translucent overlay so the input always reads against its backdrop. */
:root[data-theme="dark"] .td-search__input,
:root[data-theme="dark"] input.td-search__input.form-control {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12); }

:root[data-theme="dark"] .td-search__input:focus,
:root[data-theme="dark"] input.td-search__input.form-control:focus {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(68, 159, 216, 0.6); }

/* Defensive: Docsy's base `text-indent: 1.25em` lives on a selector with
   equal specificity; we always keep it zero. */
.td-search .td-search__input,
.td-search .td-search-input {
  text-indent: 0; }

.td-search__input::placeholder {
  color: var(--text-muted);
  opacity: 1; }

.td-search__input:focus,
input.td-search__input.form-control:focus {
  background-color: var(--bg-card);
  border-color: var(--dex-blue);
  color: var(--text-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(68, 159, 216, 0.18); }

.td-search:focus-within .td-search__icon {
  display: flex;
  color: var(--text-muted); }

.td-search__icon {
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  color: var(--text-muted);
  position: absolute;
  pointer-events: none;
  font-size: 0.95rem; }

/* Docsy sets `.td-search--offline:focus-within .td-search__icon` to a dark
   placeholder colour; override to keep our muted value in dark themes. */
.td-search--offline:focus-within .td-search__icon {
  color: var(--text-muted); }

@media (max-width: 767.98px) {
  .td-search__input,
  input.td-search__input.form-control {
    /* iOS forces 16px form-controls to avoid zoom-on-focus; the lupe icon
       becomes relatively wider, so bump the left padding to match. */
    font-size: 1rem;
    padding-left: 3rem; } }

/* Navbar context: dark hero bar, tinted input */
.td-navbar .td-search__input,
.td-navbar input[type="search"] {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF; }

.td-navbar .td-search__input::placeholder,
.td-navbar input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.55); }

.td-navbar .td-search__input:focus,
.td-navbar input[type="search"]:focus {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(68, 159, 216, 0.6);
  box-shadow: 0 0 0 3px rgba(68, 159, 216, 0.25);
  color: #FFFFFF; }

.td-navbar .td-search__icon {
  color: rgba(255, 255, 255, 0.55); }

/* Sidebar context: stretch input to fill available width */
.td-sidebar__search {
  padding: 0.5rem 0; }

.td-sidebar__search .td-search {
  flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Offline search — Bootstrap popover with .td-offline-search-results class
   -------------------------------------------------------------------------- */
.popover.td-offline-search-results {
  --bs-popover-bg: var(--bg-card);
  --bs-popover-border-color: var(--border-subtle);
  --bs-popover-header-bg: var(--bg-muted);
  --bs-popover-header-color: var(--text-primary);
  --bs-popover-body-color: var(--text-primary);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  max-width: 520px;
  min-width: 320px; }
  .popover.td-offline-search-results .popover-body {
    color: var(--text-primary);
    padding: 1rem 1.1rem; }
  .popover.td-offline-search-results .popover-arrow::after,
  .popover.td-offline-search-results .popover-arrow::before {
    border-bottom-color: var(--border-subtle); }
  .popover.td-offline-search-results a {
    color: var(--link);
    font-weight: 600;
    text-decoration: none; }
    .popover.td-offline-search-results a:hover {
      color: var(--dex-red);
      text-decoration: underline; }
  .popover.td-offline-search-results small,
  .popover.td-offline-search-results .text-muted {
    color: var(--text-muted) !important;
    font-family: var(--font-mono);
    font-size: var(--text-2xs); }
  .popover.td-offline-search-results p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0.35rem 0 0; }
  .popover.td-offline-search-results .mt-4 {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-subtle); }
    .popover.td-offline-search-results .mt-4:last-child {
      border-bottom: none;
      padding-bottom: 0; }
  .popover.td-offline-search-results .td-offline-search-results__close-button {
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.15s ease; }
    .popover.td-offline-search-results .td-offline-search-results__close-button:hover {
      color: var(--dex-red); }

/* --------------------------------------------------------------------------
   Heading anchor — real <a class="heading-anchor"> injected by JS / render
   hook. Click copies the section permalink. Because it's a real link, the
   parent heading never intercepts clicks on adjacent elements.
   -------------------------------------------------------------------------- */
.heading-anchor {
  display: inline-block;
  opacity: 0;
  margin-left: 0.4em;
  font-size: 0.75em;
  font-weight: 400;
  color: var(--dex-blue);
  text-decoration: none;
  vertical-align: middle;
  transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
  user-select: none; }

.heading-anchor::before {
  content: '#'; }

:is(.content-section, .td-content) :is(h2, h3, h4, h5, h6):hover .heading-anchor,
.heading-anchor:focus {
  opacity: 0.55;
  text-decoration: none; }

.heading-anchor:hover {
  opacity: 1;
  color: var(--dex-red);
  text-decoration: none; }

.heading-anchor.copied::before {
  content: '✓';
  color: var(--color-success); }

/* --------------------------------------------------------------------------
   Bootstrap cards (community shortcode uses these too — must NOT be scoped
   to .td-content). Override via Bootstrap 5 CSS custom properties.
   Also kill Docsy's `max-width: 80%` cap and `me-4` trailing gap.
   -------------------------------------------------------------------------- */
:is(.card, .td-card) {
  --bs-card-bg:                 var(--bg-card);
  --bs-card-color:              var(--text-primary);
  --bs-card-cap-bg:             var(--bg-muted);
  --bs-card-cap-color:          var(--text-primary);
  --bs-card-border-color:       var(--border-subtle);
  --bs-card-border-radius:      0;
  --bs-card-inner-border-radius: 0;
  background-color: var(--bg-card);
  border-color: var(--border-subtle);
  color: var(--text-primary);
  border-radius: 0;
  box-shadow: var(--shadow-sm); }

:is(.content, .td-content) :is(.td-card.card, .td-card-group.card-group) {
  max-width: 100%;
  width: 100%; }

.td-card.card.me-4 {
  margin-right: 0 !important; }

.td-card-group.card-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem; }
  .td-card-group.card-group > .td-card.card {
    flex: 1 1 320px;
    margin: 0;
    border-left: 1px solid var(--border-subtle); }

:is(.card, .td-card) .card-header {
  background-color: var(--bg-muted);
  border-bottom-color: var(--border-subtle);
  color: var(--text-primary);
  font-weight: 600; }

:is(.card, .td-card) .card-body {
  color: var(--text-secondary); }
  :is(.card, .td-card) .card-body p, :is(.card, .td-card) .card-body .card-text {
    color: var(--text-secondary); }

:is(.card, .td-card) a {
  color: var(--link); }

.pageinfo {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0; }
  .pageinfo a {
    color: var(--link); }

/* Community page uses layouts/simple — content lives in .content, not
   .td-content. Match our neutrals. */
.content {
  color: var(--text-primary); }
  .content p, .content li {
    color: var(--text-secondary); }
  .content strong {
    color: var(--text-primary); }
  .content a {
    color: var(--link); }

/* --------------------------------------------------------------------------
   Doc landing cards (/docs/) — minimalist editorial listing
   -------------------------------------------------------------------------- */
.doc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  margin: 2.5rem 0 3rem;
  border-top: 1px solid var(--border-subtle); }

.doc-card {
  display: block;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 1.75rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
  position: relative; }
  .doc-card:last-child {
    border-right: none; }
  .doc-card:hover {
    background-color: var(--red-tint-1);
    text-decoration: none;
    color: inherit; }

.doc-card-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: lowercase;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
  display: block; }

.doc-card h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.45rem;
  letter-spacing: var(--tracking-tight);
  display: flex;
  align-items: center;
  gap: 0.5rem; }
  .doc-card h3::after {
    content: '→';
    color: var(--text-muted);
    font-weight: 400;
    transition: transform 0.15s ease, color 0.15s ease;
    font-family: var(--font-mono); }

.doc-card:hover h3::after {
  color: var(--dex-red);
  transform: translateX(3px); }

.doc-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0; }

@media (max-width: 767.98px) {
  .doc-cards {
    grid-template-columns: 1fr; }
  .doc-card {
    border-right: none; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.td-footer {
  background-color: var(--hero-bg);
  color: var(--hero-text-muted);
  padding: 2rem 0 1rem; }
  .td-footer a {
    color: var(--dex-blue); }
  .td-footer small {
    color: var(--hero-text-muted); }

/* ==========================================================================
   Docsy docs content area — everything inside .td-content, plus the left
   sidebar nav, the right TOC, alerts, tables, code blocks, and dark-theme
   image treatment.
   ========================================================================== */
/* --------------------------------------------------------------------------
   Kill Docsy's legacy scroll-offset hack for heading ids. It inserts a
   `h{N}[id]::before { display: block; height: 5rem; margin-top: -5rem }`
   pseudo that extends the heading's hit box ~80px UPWARD and intercepts
   clicks on any link in the paragraph above. We already use the modern
   `scroll-margin-top` for the same purpose (set below).
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .td-content :is(h2, h3, h4, h5, h6)[id]::before {
    content: none;
    display: none;
    margin-top: 0;
    height: auto;
    visibility: visible; } }

/* Modern scroll offset for the fixed navbar. Replaces Docsy's legacy hack
   that was killed above. No `position: relative` needed — heading-anchor is
   a plain inline element. */
:is(.content-section, .td-content) :is(h2, h3, h4, h5, h6) {
  scroll-margin-top: 90px; }

/* --------------------------------------------------------------------------
   .td-content — headings, paragraphs, tables, pre, blockquote
   -------------------------------------------------------------------------- */
.td-content h1 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 1.25rem; }

.td-content h2 {
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-top: 2.5rem; }

.td-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 2rem; }

.td-content p, .td-content li {
  color: var(--text-secondary);
  line-height: 1.7; }

.td-content strong {
  color: var(--text-primary); }

.td-content pre {
  border-radius: var(--radius-md);
  /* No padding-right here — moved onto the inner <code> (see below) so
       that when long lines overflow horizontally, the scrolled text gets a
       matching 1.25rem of breathing room on the right edge. Padding-right
       on the scroll container itself is not part of the scrollable area
       in every browser, causing text to hug the right edge on scroll. */
  padding: 1rem 0 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  overflow-x: auto; }

.td-content pre > code {
  display: inline-block;
  min-width: calc(100% - 1.25rem);
  padding-right: 1.25rem; }

.td-content table {
  border-collapse: collapse;
  width: 100%; }
  .td-content table th, .td-content table td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--border-subtle); }
  .td-content table th {
    background-color: var(--bg-muted);
    font-weight: 600;
    text-align: left; }

.td-content blockquote {
  border-left: 3px solid var(--dex-blue);
  padding: 0.5rem 1rem;
  margin: 1.25rem 0;
  background-color: var(--bg-muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   Sidebar (left)
   -------------------------------------------------------------------------- */
.td-sidebar {
  background-color: var(--bg-muted);
  border-right: 1px solid var(--border-subtle); }

.td-sidebar-nav {
  padding-left: 0.5rem; }
  .td-sidebar-nav .td-sidebar-link {
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.6rem;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease; }
    .td-sidebar-nav .td-sidebar-link:hover {
      background-color: var(--blue-tint-2);
      color: var(--text-primary); }
    .td-sidebar-nav .td-sidebar-link.active {
      background-color: var(--blue-tint-3);
      color: var(--dex-blue-700);
      font-weight: 600; }

/* --------------------------------------------------------------------------
   Right sidebar "On this page" TOC
   Docsy's `.td-toc #TableOfContents a:hover { color: initial }` resolves to
   canvastext (≈ black) and makes links disappear on dark backgrounds;
   we override with higher specificity.
   -------------------------------------------------------------------------- */
.td-sidebar-toc,
.td-toc {
  background-color: transparent;
  border-left: 1px solid var(--border-subtle); }

/* Docsy's own rule `.td-toc #TableOfContents a:hover { color: initial }` needs
   equal-or-higher specificity to be overridden; we match it with the ID in
   the selector so the hover colour resolves to brand blue, not canvastext. */
:is(.td-toc, .td-sidebar-toc) #TableOfContents a {
  color: var(--text-secondary);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease; }
  :is(.td-toc, .td-sidebar-toc) #TableOfContents a:hover, :is(.td-toc, .td-sidebar-toc) #TableOfContents a:focus {
    background-color: var(--blue-tint-3);
    color: var(--dex-blue);
    text-decoration: none; }
  :is(.td-toc, .td-sidebar-toc) #TableOfContents a.active {
    color: var(--dex-blue);
    font-weight: 600; }

/* --------------------------------------------------------------------------
   Alerts — Docsy hardcodes `background: #fff`, making them invisible on the
   light page background and garish on dark. Mixin emits one variant per
   semantic colour.
   -------------------------------------------------------------------------- */
:is(.td-content, .content) .alert {
  background-color: var(--bg-muted);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--dex-blue);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
  font-weight: 400;
  margin: 1.5rem 0; }
  :is(.td-content, .content) .alert p:last-child {
    margin-bottom: 0; }

:is(.td-content, .content) .alert-heading {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  color: var(--text-primary);
  display: block; }

:is(.td-content, .content) .alert-primary {
  background-color: var(--blue-tint-2);
  border-left-color: var(--dex-blue); }
  :is(.td-content, .content) .alert-primary .alert-heading {
    color: var(--dex-blue-700); }
  :root[data-theme="dark"] :is(.td-content, .content) .alert-primary .alert-heading {
    color: var(--dex-blue-400); }

:is(.td-content, .content) :is(.alert-secondary, .alert-danger) {
  background-color: var(--red-tint-2);
  border-left-color: var(--dex-red); }
  :is(.td-content, .content) :is(.alert-secondary, .alert-danger) .alert-heading {
    color: var(--dex-red-600); }
  :root[data-theme="dark"] :is(.td-content, .content) :is(.alert-secondary, .alert-danger) .alert-heading {
    color: var(--dex-red-300); }

:is(.td-content, .content) .alert-info {
  background-color: var(--color-info-bg);
  border-left-color: var(--color-info); }
  :is(.td-content, .content) .alert-info .alert-heading {
    color: var(--color-info-text); }
  :root[data-theme="dark"] :is(.td-content, .content) .alert-info .alert-heading {
    color: var(--color-info-text-dk); }

:is(.td-content, .content) .alert-success {
  background-color: var(--color-success-bg);
  border-left-color: var(--color-success); }
  :is(.td-content, .content) .alert-success .alert-heading {
    color: var(--color-success-text); }
  :root[data-theme="dark"] :is(.td-content, .content) .alert-success .alert-heading {
    color: var(--color-success-text-dk); }

:is(.td-content, .content) .alert-warning {
  background-color: var(--color-warning-bg);
  border-left-color: var(--color-warning); }
  :is(.td-content, .content) .alert-warning .alert-heading {
    color: var(--color-warning-text); }
  :root[data-theme="dark"] :is(.td-content, .content) .alert-warning .alert-heading {
    color: var(--color-warning-text-dk); }

/* --------------------------------------------------------------------------
   Tables — Bootstrap 5 uses CSS custom properties on .table / .td-table as
   the source of truth; overriding native `color` / `background-color` loses
   to Bootstrap's `--bs-table-*` cascade, so we set those directly.

   Docsy v0.11+ adds `.td-initial` as an opt-out class and scopes its base
   rules with `table:not(.td-initial)` — we have to match that specificity
   or we lose the cascade war.
   -------------------------------------------------------------------------- */
.td-content :is(table:not(.td-initial), .td-table:not(.td-initial), .table) {
  --bs-table-color:         var(--text-primary);
  --bs-table-bg:            transparent;
  --bs-table-striped-color: var(--text-primary);
  --bs-table-striped-bg:    rgba(148, 163, 184, 0.06);
  --bs-table-hover-color:   var(--text-primary);
  --bs-table-hover-bg:      var(--blue-tint-2);
  --bs-table-border-color:  var(--border-subtle);
  color: var(--text-primary);
  border-color: var(--border-subtle); }

.td-content table:not(.td-initial) th,
.td-content table:not(.td-initial) thead th {
  background-color: var(--bg-muted);
  color: var(--text-primary);
  border-color: var(--border-subtle);
  font-weight: 600; }

.td-content table:not(.td-initial) td {
  color: var(--text-primary);
  border-color: var(--border-subtle); }
  .td-content table:not(.td-initial) td code {
    color: var(--dex-red-600);
    background-color: var(--red-tint-2); }

:root[data-theme="dark"] .td-content table:not(.td-initial) td code {
  color: var(--dex-red-300);
  background-color: rgba(252, 165, 165, 0.1); }

/* --------------------------------------------------------------------------
   Code blocks in dark theme — Chroma generates inline `style=""` on .highlight,
   so we use `!important` to beat it. One-time cost, documented.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] .td-content :is(pre, .highlight pre, .highlight, div.highlight) {
  background-color: #0D1424 !important;
  color: #E2E8F0;
  border: 1px solid var(--border-subtle); }

:root[data-theme="dark"] .td-content code {
  background-color: var(--bg-code);
  color: var(--dex-red-300); }

:root[data-theme="dark"] .td-content pre code {
  background-color: transparent;
  color: inherit; }

:root[data-theme="dark"] .td-content :is(p, li, td) code {
  color: var(--dex-red-300);
  background-color: rgba(252, 165, 165, 0.1); }

/* --------------------------------------------------------------------------
   Click-to-copy button on code blocks. Docsy ships `btn btn-dark btn-sm`
   with a grey shadow that visually screams in every theme. Tone it down:
   invisible until hover, subtle muted glyph. Code blocks stay onedark in
   both themes, so the button is always white-on-translucent.
   -------------------------------------------------------------------------- */
.td-content .highlight {
  position: relative; }
  .td-content .highlight .click-to-copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 1; }
  .td-content .highlight:hover .click-to-copy, .td-content .highlight:focus-within .click-to-copy {
    opacity: 1; }
  .td-content .highlight button.td-click-to-copy {
    position: static;
    padding: 0.25rem 0.45rem;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.55);
    box-shadow: none;
    backdrop-filter: blur(4px);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
    .td-content .highlight button.td-click-to-copy:hover, .td-content .highlight button.td-click-to-copy:focus {
      background-color: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.25);
      color: #FFFFFF;
      box-shadow: none;
      outline: none; }
    .td-content .highlight button.td-click-to-copy:active {
      background-color: rgba(255, 255, 255, 0.18);
      color: #FFFFFF;
      transform: none; }

/* --------------------------------------------------------------------------
   Content images — theme-aware diagrams use the {{< diagram >}} shortcode
   (inline SVG, adapts to data-theme automatically). Any remaining legacy
   PNG diagrams in markdown get a white backdrop in dark theme so they
   stay legible; SVGs and no-wrap-tagged raster images are left alone.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] .td-content img:not([src*=".svg"]):not(.no-wrap) {
  background-color: #FFFFFF;
  padding: 1rem;
  border-radius: var(--radius-md);
  max-width: 100%; }

/* Diagram shortcode — theme-aware inline SVG.
   Without an explicit `width: 100%` on the SVG, browsers fall back to the
   UA default 300×150 CSS pixels for inline SVGs that only declare a viewBox.
   `max-width: 100%` alone caps the width but doesn't fill the container,
   so the diagram sits tiny and doesn't visibly grow on browser zoom.
   We force the SVG to fill its container (capped at a reading-column width),
   and `height: auto` derives the height from the viewBox aspect ratio. */
.td-content .diagram {
  margin: 1.75rem 0;
  /* left-aligned, not centred in the reading column */
  padding: 0;
  max-width: 720px; }

/* Architecture diagram — denser content, needs more real estate so icons
   and labels don't collapse. Breaks out of the reading column but still
   capped so icons don't balloon on a wide monitor (the viewBox is 880, so
   past ~1040 CSS px the 26-px connector tiles start reading as buttons). */
.td-content .diagram--wide {
  max-width: 1040px; }

.td-content .diagram svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  /* sit flush left inside the wrapper */ }

.td-content .diagram figcaption {
  margin-top: 0.85rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.04em; }

/* --------------------------------------------------------------------------
   CNCF logo swap (light-coloured art in light theme, white art in dark)
   -------------------------------------------------------------------------- */
.cncf-card .cncf-logo-light {
  display: block; }

.cncf-card .cncf-logo-dark {
  display: none; }

:root[data-theme="dark"] .cncf-card .cncf-logo-light {
  display: none; }

:root[data-theme="dark"] .cncf-card .cncf-logo-dark {
  display: block; }

/* --------------------------------------------------------------------------
   Mobile (docs content only — home is in _home.scss)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .td-content {
    padding-left: 1rem;
    padding-right: 1rem; }
    .td-content h1 {
      font-size: 1.75rem; }
    .td-content h2 {
      font-size: 1.4rem; }
    .td-content h3 {
      font-size: var(--text-lg); }
    .td-content p, .td-content li {
      font-size: var(--text-base); }
    .td-content pre, .td-content code {
      font-size: 0.85rem; }
    .td-content table {
      display: block;
      overflow-x: auto; }
  .td-search__icon {
    margin-left: 12px; } }

/* ==========================================================================
   Home page — engineering editorial
   ========================================================================== */
.td-home .container-fluid.td-outer,
.td-home .td-outer {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  --bs-gutter-x: 0; }

.td-home .td-main {
  padding: 0;
  max-width: 100%; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  background-color: var(--hero-bg);
  color: var(--hero-text);
  overflow: hidden;
  isolation: isolate;
  padding: 6rem 0 7rem; }

/* Soft brand glow */
.hero::after {
  content: '';
  position: absolute;
  top: -25%;
  right: -15%;
  width: 65%;
  height: 150%;
  background: radial-gradient(circle at center, rgba(240, 77, 92, 0.18) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
  filter: blur(30px); }

/* Subtle dot grid */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 85% 65% at 50% 40%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 40%, #000 20%, transparent 80%);
  pointer-events: none;
  z-index: 0; }

/* SVG grain film overlay — gives hero analog depth */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

.hero-container {
  position: relative;
  z-index: 1;
  padding-left: 1.5rem;
  padding-right: 1.5rem; }

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  color: var(--dex-blue-400);
  margin: 0 0 1.5rem;
  display: inline-flex;
  gap: 0.65rem;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(124, 197, 237, 0.25);
  border-radius: 2px;
  background-color: rgba(124, 197, 237, 0.05); }

.hero-eyebrow .sep {
  color: rgba(124, 197, 237, 0.4); }

.hero-title {
  color: var(--hero-text);
  font-size: var(--text-hero);
  font-weight: 700;
  letter-spacing: var(--tracking-tighter);
  line-height: 1.05;
  margin: 0 0 1.5rem; }

.hero-title .accent {
  color: var(--dex-red); }

.hero-subtitle {
  color: #CBD5E1;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.55;
  max-width: 36rem;
  margin: 0 0 2.25rem; }

.hero-subtitle a {
  color: var(--dex-blue-300);
  text-decoration: underline;
  text-decoration-color: rgba(157, 208, 240, 0.4);
  text-underline-offset: 3px; }

.hero-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem; }

.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  border: 1px solid transparent;
  letter-spacing: var(--tracking-normal); }

.btn-hero-primary {
  background-color: var(--dex-red);
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(240, 77, 92, 0.3); }
  .btn-hero-primary:hover {
    background-color: var(--dex-red-500);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(240, 77, 92, 0.4);
    text-decoration: none; }

.btn-hero-ghost {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--hero-text);
  border-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px); }
  .btn-hero-ghost:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--hero-text);
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
    text-decoration: none; }

.hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(203, 213, 225, 0.55);
  letter-spacing: var(--tracking-wide);
  margin: 0;
  text-transform: uppercase; }

.hero-meta .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-success);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.6); }

/* Hero logo */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; }

.hero-logo-wrapper {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center; }

.hero-logo-wrapper::before {
  content: '';
  position: absolute;
  inset: 8%;
  background: radial-gradient(circle, rgba(240, 77, 92, 0.35) 0%, rgba(68, 159, 216, 0.25) 40%, transparent 65%);
  filter: blur(48px);
  z-index: 0; }

.hero-logo {
  position: relative;
  z-index: 1;
  width: 72%;
  height: auto;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.5)); }

/* ==========================================================================
   Bands — alternating full-bleed sections
   ========================================================================== */
.band {
  padding: 5.5rem 0;
  position: relative; }

.band--light {
  background-color: var(--bg-page);
  color: var(--text-primary); }

.band--muted {
  background-color: var(--bg-muted);
  color: var(--text-primary); }

.band .container {
  max-width: 1100px;
  padding-left: 1.5rem;
  padding-right: 1.5rem; }

.band h2 {
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0 0 1rem;
  line-height: 1.1; }

.band .section-lead {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 40rem;
  margin: 0 0 3rem;
  line-height: 1.6; }

.band p {
  color: var(--text-secondary);
  line-height: 1.65; }

/* ==========================================================================
   Section label — editorial mono eyebrow above each h2
   § 01 · capability
   ========================================================================== */
.section-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--dex-red);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.75rem; }

.section-label::before {
  content: '';
  display: inline-block;
  width: 36px;
  height: 1px;
  background-color: var(--dex-red);
  flex-shrink: 0; }

/* ==========================================================================
   Features — borderless, airy, divided by vertical lines
   ========================================================================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle); }

.feature-card {
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--border-subtle);
  background: transparent;
  border-radius: 0;
  transition: background-color 0.2s ease; }

.feature-card:last-child {
  border-right: none; }

.feature-card:hover {
  background-color: var(--blue-tint-1); }

.feature-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: lowercase;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
  display: block; }

.feature-card h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.75rem;
  letter-spacing: var(--tracking-tight);
  line-height: 1.25; }

.feature-card p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0; }

@media (max-width: 991.98px) {
  .features-grid {
    grid-template-columns: 1fr 1fr; }
  .feature-card {
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle); }
  .feature-card:nth-child(2n) {
    border-right: none; }
  .feature-card:nth-last-child(-n+2) {
    border-bottom: none; } }

@media (max-width: 575.98px) {
  .features-grid {
    grid-template-columns: 1fr; }
  .feature-card {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle); }
  .feature-card:last-child {
    border-bottom: none; } }

/* ==========================================================================
   Provider grid — kept sober; red hover to pick up brand
   ========================================================================== */
.providers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin: 0; }

.provider-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1.6rem 1rem;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  color: var(--text-primary); }

.provider-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--dex-red);
  text-decoration: none;
  color: var(--text-primary); }

.provider-card i {
  font-size: 2rem;
  color: var(--text-primary);
  transition: color 0.15s ease;
  display: block;
  line-height: 1; }

.provider-card:hover i {
  color: var(--dex-red); }

.provider-card h4 {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
  cursor: default; }

.providers-more {
  text-align: center;
  margin-top: 2.5rem; }

.btn-more-providers {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-base);
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: transparent;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }

.btn-more-providers:hover {
  border-color: var(--dex-red);
  color: var(--dex-red);
  text-decoration: none;
  transform: translateY(-1px); }

/* ==========================================================================
   Use cases — cards with thick bottom accent borders
   ========================================================================== */
.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem; }

@media (max-width: 1199.98px) {
  .use-cases-grid {
    grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 575.98px) {
  .use-cases-grid {
    grid-template-columns: 1fr; } }

/* Each card carries its own --accent via a class modifier; no fragile
   nth-child chains and no double `:hover` rules. */
.use-case-card {
  --accent: var(--dex-blue);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-bottom: 3px solid var(--accent);
  border-radius: 0;
  padding: 2rem 1.75rem;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column; }

.use-case-card--red {
  --accent: var(--dex-red); }

.use-case-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  border-bottom-color: var(--accent); }

.use-case-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: lowercase;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
  display: block; }

.use-case-card h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.75rem;
  letter-spacing: var(--tracking-tight);
  cursor: default;
  line-height: 1.3; }

.use-case-card p {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.6;
  margin: 0;
  flex-grow: 1; }

/* ==========================================================================
   Positioning — "Dex vs X" cards. No external links (deliberate) — just a
   quiet statement of what Dex is and isn't. Same editorial square grid
   language as features/steps.
   ========================================================================== */
.vs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-subtle); }

.vs-card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background: transparent;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color 0.15s ease; }

.vs-card:hover {
  background-color: var(--red-tint-1); }

.vs-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: lowercase;
  color: var(--dex-red);
  margin: 0 0 0.85rem;
  display: block; }

.vs-card h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.6rem;
  letter-spacing: var(--tracking-tight);
  line-height: 1.3; }

.vs-card p {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.55;
  margin: 0;
  flex-grow: 1; }

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

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

/* ==========================================================================
   Getting Started — slim cards, giant mono numbers, no icons
   ========================================================================== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  counter-reset: step;
  border-top: 1px solid var(--border-subtle); }

.step-card {
  counter-increment: step;
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
  transition: background-color 0.2s ease;
  position: relative; }

.step-card:last-child {
  border-right: none; }

.step-card::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--border-strong);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tighter);
  transition: color 0.2s ease; }

.step-card:hover {
  background-color: var(--red-tint-1);
  text-decoration: none;
  color: inherit; }

.step-card:hover::before {
  color: var(--dex-red); }

.step-card h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
  letter-spacing: var(--tracking-tight); }

.step-card p {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.55;
  margin: 0 0 0.85rem; }

.step-card .step-link {
  color: var(--dex-red);
  font-size: var(--text-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  letter-spacing: 0.02em; }

@media (max-width: 991.98px) {
  .steps-grid {
    grid-template-columns: 1fr; }
  .step-card {
    border-right: none; } }

/* ==========================================================================
   CNCF Badge — right-aligned, asymmetric
   ========================================================================== */
.cncf-section {
  padding-top: 4rem;
  border-top: 1px solid var(--border-subtle);
  margin-top: 5rem;
  display: flex;
  justify-content: center; }

.cncf-card {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  max-width: 560px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-align: left; }

.cncf-card img {
  height: 56px;
  width: auto;
  flex-shrink: 0;
  opacity: 0.85; }

.cncf-card-text {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0; }

.cncf-card-text strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide); }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 991.98px) {
  .hero {
    padding: 4.5rem 0 5rem;
    text-align: center; }
  .hero-eyebrow {
    margin-left: auto;
    margin-right: auto; }
  .hero-buttons {
    justify-content: center; }
  .hero-subtitle {
    margin-left: auto;
    margin-right: auto; }
  .hero-meta {
    margin: 0 auto; }
  .hero-visual {
    margin-top: 2.5rem; }
  .hero-logo-wrapper {
    max-width: 240px; } }

@media (max-width: 767.98px) {
  .hero {
    padding: 3.5rem 0 4rem; }
  .hero-subtitle {
    font-size: 1.05rem; }
  .hero-eyebrow {
    font-size: 0.7rem;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem; }
  .hero-buttons {
    flex-direction: column;
    align-items: stretch; }
  .btn-hero {
    justify-content: center; }
  .band {
    padding: 3.75rem 0; }
  .band .container {
    padding-left: 1rem;
    padding-right: 1rem; }
  .band h2 {
    font-size: 1.85rem; }
  .use-cases-grid,
  .providers-grid {
    grid-template-columns: 1fr; }
  .providers-grid {
    grid-template-columns: repeat(2, 1fr); }
  .cncf-card {
    flex-direction: column;
    text-align: center;
    gap: 1rem; } }

/* ==========================================================================
   Dex website — project styles entry point.
   Built on top of Docsy. Actual rules live in topical partials, imported
   from assets/sass/dex-custom.sass in order.
   ========================================================================== */