:root {
  --dex-blue: #2563eb;
  --dex-blue-rgb: 37, 99, 235;
  --dex-blue-dark: #1e40af;
  --dex-blue-dark-rgb: 30, 64, 175;
  --dex-yellow: #fbbf24;
  --dex-yellow-rgb: 251, 191, 36;
  --dex-yellow-soft: #fde68a;
  --dex-white: #ffffff;
  --dex-surface: #f1f5f9;
  --dex-surface-secondary: #e2e8f0;
  --dex-text: #000000;
  --dex-text-secondary: #374151;
  --dex-text-muted: #6b7280;
  --icon-color: var(--dex-blue-dark);
}

body {
  color: var(--dex-text);
  background: var(--dex-white);
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}

body,
p,
.rt-no-margin,
.rt-menu-text,
.rt-nav-menu-link,
.rt-footer-link,
.rt-bottom-link,
.rt-pages-menu-small-text {
  color: var(--dex-text-secondary);
}

h1,
h2,
h3,
h4,
h5,
h6,
.rt-text-style-h1,
.rt-text-style-h2,
.rt-text-style-h3,
.rt-text-style-h4,
.rt-text-style-h5,
.rt-text-style-h6,
.rt-nav-link,
.rt-nav-menu-link.rt-padding-off {
  color: var(--dex-text);
}

.rt-text-color-white,
.rt-footer .rt-footer-link,
.rt-footer .rt-bottom-link,
.rt-footer p,
.rt-footer .rt-text-style-h4,
.rt-footer .rt-text-style-h6,
.rt-cta-v1 .rt-text-color-white {
  color: var(--dex-white);
}

.rt-text-color-indigo-gray,
.rt-pages-menu-small-text,
.rt-testimonial-v3-para-wrap p,
.rt-faq-bottom p {
  color: var(--dex-text-muted);
}

.rt-heading-gradient,
.rt-text-color-electric-blue,
.rt-text-color-blue,
.rt-nav-menu-link.w--current,
.rt-footer-email,
.rt-bottom-link:hover,
.rt-footer-link:hover {
  color: var(--dex-blue);
}

.rt-heading-gradient {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #0b4cbd, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
}

.rt-background-white,
.rt-nav,
.rt-navbar-menu-dropdown,
.rt-pages-menu,
.rt-faq-v1,
.rt-testimonials-item,
.rt-benefits-box-text-wrap,
.rt-feature-v1-card,
.rt-feature-card-v2,
.rt-ai-agents-v1-left-part,
.rt-choose-v1-content-box {
  background-color: var(--dex-white);
}

.rt-top-bar,
.rt-hero-v1,
.rt-hero-v2,
.rt-hero-v3,
.rt-ai-agents-v1,
.rt-feature-v1,
.rt-choose-v1,
.rt-benefits-v1,
.rt-testimonial-v3,
.rt-faq-v1 {
  background-color: var(--dex-surface);
}

.rt-hero-v1 {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(118px, 10vw, 155px) !important;
  background-image:
    radial-gradient(circle, rgba(var(--dex-blue-rgb), 0.2) 1.2px, transparent 1.6px),
    radial-gradient(circle, rgba(var(--dex-yellow-rgb), 0.22) 1.2px, transparent 1.6px),
    radial-gradient(circle at 16% 24%, rgba(var(--dex-blue-rgb), 0.18), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(var(--dex-yellow-rgb), 0.22), transparent 24%),
    radial-gradient(circle at 50% 86%, rgba(var(--dex-blue-dark-rgb), 0.12), transparent 34%) !important;
  background-position:
    0 0,
    14px 14px,
    center,
    center,
    center !important;
  background-size:
    28px 28px,
    28px 28px,
    auto,
    auto,
    auto !important;
  background-repeat:
    repeat,
    repeat,
    no-repeat,
    no-repeat,
    no-repeat !important;
}

/* Keep the homepage pull-down canvas continuous with the hero background. */
html.dex-home-page,
html.dex-home-page body,
html.dex-home-page body>.rt-top-nav,
html.dex-home-page body>.rt-hero-v1 {
  background-color: var(--dex-surface) !important;
  background-image:
    radial-gradient(circle, rgba(var(--dex-blue-rgb), 0.2) 1.2px, transparent 1.6px),
    radial-gradient(circle, rgba(var(--dex-yellow-rgb), 0.22) 1.2px, transparent 1.6px),
    radial-gradient(circle at 16% 24%, rgba(var(--dex-blue-rgb), 0.18), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(var(--dex-yellow-rgb), 0.22), transparent 24%),
    radial-gradient(circle at 50% 86%, rgba(var(--dex-blue-dark-rgb), 0.12), transparent 34%) !important;
  background-position:
    0 0,
    14px 14px,
    center,
    center,
    center !important;
  background-size:
    28px 28px,
    28px 28px,
    auto,
    auto,
    auto !important;
  background-repeat:
    repeat,
    repeat,
    no-repeat,
    no-repeat,
    no-repeat !important;
  background-attachment:
    scroll,
    scroll,
    scroll,
    scroll,
    scroll !important;
}

/* Keep native momentum and pull-down behavior; fixed multi-layer paints are costly in Safari. */
html.dex-home-page {
  overscroll-behavior-y: auto;
}

.rt-hero-v1-shape,
.rt-hero-v1-glow-image,
.rt-hero-micro-v1,
.rt-hero-micro-v4,
.rt-hero-v1-circule {
  position: absolute !important;
  pointer-events: none;
}

.rt-hero-v1::before {
  content: "";
  position: absolute;
  top: clamp(58px, 7vw, 108px);
  right: clamp(-420px, -21vw, -150px);
  z-index: 0;
  width: clamp(560px, 62vw, 1120px);
  aspect-ratio: 419 / 454;
  background: url("/assets/dex-icon-blue.svg") center / contain no-repeat;
  opacity: 0.14;
  pointer-events: none;
}

.rt-hero-v1>* {
  position: relative;
  z-index: 1;
}

.rt-hero-v1 .rt-container,
.rt-hero-v1-heading-main {
  height: auto !important;
  min-height: 0 !important;
}

.rt-hero-v1-heading-main {
  transform: translateY(clamp(-34px, -3vw, -18px));
}

.rt-nav {
  box-shadow: 0 10px 60px rgba(var(--dex-blue-rgb), 0.12) !important;
}

.rt-top-nav {
  position: sticky !important;
  top: 0;
  z-index: 9999;
  transform: none !important;
}

.rt-top-nav .rt-nav {
  transform: none !important;
  opacity: 1 !important;
}

.rt-top-nav.dex-is-scrolling .rt-navbar-menu-dropdown,
.rt-top-nav.dex-is-scrolling .rt-pages-menu,
.rt-top-nav.dex-is-scrolling .w-dropdown-list,
.rt-top-nav.dex-is-scrolling .w-nav-overlay {
  display: none !important;
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  pointer-events: none !important;
}

.rt-navbar-logo,
.rt-logo-link {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 230px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--dex-blue-dark);
}

.rt-navbar-logo img,
.rt-footer-logo img {
  width: 190px !important;
  height: auto !important;
  object-fit: contain;
}

.rt-footer-logo .rt-logo-link {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.dex-workflow-carousel {
  position: absolute;
  top: 34%;
  left: 22%;
  z-index: 5;
  width: 61%;
  overflow: hidden;
  padding: 10px 6px 16px;
  border-radius: 8px;
  background: rgba(237, 244, 255, 0.82);
  box-shadow: 0 18px 45px rgba(var(--dex-blue-rgb), 0.08);
  backdrop-filter: blur(3px);
  pointer-events: none;
}

.dex-workflow-carousel::before,
.dex-workflow-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 64px;
  pointer-events: none;
}

.dex-workflow-carousel::before {
  left: 0;
  background: linear-gradient(90deg, rgba(237, 244, 255, 0.98), rgba(237, 244, 255, 0));
}

.dex-workflow-carousel::after {
  right: 0;
  background: linear-gradient(270deg, rgba(237, 244, 255, 0.98), rgba(237, 244, 255, 0));
}

.dex-workflow-track {
  --dex-workflow-index: 0;
  --dex-workflow-card-width: clamp(138px, 13vw, 176px);
  --dex-workflow-gap: clamp(16px, 2vw, 30px);
  display: flex;
  gap: var(--dex-workflow-gap);
  align-items: stretch;
  transform: translateX(calc(var(--dex-workflow-index) * -1 * (var(--dex-workflow-card-width) + var(--dex-workflow-gap))));
  animation: dexWorkflowSlide 15s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

@keyframes dexWorkflowSlide {

  0%,
  16% {
    transform: translateX(0);
  }

  20%,
  36% {
    transform: translateX(calc(-1 * (var(--dex-workflow-card-width) + var(--dex-workflow-gap))));
  }

  40%,
  56% {
    transform: translateX(calc(-2 * (var(--dex-workflow-card-width) + var(--dex-workflow-gap))));
  }

  60%,
  76% {
    transform: translateX(calc(-3 * (var(--dex-workflow-card-width) + var(--dex-workflow-gap))));
  }

  80%,
  96% {
    transform: translateX(calc(-4 * (var(--dex-workflow-card-width) + var(--dex-workflow-gap))));
  }

  100% {
    transform: translateX(0);
  }
}

.dex-workflow-card {
  position: relative;
  flex: 0 0 var(--dex-workflow-card-width);
  min-height: clamp(132px, 12vw, 168px);
  padding: 20px 16px 17px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 8px;
  background: var(--dex-white);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  color: var(--dex-text-secondary);
  transform: translateY(0);
  transition: box-shadow 300ms ease, border-color 300ms ease, transform 300ms ease;
}

.dex-workflow-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--dex-workflow-gap));
  width: var(--dex-workflow-gap);
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.24), rgba(var(--dex-blue-rgb), 0.08));
}

.dex-workflow-card:last-child::after {
  display: none;
}

.dex-workflow-card.is-active {
  border-color: var(--dex-blue);
  box-shadow: 0 15px 34px rgba(var(--dex-blue-rgb), 0.22);
  transform: translateY(-3px);
}

.dex-workflow-step-number {
  position: absolute;
  top: 10px;
  left: 10px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 2px solid var(--dex-white);
  border-radius: 999px;
  background: var(--dex-blue);
  color: var(--dex-white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(var(--dex-blue-rgb), 0.28);
}

.dex-workflow-icon {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--dex-blue), var(--dex-blue-dark));
  color: var(--dex-white);
  font-size: 16px;
  font-weight: 800;
}

.dex-workflow-card:nth-child(2) .dex-workflow-icon {
  background: linear-gradient(135deg, var(--dex-blue-dark), var(--dex-blue));
}

.dex-workflow-card:nth-child(3) .dex-workflow-icon {
  background: linear-gradient(135deg, var(--dex-blue), #0f766e);
}

.dex-workflow-card:nth-child(4) .dex-workflow-icon {
  background: linear-gradient(135deg, var(--dex-yellow), #d97706);
}

.dex-workflow-card:nth-child(5) .dex-workflow-icon {
  background: linear-gradient(135deg, var(--dex-blue-dark), #0f766e);
}

.dex-workflow-card:nth-child(6) .dex-workflow-icon {
  background: linear-gradient(135deg, var(--dex-yellow), var(--dex-blue));
}

.dex-workflow-card:nth-child(7) .dex-workflow-icon {
  background: linear-gradient(135deg, #0f766e, var(--dex-blue-dark));
}

.dex-workflow-kicker {
  margin-bottom: 6px;
  color: var(--dex-blue-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.dex-workflow-card h3 {
  margin: 0 0 6px;
  color: var(--dex-text);
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 800;
  line-height: 1.15;
}

.dex-workflow-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--dex-text-muted);
  font-size: clamp(12px, 0.95vw, 14px);
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media screen and (max-width: 767px) {

  .rt-navbar-logo,
  .rt-logo-link {
    max-width: 190px;
    padding: 7px 10px;
  }

  .rt-navbar-logo img,
  .rt-footer-logo img {
    width: 150px !important;
  }

  .rt-hero-v1::before {
    top: 86px;
    right: -330px;
    left: auto;
    width: 620px;
    opacity: 0.1;
  }

  .dex-workflow-carousel {
    display: none;
  }
}

/* Hero Build stage: the delivery story stays complete in the primary panel;
   the terminal remains a supporting desktop-only proof of execution. */
.dex-stage-console-body.is-build-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr) !important;
  gap: 14px !important;
}

.dex-stage-console-body.is-build-layout>.dex-stage-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.dex-build-workbench {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  color: #0f172a;
}

.dex-build-workbench>header small {
  display: block;
  margin-bottom: 4px;
  color: var(--dex-blue);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-transform: uppercase;
}

.dex-build-workbench>header strong {
  display: block;
  margin-bottom: 5px;
  color: #0f172a;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.12;
}

.dex-build-workbench>header p {
  margin: 0;
  color: #475569;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.38;
}

.dex-build-brief {
  padding: 10px 11px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.14);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--dex-blue-rgb), 0.07), rgba(255, 255, 255, 0.96));
}

.dex-build-brief-top {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.dex-build-brief-top>b,
.dex-build-progress>b {
  color: #0f172a;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.dex-build-brief-top>span {
  padding: 4px 7px;
  border-radius: 999px;
  color: #1d4ed8;
  background: rgba(var(--dex-blue-rgb), 0.1);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
}

.dex-build-brief p {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 8px;
  margin: 4px 0 0;
  font-size: 10.5px;
  line-height: 1.2;
}

.dex-build-brief p b {
  color: #64748b;
  font-weight: 900;
}

.dex-build-brief p span {
  color: #1e293b;
  font-weight: 800;
}

.dex-build-progress {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.dex-build-progress>b {
  margin: 1px 0 7px;
}

.dex-build-progress>div {
  display: grid;
  align-content: start;
  gap: 5px;
  overflow: hidden;
}

.dex-build-progress p {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  margin: 0;
  color: #334155;
  font-size: 10.8px;
  font-weight: 750;
  line-height: 1.28;
}

.dex-build-progress p i {
  width: 7px;
  height: 7px;
  margin-top: 3px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.dex-stage-console-body.is-build-layout .dex-build-terminal {
  border: 1px solid rgba(30, 41, 59, 0.34);
  background: #0f172a;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.dex-stage-console-body.is-build-layout .dex-build-terminal .dex-terminal-top {
  background: #1e293b;
}

.dex-stage-console-body.is-build-layout .dex-build-terminal pre {
  color: #7dd3fc;
  font-size: 10.5px;
  line-height: 1.45;
}

@media screen and (max-width: 767px) {
  .dex-stage-console-body.is-build-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dex-stage-console-body.is-build-layout>.dex-build-terminal {
    display: none !important;
  }

  .dex-build-workbench {
    gap: 12px;
  }

  .dex-build-workbench>header strong {
    font-size: 16px;
  }

  .dex-build-workbench>header p {
    font-size: 11.5px;
  }

  .dex-build-brief {
    padding: 11px;
  }

  .dex-build-progress>div {
    max-height: 122px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dex-workflow-track {
    animation: none;
  }
}


.rt-footer,
.rt-cta-v1,
.rt-pages-menu-left {
  background: linear-gradient(135deg, var(--dex-blue-dark), var(--dex-blue));
}

/* Retired landing-page sections: prevent pre-config layout flash. */
.rt-cases-v1,
.rt-benefits-v1,
.rt-faq-v1 {
  display: none !important;
}

.rt-footer-overlay,
.rt-cta-v1-container {
  background: transparent;
}

.rt-cta-v1 {
  position: relative;
  overflow: hidden;
}

.rt-cta-v1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 28px 28px, 56px 56px, 56px 56px;
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  pointer-events: none;
}

.rt-cta-v1::after {
  content: "";
  position: absolute;
  top: -140px;
  right: -190px;
  width: 560px;
  height: 560px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 70%);
  opacity: 1;
  pointer-events: none;
}

.rt-cta-v1>* {
  position: relative;
  z-index: 1;
}

.dex-partner-program {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  padding: clamp(36px, 5vw, 72px) 0;
  color: var(--dex-white);
}

.dex-partner-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.76fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.dex-partner-hero h2 {
  max-width: 760px;
  color: var(--dex-white);
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.02;
}

.dex-partner-hero p {
  max-width: 760px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
}

.dex-partner-highlight {
  color: var(--dex-yellow) !important;
  font-weight: 900;
}

.dex-partner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 28px;
}

.dex-partner-secondary-link {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 8px;
  color: var(--dex-white);
  background: rgba(255, 255, 255, 0.08);
  font-weight: 900;
  text-decoration: none;
}

.dex-partner-metrics {
  display: grid;
  gap: 14px;
}

.dex-partner-metrics article,
.dex-partner-benefits article,
.dex-partner-tiers article {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 48px rgba(3, 7, 18, 0.18);
  backdrop-filter: blur(14px);
}

.dex-partner-metrics article {
  padding: 20px;
}

.dex-partner-metrics strong {
  display: block;
  color: var(--dex-yellow);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 900;
  line-height: 1;
}

.dex-partner-metrics span {
  display: block;
  margin-top: 8px;
  color: var(--dex-white);
  font-size: 16px;
  font-weight: 900;
}

.dex-partner-metrics p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.45;
}

.dex-partner-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.dex-partner-benefits article {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 190px;
  padding: 22px;
}

.dex-partner-benefits article>span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 15px;
  color: var(--dex-blue-dark);
  background: var(--dex-white);
}

.dex-partner-benefits svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  stroke-width: 2.1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-partner-benefits strong {
  color: var(--dex-white);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

.dex-partner-benefits p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.5;
}

.dex-partner-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.dex-partner-tiers article {
  padding: 24px;
  background:
    radial-gradient(circle at 88% 12%, rgba(var(--dex-yellow-rgb), 0.16), transparent 28%),
    rgba(255, 255, 255, 0.1);
}

.dex-partner-tiers small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dex-partner-tiers h3 {
  margin: 12px 0 0;
  color: var(--dex-white);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.16;
}

.dex-partner-tiers strong {
  display: inline-flex;
  margin: 16px 0 12px;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--dex-blue-dark);
  background: var(--dex-yellow);
  font-size: 15px;
  font-weight: 900;
}

.dex-partner-tiers p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.52;
}

.rt-cta-v1 {
  background:
    radial-gradient(ellipse at 14% 22%, rgba(37, 99, 235, 0.55), transparent 50%),
    radial-gradient(ellipse at 85% 76%, rgba(251, 191, 36, 0.13), transparent 44%),
    radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.32), transparent 48%),
    #1E40AF !important;
  background-size: auto !important;
  margin: 0 !important;
  border-radius: clamp(20px, 2.5vw, 36px) clamp(20px, 2.5vw, 36px) 0 0 !important;
  overflow: hidden !important;
}

.dex-partner-program {
  gap: 24px;
  margin: clamp(18px, 3vw, 42px) 0;
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid rgba(var(--dex-blue-dark-rgb), 0.24);
  border-radius: clamp(28px, 3vw, 42px);
  background: rgba(255, 255, 255, 0.94);
  color: var(--dex-text);
  box-shadow: 0 26px 80px rgba(15, 23, 42, 0.12);
}

.dex-partner-heading {
  display: grid;
  gap: 16px;
  max-width: 980px;
  margin: 0 auto 10px;
  text-align: center;
}

.dex-partner-heading .rt-sub-text {
  color: var(--dex-blue) !important;
}

.dex-partner-heading h2 {
  color: var(--dex-text) !important;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.02;
}

.dex-partner-heading p {
  max-width: 820px;
  margin: 0 auto;
  color: var(--dex-text-secondary);
  font-size: clamp(16px, 1.28vw, 18px);
  line-height: 1.55;
}

.dex-partner-heading .dex-partner-highlight {
  color: var(--dex-blue-dark) !important;
}

.dex-partner-actions {
  justify-content: center;
  margin-top: 8px;
}

.dex-partner-secondary-link {
  border-color: rgba(var(--dex-blue-rgb), 0.18);
  color: var(--dex-blue-dark);
  background: rgba(var(--dex-blue-rgb), 0.06);
}

.dex-partner-tiers {
  gap: 0;
  padding: 16px;
  border: 1px solid rgba(var(--dex-blue-dark-rgb), 0.2);
  border-radius: 26px;
  background: var(--dex-white);
}

.dex-partner-tiers article {
  display: flex;
  min-height: 620px;
  flex-direction: column;
  padding: clamp(24px, 2.8vw, 34px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.dex-partner-tiers article.is-recommended {
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 8%, rgba(var(--dex-yellow-rgb), 0.14), transparent 22%),
    linear-gradient(135deg, rgba(var(--dex-blue-rgb), 0.1), rgba(var(--dex-blue-rgb), 0.04));
}

.dex-partner-tier-top {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
}

.dex-partner-tier-top>span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.09);
}

.dex-partner-tier-top svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2.1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-partner-tier-top small {
  color: var(--dex-text-muted);
  letter-spacing: 0;
  text-transform: none;
}

.dex-partner-tier-top b {
  margin-left: auto;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--dex-white);
  background: linear-gradient(135deg, var(--dex-blue), var(--dex-blue-dark));
  box-shadow: 0 12px 28px rgba(var(--dex-blue-rgb), 0.18);
  font-size: 12px;
  font-weight: 900;
}

.dex-partner-tiers h3 {
  margin: 0;
  color: var(--dex-text);
  font-size: clamp(24px, 2.2vw, 34px);
}

.dex-partner-tiers p {
  margin: 18px 0 0;
  color: var(--dex-text-secondary);
  font-size: 15px;
}

.dex-partner-commission {
  margin: 24px 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(var(--dex-blue-dark-rgb), 0.18);
}

.dex-partner-commission strong {
  display: inline;
  margin: 0;
  padding: 0;
  border-radius: 0;
  color: var(--dex-blue);
  background: transparent;
  font-size: clamp(42px, 4vw, 58px);
  line-height: 1;
}

.dex-partner-commission span {
  margin-left: 8px;
  color: var(--dex-text-muted);
  font-weight: 900;
}

.dex-partner-tiers ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dex-partner-tiers li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--dex-text-secondary);
  font-weight: 800;
  line-height: 1.35;
}

.dex-partner-tiers li svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--dex-blue-dark);
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-partner-tiers article>a {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  border-radius: 8px;
  color: var(--dex-white);
  background: var(--dex-blue-dark);
  font-weight: 900;
  text-decoration: none;
}

.dex-partner-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dex-partner-metrics article {
  border-color: rgba(var(--dex-blue-rgb), 0.12);
  background: rgba(var(--dex-blue-rgb), 0.05);
  box-shadow: none;
}

.dex-partner-metrics strong {
  color: var(--dex-blue);
}

.dex-partner-metrics span {
  color: var(--dex-text);
}

.dex-partner-metrics p {
  color: var(--dex-text-secondary);
}

/* DeX Channel Partner Program v2 */
.dex-partner-program-v2 {
  gap: clamp(64px, 8vw, 110px);
  padding: clamp(54px, 7vw, 92px) clamp(22px, 4vw, 56px);
  border-radius: 32px;
  background:
    radial-gradient(circle at 5% 5%, rgba(var(--dex-blue-rgb), 0.09), transparent 24%),
    radial-gradient(circle at 96% 96%, rgba(var(--dex-yellow-rgb), 0.13), transparent 25%),
    rgba(255, 255, 255, 0.96);
}

.dex-partner-v2-heading {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.dex-partner-v2-heading .rt-sub-text,
.dex-partner-value-section>header small,
.dex-partner-tier-section>header small {
  color: var(--dex-blue-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dex-partner-v2-heading h2 {
  margin: 14px 0 0;
  color: var(--dex-text);
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 500;
  line-height: 1.04;
}

.dex-partner-v2-heading h2 span {
  display: block;
  color: var(--dex-blue);
  font-weight: 750;
}

.dex-partner-v2-heading>p {
  max-width: 830px;
  margin: 22px auto 0;
  color: var(--dex-text-secondary);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 600;
  line-height: 1.58;
}

.dex-partner-trust {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 18px 24px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.14);
  border-radius: 18px;
  background: rgba(var(--dex-blue-rgb), 0.035);
}

.dex-partner-trust-wrap {
  display: grid;
  gap: 14px;
}

.dex-partner-trust-label {
  color: var(--dex-text-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.dex-partner-trust b {
  display: grid;
  min-height: 44px;
  place-items: center;
  padding: 8px;
  border-left: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  color: var(--dex-text-secondary);
  font-size: 12px;
  text-align: center;
}

.dex-partner-value-section>header,
.dex-partner-tier-section>header {
  max-width: 820px;
  margin: 0 auto 44px;
  text-align: center;
}

.dex-partner-value-section>header h3,
.dex-partner-tier-section>header h3 {
  margin: 10px 0 0;
  color: var(--dex-text);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
}

.dex-partner-value-section>header h3 span {
  color: var(--dex-blue);
}

.dex-partner-value-section>header p,
.dex-partner-tier-section>header p {
  max-width: 720px;
  margin: 16px auto 0;
  color: var(--dex-text-secondary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
}

.dex-partner-value-map {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(128px, auto));
  gap: 16px 34px;
  align-items: stretch;
}

.dex-partner-value-map::before,
.dex-partner-value-map::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 23%;
  left: 23%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--dex-blue-rgb), 0.28), rgba(var(--dex-yellow-rgb), 0.35), transparent);
  pointer-events: none;
}

.dex-partner-value-map::after {
  transform: rotate(90deg);
}

.dex-partner-core {
  position: relative;
  z-index: 2;
  display: grid;
  grid-column: 2;
  grid-row: 1 / 4;
  width: 230px;
  height: 230px;
  place-items: center;
  align-self: center;
  justify-self: center;
  padding: 42px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.24);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 45%, rgba(var(--dex-blue-rgb), 0.08) 46% 62%, rgba(var(--dex-yellow-rgb), 0.12) 63% 100%);
  box-shadow: 0 24px 60px rgba(var(--dex-blue-rgb), 0.16);
  text-align: center;
}

.dex-partner-core>i {
  position: absolute;
  inset: -13px;
  border: 1px dashed rgba(var(--dex-blue-rgb), 0.25);
  border-radius: 50%;
  animation: dexPartnerOrbit 22s linear infinite;
}

.dex-partner-core>i:nth-child(2) {
  inset: -30px;
  border-color: rgba(var(--dex-yellow-rgb), 0.28);
  animation-direction: reverse;
  animation-duration: 28s;
}

.dex-partner-core>i:nth-child(3) {
  inset: 26px;
  border-style: solid;
  border-color: rgba(var(--dex-blue-rgb), 0.12);
  animation-duration: 16s;
}

.dex-partner-core>span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, var(--dex-blue), var(--dex-blue-dark));
  box-shadow: 0 12px 30px rgba(var(--dex-blue-rgb), 0.3);
}

.dex-partner-core svg,
.dex-partner-value-map article svg,
.dex-partner-v2-tiers svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-partner-core>strong {
  color: var(--dex-text);
  font-size: 17px;
  line-height: 1.1;
}

.dex-partner-core>small {
  color: var(--dex-blue-dark);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dex-partner-value-map>article {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 22px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.15);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.dex-partner-value-map>article:hover {
  border-color: rgba(var(--dex-blue-rgb), 0.35);
  box-shadow: 0 18px 42px rgba(var(--dex-blue-rgb), 0.12);
  transform: translateY(-3px);
}

.dex-partner-value-map>article:nth-of-type(1),
.dex-partner-value-map>article:nth-of-type(3),
.dex-partner-value-map>article:nth-of-type(5) {
  grid-column: 1;
}

.dex-partner-value-map>article:nth-of-type(2),
.dex-partner-value-map>article:nth-of-type(4),
.dex-partner-value-map>article:nth-of-type(6) {
  grid-column: 3;
}

.dex-partner-value-map>article:nth-of-type(1),
.dex-partner-value-map>article:nth-of-type(2) {
  grid-row: 1;
}

.dex-partner-value-map>article:nth-of-type(3),
.dex-partner-value-map>article:nth-of-type(4) {
  grid-row: 2;
}

.dex-partner-value-map>article:nth-of-type(5),
.dex-partner-value-map>article:nth-of-type(6) {
  grid-row: 3;
}

.dex-partner-value-map>article>span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.08);
}

.dex-partner-value-map>article:nth-of-type(even)>span {
  color: #9a6700;
  background: rgba(var(--dex-yellow-rgb), 0.17);
}

.dex-partner-value-map article strong {
  color: var(--dex-text);
  font-size: 16px;
}

.dex-partner-value-map article p {
  margin: 7px 0 0;
  color: var(--dex-text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.dex-partner-tier-section {
  padding-top: clamp(58px, 7vw, 90px);
  border-top: 1px solid rgba(var(--dex-blue-rgb), 0.13);
}

.dex-partner-v2-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.dex-partner-v2-tiers>article {
  position: relative;
  display: flex;
  min-height: 430px;
  flex-direction: column;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.17);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.06);
}

.dex-partner-v2-tiers>article::after {
  content: "";
  position: absolute;
  top: -95px;
  right: -85px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(var(--dex-blue-rgb), 0.025);
}

.dex-partner-v2-tiers>article:nth-child(2) {
  border-color: rgba(var(--dex-yellow-rgb), 0.45);
  background: linear-gradient(145deg, #fff, rgba(var(--dex-yellow-rgb), 0.07));
}

.dex-partner-v2-tiers>article>header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 30px;
  gap: 11px;
  align-items: center;
}

.dex-partner-v2-tiers>article>header>span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, var(--dex-blue), var(--dex-blue-dark));
  font-size: 13px;
  font-weight: 900;
}

.dex-partner-v2-tiers>article:nth-child(2)>header>span {
  color: var(--dex-text);
  background: var(--dex-yellow);
}

.dex-partner-v2-tiers>article>header small {
  color: var(--dex-text-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.dex-partner-v2-tiers>article>header>svg {
  color: var(--dex-blue);
}

.dex-partner-v2-tiers h4 {
  position: relative;
  z-index: 1;
  margin: 26px 0 0;
  color: var(--dex-text);
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.08;
}

.dex-partner-v2-tiers ul {
  display: grid;
  gap: 14px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}

.dex-partner-v2-tiers li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  color: var(--dex-text-secondary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.dex-partner-v2-tiers li svg {
  width: 18px;
  height: 18px;
  color: var(--dex-blue);
}

.dex-partner-v2-tiers>article>a {
  display: flex;
  min-height: 48px;
  gap: 9px;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.2);
  border-radius: 10px;
  color: var(--dex-blue-dark);
  background: rgba(var(--dex-blue-rgb), 0.05);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.dex-partner-v2-tiers>article>a svg {
  width: 17px;
  height: 17px;
}

@keyframes dexPartnerOrbit {
  to {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 1100px) {
  .dex-partner-value-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 14px;
  }

  .dex-partner-value-map::before,
  .dex-partner-value-map::after {
    display: none;
  }

  .dex-partner-core {
    grid-column: 1 / -1;
    grid-row: auto;
    width: 210px;
    height: 210px;
    margin: 20px auto 34px;
  }

  .dex-partner-value-map>article:nth-of-type(n) {
    grid-column: auto;
    grid-row: auto;
  }
}

@media screen and (max-width: 767px) {
  .dex-partner-program-v2 {
    gap: 54px;
    padding: 42px 14px;
  }

  .dex-partner-v2-heading h2 {
    font-size: 36px;
  }

  .dex-partner-v2-heading>p {
    font-size: 15px;
  }

  .dex-partner-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
  }

  .dex-partner-trust b {
    min-height: 38px;
    border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
    border-radius: 8px;
  }

  .dex-partner-trust b:last-child {
    grid-column: 1 / -1;
  }

  .dex-partner-value-section>header,
  .dex-partner-tier-section>header {
    margin-bottom: 28px;
  }

  .dex-partner-value-section>header h3,
  .dex-partner-tier-section>header h3 {
    font-size: 31px;
  }

  .dex-partner-value-section>header p,
  .dex-partner-tier-section>header p {
    font-size: 14px;
  }

  .dex-partner-value-map {
    grid-template-columns: 1fr;
  }

  .dex-partner-core {
    grid-column: 1;
    width: 185px;
    height: 185px;
    padding: 34px;
  }

  .dex-partner-value-map>article {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 18px;
  }

  .dex-partner-value-map>article>span {
    width: 42px;
    height: 42px;
  }

  .dex-partner-v2-tiers {
    grid-template-columns: 1fr;
  }

  .dex-partner-v2-tiers>article {
    min-height: 0;
    padding: 24px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .dex-partner-program-v2 *,
  .dex-partner-program-v2 *::before,
  .dex-partner-program-v2 *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

.rt-faq-v1 {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--dex-blue-rgb), 0.11), transparent 28%),
    linear-gradient(180deg, var(--dex-surface), var(--dex-white));
}

.dex-page-links-section {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

.dex-page-links-heading {
  max-width: 820px;
}

.dex-page-links-heading h2 {
  margin: 0;
  color: var(--dex-text);
  font-size: clamp(34px, 4.5vw, 62px);
  line-height: 1.03;
}

.dex-page-links-heading p {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--dex-text-secondary);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
}

.dex-page-links-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.dex-page-link-card {
  position: relative;
  display: grid;
  grid-column: span 3;
  min-height: 238px;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  align-content: start;
  padding: clamp(22px, 2.3vw, 30px);
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.13);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--dex-text);
  text-decoration: none;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.07);
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.dex-page-link-card::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -46px;
  width: 146px;
  height: 146px;
  border-radius: 999px;
  background: rgba(var(--dex-blue-rgb), 0.07);
  pointer-events: none;
}

.dex-page-link-card:hover {
  border-color: rgba(var(--dex-blue-rgb), 0.28);
  box-shadow: 0 24px 62px rgba(var(--dex-blue-rgb), 0.14);
  transform: translateY(-5px);
}

.dex-page-link-card.is-featured {
  background:
    radial-gradient(circle at 88% 12%, rgba(var(--dex-yellow-rgb), 0.16), transparent 26%),
    linear-gradient(135deg, var(--dex-white), rgba(var(--dex-blue-rgb), 0.08));
}

.dex-page-link-card:nth-child(n + 5) {
  grid-column: span 4;
}

.dex-page-link-card>span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 18px;
  color: var(--dex-white);
  background: linear-gradient(135deg, var(--dex-blue), var(--dex-blue-dark));
  box-shadow: 0 14px 34px rgba(var(--dex-blue-rgb), 0.2);
}

.dex-page-link-card svg {
  width: 25px;
  height: 25px;
  stroke: currentColor;
  stroke-width: 2.1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-page-link-card small {
  display: block;
  margin-bottom: 9px;
  color: var(--dex-blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.dex-page-link-card h3 {
  margin: 0;
  color: var(--dex-text);
  font-size: clamp(21px, 2vw, 29px);
  font-weight: 900;
  line-height: 1.12;
}

.dex-page-link-card p {
  margin: 12px 0 0;
  color: var(--dex-text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.dex-page-link-card>i {
  position: absolute;
  right: 22px;
  bottom: 20px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.09);
  font-style: normal;
  font-weight: 900;
}

.rt-sub-text,
.rt-topbar-text {
  color: var(--dex-blue-dark);
}

.rt-topbar-text-wrap,
.rt-sub-text {
  background-color: transparent !important;
}

.rt-sub-text {
  padding-right: 0 !important;
  padding-left: 0 !important;
  border-radius: 0 !important;
}

.rt-button-v1,
.w-button {
  color: var(--dex-white);
  background: var(--dex-blue);
  border-color: var(--dex-blue);
}

.rt-button-v1-main:hover .rt-button-v1,
.rt-button-v1:hover,
.w-button:hover {
  color: var(--dex-text);
  background: var(--dex-yellow);
  border-color: var(--dex-yellow);
}

.rt-button-overlay {
  background: var(--dex-yellow);
}

.rt-button-v1-main,
.rt-text-small,
.icon-btn,
.icon,
.card,
.similar-panel,
.floating-popup {
  color: var(--dex-text-secondary);
}

.rt-button-v1-main[data-wf--rt-button-v1--variant="border-white"] .rt-button-v1,
.rt-button-v1.w-variant-5e696b0d-9bae-1fea-72c4-88c2e9146baf {
  color: var(--dex-white);
  background: transparent;
  border-color: var(--dex-white);
}

.rt-button-v1-main[data-wf--rt-button-v1--variant="border-white"]:hover .rt-button-v1,
.rt-button-v1.w-variant-5e696b0d-9bae-1fea-72c4-88c2e9146baf:hover {
  color: var(--dex-text);
  background: var(--dex-yellow);
  border-color: var(--dex-yellow);
}

.rt-navbar-dropdown-toggle:hover .rt-menu-text,
.rt-navbar-dropdown-toggle.w--open .rt-menu-text,
.rt-nav-menu-link:hover,
.rt-pages-menu-link-wrap:hover .rt-nav-menu-link,
.rt-pages-menu-link-wrap:hover .rt-nav-link {
  color: var(--dex-blue);
}

.dex-header-dropdown {
  position: relative;
}

.rt-navbar-wrapper {
  display: flex;
  align-items: center;
}

.rt-navbar-v1-menu-desktop {
  position: absolute;
  left: 50%;
  top: 50%;
  align-items: center;
  gap: clamp(22px, 3vw, 48px);
  transform: translate(-50%, -50%);
  justify-content: center;
}

.dex-header-dropdown:hover>.w-dropdown-list,
.dex-header-dropdown:focus-within>.w-dropdown-list {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.dex-header-simple-menu {
  min-width: 260px;
  padding: 10px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 12px;
  background: var(--dex-white);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

.dex-header-simple-menu .rt-nav-menu-link {
  display: block;
  border-radius: 9px;
  color: var(--dex-blue);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.dex-header-simple-menu .rt-nav-menu-link:hover {
  color: var(--dex-text);
  background: rgba(var(--dex-yellow-rgb), 0.18);
}

.dex-header-product-menu {
  min-width: 310px;
  padding: 12px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 14px;
  background: var(--dex-white);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

.dex-header-product-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 12px;
  color: var(--dex-text);
  transition: background 180ms ease, transform 180ms ease;
}

.dex-header-product-card:hover {
  background: rgba(var(--dex-blue-rgb), 0.05);
  transform: translateY(-1px);
}

.dex-header-product-logo {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(var(--dex-blue-rgb), 0.08), rgba(var(--dex-yellow-rgb), 0.1));
}

.dex-header-product-logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.dex-header-product-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.dex-header-product-copy strong {
  color: var(--dex-text);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.15;
}

.dex-header-product-copy small {
  color: var(--dex-text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.dex-header-about-dropdown .dex-header-simple-menu {
  min-width: 285px;
}

.dex-header-mega-menu {
  min-width: min(760px, calc(100vw - 40px));
}

.dex-header-mega-wrap {
  align-items: stretch;
}

.dex-header-menu-left {
  background: linear-gradient(145deg, var(--dex-blue), var(--dex-blue-dark));
}

.dex-header-menu-mark {
  display: grid;
  width: 48px !important;
  height: 48px !important;
  place-items: center;
}

.dex-header-menu-mark img {
  width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  object-fit: contain;
}

.dex-header-menu-grid {
  flex: 1;
}

.dex-header-menu-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 10px;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.08);
}

.dex-header-menu-icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-header-mega-menu .rt-pages-menu-link-wrap:hover .dex-header-menu-icon {
  color: var(--dex-text);
  background: var(--dex-yellow);
}

.dex-header-access-link {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 10px;
  color: var(--dex-text);
  line-height: 1;
  white-space: nowrap;
}

.dex-header-dex-menu {
  min-width: min(760px, calc(100vw - 40px));
  padding: 14px !important;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.14) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 28px 70px rgba(15, 39, 91, 0.16) !important;
}

.dex-header-dex-panel {
  display: grid;
  grid-template-columns: minmax(240px, 0.88fr) minmax(330px, 1.15fr);
  gap: 18px;
  align-items: stretch;
}

.dex-header-dex-feature {
  display: grid;
  align-content: start;
  min-height: 300px;
  padding: 28px;
  overflow: hidden;
  border-radius: 18px;
  color: #ffffff;
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.26), transparent 22%),
    radial-gradient(circle at 86% 82%, rgba(var(--dex-yellow-rgb), 0.36), transparent 28%),
    linear-gradient(135deg, #1e40af 0%, var(--dex-blue) 52%, #3b82f6 100%);
}

.dex-header-dex-logo {
  display: block;
  width: 132px;
  margin-bottom: 42px;
}

.dex-header-dex-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.dex-header-dex-feature strong {
  max-width: 280px;
  color: #ffffff;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.08;
}

.dex-header-dex-feature p {
  max-width: 320px;
  margin: 15px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.dex-header-dex-feature a {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 0 18px;
  border-radius: 12px;
  color: #101827;
  background: #ffffff;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.dex-header-dex-links {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 8px 0;
}

.dex-header-dex-link {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  gap: 16px;
  align-items: center;
  padding: 20px 8px 20px 0;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  color: #111827;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}

.dex-header-dex-link:last-child {
  border-bottom: 0;
}

.dex-header-dex-link:hover {
  background: rgba(var(--dex-blue-rgb), 0.035);
  transform: translateX(2px);
}

.dex-header-dex-link>span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.08);
}

.dex-header-dex-link:hover>span {
  color: #111827;
  background: var(--dex-yellow);
}

.dex-header-dex-link svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-header-dex-link strong {
  display: block;
  color: #1f2a44;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
}

.dex-header-dex-link small {
  display: block;
  margin-top: 7px;
  color: #4f5f73;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
}

.dex-header-dex-link>i {
  color: #111827;
  font-size: 22px;
  font-style: normal;
  line-height: 1;
}

@media screen and (max-width: 991px) {
  .rt-navbar-v1-menu-desktop {
    position: static;
    transform: none;
  }
}

.rt-navbar-menu-dropdown,
.rt-pages-menu-link-wrap,
.rt-faq-item,
.rt-testimonials-item,
.rt-benefits-card-wrap,
.rt-feature-v1-card,
.rt-cases-v1-main,
.rt-ai-agents-v1-left-part,
.rt-choose-v1-content-box {
  border-color: var(--dex-surface-secondary);
}

.rt-hero-v1-circule,
.rt-topbar-circlule-v1,
.rt-cases-v1-icon-wrap,
.rt-benefits-icon-wrap,
.rt-faq-icon-wrapper {
  background-color: var(--dex-yellow);
}

.rt-hero-v1-circule.rt-two,
.rt-hero-v1-circule.rt-three,
.rt-hero-v1-circule.rt-four {
  background-color: var(--dex-blue);
}

.rt-footer-top-line,
.rt-footer-bottom-line {
  background-color: rgba(255, 255, 255, 0.24);
}

.rt-feature-card-gradient {
  background-image: linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.1), rgba(var(--dex-yellow-rgb), 0.12)) !important;
}

.rt-feature-v1 {
  position: relative;
  overflow: hidden;
}

.rt-feature-v1::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(var(--dex-blue-rgb), 0.12), transparent 28%),
    radial-gradient(circle at 86% 14%, rgba(var(--dex-yellow-rgb), 0.18), transparent 24%);
  pointer-events: none;
}

.rt-testimonial-v1 {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--dex-white), rgba(var(--dex-blue-rgb), 0.04));
}

.rt-testimonial-v1-marquee-main {
  align-items: stretch;
  mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
}

.rt-testimonial-marquee.dex-client-story-marquee {
  position: relative;
  gap: 18px;
}

.dex-client-story-train {
  gap: 18px;
  will-change: transform;
  animation-play-state: paused;
}

.dex-client-story-marquee .dex-client-story-train.rt-up {
  animation: dexClientStoryUp var(--dex-story-duration, 30s) linear infinite;
}

.dex-client-story-marquee .dex-client-story-train.rt-down {
  animation: dexClientStoryDown var(--dex-story-duration, 30s) linear infinite;
}

.dex-client-story-marquee .dex-client-story-train.rt-up,
.dex-client-story-marquee .dex-client-story-train.rt-down {
  animation-play-state: paused;
}

.rt-testimonial-v1.dex-client-story-active .dex-client-story-train {
  animation-play-state: running;
}

.dex-client-story-marquee:hover .dex-client-story-train {
  animation-play-state: paused;
}

/*
  Height follows the content. Every story is written to the same shape — one
  line of company, one of title, five of copy — so the cards match without
  being pinned to a height that left them nearly half empty.
*/
.dex-client-story-card {
  position: relative;
  display: flex;
  height: auto !important;
  min-height: 0;
  padding: 20px;
  overflow: hidden;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  background:
    radial-gradient(circle at 86% 0%, rgba(var(--dex-yellow-rgb), 0.16), transparent 32%),
    linear-gradient(180deg, var(--dex-white), rgba(var(--dex-blue-rgb), 0.035));
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.dex-client-story-head {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 52px;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.dex-story-brand {
  display: flex;
  width: 128px;
  height: 52px;
  align-items: center;
  justify-content: flex-start;
  padding: 7px 11px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.dex-story-brand img {
  width: 106px;
  max-height: 36px;
  object-fit: contain;
  object-position: left center;
}

.dex-client-story-head>small {
  max-width: 130px;
  color: var(--dex-text-muted);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.35;
  text-align: right;
  text-transform: uppercase;
}

.dex-client-story-head.is-text-only {
  min-height: 52px;
  justify-content: flex-start;
}

.dex-client-story-head.is-text-only>small {
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 999px;
  color: var(--dex-blue-dark);
  background: rgba(var(--dex-blue-rgb), 0.055);
  text-align: left;
}

.dex-client-story-card h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--dex-text);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.28;
}

.dex-client-story-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--dex-text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.58;
}

.dex-client-story-card p>span {
  display: inline-block;
  margin-right: 5px;
  color: var(--dex-yellow);
  font-size: 25px;
  font-weight: 900;
  line-height: 0;
  transform: translateY(5px);
}

@media screen and (max-width: 767px) {
  .dex-client-story-card {
    height: auto !important;
    min-height: 0;
    padding: 18px 16px;
  }

  .dex-client-story-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .dex-client-story-head>small {
    max-width: 100%;
    text-align: left;
  }

  .dex-client-story-card h3 {
    font-size: 17px;
  }
}

@keyframes dexClientStoryUp {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

@keyframes dexClientStoryDown {
  from {
    transform: translateY(-50%);
  }

  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dex-client-story-marquee .dex-client-story-train {
    animation: none;
  }
}

.rt-feature-v1>* {
  position: relative;
  z-index: 1;
}

.dex-architecture-heading {
  max-width: 880px;
  margin: 0 auto clamp(34px, 5vw, 58px);
  text-align: center;
}

.dex-architecture-heading h2 {
  margin: 0;
  color: var(--dex-text);
}

.dex-architecture-heading p {
  max-width: 780px;
  margin: 18px auto 0;
  color: var(--dex-text-secondary);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
}

.dex-architecture-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.dex-architecture-card {
  position: relative;
  grid-column: span 3;
  min-width: 0;
  padding: clamp(22px, 2.4vw, 30px);
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.11);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.07);
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}

.dex-architecture-card::after {
  content: "";
  position: absolute;
  right: -44px;
  top: -48px;
  width: 142px;
  height: 142px;
  border-radius: 999px;
  background: rgba(var(--dex-blue-rgb), 0.08);
  pointer-events: none;
}

.dex-architecture-card:hover {
  border-color: rgba(var(--dex-blue-rgb), 0.24);
  box-shadow: 0 24px 58px rgba(var(--dex-blue-rgb), 0.13);
  transform: translateY(-5px);
}

.dex-architecture-card.is-featured {
  background:
    radial-gradient(circle at 92% 8%, rgba(var(--dex-yellow-rgb), 0.22), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.92));
}

.dex-architecture-card:nth-child(n + 5) {
  grid-column: span 4;
}

.dex-architecture-card-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.dex-architecture-card-top>span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  color: var(--dex-white);
  background: linear-gradient(135deg, var(--dex-blue), var(--dex-blue-dark));
  box-shadow: 0 14px 28px rgba(var(--dex-blue-rgb), 0.22);
}

.dex-architecture-card svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-architecture-card h3 {
  margin: 0 0 10px;
  color: var(--dex-text);
  font-size: clamp(21px, 2vw, 30px);
  font-weight: 900;
  line-height: 1.08;
}

.dex-architecture-card strong {
  display: block;
  margin-bottom: 14px;
  color: var(--dex-blue);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

.dex-architecture-card p {
  margin: 0 0 20px;
  color: var(--dex-text-secondary);
  font-size: 14px;
  line-height: 1.58;
}

.dex-architecture-card ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dex-architecture-card li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: var(--dex-text-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.dex-architecture-card li svg {
  width: 16px;
  height: 16px;
  color: var(--dex-blue);
}

.rt-benefits-card-wrap .dex-benefit-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.16);
  border-radius: 18px;
  color: var(--dex-blue);
  background:
    radial-gradient(circle at 72% 20%, rgba(var(--dex-yellow-rgb), 0.2), transparent 34%),
    linear-gradient(135deg, var(--dex-white), rgba(var(--dex-blue-rgb), 0.08));
  box-shadow: 0 14px 34px rgba(var(--dex-blue-rgb), 0.12);
}

.rt-benefits-card-wrap .dex-benefit-icon svg {
  width: 27px;
  height: 27px;
  stroke: currentColor;
  stroke-width: 2.1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-scroll-reveal .dex-architecture-heading,
.dex-scroll-reveal .dex-architecture-card,
.dex-scroll-reveal .dex-phase-visual,
.dex-scroll-reveal .dex-phase-copy {
  opacity: 0;
  transform: translateY(34px);
}

.dex-scroll-reveal.is-in-view .dex-architecture-heading,
.dex-scroll-reveal.is-in-view .dex-architecture-card,
.dex-scroll-reveal.is-in-view .dex-phase-visual,
.dex-scroll-reveal.is-in-view .dex-phase-copy {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 780ms ease,
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-scroll-reveal.is-in-view .dex-architecture-card:nth-child(1) {
  transition-delay: 90ms;
}

.dex-scroll-reveal.is-in-view .dex-architecture-card:nth-child(2) {
  transition-delay: 160ms;
}

.dex-scroll-reveal.is-in-view .dex-architecture-card:nth-child(3) {
  transition-delay: 230ms;
}

.dex-scroll-reveal.is-in-view .dex-architecture-card:nth-child(4) {
  transition-delay: 300ms;
}

.dex-scroll-reveal.is-in-view .dex-architecture-card:nth-child(5) {
  transition-delay: 370ms;
}

.dex-scroll-reveal.is-in-view .dex-architecture-card:nth-child(6) {
  transition-delay: 440ms;
}

.dex-scroll-reveal.is-in-view .dex-architecture-card:nth-child(7) {
  transition-delay: 510ms;
}

.dex-scroll-reveal.is-in-view .dex-phase-visual {
  transition-delay: 80ms;
}

.dex-scroll-reveal.is-in-view .dex-phase-copy {
  transition-delay: 220ms;
}

.dex-scroll-reveal:not(.is-in-view) .dex-phase-copy.is-ready {
  opacity: 0;
  transform: translateY(34px);
}

.dex-scroll-reveal.is-in-view .dex-architecture-card:hover {
  transform: translateY(-5px);
}

.rt-choose-us-v1 {
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-right: 0;
  padding-left: 0;
  background: var(--dex-surface);
}

.rt-choose-us-v1 .rt-container {
  width: 100%;
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}

.dex-choose-dashboard-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 0.52fr) minmax(0, 1.48fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(38px, 5.2vw, 78px) clamp(28px, 5vw, 86px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: clamp(34px, 4.6vw, 72px);
  background:
    radial-gradient(circle at 16% 18%, rgba(var(--dex-blue-rgb), 0.32), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(var(--dex-yellow-rgb), 0.22), transparent 24%),
    linear-gradient(135deg, #0f235c, var(--dex-blue-dark) 48%, var(--dex-blue));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.dex-choose-dashboard-section::before,
.dex-choose-dashboard-section::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.dex-choose-dashboard-section::before {
  right: -90px;
  top: -120px;
  width: 340px;
  height: 340px;
  background: rgba(255, 255, 255, 0.12);
  filter: blur(2px);
}

.dex-choose-dashboard-section::after {
  right: 26%;
  bottom: -120px;
  width: 260px;
  height: 260px;
  background: rgba(var(--dex-yellow-rgb), 0.16);
  filter: blur(18px);
}

.dex-choose-copy,
.dex-dashboard-preview {
  position: relative;
  z-index: 1;
}

.dex-choose-copy {
  color: var(--dex-white);
}

.dex-choose-copy h2 {
  max-width: 470px;
  color: var(--dex-white);
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.02;
}

.dex-choose-copy>p {
  max-width: 500px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(16px, 1.28vw, 18px);
  line-height: 1.5;
}

.dex-choose-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(105px, 1fr));
  gap: 12px;
  margin-top: clamp(24px, 3vw, 36px);
}

.dex-choose-benefits article {
  display: grid;
  gap: 9px;
  align-content: center;
  justify-items: center;
  min-height: 104px;
  padding: 14px 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  text-align: center;
  backdrop-filter: blur(12px);
}

.dex-choose-benefits article>span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: var(--dex-blue-dark);
  background: rgba(255, 255, 255, 0.92);
}

.dex-choose-benefits svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-choose-benefits strong {
  display: block;
  color: var(--dex-white);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.dex-choose-dashboard-section.dex-choose-stage-only {
  position: relative;
  container-type: inline-size;
  display: block;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/*
  Caption for the current slide. The artwork carries its own left-hand copy and
  benefit pills as pixels, identically on every slide, so from 1101px up the
  caption is placed into the empty band beneath them and sized in container units
  to track the image. Below that the band is too short to stay readable, so the
  caption becomes a card under the artwork instead.
*/
/*
  The caption replaces the section's old static description. It follows the copy
  column's existing treatment — eyebrow, heading, body — rather than introducing
  a separate card style.
*/
.dex-choose-stage-caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--dex-white);
}

.dex-choose-stage-caption.is-live {
  animation: dexChooseCaptionIn 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.dex-choose-stage-caption-tag {
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.dex-choose-stage-caption strong {
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(22px, 2.05vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.dex-choose-stage-caption span:last-child {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(15px, 1.18vw, 19px);
  line-height: 1.5;
}

@keyframes dexChooseCaptionIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.dex-choose-dashboard-section.dex-choose-stage-only::before,
.dex-choose-dashboard-section.dex-choose-stage-only::after {
  display: none;
}

.dex-choose-mobile-copy {
  display: none;
}

.dex-choose-mobile-visual-shell {
  display: contents;
}

.dex-choose-mobile-static-frame {
  display: none;
}

.dex-choose-mobile-reader-tools,
.dex-choose-reader {
  display: none;
}

.dex-choose-stage-visual {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1944 / 786;
  overflow: hidden;
  border: 0;
  border-radius: clamp(18px, 2.8vw, 44px);
  background: transparent;
  isolation: isolate;
}

.dex-choose-stage-frame,
.dex-choose-stage-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dex-choose-stage-image {
  max-width: none;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 620ms ease;
  pointer-events: none;
}

.dex-choose-stage-image.is-active {
  z-index: 1;
  opacity: 1;
}

.dex-choose-stage-controls {
  position: absolute;
  bottom: clamp(10px, 1.35vw, 22px);
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  width: auto;
  padding: 0;
  transform: translateX(-50%);
}

.dex-choose-stage-progress {
  width: clamp(84px, 10vw, 150px);
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: 0 1px 5px rgba(6, 19, 56, 0.2);
}

.dex-choose-stage-progress i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--dex-yellow);
  transform: scaleX(0);
  transform-origin: left center;
}

.dex-choose-stage-progress i.is-running {
  animation: dexChooseStageProgress 4600ms linear forwards;
}

.dex-choose-stage-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.dex-choose-stage-tabs button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 1px 4px rgba(6, 19, 56, 0.24);
  cursor: pointer;
  transition: width 220ms ease, background 220ms ease, transform 220ms ease;
}

.dex-choose-stage-tabs button:hover,
.dex-choose-stage-tabs button:focus-visible {
  background: var(--dex-white);
  transform: scale(1.15);
  outline: none;
}

.dex-choose-stage-tabs button[aria-selected="true"] {
  width: 22px;
  background: var(--dex-yellow);
}

@keyframes dexChooseStageProgress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {

  .dex-choose-stage-image,
  .dex-choose-stage-tabs button {
    transition: none;
  }

  .dex-choose-stage-progress i {
    animation: none;
  }
}

.dex-dashboard-preview {
  display: grid;
  grid-template-columns: minmax(132px, 168px) minmax(0, 1fr);
  width: min(112%, 1040px);
  min-height: 0;
  aspect-ratio: 1.72 / 1;
  justify-self: end;
  transform: translateX(58px) translateY(-2px) rotate(-1deg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 32px;
  background: #eef4fb;
  box-shadow: 0 34px 88px rgba(3, 7, 18, 0.32), 0 0 0 10px rgba(255, 255, 255, 0.08);
}

.dex-dashboard-preview::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 40px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(var(--dex-blue-rgb), 0.18));
  transform: translate(18px, 20px);
}

.dex-dashboard-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 14px;
  color: rgba(255, 255, 255, 0.78);
  background: linear-gradient(180deg, var(--dex-blue-dark), #081636);
}

.dex-dashboard-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.dex-dashboard-logo img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.dex-dashboard-logo strong {
  color: var(--dex-white);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.dex-dashboard-sidebar>span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dex-dashboard-sidebar>b,
.dex-dashboard-sidebar>p {
  margin: 0;
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
}

.dex-dashboard-sidebar>b {
  color: var(--dex-yellow);
  background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 3px 0 0 var(--dex-yellow);
}

.dex-dashboard-health {
  margin-top: auto;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
}

.dex-dashboard-health small {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.dex-dashboard-health strong {
  display: block;
  margin: 7px 0;
  color: var(--dex-yellow);
  font-size: 26px;
  font-weight: 900;
}

.dex-dashboard-health i {
  display: block;
  width: 92%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dex-yellow), var(--dex-blue));
}

.dex-dashboard-main {
  min-width: 0;
  padding: clamp(16px, 2vw, 24px);
  overflow: hidden;
}

.dex-dashboard-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.dex-dashboard-topbar strong {
  display: block;
  color: var(--dex-text);
  font-size: clamp(22px, 2.2vw, 31px);
  font-weight: 900;
  line-height: 1.05;
}

.dex-dashboard-topbar p {
  margin: 5px 0 0;
  color: var(--dex-text-muted);
  font-size: 14px;
  font-weight: 800;
}

.dex-dashboard-topbar button {
  flex: 0 0 auto;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  color: var(--dex-white);
  background: linear-gradient(135deg, var(--dex-blue), var(--dex-blue-dark));
  box-shadow: 0 14px 28px rgba(var(--dex-blue-rgb), 0.24);
  font-weight: 900;
}

.dex-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.dex-dashboard-metrics article,
.dex-dashboard-chart,
.dex-dashboard-score {
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.dex-dashboard-metrics article {
  min-height: 92px;
  padding: 14px;
}

.dex-dashboard-metrics span {
  display: block;
  color: var(--dex-text-muted);
  font-size: 12px;
  font-weight: 900;
}

.dex-dashboard-metrics strong {
  display: block;
  margin: 9px 0 6px;
  color: var(--dex-text);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.dex-dashboard-metrics small {
  color: var(--dex-text-muted);
  font-size: 12px;
  line-height: 1.3;
}

.dex-dashboard-content {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(210px, 0.75fr);
  gap: 12px;
}

.dex-dashboard-chart,
.dex-dashboard-score {
  padding: 18px;
}

.dex-dashboard-chart strong,
.dex-dashboard-score strong {
  display: block;
  color: var(--dex-text);
  font-size: 22px;
  font-weight: 900;
}

.dex-dashboard-chart span,
.dex-dashboard-score span {
  color: var(--dex-text-muted);
  font-size: 13px;
  font-weight: 800;
}

.dex-dashboard-chart svg {
  width: 100%;
  height: 160px;
  margin-top: 10px;
}

.dex-dashboard-chart path {
  fill: none;
  stroke: var(--dex-blue);
  stroke-width: 7;
  stroke-linecap: round;
}

.dex-dashboard-chart circle {
  fill: var(--dex-white);
  stroke: var(--dex-blue);
  stroke-width: 6;
}

.dex-dashboard-score {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dex-dashboard-score>strong {
  font-size: 44px;
  text-align: center;
}

.dex-dashboard-score>span {
  display: block;
  margin-bottom: 28px;
  text-align: center;
}

.dex-dashboard-score p {
  margin: 0 0 18px;
  color: var(--dex-text-secondary);
  font-size: 13px;
  font-weight: 800;
}

.dex-dashboard-score b {
  display: block;
  width: 100%;
  height: 7px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dex-blue), #60a5fa 82%, rgba(var(--dex-blue-rgb), 0.08) 82%);
}

.floating-popup {
  background: var(--dex-white);
}

.floating-popup::before {
  background: linear-gradient(90deg, var(--dex-blue) 0%, var(--dex-yellow) 52%, var(--dex-blue-dark) 100%);
}

.rt-top-bar {
  display: none !important;
}

.floating-popup,
.similar-panel,
.wand-tooltip,
.w-webflow-badge {
  display: none !important;
}

.rt-navbar-logo {
  gap: 10px;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.rt-navbar-logo img {
  width: auto !important;
}

.rt-navbar-logo .dex-header-logo-full {
  width: clamp(128px, 11vw, 170px) !important;
  height: auto !important;
  object-fit: contain;
}

.dex-header-logo-text {
  display: grid;
  gap: 1px;
  color: var(--dex-text);
  line-height: 1;
}

.dex-header-logo-text strong {
  color: var(--dex-text);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0;
}

.dex-header-logo-text strong span {
  color: var(--dex-blue);
}

.dex-header-logo-text strong em {
  color: var(--dex-yellow);
  font-style: normal;
}

.dex-header-logo-text small {
  color: var(--dex-text-secondary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.rt-hero-v1-heading-wrap {
  position: relative;
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
}

.rt-hero-v1-heading-wrap::after {
  display: none;
}

.rt-hero-v1-heading-wrap h1 {
  max-width: 930px;
  margin-right: auto;
  margin-left: auto;
  color: var(--dex-text);
}

.dex-hero-intro-copy {
  max-width: 900px;
  margin: 22px auto 0;
  color: var(--dex-text);
  font-size: clamp(18px, 1.7vw, 25px);
  font-weight: 500;
  line-height: 1.22;
}

.dex-project-workspace-shell {
  display: block !important;
  max-width: 1250px;
  min-height: auto;
  margin: clamp(14px, 2.4vw, 30px) auto 0;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.28);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(248, 251, 255, 0.94), rgba(226, 238, 255, 0.72)),
    var(--dex-surface);
  box-shadow: 0 24px 70px rgba(var(--dex-blue-rgb), 0.13);
  overflow: hidden;
}

.dex-project-workspace {
  display: block;
  min-height: auto;
  overflow: hidden;
  border-radius: 30px;
  color: var(--dex-text-secondary);
  font-family: Manrope, Inter, sans-serif;
}

.dex-hero-workflow-visual {
  position: relative;
  min-height: 390px;
  padding: clamp(24px, 3.6vw, 44px);
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(var(--dex-blue-rgb), 0.16), transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(var(--dex-yellow-rgb), 0.2), transparent 26%),
    linear-gradient(135deg, #f8fbff 0%, #eef5ff 50%, #f8fbff 100%);
}

.dex-hero-workflow-visual::before,
.dex-hero-workflow-visual::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(16px);
  pointer-events: none;
}

.dex-hero-workflow-visual::before {
  right: -72px;
  top: -62px;
  width: 210px;
  height: 210px;
  background: rgba(var(--dex-yellow-rgb), 0.26);
}

.dex-hero-workflow-visual::after {
  left: -86px;
  bottom: -84px;
  width: 250px;
  height: 250px;
  background: rgba(var(--dex-blue-rgb), 0.14);
}

.dex-hero-workflow-top,
.dex-project-flow,
.dex-hero-workflow-status {
  position: relative;
  z-index: 1;
}

.dex-hero-workflow-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.dex-hero-workflow-top span {
  display: block;
  margin-bottom: 8px;
  color: var(--dex-blue);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dex-hero-workflow-top strong {
  display: block;
  max-width: 620px;
  color: var(--dex-text);
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 900;
  line-height: 1;
}

.dex-hero-workflow-top p {
  max-width: 360px;
  margin: 0;
  color: var(--dex-text-secondary);
  font-size: 15px;
  line-height: 1.55;
}

.dex-workspace-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 20px 16px;
  background: linear-gradient(180deg, var(--dex-blue-dark), #0f235c);
  color: var(--dex-white);
}

.dex-workspace-logo {
  display: inline-flex;
  align-items: center;
  width: 148px;
  margin-bottom: 10px;
}

.dex-workspace-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.dex-workspace-sidebar-label {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dex-workspace-nav-item {
  overflow: hidden;
  border-radius: 8px;
  padding: 10px 12px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dex-workspace-nav-item.is-active {
  color: var(--dex-yellow);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 3px 0 0 var(--dex-yellow);
}

.dex-workspace-health {
  margin-top: auto;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
}

.dex-workspace-health div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.dex-workspace-health strong {
  color: var(--dex-yellow);
}

.dex-workspace-progress {
  height: 4px;
  margin: 6px 0 0 !important;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.dex-workspace-progress span {
  width: 86%;
  border-radius: inherit;
  background: var(--dex-yellow);
}

.dex-workspace-main {
  min-width: 0;
  padding: 0 28px 28px;
  background:
    radial-gradient(circle at 70% 18%, rgba(var(--dex-blue-rgb), 0.08), transparent 32%),
    linear-gradient(180deg, #f8fbff, #edf4ff);
}

.dex-workspace-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  margin: 0 -28px;
  padding: 0 28px;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  background: rgba(255, 255, 255, 0.9);
}

.dex-workspace-title {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  color: var(--dex-text);
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.1;
}

.dex-workspace-title span {
  color: var(--dex-text-muted);
  font-size: 18px;
}

.dex-workspace-topbar button,
.dex-problem-card button {
  border: 0;
  border-radius: 8px;
  font-weight: 800;
  line-height: 1;
}

.dex-workspace-topbar button {
  padding: 12px 16px;
  color: var(--dex-white);
  background: linear-gradient(135deg, var(--dex-blue), var(--dex-blue-dark));
  box-shadow: 0 10px 24px rgba(var(--dex-blue-rgb), 0.22);
}

.dex-project-workspace .dex-workflow-carousel {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  margin: 30px 0 42px;
  padding: 8px 4px 14px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.dex-project-workspace .dex-workflow-carousel::before,
.dex-project-workspace .dex-workflow-carousel::after {
  width: 42px;
}

.dex-project-workspace .dex-workflow-carousel::before {
  background: linear-gradient(90deg, #f8fbff, rgba(248, 251, 255, 0));
}

.dex-project-workspace .dex-workflow-carousel::after {
  background: linear-gradient(270deg, #f8fbff, rgba(248, 251, 255, 0));
}

.dex-project-workspace .dex-workflow-track {
  --dex-workflow-card-width: clamp(144px, 15vw, 168px);
  --dex-workflow-gap: 24px;
}

.dex-project-workspace .dex-workflow-card {
  min-height: 150px;
}

.dex-project-flow {
  margin: 0;
  padding: clamp(18px, 2.4vw, 30px);
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.9)),
    var(--dex-white);
  box-shadow: 0 18px 50px rgba(var(--dex-blue-rgb), 0.1);
  scrollbar-width: thin;
}

.dex-project-flow h3 {
  margin: 0;
  color: var(--dex-blue);
  font-size: clamp(22px, 3.2vw, 38px);
  font-weight: 900;
  line-height: 1;
}

.dex-project-flow-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.dex-project-flow-heading p {
  max-width: 420px;
  margin: 0;
  color: var(--dex-text-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-align: right;
}

.dex-project-flow-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(112px, 1fr));
  gap: clamp(9px, 1vw, 13px);
  min-width: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-project-workspace.is-flow-ready .dex-project-flow-row,
.dex-project-workspace.is-flow-ready .dex-hero-workflow-status {
  opacity: 1;
  transform: translateY(0);
}

.dex-project-flow-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 158px;
  appearance: none;
  flex-direction: column;
  gap: 11px;
  align-items: start;
  padding: 18px 12px 15px;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  color: var(--dex-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 480ms ease, border-color 480ms ease, opacity 480ms ease;
}

.dex-project-flow-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -13px;
  z-index: 4;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.18);
  border-radius: 999px;
  background:
    linear-gradient(45deg, transparent 45%, var(--dex-blue) 46% 54%, transparent 55%),
    var(--dex-white);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  transform: translateY(-50%);
}

.dex-project-flow-card small {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 2px solid var(--dex-white);
  border-radius: 999px;
  color: var(--dex-white);
  background: var(--dex-blue);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(var(--dex-blue-rgb), 0.22);
}

.dex-project-flow-card>span {
  display: grid;
  width: 45px;
  height: 45px;
  margin-top: 3px;
  place-items: center;
  border-radius: 8px;
  color: var(--dex-white);
  background: linear-gradient(135deg, var(--dex-blue), var(--dex-blue-dark));
  box-shadow: 0 12px 24px rgba(var(--dex-blue-rgb), 0.22);
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.dex-project-flow-card svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-project-flow-card p {
  margin: 0 0 7px;
  color: var(--dex-blue);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.dex-project-flow-card strong {
  display: block;
  margin-bottom: 7px;
  color: var(--dex-text);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 900;
  line-height: 1.12;
}

.dex-project-flow-card em {
  display: -webkit-box;
  overflow: hidden;
  color: var(--dex-text-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dex-project-flow-card.dex-flow-tone-yellow>span,
.dex-project-flow-card.dex-flow-tone-yellow small {
  background: linear-gradient(135deg, var(--dex-yellow), #d97706);
}

.dex-project-flow-card.dex-flow-tone-yellow p {
  color: #b45309;
}

.dex-project-flow-card.is-active {
  border-color: rgba(var(--dex-blue-rgb), 0.5);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.96));
  box-shadow: 0 24px 56px rgba(var(--dex-blue-rgb), 0.2);
  transform: translateY(-5px);
}

.dex-project-flow-card.is-active>span {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 18px 32px rgba(var(--dex-blue-rgb), 0.34),
    0 0 0 8px rgba(var(--dex-blue-rgb), 0.08);
}

.dex-project-flow-card.is-active::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--dex-blue), var(--dex-yellow));
}

.dex-project-flow-card.dex-flow-tone-yellow.is-active {
  border-color: rgba(var(--dex-yellow-rgb), 0.7);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 251, 235, 0.96));
}

.dex-hero-workflow-status {
  display: block;
  height: auto;
  margin-top: clamp(18px, 2.6vw, 28px);
  overflow: visible;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 560ms ease 100ms, transform 560ms cubic-bezier(0.22, 1, 0.36, 1) 100ms;
}

.dex-stage-console {
  display: flex;
  height: auto;
  flex-direction: column;
  min-width: 0;
  padding: clamp(16px, 2.4vw, 24px);
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.14);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.92)),
    var(--dex-white);
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(12px);
}

.dex-stage-console-yellow {
  border-color: rgba(var(--dex-yellow-rgb), 0.36);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 251, 235, 0.92)),
    var(--dex-white);
}

.dex-stage-console-head {
  display: none !important;
}

.dex-stage-console-head>div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.dex-stage-console-head span {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  place-items: center;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 18px;
  color: var(--dex-white);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.42), transparent 28%),
    linear-gradient(145deg, #4f82f8, var(--dex-blue) 48%, var(--dex-blue-dark));
  box-shadow:
    0 7px 0 #16368e,
    0 18px 30px rgba(var(--dex-blue-rgb), 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transform: translateY(-3px) rotate(-4deg);
}

.dex-stage-console-yellow .dex-stage-console-head span {
  color: var(--dex-text);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, #ffe58a, var(--dex-yellow) 54%, #e3a20d);
  box-shadow:
    0 7px 0 #b77c00,
    0 18px 30px rgba(var(--dex-yellow-rgb), 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.dex-stage-console-head span::before,
.dex-stage-console-head span::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.dex-stage-console-head span::before {
  inset: -9px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.25);
  transform: rotate(-14deg);
}

.dex-stage-console-head span::after {
  top: -3px;
  right: 5px;
  width: 9px;
  height: 9px;
  border: 3px solid #fff;
  background: var(--dex-yellow);
  box-shadow: 0 5px 13px rgba(var(--dex-yellow-rgb), 0.35);
}

.dex-stage-console-yellow .dex-stage-console-head span::before {
  border-color: rgba(var(--dex-yellow-rgb), 0.36);
}

.dex-stage-console-yellow .dex-stage-console-head span::after {
  background: var(--dex-blue);
  box-shadow: 0 5px 13px rgba(var(--dex-blue-rgb), 0.3);
}

.dex-stage-console svg,
.dex-stage-list svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-stage-console-head span svg {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 4px 5px rgba(15, 23, 42, 0.18));
}

.dex-stage-console-head small {
  display: block;
  margin-bottom: 3px;
  color: var(--dex-blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dex-stage-console-yellow .dex-stage-console-head small {
  color: #b45309;
}

.dex-stage-console-head strong {
  display: block;
  margin-bottom: 4px;
  color: var(--dex-text);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  line-height: 1.2;
}

.dex-stage-console-head p {
  margin: 0;
  color: var(--dex-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.dex-stage-console-head button {
  flex: 0 0 auto;
  padding: 11px 15px;
  border: 0;
  border-radius: 8px;
  color: var(--dex-white);
  background: linear-gradient(135deg, var(--dex-blue), var(--dex-blue-dark));
  box-shadow: 0 12px 24px rgba(var(--dex-blue-rgb), 0.18);
  font-size: 13px;
  font-weight: 900;
}

.dex-stage-console-yellow .dex-stage-console-head button {
  color: #111827;
  background: linear-gradient(135deg, var(--dex-yellow), #fde68a);
  box-shadow: 0 12px 24px rgba(var(--dex-yellow-rgb), 0.26);
}

.dex-stage-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
}

.dex-stage-tabs button {
  appearance: none;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px 12px;
  min-width: 0;
  padding: 14px 16px;
  border-right: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  font: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.dex-stage-tabs button:hover {
  background: rgba(var(--dex-blue-rgb), 0.05);
  transform: translateY(-1px);
}

.dex-stage-tabs button:last-child {
  border-right: 0;
}

.dex-stage-tabs button.is-active {
  color: var(--dex-white);
  background: linear-gradient(135deg, var(--dex-blue-dark), var(--dex-blue));
  box-shadow: inset 0 -3px 0 var(--dex-yellow);
}

.dex-stage-console-yellow .dex-stage-tabs button.is-active {
  color: #111827;
  background: linear-gradient(135deg, var(--dex-yellow), #fde68a);
  box-shadow: inset 0 -3px 0 var(--dex-blue);
}

.dex-stage-tabs button.is-complete:not(.is-active) {
  background: rgba(var(--dex-blue-rgb), 0.06);
}

.dex-stage-console-yellow .dex-stage-tabs button.is-complete:not(.is-active) {
  background: rgba(var(--dex-yellow-rgb), 0.2);
}

.dex-stage-tabs i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--dex-surface);
  color: var(--dex-blue-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.dex-stage-tabs button.is-complete i {
  color: var(--dex-white);
  background: var(--dex-blue);
}

.dex-stage-console-yellow .dex-stage-tabs button.is-complete i {
  color: #111827;
  background: var(--dex-yellow);
}

.dex-stage-tabs b {
  min-width: 0;
  color: inherit;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.dex-stage-tabs em {
  grid-column: 2;
  color: inherit;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0.72;
}

.dex-stage-console-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 0.75fr);
  gap: 18px;
  align-items: stretch;
  min-height: 390px;
  min-width: 0;
}

.dex-stage-console-body.is-document-layout {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.48fr);
}

.dex-stage-console-body.is-build-layout,
.dex-stage-console-body.is-code-layout,
.dex-stage-console-body.is-qa-layout,
.dex-stage-console-body.is-history-layout {
  grid-template-columns: minmax(0, 1fr);
}

.dex-stage-console-body.is-deploy-layout {
  grid-template-columns: minmax(0, 1fr);
}

.dex-stage-panel,
.dex-stage-terminal {
  min-width: 0;
  min-height: 390px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
}

.dex-stage-panel {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.dex-stage-panel-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.1);
}

.dex-stage-panel-top strong {
  color: var(--dex-text);
  font-size: 14px;
  font-weight: 900;
}

.dex-stage-panel-top span {
  color: var(--dex-text-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.dex-stage-substep-copy {
  min-height: 182px;
  padding: 22px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(var(--dex-blue-rgb), 0.08), rgba(var(--dex-yellow-rgb), 0.14)),
    #fff;
}

.dex-stage-substep-copy small {
  display: inline-flex;
  margin-bottom: 16px;
  color: var(--dex-blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dex-stage-substep-copy p {
  margin: 0;
  color: var(--dex-text);
  font-size: clamp(17px, 1.45vw, 22px);
  font-weight: 800;
  line-height: 1.48;
}

.dex-stage-stream-meter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.dex-stage-stream-meter span {
  position: relative;
  height: 9px;
  flex: 1;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--dex-blue-rgb), 0.1);
}

.dex-stage-stream-meter span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--dex-stream-progress, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dex-blue), var(--dex-yellow));
  transition: width 180ms ease;
}

.dex-stage-stream-meter b {
  color: var(--dex-text-muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.dex-stage-document-writer {
  min-height: 310px;
}

.dex-stage-document-paper {
  position: relative;
  display: grid;
  flex: 1;
  min-height: 310px;
  align-content: start;
  gap: 10px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(180deg, rgba(var(--dex-blue-rgb), 0.05), rgba(var(--dex-yellow-rgb), 0.09)),
    #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.dex-stage-document-paper p {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  color: var(--dex-text-secondary);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.dex-stage-document-paper p span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: var(--dex-blue-dark);
  background: rgba(var(--dex-blue-rgb), 0.08);
  font-size: 10px;
  font-weight: 900;
}

.dex-stage-document-paper p b {
  min-width: 0;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.dex-stage-document-paper p.is-summary {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px dashed rgba(var(--dex-blue-rgb), 0.18);
  color: var(--dex-text);
}

.dex-stage-document-paper p.is-summary span {
  color: #111827;
  background: var(--dex-yellow);
}

.dex-document-cursor {
  width: 9px;
  height: 18px;
  margin-left: 36px;
  border-radius: 2px;
  background: var(--dex-blue);
  box-shadow: 0 0 16px rgba(var(--dex-blue-rgb), 0.45);
  animation: dex-terminal-cursor-blink 760ms steps(2, start) infinite;
}

.dex-stage-document-aside {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 22px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% 14%, rgba(var(--dex-yellow-rgb), 0.24), transparent 28%),
    linear-gradient(145deg, rgba(var(--dex-blue-rgb), 0.08), rgba(255, 255, 255, 0.92));
}

.dex-stage-document-aside li {
  opacity: 0.38;
  transition: opacity 220ms ease, transform 220ms ease;
}

.dex-stage-document-aside li.is-visible {
  opacity: 1;
  transform: translateX(2px);
}

.dex-stage-document-aside small {
  color: var(--dex-blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dex-stage-document-aside strong {
  margin-top: 12px;
  color: var(--dex-text);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 900;
  line-height: 1.1;
}

.dex-stage-document-aside p {
  margin: 14px 0 0;
  color: var(--dex-text-secondary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.dex-stage-document-result {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  color: var(--dex-text);
  text-align: left;
}

.dex-stage-document-result b {
  min-width: 0;
  color: var(--dex-text-secondary);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.dex-stage-document-aside ul {
  display: grid;
  gap: 10px;
  margin: auto 0 0;
  padding: 18px 0 0;
  list-style: none;
}

.dex-stage-document-aside li {
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--dex-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.dex-stage-document-aside li span {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 50%;
  color: var(--dex-white);
  background: var(--dex-blue);
  box-shadow: 0 0 0 4px rgba(var(--dex-blue-rgb), 0.12);
  font-size: 10px;
  font-weight: 900;
}

.dex-stage-document-aside li.is-current span {
  color: #111827;
  background: var(--dex-yellow);
  box-shadow: 0 0 0 5px rgba(var(--dex-yellow-rgb), 0.22);
}

.dex-stage-document-aside li.is-current {
  color: var(--dex-text);
  font-weight: 900;
}

.dex-code-build-showcase,
.dex-qa-showcase,
.dex-deploy-board,
.dex-history-checklist {
  display: grid;
  min-height: 310px;
  gap: 14px;
}

.dex-build-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-height: 310px;
}

.dex-build-duo>div {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.11);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(var(--dex-blue-rgb), 0.065), rgba(255, 255, 255, 0.95));
}

.dex-build-duo>div:nth-child(2) {
  background: linear-gradient(145deg, rgba(var(--dex-yellow-rgb), 0.16), rgba(255, 255, 255, 0.95));
}

.dex-build-duo strong {
  color: var(--dex-text);
  font-size: 15px;
  font-weight: 900;
}

.dex-build-duo p {
  margin: -3px 0 2px;
  color: var(--dex-text-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.dex-build-duo span {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 8px 9px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 10px;
  color: var(--dex-text);
  background: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.dex-build-duo i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--dex-blue);
  box-shadow: 0 0 0 4px rgba(var(--dex-blue-rgb), 0.12);
}

.dex-build-duo>div:nth-child(2) i {
  background: var(--dex-yellow);
  box-shadow: 0 0 0 4px rgba(var(--dex-yellow-rgb), 0.2);
}

.dex-build-status {
  display: grid;
  min-height: 310px;
  align-content: start;
  gap: 18px;
}

.dex-build-status>p {
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 12px;
  color: var(--dex-text);
  background: linear-gradient(135deg, rgba(var(--dex-blue-rgb), 0.08), rgba(var(--dex-yellow-rgb), 0.12));
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 850;
  line-height: 1.45;
}

.dex-build-status>div {
  display: grid;
  gap: 10px;
}

.dex-build-status span {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 10px;
  color: var(--dex-text-secondary);
  font-size: 12px;
  font-weight: 800;
  opacity: 0.35;
}

.dex-build-status span.is-visible {
  opacity: 1;
}

.dex-build-status i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--dex-blue);
  box-shadow: 0 0 0 4px rgba(var(--dex-blue-rgb), 0.12);
}

.dex-code-build-tabs {
  display: flex;
  min-height: 44px;
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.1);
}

.dex-code-build-tabs b,
.dex-code-build-tabs span {
  display: inline-flex;
  width: 126px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 9px;
  font-size: 12px;
  font-weight: 900;
}

.dex-code-build-tabs b {
  color: #fff;
  background: var(--dex-blue);
  box-shadow: 0 8px 18px rgba(var(--dex-blue-rgb), 0.18);
}

.dex-code-build-status strong,
.dex-qa-card strong,
.dex-deploy-board strong,
.dex-history-log strong,
.dex-code-preview strong {
  color: var(--dex-text);
  font-size: 13px;
  font-weight: 900;
}

.dex-code-build-status p,
.dex-qa-card p,
.dex-deploy-board p,
.dex-code-preview p,
.dex-live-preview p,
.dex-history-log p {
  margin: 6px 0 0;
  color: var(--dex-text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.dex-code-build-lines {
  display: grid;
  gap: 9px;
  min-height: 274px;
  align-content: start;
}

.dex-code-build-lines p {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 12px;
  color: var(--dex-text);
  background: rgba(var(--dex-blue-rgb), 0.035);
  font-size: 12px;
  font-weight: 850;
}

.dex-code-build-lines i {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: var(--dex-white);
  background: var(--dex-blue);
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
}

.dex-code-preview,
.dex-live-preview,
.dex-history-log {
  display: grid;
  min-height: 390px;
  align-content: center;
  padding: 24px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.11);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(var(--dex-blue-rgb), 0.08), rgba(255, 255, 255, 0.92));
}

.dex-code-preview small {
  color: #38bdf8;
  font-size: 12px;
  font-weight: 900;
}

.dex-qa-showcase {
  grid-template-columns: minmax(0, 1.05fr) minmax(250px, 0.95fr);
  align-items: stretch;
}

.dex-qa-main {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.11);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(var(--dex-blue-rgb), 0.08), rgba(255, 255, 255, 0.96));
}

.dex-qa-main>strong {
  color: var(--dex-text);
  font-size: 18px;
  font-weight: 900;
}

.dex-qa-main>p {
  margin: 0 0 6px;
  color: var(--dex-text-secondary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.dex-qa-main span {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 10px;
  color: var(--dex-text);
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.dex-qa-main i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: var(--dex-white);
  background: var(--dex-blue);
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
}

.dex-qa-card {
  padding: 18px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.11);
  border-radius: 12px;
}

.dex-qa-card code {
  display: block;
  margin-top: 14px;
  padding: 12px;
  overflow: hidden;
  border-radius: 8px;
  color: var(--dex-text);
  background: #eef2f7;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dex-qa-card b,
.dex-deploy-trigger b {
  display: grid;
  min-height: 42px;
  margin-top: 16px;
  place-items: center;
  border-radius: 8px;
  color: #111827;
  background: var(--dex-yellow);
  font-size: 13px;
  font-weight: 900;
}

.dex-deploy-trigger b.is-deployed {
  color: var(--dex-white);
  background: var(--dex-blue);
  box-shadow: 0 10px 22px rgba(var(--dex-blue-rgb), 0.2);
}

.dex-qa-checks {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding-top: 46px;
}

.dex-qa-checks span {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 10px;
  color: var(--dex-text);
  font-size: 12px;
  font-weight: 850;
}

.dex-qa-checks em {
  order: 2;
  color: var(--dex-text-muted);
  font-style: normal;
  font-weight: 800;
}

.dex-qa-checks span.is-pass em {
  color: var(--dex-blue);
}

.dex-qa-terminal {
  display: flex;
  min-height: 390px;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: #0f172a;
}

.dex-qa-terminal div,
.dex-live-preview div {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dex-qa-terminal span,
.dex-live-preview i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f43f5e;
}

.dex-qa-terminal span:nth-child(2),
.dex-live-preview i:nth-child(2) {
  background: var(--dex-yellow);
}

.dex-qa-terminal span:nth-child(3),
.dex-live-preview i:nth-child(3) {
  background: var(--dex-blue);
}

.dex-qa-terminal pre {
  flex: 1;
  margin: 0;
  padding: 18px;
  color: #dbeafe;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.dex-stage-console-body.is-qa-layout {
  grid-template-columns: minmax(0, 0.94fr) minmax(330px, 0.86fr) !important;
  gap: 14px !important;
}

.dex-stage-console-body.is-qa-layout>.dex-stage-panel {
  min-height: 390px;
}

.dex-stage-console-body.is-qa-layout>.dex-qa-terminal {
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}

.dex-stage-console-body.is-qa-layout .dex-qa-checks {
  padding-top: 0;
}

.dex-stage-console-body.is-qa-layout .dex-qa-terminal pre::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 3px;
  border-radius: 2px;
  background: var(--dex-yellow);
  vertical-align: -2px;
  animation: dex-terminal-cursor-blink 760ms steps(2, start) infinite;
}

.dex-stage-console-body.is-qa-layout .dex-qa-showcase {
  display: block;
  min-height: 0;
}

.dex-stage-console-body.is-qa-layout .dex-qa-main {
  padding: 0;
  border: 0;
  background: transparent;
  gap: 12px;
}

.dex-stage-console-body.is-qa-layout .dex-qa-main>strong {
  margin-bottom: 8px;
  font-size: 17px;
  color: #000000;
}

.dex-stage-console-body.is-qa-layout .dex-qa-main>p {
  margin-bottom: 4px;
  color: #000000;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.34;
}

.dex-stage-console-body.is-qa-layout .dex-qa-main span {
  display: grid;
  grid-template-columns: 32px 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 12px;
  background: rgba(var(--dex-blue-rgb), 0.035);
  color: #000000;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.28;
}

.dex-stage-console-body.is-qa-layout .dex-qa-main i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--dex-blue);
  box-shadow: 0 0 0 5px rgba(var(--dex-blue-rgb), 0.1);
}

.dex-stage-console-body.is-qa-layout .dex-qa-main i svg {
  width: 15px;
  height: 15px;
}

.dex-stage-console-body.is-qa-layout .dex-qa-main span b {
  display: inline-grid;
  min-height: 24px;
  place-items: center;
  border-radius: 999px;
  color: var(--dex-blue-dark);
  background: rgba(var(--dex-blue-rgb), 0.09);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.05em;
}

.dex-stage-console-body.is-qa-layout>.dex-qa-terminal,
.dex-stage-console-body.is-qa-layout>.dex-stage-panel {
  height: 394px !important;
  min-height: 394px !important;
  max-height: 394px !important;
}

.dex-stage-console-body.is-qa-layout .dex-qa-terminal pre {
  padding: 14px 16px;
  font-size: 11px;
  line-height: 1.42;
}

.dex-stage-console-body.is-qa-layout .dex-terminal-top {
  min-height: 36px;
  padding: 9px 12px;
}

@media screen and (max-width: 767px) {
  .dex-stage-console-body.is-qa-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dex-stage-console-body.is-qa-layout>.dex-qa-terminal {
    display: none !important;
  }
}

.dex-deploy-board {
  grid-template-columns: minmax(0, 1.08fr) minmax(230px, 0.92fr);
  align-items: stretch;
}

.dex-deploy-board>div {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.11);
  border-radius: 12px;
}

.dex-deploy-command {
  display: grid;
  align-content: start;
}

.dex-deploy-command code {
  display: block;
  margin-top: 12px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 8px;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dex-deploy-live-inline {
  display: grid;
  min-height: 100%;
  align-content: stretch;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 255, 0.98)),
    radial-gradient(circle at 14% 0%, rgba(var(--dex-blue-rgb), 0.12), transparent 34%);
}

.dex-live-mini-browser {
  display: grid;
  overflow: hidden;
  min-height: 100%;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 12px;
  background: var(--dex-white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.dex-live-mini-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  background: rgba(var(--dex-blue-rgb), 0.045);
}

.dex-live-mini-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
}

.dex-live-mini-bar i:nth-child(2) {
  background: var(--dex-yellow);
}

.dex-live-mini-bar i:nth-child(3) {
  background: var(--dex-blue);
}

.dex-live-mini-bar span {
  overflow: hidden;
  margin-left: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 8px;
  color: var(--dex-text-secondary);
  background: var(--dex-white);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dex-live-mini-app {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(var(--dex-blue-rgb), 0.08), rgba(var(--dex-yellow-rgb), 0.13)),
    #fff;
}

.dex-live-mini-app strong {
  color: var(--dex-text);
  font-size: 16px;
  font-weight: 900;
}

.dex-live-mini-app p {
  margin: -4px 0 0;
  color: var(--dex-text-secondary);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.dex-live-mini-app div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dex-live-mini-app div span {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 9px;
  color: var(--dex-blue);
  background: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 900;
}

.dex-live-mini-app ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dex-live-mini-app li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--dex-text);
  font-size: 12px;
  font-weight: 850;
}

.dex-live-mini-app li b {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--dex-blue);
  box-shadow: 0 0 0 4px rgba(var(--dex-blue-rgb), 0.11);
}

.dex-deploy-trigger {
  margin-top: 14px;
  background: rgba(var(--dex-blue-rgb), 0.035);
}

.dex-deploy-changes p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 0;
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.08);
  opacity: 0.3;
}

.dex-deploy-changes p.is-visible {
  opacity: 1;
}

.dex-live-preview {
  background: #fff;
}

.dex-live-preview div {
  margin: -24px -24px 18px;
  border-color: rgba(var(--dex-blue-rgb), 0.1);
  background: #eef2f7;
}

.dex-live-preview span {
  margin-left: auto;
  color: var(--dex-blue);
  font-size: 12px;
  font-weight: 900;
}

.dex-live-preview b {
  color: var(--dex-text-secondary);
  font-size: 12px;
}

.dex-history-checklist {
  align-content: start;
}

.dex-history-checklist p {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 13px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 12px;
  opacity: 0.46;
}

.dex-history-checklist p.is-complete {
  opacity: 1;
}

.dex-history-checklist i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: var(--dex-white);
  background: var(--dex-blue);
  box-shadow: 0 0 0 4px rgba(var(--dex-blue-rgb), 0.12);
  font-style: normal;
  font-weight: 900;
}

.dex-history-checklist span {
  color: var(--dex-text);
  font-size: 13px;
  font-weight: 900;
}

.dex-history-checklist b {
  color: var(--dex-blue);
  font-size: 11px;
  font-weight: 900;
}

.dex-stage-console-body.is-history-layout .dex-history-checklist {
  display: grid;
  max-height: 322px;
  gap: 5px;
  overflow: hidden;
}

.dex-stage-console-body.is-history-layout .dex-history-checklist p {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
}

.dex-stage-console-body.is-history-layout .dex-history-checklist i {
  width: 18px;
  height: 18px;
  font-size: 9px;
}

.dex-stage-console-body.is-history-layout .dex-history-checklist span {
  font-size: 10.8px;
  line-height: 1.18;
}

.dex-stage-console-body.is-history-layout .dex-history-checklist b {
  font-size: 9px;
  white-space: nowrap;
}

.dex-stage-console-body.is-history-layout .dex-history-columns {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 10px;
  min-height: 322px;
  overflow: hidden;
}

.dex-stage-console-body.is-history-layout .dex-history-columns section {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 5px;
  padding: 9px 11px;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.dex-stage-console-body.is-history-layout .dex-history-columns strong {
  margin-bottom: 4px;
  color: #000000;
  font-size: 14px;
  font-weight: 950;
}

.dex-stage-console-body.is-history-layout .dex-history-columns p {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 0;
  color: #000000;
  font-size: 11.4px;
  font-weight: 850;
  line-height: 1.18;
}

.dex-stage-console-body.is-history-layout .dex-history-columns i {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--dex-blue);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.dex-stage-console-body.is-history-layout .dex-history-columns i svg {
  width: 10px;
  height: 10px;
}

.dex-stage-console-body.is-history-layout .dex-history-columns section:nth-child(2) {
  background: #07111f;
}

.dex-stage-console-body.is-history-layout .dex-history-columns section:nth-child(2) strong,
.dex-stage-console-body.is-history-layout .dex-history-columns section:nth-child(2) p {
  color: #dbeafe;
}

.dex-stage-console-body.is-history-layout .dex-history-columns section:nth-child(2) i {
  width: 7px;
  height: 7px;
  margin-top: 3px;
  background: var(--dex-yellow);
}

@media screen and (max-width: 767px) {
  .dex-stage-console-body.is-history-layout .dex-history-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .dex-stage-console-body.is-history-layout .dex-history-columns section:nth-child(2) {
    display: none;
  }
}

.dex-stage-table {
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 8px;
}

.dex-stage-table div {
  display: grid;
  grid-template-columns: minmax(105px, 0.32fr) minmax(0, 1fr);
  min-width: 0;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.1);
}

.dex-stage-table div:last-child {
  border-bottom: 0;
}

.dex-stage-table b,
.dex-stage-table span {
  min-width: 0;
  padding: 11px 12px;
  color: var(--dex-text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.dex-stage-table b {
  color: var(--dex-text);
  background: rgba(var(--dex-blue-rgb), 0.05);
  font-weight: 900;
}

.dex-stage-terminal {
  display: flex;
  position: relative;
  min-height: 214px;
  flex-direction: column;
  overflow: hidden;
  background: #0f172a;
  color: #dbeafe;
}

.dex-terminal-top {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.dex-terminal-top span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.dex-terminal-top span:nth-child(1) {
  background: #f87171;
}

.dex-terminal-top span:nth-child(2) {
  background: var(--dex-yellow);
}

.dex-terminal-top span:nth-child(3) {
  background: #38bdf8;
}

.dex-terminal-top b {
  margin-left: 8px;
  color: #e5edff;
  font-size: 12px;
  font-weight: 900;
}

.dex-stage-terminal pre {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 16px;
  overflow: hidden;
  color: #dbeafe;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.dex-terminal-cursor {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 8px;
  height: 18px;
  border-radius: 2px;
  background: var(--dex-yellow);
  box-shadow: 0 0 18px rgba(var(--dex-yellow-rgb), 0.65);
  animation: dex-terminal-cursor-blink 760ms steps(2, start) infinite;
}

@keyframes dex-terminal-cursor-blink {
  50% {
    opacity: 0.25;
  }
}

.dex-stage-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.dex-stage-metrics span {
  padding: 13px 14px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.11);
  border-radius: 8px;
  background: rgba(var(--dex-blue-rgb), 0.05);
}

.dex-stage-console-yellow .dex-stage-metrics span {
  border-color: rgba(var(--dex-yellow-rgb), 0.28);
  background: rgba(var(--dex-yellow-rgb), 0.12);
}

.dex-stage-metrics b,
.dex-stage-metrics em {
  display: block;
}

.dex-stage-metrics b {
  color: var(--dex-text);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.dex-stage-metrics em {
  margin-top: 5px;
  color: var(--dex-text-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.dex-business-request {
  display: grid;
  gap: 22px;
}

.dex-business-heading {
  display: flex;
  align-items: center;
  gap: 18px;
}

.dex-business-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--dex-blue);
  border-radius: 8px;
  background: rgba(var(--dex-blue-rgb), 0.08);
  font-size: 22px;
  font-weight: 900;
}

.dex-business-heading h3 {
  margin: 0 0 6px;
  color: var(--dex-text);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
}

.dex-business-heading p {
  margin: 0;
  color: var(--dex-text-secondary);
  font-size: 15px;
}

.dex-business-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 8px;
  background: var(--dex-white);
}

.dex-business-tab {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 20px 22px;
  border-right: 1px solid rgba(var(--dex-blue-rgb), 0.12);
}

.dex-business-tab:last-child {
  border-right: 0;
}

.dex-business-tab.is-active {
  color: var(--dex-white);
  background: linear-gradient(135deg, var(--dex-blue-dark), var(--dex-blue));
}

.dex-business-tab>span {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: var(--dex-surface);
  color: var(--dex-blue-dark);
  font-weight: 900;
}

.dex-business-tab.is-active>span {
  color: var(--dex-blue-dark);
  background: var(--dex-white);
}

.dex-business-tab h4 {
  margin: 0 0 5px;
  color: inherit;
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.15;
}

.dex-business-tab p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: inherit;
  opacity: 0.78;
  font-size: 13px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dex-problem-card {
  min-height: 190px;
  padding: 26px 28px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 8px;
  background: var(--dex-white);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.dex-problem-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 48px;
}

.dex-problem-card-top span {
  color: var(--dex-text-secondary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dex-problem-card button {
  padding: 10px 15px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  color: var(--dex-text-secondary);
  background: var(--dex-white);
}

.dex-problem-card p {
  max-width: 760px;
  margin: 0 auto;
  color: var(--dex-text-secondary);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
}

@media screen and (max-width: 991px) {
  .dex-project-workspace-shell {
    min-height: auto;
    margin-top: 34px;
  }

  .dex-project-workspace {
    display: block;
    min-height: auto;
  }

  .dex-hero-workflow-top {
    align-items: start;
    flex-direction: column;
  }

  .dex-hero-workflow-top p {
    max-width: 620px;
  }

  .dex-hero-workflow-status {
    overflow: visible;
    padding-bottom: 0;
  }

  .dex-project-flow {
    overflow-x: auto;
  }

  .dex-project-flow-row {
    grid-template-columns: repeat(8, 132px);
    min-width: 1120px;
  }

  .dex-project-flow-heading {
    align-items: start;
    flex-direction: column;
  }

  .dex-project-flow-heading p {
    max-width: 620px;
    text-align: left;
  }

  .dex-stage-console-body {
    grid-template-columns: 1fr;
  }

  .dex-business-tabs {
    grid-template-columns: 1fr;
  }

  .dex-business-tab {
    border-right: 0;
    border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  }

  .dex-business-tab:last-child {
    border-bottom: 0;
  }
}

@media screen and (max-width: 767px) {
  .rt-hero-v1 {
    padding-bottom: 82px !important;
  }

  .rt-hero-v1-heading-main {
    transform: translateY(-12px);
  }

  .rt-navbar-logo {
    max-width: none;
    padding: 0;
  }

  .rt-navbar-v1-menu-desktop {
    position: static;
    transform: none;
  }

  .rt-navbar-logo img {
    width: auto !important;
  }

  .rt-navbar-logo .dex-header-logo-full {
    width: 132px !important;
  }

  .dex-header-logo-text strong {
    font-size: 24px;
  }

  .dex-header-logo-text small {
    font-size: 10px;
  }

  .rt-mobile-navbar .dex-header-dropdown {
    width: 100%;
  }

  .rt-mobile-navbar .dex-header-dropdown>.w-dropdown-list {
    position: static;
    display: block;
    width: 100%;
    opacity: 1;
    transform: none;
  }

  .rt-mobile-navbar .dex-header-simple-menu,
  .rt-mobile-navbar .dex-header-mega-menu {
    min-width: 0;
    width: 100%;
    margin-top: 8px;
  }

  .rt-mobile-navbar .dex-header-mega-wrap,
  .rt-mobile-navbar .dex-header-menu-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .rt-mobile-navbar .dex-header-menu-left {
    display: none;
  }

  .rt-mobile-navbar .dex-header-access-link {
    width: 100%;
    min-height: 46px;
    padding: 0;
  }

  .dex-hero-workflow-visual {
    min-height: auto;
    padding: 24px 16px;
  }

  .dex-project-workspace .dex-workflow-carousel {
    display: block;
  }

  .dex-project-flow {
    margin-left: -2px;
    margin-right: -2px;
    border-radius: 24px;
    overflow-x: auto;
  }

  .dex-project-flow-row {
    grid-template-columns: repeat(8, 128px);
    gap: 12px;
    min-width: 1096px;
  }

  .dex-project-flow-card {
    min-height: 150px;
    padding: 18px 12px 14px;
  }

  .dex-project-flow-card>span {
    width: 44px;
    height: 44px;
  }

  .dex-stage-console-head,
  .dex-stage-panel-top {
    align-items: start;
    flex-direction: column;
  }

  .dex-stage-console-head button {
    width: 100%;
  }

  .dex-stage-tabs {
    grid-template-columns: 1fr;
  }

  .dex-stage-tabs button {
    border-right: 0;
    border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  }

  .dex-stage-tabs button:last-child {
    border-bottom: 0;
  }

  .dex-stage-table div {
    grid-template-columns: 1fr;
  }

  .dex-stage-metrics {
    grid-template-columns: 1fr;
  }

  .dex-workspace-topbar button {
    display: none;
  }

  .dex-project-workspace .dex-workflow-track {
    --dex-workflow-card-width: 145px;
    --dex-workflow-gap: 16px;
  }
}

.rt-ai-agents-v1 {
  position: relative;
  overflow-x: clip;
}

.rt-ai-agents-v1 .rt-container {
  max-width: 1180px;
}

.dex-ai-showcase-main {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.dex-workflow-runner {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: clamp(28px, 4vw, 48px);
  overflow-x: auto;
  padding: 4px 2px 12px;
  scrollbar-width: thin;
}

.dex-run-step {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 38px minmax(120px, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 178px;
  color: var(--dex-text-muted);
}

.dex-run-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -15px;
  color: rgba(var(--dex-blue-rgb), 0.5);
  font-weight: 900;
}

.dex-run-step span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.2);
  border-radius: 999px;
  background: rgba(var(--dex-blue-rgb), 0.1);
  color: var(--dex-blue-dark);
  font-size: 13px;
  font-weight: 900;
  transition: background 240ms ease, color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
}

.dex-run-step p {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.dex-run-step.is-active span {
  color: var(--dex-white);
  background: linear-gradient(135deg, var(--dex-blue), var(--dex-blue-dark));
  box-shadow: 0 10px 24px rgba(var(--dex-blue-rgb), 0.25);
  transform: translateY(-2px);
}

.dex-run-step.is-active p {
  color: var(--dex-blue-dark);
}

.dex-phase-visual {
  position: relative;
  min-height: 500px;
  padding: clamp(22px, 3.4vw, 38px);
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 30px;
  background:
    radial-gradient(circle at 20% 18%, rgba(34, 211, 238, 0.32), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(var(--dex-blue-dark-rgb), 0.36), transparent 30%),
    radial-gradient(circle at 70% 84%, rgba(var(--dex-yellow-rgb), 0.24), transparent 26%),
    linear-gradient(135deg, #102a72, var(--dex-blue) 54%, #0891b2);
  box-shadow: 0 24px 60px rgba(var(--dex-blue-rgb), 0.22);
  isolation: isolate;
}

.dex-phase-bg-one,
.dex-phase-bg-two {
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  filter: blur(22px);
  opacity: 0.55;
}

.dex-phase-bg-one {
  width: 190px;
  height: 190px;
  right: 10%;
  bottom: 16%;
  background: rgba(253, 230, 138, 0.55);
}

.dex-phase-bg-two {
  width: 170px;
  height: 170px;
  left: 8%;
  top: 12%;
  background: rgba(255, 255, 255, 0.36);
}

.dex-phase-card-wrap,
.dex-phase-copy {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 720ms ease, transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-phase-card-wrap.is-ready,
.dex-phase-copy.is-ready {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.dex-phase-card-wrap.is-ready .dex-phase-card {
  animation: dexSoftPop 780ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dex-phase-copy.is-ready .dex-phase-copy-inner>* {
  animation: dexSoftRise 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dex-phase-copy.is-ready .dex-phase-copy-inner>*:nth-child(2) {
  animation-delay: 80ms;
}

.dex-phase-copy.is-ready .dex-phase-copy-inner>*:nth-child(3) {
  animation-delay: 150ms;
}

.dex-phase-copy.is-ready .dex-phase-copy-inner>*:nth-child(4) {
  animation-delay: 220ms;
}

.dex-phase-copy.is-ready .dex-phase-copy-inner>*:nth-child(5) {
  animation-delay: 290ms;
}

.dex-phase-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 22px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
}

.dex-phase-flow span {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 8px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  transition: color 520ms ease, background 520ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-phase-flow span::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  width: 8px;
  height: 2px;
  background: rgba(255, 255, 255, 0.26);
  transform: translateY(-50%);
}

.dex-phase-flow span:last-child::after {
  display: none;
}

.dex-phase-flow i {
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.dex-phase-flow b {
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dex-phase-flow span.is-active {
  color: var(--dex-blue-dark);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
  transform: translateY(-2px);
}

@keyframes dexSoftPop {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dexSoftRise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dex-phase-card {
  display: flex;
  min-height: 376px;
  flex-direction: column;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(16px);
}

.dex-phase-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.dex-phase-card-top span {
  color: var(--dex-blue-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dex-phase-card-top strong {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  color: var(--dex-white);
  background: linear-gradient(135deg, var(--dex-blue), var(--dex-blue-dark));
}

.dex-phase-card h3 {
  margin: 0 0 20px;
  color: var(--dex-text);
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.05;
}

.dex-phase-card ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dex-phase-card li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--dex-text-secondary);
  font-size: 14px;
  line-height: 1.35;
}

.dex-phase-card svg,
.dex-capability-row svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-phase-card li svg {
  color: var(--dex-yellow);
}

.dex-phase-card footer {
  margin-top: auto;
  padding-top: 22px;
  color: var(--dex-blue-dark);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.dex-phase-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 22px;
}

.dex-phase-dots {
  display: none !important;
}

.dex-phase-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  transition: width 220ms ease, background 220ms ease;
}

.dex-phase-dots button.is-active {
  width: 28px;
  background: var(--dex-yellow);
}

.dex-phase-copy .rt-sub-text {
  display: inline-flex;
  background: transparent !important;
}

.dex-phase-copy h2 {
  max-width: 560px;
}

.dex-phase-copy p {
  max-width: 560px;
}

.dex-capability-list {
  display: grid;
  gap: 14px;
  margin: 0 0 26px;
}

.dex-capability-row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--dex-text-secondary);
  font-weight: 800;
}

.dex-capability-row svg {
  flex: 0 0 auto;
  color: var(--dex-blue);
}

.dex-logo-runner {
  position: relative;
  overflow: hidden;
  margin-top: clamp(34px, 5vw, 56px);
  padding: 18px 0;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.dex-logo-runner {
  display: none !important;
}

.dex-logo-track {
  display: flex;
  width: max-content;
  gap: clamp(34px, 6vw, 72px);
  align-items: center;
  animation: dexLogoScroll 28s linear infinite;
}

.dex-logo-runner:hover .dex-logo-track {
  animation-play-state: paused;
}

.dex-logo-item {
  display: grid;
  width: 132px;
  height: 48px;
  place-items: center;
  opacity: 0.7;
}

.dex-logo-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rt-hero-logo-main {
  max-width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.rt-hero-logo-train.dex-client-logo-train {
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  min-width: max-content;
}

.dex-client-logo-item {
  display: grid;
  width: clamp(120px, 12vw, 164px);
  height: 58px;
  place-items: center;
  opacity: 0.78;
  filter: saturate(0.8);
}

.dex-client-logo-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rt-hero-logo-main:hover .dex-client-logo-train {
  animation-play-state: paused;
}

@keyframes dexLogoScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 991px) {
  .dex-choose-dashboard-section {
    grid-template-columns: 1fr;
    overflow: hidden;
  }

  .dex-choose-stage-visual {
    width: 100%;
  }

  .dex-dashboard-preview {
    width: 100%;
    min-height: auto;
    transform: none;
  }

  .dex-architecture-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dex-architecture-card,
  .dex-architecture-card.is-featured {
    grid-column: auto;
  }

  .dex-architecture-card:nth-child(7) {
    grid-column: span 2;
  }

  .dex-ai-showcase-main {
    grid-template-columns: 1fr;
  }

  .dex-phase-visual {
    min-height: auto;
  }

  .dex-partner-hero,
  .dex-partner-benefits,
  .dex-partner-tiers {
    grid-template-columns: 1fr;
  }

  .dex-partner-tiers {
    gap: 14px;
  }

  .dex-partner-tiers article {
    min-height: auto;
    border-radius: 20px;
  }

  .dex-partner-v2-tiers {
    grid-template-columns: 1fr;
  }

  .dex-partner-v2-tiers>article {
    min-height: 0;
  }

  .dex-partner-metrics {
    grid-template-columns: 1fr;
  }

  .dex-page-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dex-page-link-card,
  .dex-page-link-card.is-featured {
    grid-column: auto;
  }

  .dex-page-link-card:nth-child(7) {
    grid-column: span 2;
  }
}

@media screen and (max-width: 767px) {
  .rt-choose-us-v1 {
    padding-right: 0;
    padding-left: 0;
  }

  .rt-choose-us-v1 .rt-container {
    padding-right: 14px;
    padding-left: 14px;
  }

  .dex-choose-dashboard-section:not(.dex-choose-stage-only) {
    padding: 28px 16px;
    border-radius: 30px;
  }

  .dex-choose-dashboard-section.dex-choose-stage-only {
    padding: 24px 14px 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;
    background:
      radial-gradient(circle at 88% 8%, rgba(var(--dex-yellow-rgb), 0.18), transparent 30%),
      linear-gradient(145deg, #102968 0%, #173a91 54%, #315fca 100%);
    box-shadow: 0 18px 42px rgba(11, 38, 106, 0.18);
  }

  .dex-choose-mobile-copy {
    position: relative;
    z-index: 2;
    display: block;
    padding: 4px 6px 22px;
    color: var(--dex-white);
  }

  /* Replaces the old static description, above the pills. */
  .dex-choose-stage-caption {
    position: relative;
    z-index: 2;
    margin: 18px 6px 0;
    padding-left: 14px;
    border-left: 2px solid rgba(255, 255, 255, 0.28);
  }

  .dex-choose-stage-caption strong {
    font-size: clamp(24px, 7vw, 30px);
  }

  .dex-choose-stage-caption span:last-child {
    max-width: 335px;
    font-size: 15px;
  }

  .dex-choose-desktop-heading {
    display: none;
  }

  .dex-choose-mobile-eyebrow {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  /* Secondary to the stage caption, as on desktop. */
  .dex-choose-mobile-copy h2 {
    max-width: 300px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(23px, 6.6vw, 28px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
  }

  .dex-choose-mobile-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 6px 0;
  }

  .dex-choose-mobile-benefit {
    display: grid;
    gap: 7px;
    align-content: center;
    justify-items: center;
    min-width: 0;
    min-height: 74px;
    padding: 9px 5px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.1);
    text-align: center;
  }

  .dex-choose-mobile-benefit>span {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 8px;
    color: #173a91;
    background: rgba(255, 255, 255, 0.94);
  }

  .dex-choose-mobile-benefit svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .dex-choose-mobile-benefit strong {
    color: var(--dex-white);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
  }

  .dex-choose-mobile-visual-shell {
    position: relative;
    display: block;
  }

  .dex-choose-mobile-static-frame {
    display: block;
    width: 100%;
    aspect-ratio: 1344 / 786;
    overflow: hidden;
    border-radius: 13px;
    background: #132e75;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
  }

  .dex-choose-mobile-static-image {
    display: block;
    width: calc(100% * 1944 / 1344);
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
    transform: translateX(-30.8642%);
  }

  .dex-choose-copy h2 {
    font-size: clamp(32px, 11vw, 46px);
  }

  .dex-choose-benefits {
    grid-template-columns: 1fr;
  }

  .dex-choose-stage-visual {
    display: none;
  }

  .dex-choose-stage-visual::-webkit-scrollbar {
    display: none;
  }

  .dex-choose-stage-frame {
    position: relative;
    inset: auto;
    width: 1000px;
    height: 404px;
  }

  .dex-choose-stage-image {
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
  }

  .dex-choose-mobile-reader-tools {
    display: none;
  }

  .dex-choose-mobile-reader-tools p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .dex-choose-mobile-reader-tools button {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: var(--dex-white);
    background: rgba(255, 255, 255, 0.1);
    font-size: 10px;
    font-weight: 800;
  }

  .dex-choose-mobile-reader-tools button svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* The mobile screenshot now advances with the carousel, so the dots come back
     as its manual control. They sit under the image rather than over it. */
  .dex-choose-stage-controls {
    position: static;
    display: flex;
    margin: 14px auto 0;
    transform: none;
  }

  .dex-choose-stage-progress {
    width: 76px;
    height: 2px;
  }

  .dex-choose-stage-tabs {
    gap: 4px;
  }

  .dex-choose-stage-tabs button {
    width: 6px;
    height: 6px;
  }

  .dex-choose-stage-tabs button[aria-selected="true"] {
    width: 16px;
  }

  .dex-choose-reader[open] {
    position: fixed;
    inset: 8px;
    z-index: 2147483646;
    display: flex;
    flex-direction: column;
    width: calc(100vw - 16px);
    max-width: none;
    height: calc(100dvh - 16px);
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    color: var(--dex-white);
    background: #0b1f55;
    box-shadow: 0 30px 90px rgba(2, 8, 28, 0.54);
  }

  .dex-choose-reader::backdrop {
    background: rgba(2, 8, 28, 0.82);
    backdrop-filter: blur(7px);
  }

  .dex-choose-reader header {
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    padding: 11px 12px 11px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.05);
  }

  .dex-choose-reader header div {
    display: grid;
    gap: 2px;
  }

  .dex-choose-reader header span {
    color: rgba(255, 255, 255, 0.66);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .dex-choose-reader header strong {
    color: var(--dex-white);
    font-size: 15px;
    line-height: 1.2;
  }

  .dex-choose-reader header button {
    display: grid;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0 0 2px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: var(--dex-white);
    background: rgba(255, 255, 255, 0.1);
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
  }

  .dex-choose-reader-canvas {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background:
      radial-gradient(circle at 50% 30%, rgba(55, 99, 205, 0.45), transparent 44%),
      #071942;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }

  .dex-choose-reader-canvas img {
    display: block;
    width: 1500px;
    max-width: none;
    height: auto;
    min-height: 607px;
  }

  .dex-choose-reader>p {
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 14px 12px;
    color: rgba(255, 255, 255, 0.68);
    background: rgba(255, 255, 255, 0.05);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
  }

  .dex-dashboard-preview {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
    border-radius: 24px;
  }

  .dex-partner-program {
    margin: 0;
    padding: 22px 14px;
    border-radius: 24px;
  }

  .dex-partner-heading h2 {
    font-size: clamp(34px, 11vw, 46px);
  }

  .dex-partner-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .dex-partner-secondary-link {
    justify-content: center;
  }

  .dex-page-links-grid {
    grid-template-columns: 1fr;
  }

  .dex-page-link-card,
  .dex-page-link-card.is-featured,
  .dex-page-link-card:nth-child(7) {
    grid-column: span 1;
  }

  .dex-page-link-card {
    min-height: auto;
  }

  .dex-dashboard-sidebar {
    display: none;
  }

  .dex-dashboard-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .dex-dashboard-metrics,
  .dex-dashboard-content {
    grid-template-columns: 1fr;
  }

  .dex-dashboard-chart svg {
    height: 190px;
  }

  .dex-architecture-heading {
    text-align: left;
  }

  .dex-architecture-grid {
    grid-template-columns: 1fr;
  }

  .dex-architecture-card,
  .dex-architecture-card.is-featured,
  .dex-architecture-card:nth-child(7) {
    grid-column: auto;
  }

  .dex-architecture-card ul {
    grid-template-columns: 1fr;
  }

  .rt-ai-agents-v1 {
    overflow-x: hidden;
  }

  .dex-workflow-runner {
    margin-left: calc(-1 * var(--_gap---spacing--gutter-space, 1rem));
    margin-right: calc(-1 * var(--_gap---spacing--gutter-space, 1rem));
    padding-left: var(--_gap---spacing--gutter-space, 1rem);
    padding-right: var(--_gap---spacing--gutter-space, 1rem);
  }

  .dex-phase-card {
    min-height: 360px;
  }

  .dex-phase-flow {
    grid-template-columns: repeat(4, minmax(86px, 1fr));
    overflow-x: auto;
  }

  .dex-phase-flow b {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .dex-scroll-reveal .dex-architecture-heading,
  .dex-scroll-reveal .dex-architecture-card,
  .dex-scroll-reveal .dex-phase-visual,
  .dex-scroll-reveal .dex-phase-copy {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .dex-phase-card-wrap,
  .dex-phase-copy,
  .dex-run-step span,
  .dex-phase-dots button {
    transition: none;
    animation: none;
  }

  .dex-logo-track {
    animation: none;
  }

  .dex-project-flow-card,
  .dex-project-flow-card>span,
  .dex-project-flow-row,
  .dex-hero-workflow-status,
  .dex-phase-flow span,
  .dex-architecture-card {
    transition: none;
  }
}

.icon-btn,
.r-logo {
  background: var(--dex-white);
}

.icon-btn:hover,
.r-logo:hover {
  background: var(--dex-surface);
}

.plus-btn,
.wand-tooltip,
.panel-header {
  background: var(--dex-blue-dark);
}

.wand-tooltip::after {
  border-top-color: var(--dex-blue-dark);
}

.similar-panel {
  background: var(--dex-surface-secondary);
}

.card {
  background: var(--dex-white);
}

.name {
  color: var(--dex-text);
}

/* Merge logo marquee visually into the AI showcase section */
.rt-marquee {
  background: var(--dex-surface) !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.rt-ai-agents-v1 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Add breathing room between logo runner and AI showcase */
.rt-marquee {
  padding-bottom: 48px !important;
}

.rt-ai-agents-v1 {
  padding-top: 32px !important;
}

/* Blend Unique Benefits cards into the section background */
.rt-benefits-v1 .rt-benefits-box-text-wrap {
  background: transparent !important;
}

/* Compact, unified hero product story */
.rt-hero-v1 {
  padding-bottom: 72px !important;
}

.rt-hero-v1-heading-main {
  transform: translateY(-188px);
}

.rt-hero-v1-heading-wrap {
  max-width: 920px;
}

.rt-hero-v1-heading-wrap .dex-hero-badge {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 34px;
  margin: 0 auto 14px;
  padding: 7px 14px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.22);
  border-radius: 999px;
  color: var(--dex-blue-dark);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 24px rgba(var(--dex-blue-rgb), 0.08);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: none;
}

.rt-hero-v1-heading-wrap h1 {
  max-width: 900px;
  font-size: clamp(42px, 5vw, 66px);
  line-height: 1.02;
}

.dex-hero-intro-copy {
  max-width: 820px;
  margin-top: 14px;
  color: var(--dex-text-secondary);
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 600;
  line-height: 1.5;
}

.rt-hero-v1-button-wrap {
  gap: 12px;
  margin-top: 18px;
}

.rt-hero-v1-button-wrap .rt-button-v1-main {
  width: 168px;
  overflow: visible;
}

.rt-hero-v1-button-wrap .rt-button-v1,
.rt-hero-v1-button-wrap .rt-button-overlay {
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rt-hero-v1-button-wrap .rt-button-overlay {
  background: #111827;
  transform: translate(2px, 2px) !important;
}

.rt-hero-v1-button-wrap .rt-button-v1-main:hover .rt-button-v1 {
  transform: none !important;
  margin: 0 !important;
}

.rt-hero-v1-button-wrap .rt-button-v1-main:hover .rt-button-overlay {
  transform: none !important;
}

.dex-project-workspace-shell {
  max-width: 1320px;
  margin-top: -56px;
  border-radius: 16px;
  box-shadow: 0 18px 52px rgba(var(--dex-blue-rgb), 0.11);
}

.dex-project-workspace {
  border-radius: 15px;
}

.dex-hero-workflow-visual {
  min-height: auto;
  padding: 18px clamp(16px, 2vw, 26px) 22px;
  background-color: #f8fbff;
  background-image:
    linear-gradient(rgba(var(--dex-blue-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  scroll-margin-top: 92px;
}

.dex-hero-workflow-visual::before,
.dex-hero-workflow-visual::after {
  display: none;
}

.dex-hero-workflow-top {
  margin-bottom: 12px;
}

.dex-hero-workflow-top span {
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: 0.1em;
}

.dex-hero-workflow-top strong {
  max-width: none;
  font-size: clamp(22px, 2.7vw, 32px);
  line-height: 1.05;
}

.dex-delivery-surface {
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.08);
}

.dex-project-flow {
  margin: 0;
  padding: 12px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dex-project-flow-row {
  grid-template-columns: repeat(8, minmax(92px, 1fr));
  gap: 8px;
}

.dex-project-flow-card {
  min-height: 104px;
  gap: 6px;
  padding: 10px 8px 9px;
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.06);
}

.dex-project-flow-card:not(:last-child)::after {
  right: -10px;
  width: 16px;
  height: 16px;
}

.dex-project-flow-card small {
  top: 6px;
  left: 6px;
  width: 18px;
  height: 18px;
  font-size: 9px;
}

.dex-project-flow-card>span {
  width: 34px;
  height: 34px;
  margin-top: 1px;
  box-shadow: 0 7px 16px rgba(var(--dex-blue-rgb), 0.18);
}

.dex-project-flow-card svg {
  width: 18px;
  height: 18px;
}

.dex-project-flow-card p {
  margin-bottom: 4px;
  font-size: 8px;
}

.dex-project-flow-card strong {
  margin-bottom: 0;
  font-size: clamp(11px, 0.92vw, 14px);
  line-height: 1.08;
}

.dex-project-flow-card em {
  display: none;
}

.dex-project-flow-card.is-active {
  box-shadow: 0 12px 26px rgba(var(--dex-blue-rgb), 0.16);
  transform: translateY(-2px);
}

.dex-project-flow-card.is-active>span {
  box-shadow:
    0 10px 22px rgba(var(--dex-blue-rgb), 0.26),
    0 0 0 5px rgba(var(--dex-blue-rgb), 0.07);
  transform: translateY(-1px) scale(1.02);
}

.dex-hero-workflow-status {
  margin-top: 0;
  padding: 0 12px 12px;
}

.dex-stage-console {
  padding: 12px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.dex-stage-console-head {
  gap: 14px;
  margin-bottom: 10px;
}

.dex-stage-console-head>div {
  gap: 10px;
}

.dex-stage-console-head span {
  width: 38px;
  height: 38px;
  box-shadow: 0 8px 18px rgba(var(--dex-blue-rgb), 0.16);
}

.dex-stage-console-head small {
  margin-bottom: 1px;
  font-size: 9px;
}

.dex-stage-console-head strong {
  margin-bottom: 2px;
  font-size: clamp(16px, 1.5vw, 20px);
}

.dex-stage-console-head p {
  max-width: 720px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dex-stage-console-head button {
  padding: 8px 11px;
  box-shadow: 0 8px 18px rgba(var(--dex-blue-rgb), 0.14);
  font-size: 11px;
}

.dex-stage-tabs {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin-bottom: 10px;
}

.dex-stage-tabs button {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
}

.dex-stage-tabs i {
  width: 22px;
  height: 22px;
  font-size: 10px;
}

.dex-stage-tabs b {
  font-size: 11px;
}

.dex-stage-console-body {
  grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.88fr);
  gap: 10px;
}

.dex-stage-panel {
  padding: 10px;
}

.dex-stage-panel-top {
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.dex-stage-panel-top strong,
.dex-stage-panel-top span {
  font-size: 10px;
}

.dex-stage-table b,
.dex-stage-table span {
  padding: 7px 9px;
  font-size: 10px;
  line-height: 1.25;
}

.dex-stage-terminal {
  min-height: 136px;
}

.dex-terminal-top {
  padding: 8px 10px;
}

.dex-terminal-top b {
  font-size: 10px;
}

.dex-stage-terminal pre {
  padding: 11px;
  font-size: 10px;
  line-height: 1.5;
}

.dex-delivery-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  background: rgba(var(--dex-blue-rgb), 0.035);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-delivery-metrics.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.dex-delivery-metrics article {
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.05);
}

.dex-delivery-metrics article:nth-child(2),
.dex-delivery-metrics article:nth-child(4) {
  border-color: rgba(var(--dex-yellow-rgb), 0.34);
  background: rgba(255, 251, 235, 0.94);
}

.dex-delivery-metrics small {
  display: block;
  margin-bottom: 6px;
  color: var(--dex-text-muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dex-delivery-metrics div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.dex-delivery-metrics strong {
  color: var(--dex-text);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.dex-delivery-metrics span {
  color: var(--dex-text-muted);
  font-size: 12px;
  font-weight: 700;
}

@media screen and (max-width: 991px) {
  .rt-hero-v1-heading-main {
    transform: translateY(-88px);
  }

  .dex-project-workspace-shell {
    margin-top: -10px;
  }

  .dex-project-flow {
    overflow-x: auto;
  }

  .dex-project-flow-row {
    grid-template-columns: repeat(8, 116px);
    min-width: 984px;
  }

  .dex-stage-console-body {
    grid-template-columns: 1fr 0.82fr;
  }
}

@media screen and (max-width: 767px) {
  .rt-hero-v1 {
    padding-bottom: 56px !important;
  }

  .rt-hero-v1-heading-main {
    transform: translateY(-24px);
  }

  .rt-hero-v1-heading-wrap h1 {
    font-size: clamp(36px, 10vw, 44px);
  }

  .dex-hero-intro-copy {
    margin-top: 12px;
    font-size: 15px;
  }

  .rt-hero-v1-button-wrap {
    width: 100%;
    max-width: 320px;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: center !important;
    flex-direction: column !important;
  }

  .rt-hero-v1-button-wrap>a,
  .rt-hero-v1-button-wrap .rt-button-v1-main {
    width: 100% !important;
    max-width: 100% !important;
  }

  .dex-hero-workflow-visual {
    padding: 16px 12px 18px;
  }

  .dex-hero-workflow-top strong {
    font-size: 22px;
  }

  .dex-project-flow {
    margin: 0;
    border-radius: 0;
  }

  .dex-project-flow-row {
    grid-template-columns: repeat(8, 110px);
    gap: 8px;
    min-width: 936px;
  }

  .dex-project-flow-card {
    min-height: 102px;
  }

  .dex-stage-console-head p {
    white-space: normal;
  }

  .dex-stage-console-head button {
    width: auto;
  }

  .dex-stage-tabs {
    grid-template-columns: repeat(3, minmax(112px, 1fr));
    overflow-x: auto;
  }

  .dex-stage-tabs button {
    border-right: 1px solid rgba(var(--dex-blue-rgb), 0.1);
    border-bottom: 0;
  }

  .dex-stage-console-body {
    grid-template-columns: 1fr;
  }

  .dex-delivery-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .dex-delivery-metrics {
    transition: none;
  }
}

/* Spacious workflow canvas and independent metrics section */
.rt-hero-v1::before {
  top: 124px;
  right: clamp(44px, 6vw, 88px);
  width: clamp(360px, 37vw, 500px);
  opacity: 0.07;
}

.rt-hero-v1-heading-wrap .dex-hero-badge {
  display: block;
  min-height: 0;
  margin: 0 auto 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.dex-project-workspace-shell {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.dex-project-workspace {
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.24);
  border-radius: 28px;
  background: #f8fbff;
  box-shadow: 0 24px 68px rgba(var(--dex-blue-rgb), 0.14);
}

.dex-hero-workflow-visual {
  padding: 28px clamp(22px, 2.6vw, 36px) 30px;
  border-radius: 27px;
}

.dex-hero-workflow-top {
  margin-bottom: 18px;
}

.dex-hero-workflow-top span {
  margin-bottom: 6px;
  font-size: 11px;
}

.dex-hero-workflow-top strong {
  font-size: clamp(28px, 3vw, 38px);
}

.dex-delivery-surface {
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.09);
}

.dex-project-flow {
  padding: 18px;
}

.dex-project-flow-row {
  gap: 10px;
}

.dex-project-flow-card {
  min-height: 126px;
  gap: 8px;
  padding: 14px 10px 12px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.dex-project-flow-card small {
  top: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
  font-size: 10px;
}

.dex-project-flow-card>span {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.dex-project-flow-card svg {
  width: 20px;
  height: 20px;
}

.dex-project-flow-card p {
  margin-bottom: 5px;
  font-size: 9px;
}

.dex-project-flow-card strong {
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.12;
}

.dex-hero-workflow-status {
  padding: 0 18px 22px;
}

.dex-stage-console {
  padding-top: 18px;
}

.dex-stage-console-head {
  margin-bottom: 16px;
}

.dex-stage-console-head>div {
  gap: 14px;
}

.dex-stage-console-head span {
  width: 46px;
  height: 46px;
  border-radius: 11px;
}

.dex-stage-console-head small {
  margin-bottom: 3px;
  font-size: 10px;
}

.dex-stage-console-head strong {
  margin-bottom: 3px;
  font-size: clamp(20px, 2vw, 26px);
}

.dex-stage-console-head p {
  font-size: 13px;
  line-height: 1.4;
}

.dex-stage-console-head button {
  padding: 11px 15px;
  border-radius: 10px;
  font-size: 12px;
}

.dex-stage-tabs {
  margin-bottom: 14px;
  border-radius: 12px;
}

.dex-stage-tabs button {
  min-height: 48px;
  gap: 10px;
  padding: 9px 12px;
}

.dex-stage-tabs i {
  width: 26px;
  height: 26px;
}

.dex-stage-tabs b {
  font-size: 12px;
}

.dex-stage-console-body {
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
  gap: 14px;
}

.dex-stage-panel,
.dex-stage-terminal {
  min-height: 260px;
  border-radius: 14px;
}

.dex-stage-panel {
  padding: 16px;
}

.dex-stage-panel-top {
  margin-bottom: 14px;
  padding-bottom: 12px;
}

.dex-stage-panel-top strong {
  font-size: 13px;
}

.dex-stage-panel-top span {
  font-size: 11px;
}

.dex-stage-table {
  border-radius: 10px;
}

.dex-stage-table b,
.dex-stage-table span {
  padding: 12px 13px;
  font-size: 12px;
  line-height: 1.35;
}

.dex-terminal-top {
  padding: 12px 14px;
}

.dex-terminal-top b {
  font-size: 12px;
}

.dex-stage-terminal pre {
  padding: 18px;
  font-size: 12px;
  line-height: 1.65;
}

.dex-delivery-metrics {
  max-width: 1320px;
  margin: 24px auto 0;
  padding: 0 4px;
  border-top: 0;
  background: transparent;
}

.dex-delivery-metrics article {
  min-height: 118px;
  padding: 20px 22px;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.dex-delivery-metrics small {
  margin-bottom: 12px;
  font-size: 10px;
}

.dex-delivery-metrics strong {
  font-size: clamp(34px, 3.5vw, 48px);
}

.dex-delivery-metrics span {
  font-size: 14px;
}

.dex-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media screen and (max-width: 991px) {
  .rt-hero-v1::before {
    top: 150px;
    right: 14px;
    width: clamp(320px, 58vw, 440px);
  }

  .dex-hero-workflow-visual {
    padding: 24px 18px 26px;
  }

  .dex-project-flow-card {
    min-height: 122px;
  }

  .dex-stage-console-body {
    grid-template-columns: 1fr;
  }

  .dex-stage-panel,
  .dex-stage-terminal {
    min-height: 220px;
  }
}

@media screen and (max-width: 767px) {
  .rt-hero-v1::before {
    top: 152px;
    right: 8px;
    width: 300px;
    opacity: 0.065;
  }

  .rt-hero-v1-heading-wrap .dex-hero-badge {
    margin-bottom: 10px;
    font-size: 10px;
  }

  .dex-project-workspace {
    border-radius: 22px;
  }

  .dex-hero-workflow-visual {
    padding: 20px 12px 22px;
    border-radius: 21px;
  }

  .dex-delivery-surface {
    border-radius: 16px;
  }

  .dex-project-flow {
    padding: 14px;
  }

  .dex-project-flow-card {
    min-height: 116px;
  }

  .dex-hero-workflow-status {
    padding: 0 14px 18px;
  }

  .dex-stage-console-head button {
    width: 100%;
  }

  .dex-stage-panel,
  .dex-stage-terminal {
    min-height: 210px;
  }

  .dex-delivery-metrics {
    gap: 12px;
    margin-top: 18px;
    padding: 0;
  }

  .dex-delivery-metrics article {
    min-height: 102px;
    padding: 16px;
    border-radius: 14px;
  }
}

/* Headline annotation and roomier delivery console */
.rt-hero-micro-v2,
.rt-hero-v1-ai-boat,
.rt-hero-v1-shape,
.rt-hero-v1-glow-image,
.rt-hero-micro-v1,
.rt-hero-micro-v4,
.rt-hero-v1-circule {
  display: none !important;
}

.dex-agentic-ai-marker {
  position: absolute;
  top: 145px;
  right: -20px;
  z-index: 3;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.24);
  border-radius: 10px;
  color: var(--dex-white);
  background: var(--dex-blue);
  box-shadow: 0 12px 28px rgba(var(--dex-blue-rgb), 0.2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  animation: dex-agentic-marker-float 4.5s ease-in-out infinite;
}

.dex-agentic-ai-marker::before {
  content: "";
  position: absolute;
  top: -14px;
  left: -18px;
  width: 22px;
  height: 26px;
  background: var(--dex-blue);
  clip-path: polygon(0 0, 100% 48%, 58% 61%, 45% 100%);
  filter: drop-shadow(0 5px 7px rgba(var(--dex-blue-rgb), 0.2));
  transform: rotate(-22deg);
}

.dex-agentic-ai-marker::after {
  display: none;
}

.rt-hero-v1-heading-wrap .dex-hero-badge {
  margin-bottom: 22px;
}

.rt-hero-v1-heading-main {
  transform: translateY(-172px);
}

.rt-hero-v1-heading-wrap h1 {
  line-height: 1.09;
}

.dex-hero-title-accent {
  color: var(--dex-blue);
  background: linear-gradient(100deg, var(--dex-blue-dark) 0%, var(--dex-blue) 58%, #d89b00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dex-hero-intro-copy {
  margin-top: 20px;
}

.rt-hero-v1-button-wrap {
  margin-top: 22px;
}

.dex-project-workspace-shell {
  margin-top: -26px;
}

@keyframes dex-agentic-marker-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.dex-hero-workflow-visual {
  padding-bottom: 38px;
}

.dex-hero-workflow-top {
  margin-bottom: 30px;
}

.dex-delivery-surface {
  border-radius: 22px;
}

.dex-project-flow {
  padding: 20px;
}

.dex-project-flow-row {
  gap: 12px;
}

.dex-project-flow-card {
  min-height: 132px;
  padding: 16px 11px 14px;
  border-radius: 14px;
}

.dex-hero-workflow-status {
  padding: 0 24px 30px;
}

.dex-stage-console {
  padding-top: 26px;
}

.dex-stage-console-head {
  margin-bottom: 24px;
}

.dex-stage-console-head>div {
  gap: 18px;
}

.dex-stage-console-head span {
  width: 52px;
  height: 52px;
  border-radius: 13px;
}

.dex-project-workspace .dex-stage-console-head span {
  position: relative;
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 18px;
  color: var(--dex-white);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.42), transparent 28%),
    linear-gradient(145deg, #4f82f8, var(--dex-blue) 48%, var(--dex-blue-dark));
  box-shadow:
    0 7px 0 #16368e,
    0 18px 30px rgba(var(--dex-blue-rgb), 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transform: translateY(-2px) rotate(-2deg);
}

.dex-project-workspace .dex-stage-console-yellow .dex-stage-console-head span {
  color: var(--dex-text);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, #ffe58a, var(--dex-yellow) 54%, #e3a20d);
  box-shadow:
    0 7px 0 #b77c00,
    0 18px 30px rgba(var(--dex-yellow-rgb), 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.dex-project-workspace .dex-stage-console-head span::before,
.dex-project-workspace .dex-stage-console-head span::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.dex-project-workspace .dex-stage-console-head span::before {
  display: none;
}

.dex-project-workspace .dex-stage-console-head span::after {
  top: 6px;
  right: 7px;
  width: 9px;
  height: 9px;
  z-index: 2;
  border: 3px solid #fff;
  background: var(--dex-yellow);
  box-shadow: 0 5px 13px rgba(var(--dex-yellow-rgb), 0.35);
}

.dex-project-workspace .dex-stage-console-yellow .dex-stage-console-head span::before {
  display: none;
}

.dex-project-workspace .dex-stage-console-yellow .dex-stage-console-head span::after {
  background: var(--dex-blue);
  box-shadow: 0 5px 13px rgba(var(--dex-blue-rgb), 0.3);
}

.dex-project-workspace .dex-stage-console-head span svg {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 4px 5px rgba(15, 23, 42, 0.18));
}

.dex-project-workspace .dex-project-flow-card>span {
  position: relative;
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  margin-top: 6px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 17px;
  color: var(--dex-white);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.42), transparent 28%),
    linear-gradient(145deg, #4f82f8, var(--dex-blue) 48%, var(--dex-blue-dark));
  box-shadow:
    0 6px 0 #16368e,
    0 16px 26px rgba(var(--dex-blue-rgb), 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transform: translateY(-2px) rotate(-3deg);
}

.dex-project-workspace .dex-project-flow-card.dex-flow-tone-yellow>span {
  color: var(--dex-text);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, #ffe58a, var(--dex-yellow) 54%, #e3a20d);
  box-shadow:
    0 6px 0 #b77c00,
    0 16px 26px rgba(var(--dex-yellow-rgb), 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.dex-project-workspace .dex-project-flow-card>span::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--dex-yellow);
  box-shadow: 0 5px 13px rgba(var(--dex-yellow-rgb), 0.35);
}

.dex-project-workspace .dex-project-flow-card.dex-flow-tone-yellow>span::after {
  background: var(--dex-blue);
  box-shadow: 0 5px 13px rgba(var(--dex-blue-rgb), 0.3);
}

.dex-project-workspace .dex-project-flow-card>span svg {
  width: 27px;
  height: 27px;
  filter: drop-shadow(0 4px 5px rgba(15, 23, 42, 0.18));
}

.dex-project-workspace .dex-project-flow-card.is-active>span {
  transform: translateY(-5px) rotate(-5deg) scale(1.03);
  box-shadow:
    0 8px 0 #16368e,
    0 20px 32px rgba(var(--dex-blue-rgb), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.dex-project-workspace .dex-project-flow-card.dex-flow-tone-yellow.is-active>span {
  box-shadow:
    0 8px 0 #b77c00,
    0 20px 32px rgba(var(--dex-yellow-rgb), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.dex-stage-console-head strong {
  margin-bottom: 6px;
  font-size: clamp(22px, 2.1vw, 29px);
}

.dex-stage-console-head p {
  font-size: 14px;
  line-height: 1.5;
}

.dex-stage-tabs {
  margin-bottom: 22px;
  border-radius: 14px;
}

.dex-stage-tabs button {
  min-height: 58px;
  gap: 12px;
  padding: 12px 16px;
}

.dex-stage-tabs i {
  width: 30px;
  height: 30px;
}

.dex-stage-tabs b {
  font-size: 13px;
}

.dex-stage-console-body {
  gap: 20px;
}

.dex-stage-panel,
.dex-stage-terminal {
  min-height: 350px;
  border-radius: 16px;
}

.dex-stage-panel {
  padding: 22px;
}

.dex-stage-panel-top {
  margin-bottom: 18px;
  padding-bottom: 16px;
}

.dex-stage-panel-top strong {
  font-size: 14px;
}

.dex-stage-table {
  border-radius: 12px;
}

.dex-stage-table b,
.dex-stage-table span {
  padding: 16px;
  font-size: 13px;
  line-height: 1.45;
}

.dex-terminal-top {
  padding: 15px 18px;
}

.dex-stage-terminal pre {
  padding: 24px;
  font-size: 13px;
  line-height: 1.8;
}

.dex-delivery-metrics {
  margin-top: 32px;
}

@media screen and (max-width: 1199px) {
  .dex-agentic-ai-marker {
    right: -38px;
  }

  .dex-project-flow-row {
    gap: 9px;
  }
}

@media screen and (max-width: 991px) {
  .rt-hero-v1-heading-main {
    transform: translateY(-72px);
  }

  .dex-agentic-ai-marker {
    top: 125px;
    right: 6px;
  }

  .dex-agentic-ai-marker::before {
    top: -11px;
    left: -14px;
    width: 18px;
    height: 22px;
  }

  .dex-project-workspace-shell {
    margin-top: -12px;
  }

  .dex-hero-workflow-status {
    padding: 0 18px 26px;
  }

  .dex-stage-panel,
  .dex-stage-terminal {
    min-height: 270px;
  }
}

@media screen and (max-width: 767px) {
  .rt-hero-v1-heading-main {
    transform: translateY(-8px);
  }

  .dex-agentic-ai-marker {
    position: relative;
    top: auto;
    right: auto;
    min-height: 30px;
    margin: 12px auto 0;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 10px;
    animation: none;
  }

  .dex-agentic-ai-marker::before {
    top: -9px;
    left: -12px;
    width: 16px;
    height: 19px;
  }

  .rt-hero-v1-heading-wrap .dex-hero-badge {
    margin-bottom: 14px;
  }

  .rt-hero-v1-heading-wrap h1 {
    line-height: 1.08;
  }

  .dex-hero-intro-copy {
    margin-top: 16px;
  }

  .rt-hero-v1-button-wrap {
    margin-top: 20px;
  }

  .dex-project-workspace-shell {
    margin-top: -2px;
  }

  .dex-hero-workflow-visual {
    padding-bottom: 26px;
  }

  .dex-hero-workflow-top {
    margin-bottom: 22px;
  }

  .dex-project-flow {
    padding: 14px;
  }

  .dex-project-flow-card {
    min-height: 116px;
    padding: 14px 10px 12px;
    border-radius: 12px;
  }

  .dex-hero-workflow-status {
    padding: 0 14px 22px;
  }

  .dex-stage-console {
    padding-top: 20px;
  }

  .dex-stage-console-head {
    margin-bottom: 18px;
  }

  .dex-stage-tabs {
    margin-bottom: 18px;
  }

  .dex-stage-panel,
  .dex-stage-terminal {
    min-height: 230px;
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dex-agentic-ai-marker {
    animation: none;
  }
}

/* End-to-end agent engine */
.rt-ai-agents-v1 {
  position: relative;
  padding: clamp(82px, 9vw, 128px) 0 !important;
  background:
    radial-gradient(circle at 10% 18%, rgba(var(--dex-blue-rgb), 0.09), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(var(--dex-yellow-rgb), 0.12), transparent 24%),
    var(--dex-surface) !important;
}

.rt-ai-agents-v1::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--dex-blue-rgb), 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}

.rt-ai-agents-v1 .rt-container {
  position: relative;
  z-index: 1;
  max-width: 1320px;
}

/* Human + Robot silhouette watermark */
.dex-agents-silhouette {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.dex-agents-silhouette img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(800px, 90vw, 1300px);
  height: auto;
  opacity: 0.18;
  mix-blend-mode: screen;
}

.dex-engine-heading {
  max-width: 900px;
  margin: 0 auto clamp(42px, 5vw, 66px);
  text-align: center;
}

.dex-engine-heading .rt-sub-text {
  display: block;
  margin-bottom: 14px;
  color: var(--dex-blue-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dex-engine-heading h2 {
  color: var(--dex-text);
  font-size: clamp(42px, 5.2vw, 70px);
  font-weight: 500;
  line-height: 1.04;
}

.dex-engine-heading p {
  max-width: 800px;
  margin: 22px auto 0;
  color: var(--dex-text-secondary);
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 600;
  line-height: 1.5;
}

.dex-engine-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}

.dex-engine-card {
  position: relative;
  display: flex;
  min-height: 310px;
  grid-column: span 2;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 2.6vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.07);
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.dex-engine-card:nth-child(4),
.dex-engine-card:nth-child(5) {
  grid-column: span 3;
}

.dex-engine-card::after {
  content: "";
  position: absolute;
  right: -54px;
  bottom: -74px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.08);
  border-radius: 50%;
  box-shadow:
    0 0 0 22px rgba(var(--dex-blue-rgb), 0.025),
    0 0 0 46px rgba(var(--dex-yellow-rgb), 0.025);
  pointer-events: none;
}

.dex-engine-card:hover {
  border-color: rgba(var(--dex-blue-rgb), 0.36);
  box-shadow: 0 24px 58px rgba(var(--dex-blue-rgb), 0.13);
  transform: translateY(-6px);
}

.dex-agent-avatar {
  position: relative;
  width: 104px;
  height: 104px;
  flex: 0 0 auto;
  margin-bottom: 26px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.16);
  border-radius: 24px;
  background:
    radial-gradient(circle at 72% 20%, rgba(var(--dex-yellow-rgb), 0.28), transparent 27%),
    linear-gradient(145deg, rgba(var(--dex-blue-rgb), 0.12), rgba(255, 255, 255, 0.96));
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.58);
}

.dex-engine-card-yellow .dex-agent-avatar {
  background:
    radial-gradient(circle at 26% 18%, rgba(var(--dex-blue-rgb), 0.2), transparent 25%),
    linear-gradient(145deg, rgba(var(--dex-yellow-rgb), 0.2), rgba(255, 255, 255, 0.96));
}

.dex-agent-head {
  position: absolute;
  top: 22px;
  left: 50%;
  width: 54px;
  height: 44px;
  border: 3px solid var(--dex-blue-dark);
  border-radius: 18px 18px 15px 15px;
  background: var(--dex-white);
  transform: translateX(-50%);
}

.dex-agent-head i {
  position: absolute;
  top: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dex-blue);
  box-shadow: 0 0 0 4px rgba(var(--dex-blue-rgb), 0.1);
}

.dex-agent-head i:first-child {
  left: 12px;
}

.dex-agent-head i:nth-child(2) {
  right: 12px;
}

.dex-agent-head b {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 14px;
  height: 3px;
  border-radius: 999px;
  background: var(--dex-yellow);
  transform: translateX(-50%);
}

.dex-agent-antenna {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 2px;
  height: 14px;
  background: var(--dex-blue-dark);
  transform: translateX(-50%);
}

.dex-agent-antenna::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dex-yellow);
  box-shadow: 0 0 0 4px rgba(var(--dex-yellow-rgb), 0.16);
  transform: translateX(-50%);
}

.dex-agent-body {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 64px;
  height: 29px;
  border: 3px solid var(--dex-blue-dark);
  border-radius: 22px 22px 10px 10px;
  background: linear-gradient(90deg, var(--dex-blue), var(--dex-blue-dark));
  transform: translateX(-50%);
}

.dex-agent-role-mark {
  position: absolute;
  right: -8px;
  bottom: -8px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 3px solid var(--dex-white);
  border-radius: 12px;
  color: var(--dex-white);
  background: var(--dex-blue);
  box-shadow: 0 10px 22px rgba(var(--dex-blue-rgb), 0.24);
}

.dex-engine-card-yellow .dex-agent-role-mark {
  color: var(--dex-text);
  background: var(--dex-yellow);
}

.dex-agent-role-mark svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-engine-card-copy {
  position: relative;
  z-index: 1;
}

.dex-engine-card h3 {
  margin: 0 0 14px;
  color: var(--dex-text);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 900;
  line-height: 1.15;
}

.dex-engine-card p {
  margin: 0;
  color: var(--dex-text-secondary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}

.dex-engine-outcome {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 28px;
  padding: 22px 26px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.34);
  border-radius: 8px;
  background: rgba(var(--dex-blue-rgb), 0.075);
  box-shadow: 0 12px 30px rgba(var(--dex-blue-rgb), 0.08);
}

.dex-engine-outcome>span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dex-blue);
  box-shadow: 0 0 0 8px rgba(var(--dex-blue-rgb), 0.1);
}

.dex-engine-outcome strong {
  display: block;
  margin-bottom: 3px;
  color: var(--dex-text);
  font-size: 17px;
  font-weight: 900;
}

.dex-engine-outcome p {
  margin: 0;
  color: var(--dex-blue-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.dex-engine-outcome small {
  color: var(--dex-blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.dex-scroll-reveal .dex-engine-heading,
.dex-scroll-reveal .dex-engine-card,
.dex-scroll-reveal .dex-engine-outcome {
  opacity: 0;
  transform: translateY(36px) scale(0.985);
  transition:
    opacity 560ms ease,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-scroll-reveal.is-in-view .dex-engine-heading,
.dex-scroll-reveal.is-in-view .dex-engine-card,
.dex-scroll-reveal.is-in-view .dex-engine-outcome {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.dex-scroll-reveal.is-in-view .dex-engine-card:nth-child(1) {
  transition-delay: 80ms;
}

.dex-scroll-reveal.is-in-view .dex-engine-card:nth-child(2) {
  transition-delay: 150ms;
}

.dex-scroll-reveal.is-in-view .dex-engine-card:nth-child(3) {
  transition-delay: 220ms;
}

.dex-scroll-reveal.is-in-view .dex-engine-card:nth-child(4) {
  transition-delay: 290ms;
}

.dex-scroll-reveal.is-in-view .dex-engine-card:nth-child(5) {
  transition-delay: 360ms;
}

.dex-scroll-reveal.is-in-view .dex-engine-outcome {
  transition-delay: 430ms;
}

@media screen and (max-width: 991px) {
  .dex-engine-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dex-engine-card,
  .dex-engine-card:nth-child(4),
  .dex-engine-card:nth-child(5) {
    grid-column: auto;
  }

  .dex-engine-card:last-child {
    grid-column: span 2;
  }
}

@media screen and (max-width: 767px) {
  .rt-ai-agents-v1 {
    padding: 70px 0 !important;
  }

  .dex-engine-heading {
    margin-bottom: 34px;
  }

  .dex-engine-heading h2 {
    font-size: 40px;
  }

  .dex-engine-heading p {
    margin-top: 16px;
    font-size: 16px;
  }

  .dex-engine-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .dex-engine-card,
  .dex-engine-card:last-child {
    min-height: 0;
    grid-column: auto;
    padding: 22px;
  }

  .dex-agent-avatar {
    width: 90px;
    height: 90px;
    margin-bottom: 22px;
  }

  .dex-agent-head {
    top: 19px;
    transform: translateX(-50%) scale(0.88);
  }

  .dex-agent-body {
    bottom: 8px;
    transform: translateX(-50%) scale(0.88);
  }

  .dex-engine-outcome {
    grid-template-columns: 16px 1fr;
    padding: 20px;
  }

  .dex-engine-outcome small {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {

  .dex-scroll-reveal .dex-engine-heading,
  .dex-scroll-reveal .dex-engine-card,
  .dex-scroll-reveal .dex-engine-outcome {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Connected BRD, SRS, and FSD documentation */
.rt-feature-v1 {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 9vw, 120px) 0 !important;
  background:
    radial-gradient(circle at 8% 22%, rgba(var(--dex-blue-rgb), 0.12), transparent 30%),
    radial-gradient(circle at 92% 78%, rgba(var(--dex-yellow-rgb), 0.16), transparent 27%),
    linear-gradient(180deg, #f8fbff, #f4f8ff 58%, #fffdf5) !important;
}

.rt-feature-v1::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(var(--dex-blue-rgb), 0.15) 1px, transparent 1.4px),
    linear-gradient(rgba(var(--dex-blue-rgb), 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.035) 1px, transparent 1px);
  background-position: 0 0, 12px 12px, 12px 12px;
  background-size: 28px 28px, 56px 56px, 56px 56px;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  pointer-events: none;
}

.rt-feature-v1::after {
  content: "";
  position: absolute;
  top: clamp(42px, 7vw, 96px);
  right: clamp(-220px, -8vw, -70px);
  z-index: 0;
  width: clamp(300px, 31vw, 560px);
  aspect-ratio: 419 / 454;
  background: url("/assets/dex-icon-blue.svg") center / contain no-repeat;
  opacity: 0.1;
  pointer-events: none;
}

.dex-spec-section {
  position: relative;
  z-index: 1;
}

.dex-spec-layout {
  display: grid;
  grid-template-columns: minmax(560px, 1.14fr) minmax(0, 0.86fr);
  gap: clamp(48px, 5vw, 64px);
  align-items: start;
}

.dex-spec-copy {
  grid-column: 2;
  grid-row: 1;
  padding-top: 18px;
}

.dex-spec-copy>.rt-sub-text {
  display: block;
  margin-bottom: 16px;
  color: var(--dex-blue-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dex-spec-copy h2 {
  color: var(--dex-text);
  font-size: clamp(42px, 4.4vw, 62px);
  font-weight: 500;
  line-height: 1.05;
}

.dex-spec-lead {
  margin: 24px 0 32px;
  color: var(--dex-text-secondary);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
}

.dex-spec-value-list {
  display: grid;
  gap: 14px;
}

.dex-spec-value-list article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.12);
}

.dex-spec-value-list article>span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.16);
  border-radius: 8px;
  color: var(--dex-blue);
  background: var(--dex-white);
  box-shadow: 0 10px 24px rgba(var(--dex-blue-rgb), 0.08);
}

.dex-spec-value-list svg,
.dex-spec-selector svg,
.dex-spec-topic-grid svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-spec-value-list strong {
  display: block;
  margin-bottom: 4px;
  color: var(--dex-text);
  font-size: 16px;
  font-weight: 900;
}

.dex-spec-value-list p {
  margin: 0;
  color: var(--dex-text-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.dex-spec-linkage {
  margin-top: 28px;
  padding: 20px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 34px rgba(var(--dex-blue-rgb), 0.08);
}

.dex-spec-linkage>strong {
  color: var(--dex-text);
  font-size: 15px;
  font-weight: 900;
}

.dex-spec-linkage>div {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 14px 0 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.dex-spec-linkage span {
  flex: 0 0 auto;
  padding: 7px 9px;
  border-radius: 6px;
  color: var(--dex-blue-dark);
  background: rgba(var(--dex-blue-rgb), 0.09);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.dex-spec-linkage i {
  color: var(--dex-yellow);
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
}

.dex-spec-linkage p {
  margin: 0;
  color: var(--dex-text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.dex-spec-workspace {
  display: grid;
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
  gap: 18px;
}

.dex-spec-selectors {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.dex-spec-selector {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 46px minmax(0, 1fr) 24px;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: var(--dex-text);
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}

.dex-spec-selector>div,
.dex-spec-selector h3,
.dex-spec-selector p,
.dex-spec-preview-stage {
  min-width: 0;
}

.dex-spec-selector::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(var(--dex-blue), var(--dex-yellow));
  opacity: 0;
  transition: opacity 220ms ease;
}

.dex-spec-selector:hover,
.dex-spec-selector.is-active {
  border-color: rgba(var(--dex-blue-rgb), 0.38);
  box-shadow: 0 16px 36px rgba(var(--dex-blue-rgb), 0.11);
  transform: translateX(4px);
}

.dex-spec-selector.is-active::before {
  opacity: 1;
}

.dex-spec-selector>span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 8px;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.09);
}

.dex-spec-selector:nth-child(2)>span {
  color: #9a6700;
  background: rgba(var(--dex-yellow-rgb), 0.18);
}

.dex-spec-selector small {
  display: block;
  margin-bottom: 2px;
  color: var(--dex-blue);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.dex-spec-selector h3 {
  margin: 0 0 4px;
  color: var(--dex-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.dex-spec-selector p {
  margin: 0;
  color: var(--dex-text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.dex-spec-selector>i {
  color: var(--dex-text-muted);
  font-size: 18px;
  font-style: normal;
  transition: color 220ms ease, transform 220ms ease;
}

.dex-spec-selector.is-active>i {
  color: var(--dex-blue);
  transform: translateX(3px);
}

.dex-spec-preview-stage {
  position: relative;
  min-height: 510px;
}

.dex-spec-preview {
  position: absolute;
  inset: 0;
  padding: 24px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--dex-blue-rgb), 0.035), transparent 42%),
    #fff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.99);
  transition:
    opacity 320ms ease,
    visibility 0s linear 320ms,
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-spec-preview.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.dex-spec-preview header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.dex-spec-preview header>span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 8px;
  color: var(--dex-white);
  background: linear-gradient(135deg, var(--dex-blue), var(--dex-blue-dark));
  font-size: 13px;
  font-weight: 900;
}

.dex-spec-preview header small {
  display: block;
  margin-bottom: 2px;
  color: var(--dex-text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dex-spec-preview header strong {
  color: var(--dex-text);
  font-size: 15px;
  font-weight: 700;
}

.dex-spec-preview header>i {
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--dex-blue-dark);
  background: rgba(var(--dex-blue-rgb), 0.09);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.dex-spec-preview>p {
  margin: 0 0 20px;
  color: var(--dex-text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.dex-spec-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dex-spec-topic-grid>span {
  display: grid;
  min-height: 48px;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 6px;
  color: var(--dex-blue);
  background: #f8fbff;
}

.dex-spec-topic-grid svg {
  width: 14px;
  height: 14px;
}

.dex-spec-topic-grid b {
  color: var(--dex-text-secondary);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

.dex-scroll-reveal .dex-spec-copy,
.dex-scroll-reveal .dex-spec-workspace {
  opacity: 0;
  transform: translateY(34px);
}

.dex-scroll-reveal.is-in-view .dex-spec-copy,
.dex-scroll-reveal.is-in-view .dex-spec-workspace {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 760ms ease,
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-scroll-reveal.is-in-view .dex-spec-workspace {
  transition-delay: 160ms;
}

@media screen and (max-width: 991px) {
  .dex-spec-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .dex-spec-copy {
    max-width: 760px;
    grid-column: auto;
    grid-row: auto;
    padding-top: 0;
  }

  .dex-spec-workspace {
    grid-column: auto;
    grid-row: auto;
  }
}

@media screen and (max-width: 767px) {
  .rt-feature-v1 {
    padding: 70px 0 !important;
  }

  .dex-spec-layout {
    gap: 38px;
  }

  .dex-spec-copy h2 {
    font-size: 40px;
  }

  .dex-spec-lead {
    margin-top: 18px;
    font-size: 16px;
  }

  .dex-spec-selector {
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    gap: 11px;
    padding: 14px;
  }

  .dex-spec-selector>span {
    width: 42px;
    height: 42px;
  }

  .dex-spec-selector h3 {
    font-size: 14px;
  }

  .dex-spec-selector p {
    font-size: 10px;
  }

  .dex-spec-preview-stage {
    min-height: 650px;
  }

  .dex-spec-preview {
    padding: 18px;
  }

  .dex-spec-preview header {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .dex-spec-preview header>span {
    width: 42px;
    height: 42px;
  }

  .dex-spec-preview header>i {
    display: none;
  }

  .dex-spec-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {

  .dex-scroll-reveal .dex-spec-copy,
  .dex-scroll-reveal .dex-spec-workspace {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .dex-spec-preview,
  .dex-spec-selector {
    transition: none;
  }
}

/* Document console left, document selectors right */
.dex-spec-heading {
  max-width: 920px;
  margin: 0 auto clamp(42px, 5vw, 62px);
  text-align: center;
}

.dex-spec-heading .rt-sub-text {
  display: block;
  margin-bottom: 14px;
  color: var(--dex-blue-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dex-spec-heading h2 {
  color: var(--dex-text);
  font-size: clamp(42px, 4.8vw, 66px);
  font-weight: 500;
  line-height: 1.05;
}

.dex-spec-heading p {
  max-width: 820px;
  margin: 22px auto 0;
  color: var(--dex-text-secondary);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  line-height: 1.55;
}

.dex-spec-layout {
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  gap: clamp(40px, 4.5vw, 60px);
}

.dex-spec-preview-stage {
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
}

.dex-spec-selectors {
  min-width: 0;
  height: 510px;
  grid-column: 2;
  grid-row: 1;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  align-content: start;
}

.dex-spec-selectors .dex-spec-selector {
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  gap: 10px;
  padding: 9px 11px;
}

.dex-spec-selectors .dex-spec-selector>span {
  width: 40px;
  height: 40px;
}

.dex-spec-selectors .dex-spec-selector h3 {
  margin-bottom: 2px;
  font-size: 13px;
}

.dex-spec-selectors .dex-spec-selector p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 9px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dex-spec-selector {
  min-height: 0;
}

.dex-scroll-reveal .dex-spec-heading,
.dex-scroll-reveal .dex-spec-preview-stage,
.dex-scroll-reveal .dex-spec-selectors {
  opacity: 0;
  transform: translateY(34px);
}

.dex-scroll-reveal.is-in-view .dex-spec-heading,
.dex-scroll-reveal.is-in-view .dex-spec-preview-stage,
.dex-scroll-reveal.is-in-view .dex-spec-selectors {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 760ms ease,
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-scroll-reveal.is-in-view .dex-spec-preview-stage {
  transition-delay: 100ms;
}

.dex-scroll-reveal.is-in-view .dex-spec-selectors {
  transition-delay: 190ms;
}

@media screen and (max-width: 991px) {
  .dex-spec-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .dex-spec-selectors {
    height: auto;
    grid-column: auto;
    grid-row: 1;
    grid-template-rows: none;
  }

  .dex-spec-preview-stage {
    grid-column: auto;
    grid-row: 2;
  }
}

@media screen and (max-width: 767px) {
  .dex-spec-heading {
    margin-bottom: 34px;
  }

  .dex-spec-heading h2 {
    font-size: 40px;
  }

  .dex-spec-heading p {
    margin-top: 16px;
    font-size: 16px;
  }

  .dex-spec-selector {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .dex-scroll-reveal .dex-spec-heading,
  .dex-scroll-reveal .dex-spec-preview-stage,
  .dex-scroll-reveal .dex-spec-selectors {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Branded orbit motifs and directional section choreography */
.dex-engine-card {
  min-height: 370px;
}

.dex-agent-avatar {
  width: 154px;
  height: 142px;
  margin: 0 0 24px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

.dex-agent-avatar img {
  position: absolute;
  inset: 5px 12px 3px;
  z-index: 2;
  width: 130px;
  height: 134px;
  border-radius: 24px;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.02);
  mix-blend-mode: multiply;
}

.dex-agent-orbit,
.dex-agent-avatar::before,
.dex-agent-avatar::after {
  position: absolute;
  pointer-events: none;
}

.dex-agent-orbit {
  inset: 8px -5px 4px;
  z-index: 0;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.2);
  border-radius: 50%;
  box-shadow:
    0 0 0 10px rgba(var(--dex-blue-rgb), 0.04),
    0 0 0 20px rgba(var(--dex-blue-rgb), 0.025);
  transform: rotate(-12deg);
}

.dex-agent-avatar::before {
  content: "";
  top: 9px;
  right: 2px;
  z-index: 3;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dex-blue);
  box-shadow:
    -135px 82px 0 -1px var(--dex-yellow),
    -35px 124px 0 -2px var(--dex-blue);
}

.dex-agent-avatar::after {
  content: "";
  right: 5px;
  bottom: 3px;
  z-index: 1;
  width: 56px;
  height: 56px;
  border: 5px solid transparent;
  border-top-color: var(--dex-blue);
  border-radius: 50%;
  transform: rotate(36deg);
}

.dex-engine-card::after {
  right: -72px;
  bottom: -38px;
  width: 250px;
  height: 164px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 50%;
  background:
    radial-gradient(circle at 18% 48%, var(--dex-blue) 0 3px, transparent 4px),
    radial-gradient(circle at 76% 12%, var(--dex-yellow) 0 4px, transparent 5px);
  box-shadow:
    0 0 0 18px rgba(var(--dex-blue-rgb), 0.035),
    0 0 0 38px rgba(var(--dex-blue-rgb), 0.022);
  transform: rotate(-18deg);
}

.dex-engine-card::before {
  content: "";
  position: absolute;
  right: 38px;
  bottom: 28px;
  width: 72px;
  height: 72px;
  border: 6px solid transparent;
  border-top-color: rgba(var(--dex-blue-rgb), 0.5);
  border-radius: 50%;
  transform: rotate(28deg);
  pointer-events: none;
}

.dex-spec-selector::after {
  background:
    radial-gradient(circle at 91% 22%, var(--dex-blue) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 82%, var(--dex-yellow) 0 3px, transparent 4px),
    repeating-radial-gradient(ellipse at 102% 50%, transparent 0 22px, rgba(var(--dex-blue-rgb), 0.08) 23px 24px),
    linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.04), transparent 45%);
}

.dex-spec-preview {
  background:
    radial-gradient(circle at 94% 12%, rgba(var(--dex-blue-rgb), 0.5) 0 3px, transparent 4px),
    repeating-radial-gradient(ellipse at 110% 8%, transparent 0 28px, rgba(var(--dex-blue-rgb), 0.045) 29px 30px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(var(--dex-blue-rgb), 0.028) 31px 32px),
    linear-gradient(135deg, rgba(var(--dex-blue-rgb), 0.035), transparent 42%),
    #fff;
}

.dex-spec-topic-grid>span::after {
  right: -26px;
  bottom: -17px;
  width: 72px;
  height: 46px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.09);
  border-radius: 50%;
  background: radial-gradient(circle at 25% 50%, rgba(var(--dex-blue-rgb), 0.45) 0 2px, transparent 3px);
  box-shadow:
    0 0 0 9px rgba(var(--dex-blue-rgb), 0.025),
    0 0 0 18px rgba(var(--dex-yellow-rgb), 0.018);
  transform: rotate(-14deg);
}

.dex-scroll-reveal .dex-engine-card:nth-child(odd) {
  transform: translateX(-54px) scale(0.98);
}

.dex-scroll-reveal .dex-engine-card:nth-child(even) {
  transform: translateX(54px) scale(0.98);
}

.dex-scroll-reveal.is-in-view .dex-engine-card {
  transform: translateX(0) scale(1);
}

.dex-scroll-reveal .dex-agent-avatar img {
  opacity: 0;
  transform: translateX(-20px) scale(0.9) rotate(0deg);
  transition:
    opacity 620ms ease,
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-scroll-reveal .dex-engine-card:nth-child(even) .dex-agent-avatar img {
  transform: translateX(20px) scale(0.9) rotate(0deg);
}

.dex-scroll-reveal.is-in-view .dex-agent-avatar img {
  opacity: 1;
  transform: translateX(0) scale(1) rotate(0);
  transition-delay: 170ms;
}

.dex-scroll-reveal .dex-spec-preview-stage {
  transform: translateX(-58px);
}

.dex-scroll-reveal .dex-spec-selectors {
  transform: translateX(58px);
}

.dex-scroll-reveal.is-in-view .dex-spec-preview-stage,
.dex-scroll-reveal.is-in-view .dex-spec-selectors {
  transform: translateX(0);
}

@media screen and (max-width: 767px) {
  .dex-agent-avatar {
    width: 138px;
    height: 128px;
  }

  .dex-agent-avatar img {
    inset: 4px 10px 2px;
    width: 118px;
    height: 122px;
  }

  .dex-scroll-reveal .dex-engine-card:nth-child(odd),
  .dex-scroll-reveal .dex-engine-card:nth-child(even) {
    transform: translateY(34px) scale(0.985);
  }

  .dex-scroll-reveal.is-in-view .dex-engine-card {
    transform: translateY(0) scale(1);
  }

  .dex-scroll-reveal .dex-spec-preview-stage,
  .dex-scroll-reveal .dex-spec-selectors {
    transform: translateY(34px);
  }

  .dex-scroll-reveal.is-in-view .dex-spec-preview-stage,
  .dex-scroll-reveal.is-in-view .dex-spec-selectors {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {

  .dex-scroll-reveal .dex-engine-card,
  .dex-scroll-reveal .dex-agent-avatar img,
  .dex-scroll-reveal .dex-spec-preview-stage,
  .dex-scroll-reveal .dex-spec-selectors {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Polished generated-document surfaces */
.dex-spec-selector {
  isolation: isolate;
}

.dex-spec-selector::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.045), transparent 36%),
    radial-gradient(circle at 94% 18%, rgba(var(--dex-yellow-rgb), 0.12), transparent 28%);
  opacity: 0;
  transition: opacity 240ms ease;
}

.dex-spec-selector.is-active::after,
.dex-spec-selector:hover::after {
  opacity: 1;
}

.dex-spec-selector.is-active>span {
  color: var(--dex-white);
  background: linear-gradient(145deg, var(--dex-blue), var(--dex-blue-dark));
  box-shadow: 0 10px 22px rgba(var(--dex-blue-rgb), 0.22);
}

.dex-spec-preview {
  padding: 30px 30px 28px 38px;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(var(--dex-blue-rgb), 0.028) 31px 32px),
    linear-gradient(135deg, rgba(var(--dex-blue-rgb), 0.035), transparent 42%),
    #fff;
}

.dex-spec-preview::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--dex-blue), var(--dex-blue-dark) 62%, var(--dex-yellow));
}

.dex-spec-preview::after {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 28px;
  left: 20px;
  border-left: 1px dashed rgba(var(--dex-blue-rgb), 0.2);
  pointer-events: none;
}

.dex-spec-preview header {
  margin-bottom: 20px;
  padding-bottom: 18px;
}

.dex-spec-preview header>span {
  position: relative;
  box-shadow:
    0 10px 24px rgba(var(--dex-blue-rgb), 0.2),
    7px 7px 0 rgba(var(--dex-yellow-rgb), 0.18);
}

.dex-spec-preview header>i {
  color: var(--dex-blue-dark);
  background: linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.1), rgba(var(--dex-yellow-rgb), 0.14));
}

.dex-spec-preview>p {
  max-width: 92%;
  margin-bottom: 22px;
  font-size: 13px;
}

.dex-spec-topic-grid {
  gap: 11px;
}

.dex-spec-topic-grid>span {
  position: relative;
  min-height: 52px;
  grid-template-columns: 14px minmax(0, 1fr);
  padding: 11px 12px;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-left: 3px solid rgba(var(--dex-blue-rgb), 0.55);
  background: rgba(248, 251, 255, 0.94);
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.035);
}

.dex-spec-topic-grid>span:nth-child(3n + 2) {
  border-left-color: rgba(var(--dex-yellow-rgb), 0.9);
  background: rgba(255, 251, 235, 0.72);
}

.dex-spec-topic-grid>span::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -17px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.07);
  border-radius: 50%;
}

.dex-spec-topic-grid b {
  color: #334155;
  font-size: 10.5px;
  line-height: 1.35;
}

.dex-spec-preview.is-active .dex-spec-topic-grid>span {
  animation: dex-spec-topic-in 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dex-spec-preview.is-active .dex-spec-topic-grid>span:nth-child(2) {
  animation-delay: 25ms;
}

.dex-spec-preview.is-active .dex-spec-topic-grid>span:nth-child(3) {
  animation-delay: 50ms;
}

.dex-spec-preview.is-active .dex-spec-topic-grid>span:nth-child(4) {
  animation-delay: 75ms;
}

.dex-spec-preview.is-active .dex-spec-topic-grid>span:nth-child(5) {
  animation-delay: 100ms;
}

.dex-spec-preview.is-active .dex-spec-topic-grid>span:nth-child(6) {
  animation-delay: 125ms;
}

.dex-spec-preview.is-active .dex-spec-topic-grid>span:nth-child(n + 7) {
  animation-delay: 150ms;
}

@keyframes dex-spec-topic-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 767px) {
  .dex-spec-preview {
    padding: 24px 18px 22px 28px;
  }

  .dex-spec-preview::after {
    left: 14px;
  }

  .dex-spec-topic-grid>span {
    min-height: 50px;
    padding: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dex-spec-preview.is-active .dex-spec-topic-grid>span {
    animation: none;
  }
}

/* Final DeX orbit and content-slot treatment */
.dex-agent-avatar {
  width: 166px;
  height: 146px;
  margin-bottom: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dex-engine-card-yellow .dex-agent-avatar {
  background: transparent;
}

.dex-agent-avatar img {
  position: relative;
  inset: auto;
  width: 154px;
  height: 146px;
  border-radius: 0;
  object-fit: contain;
  mix-blend-mode: normal;
}

.dex-scroll-reveal.is-in-view .dex-engine-card:nth-child(even) .dex-agent-avatar img {
  transform: translateX(0) scale(1) rotate(0deg);
}

.dex-agent-orbit,
.dex-agent-avatar::before,
.dex-agent-avatar::after {
  display: none;
}

.dex-engine-card::after {
  top: -140px;
  right: -140px;
  bottom: auto;
  z-index: 0;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.18);
  border-radius: 50%;
  background:
    radial-gradient(circle at 23% 77%, var(--dex-blue) 0 4px, transparent 5px),
    radial-gradient(circle at 41% 93%, var(--dex-yellow) 0 4px, transparent 5px),
    radial-gradient(circle, transparent 0 76px, rgba(var(--dex-blue-rgb), 0.2) 77px 78px, transparent 79px 100px, rgba(var(--dex-blue-rgb), 0.16) 101px 102px, transparent 103px 123px, rgba(var(--dex-blue-rgb), 0.12) 124px 125px, transparent 126px);
  box-shadow:
    0 0 0 13px rgba(var(--dex-blue-rgb), 0.04),
    0 0 0 27px rgba(var(--dex-blue-rgb), 0.022);
  opacity: 0.82;
  transform: none;
}

.dex-engine-card::before {
  top: -115px;
  right: -115px;
  bottom: auto;
  z-index: 0;
  width: 230px;
  height: 230px;
  border-width: 7px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: var(--dex-blue);
  border-left-color: var(--dex-blue);
  opacity: 0.9;
  transform: rotate(18deg);
}

.dex-agent-avatar,
.dex-engine-card-copy {
  position: relative;
  z-index: 2;
}

.dex-spec-topic-grid>span::after {
  display: none;
  content: none;
}

@media screen and (max-width: 1199px) {
  .dex-engine-card::after {
    top: -125px;
    right: -125px;
    width: 250px;
    height: 250px;
  }

  .dex-engine-card::before {
    top: -102px;
    right: -102px;
    width: 204px;
    height: 204px;
  }
}

@media screen and (max-width: 767px) {
  .dex-agent-avatar {
    width: 148px;
    height: 132px;
  }

  .dex-agent-avatar img {
    width: 138px;
    height: 132px;
  }

  .dex-engine-card::after {
    top: -112px;
    right: -112px;
    width: 224px;
    height: 224px;
  }

  .dex-engine-card::before {
    top: -91px;
    right: -91px;
    width: 182px;
    height: 182px;
    border-width: 6px;
  }
}

/* Mobile optimization for hero, agent engine, and documentation */
@media screen and (max-width: 767px) {
  .rt-hero-v1 {
    padding-bottom: 42px !important;
  }

  .rt-hero-v1-heading-main {
    transform: translateY(-4px);
  }

  .rt-hero-v1-heading-wrap h1 {
    font-size: clamp(34px, 9.5vw, 40px);
    line-height: 1.08;
  }

  .dex-hero-intro-copy {
    max-width: 34ch;
    margin: 14px auto 0;
    font-size: 14px;
    line-height: 1.55;
  }

  .rt-hero-v1-button-wrap {
    gap: 10px;
    margin-top: 18px;
  }

  .rt-hero-v1-button-wrap>a {
    min-height: 52px;
  }

  .dex-project-workspace-shell {
    margin-top: 10px;
  }

  .dex-hero-workflow-visual {
    padding: 14px 10px 16px;
    border-radius: 18px;
  }

  .dex-hero-workflow-top {
    margin-bottom: 18px;
  }

  .dex-hero-workflow-top strong {
    font-size: 27px;
    line-height: 1.08;
  }

  .dex-project-flow {
    padding: 10px;
    scrollbar-width: thin;
  }

  .dex-project-flow-row {
    grid-template-columns: repeat(8, 104px);
    gap: 8px;
    min-width: 888px;
  }

  .dex-project-flow-card {
    min-height: 100px;
    padding: 11px 9px;
  }

  .dex-hero-workflow-status {
    padding: 0 12px 16px;
  }

  .dex-stage-console {
    padding-top: 16px;
  }

  .dex-stage-console-head {
    margin-bottom: 14px;
  }

  .dex-stage-console-head>div {
    gap: 12px;
    align-items: flex-start;
  }

  .dex-stage-console-head span {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
  }

  .dex-project-workspace .dex-stage-console-head span {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 15px;
    box-shadow:
      0 5px 0 #16368e,
      0 14px 24px rgba(var(--dex-blue-rgb), 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.42);
  }

  .dex-project-workspace .dex-stage-console-yellow .dex-stage-console-head span {
    box-shadow:
      0 5px 0 #b77c00,
      0 14px 24px rgba(var(--dex-yellow-rgb), 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.58);
  }

  .dex-project-workspace .dex-stage-console-head span svg {
    width: 22px;
    height: 22px;
  }

  .dex-stage-console-head strong {
    margin-bottom: 4px;
    font-size: 21px;
    line-height: 1.12;
  }

  .dex-stage-console-head p {
    font-size: 13px;
    line-height: 1.45;
  }

  .dex-stage-console-head button {
    width: 100%;
    min-height: 46px;
    margin-top: 12px;
  }

  .dex-stage-tabs {
    margin-bottom: 14px;
  }

  .dex-stage-tabs button {
    min-height: 52px;
    padding: 9px 10px;
  }

  .dex-stage-tabs i {
    width: 26px;
    height: 26px;
  }

  .dex-stage-tabs b {
    font-size: 12px;
  }

  .dex-stage-console-body {
    gap: 12px;
    min-height: 0;
  }

  .dex-stage-console-body.is-document-layout,
  .dex-stage-console-body.is-build-layout,
  .dex-stage-console-body.is-code-layout,
  .dex-stage-console-body.is-qa-layout,
  .dex-stage-console-body.is-deploy-layout,
  .dex-stage-console-body.is-history-layout {
    grid-template-columns: 1fr;
  }

  .dex-stage-panel,
  .dex-stage-terminal {
    min-height: 0;
    border-radius: 12px;
  }

  .dex-stage-panel {
    padding: 16px;
  }

  .dex-stage-panel-top {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }

  .dex-stage-substep-copy {
    min-height: 0;
    padding: 16px;
  }

  .dex-stage-substep-copy small {
    margin-bottom: 10px;
    font-size: 10px;
  }

  .dex-stage-substep-copy p {
    font-size: 15px;
    line-height: 1.48;
  }

  .dex-stage-stream-meter {
    margin-top: 13px;
  }

  .dex-stage-stream-meter b {
    font-size: 10px;
  }

  .dex-stage-document-writer,
  .dex-stage-document-paper {
    min-height: 260px;
  }

  .dex-stage-document-paper {
    gap: 8px;
    padding: 15px;
  }

  .dex-stage-document-paper p {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    font-size: 11.5px;
    line-height: 1.42;
  }

  .dex-stage-document-paper p span {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }

  .dex-document-cursor {
    height: 15px;
    margin-left: 30px;
  }

  .dex-stage-document-aside {
    padding: 16px;
  }

  .dex-stage-document-aside strong {
    font-size: 20px;
  }

  .dex-stage-document-aside p {
    margin-top: 10px;
    font-size: 12px;
  }

  .dex-stage-document-result {
    margin: 16px 0 0;
  }

  .dex-stage-document-result b {
    font-size: 12px;
  }

  .dex-stage-document-aside ul {
    margin-top: 16px;
    padding-top: 14px;
  }

  .dex-code-build-showcase,
  .dex-qa-showcase,
  .dex-build-duo,
  .dex-deploy-board,
  .dex-history-checklist,
  .dex-build-status {
    min-height: 0;
  }

  .dex-build-duo,
  .dex-qa-showcase,
  .dex-deploy-board {
    grid-template-columns: 1fr;
  }

  .dex-build-duo>div,
  .dex-qa-main,
  .dex-deploy-board>div {
    padding: 14px;
  }

  .dex-code-preview,
  .dex-live-preview,
  .dex-history-log,
  .dex-qa-terminal {
    min-height: 230px;
  }

  .dex-deploy-command {
    grid-column: auto;
  }

  .dex-history-checklist p {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .dex-history-checklist b {
    grid-column: 2;
  }

  .dex-stage-table div {
    grid-template-columns: minmax(88px, 0.72fr) minmax(0, 1.28fr);
  }

  .dex-stage-table b,
  .dex-stage-table span {
    padding: 10px;
    font-size: 11.5px;
    line-height: 1.4;
  }

  .dex-terminal-top {
    padding: 11px 14px;
  }

  .dex-stage-terminal pre {
    min-height: 150px;
    padding: 16px;
    font-size: 11px;
    line-height: 1.55;
  }

  .dex-terminal-cursor {
    right: 14px;
    bottom: 14px;
    height: 15px;
  }

  .dex-delivery-metrics {
    gap: 8px;
    margin-top: 18px;
    padding: 10px;
  }

  .dex-delivery-metrics article {
    padding: 11px;
  }

  .dex-delivery-metrics strong {
    font-size: 26px;
  }

  .rt-ai-agents-v1 {
    padding: 56px 0 !important;
  }

  .dex-engine-heading {
    margin-bottom: 28px;
  }

  .dex-engine-heading .rt-sub-text {
    margin-bottom: 10px;
    font-size: 10px;
  }

  .dex-engine-heading h2 {
    font-size: 34px;
    line-height: 1.08;
  }

  .dex-engine-heading p {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.48;
  }

  .dex-engine-grid {
    gap: 12px;
  }

  .dex-engine-card,
  .dex-engine-card:last-child {
    display: grid;
    min-height: 190px;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 18px;
  }

  .dex-agent-avatar {
    width: 104px;
    height: 112px;
    margin: 0;
  }

  .dex-agent-avatar img {
    width: 104px;
    height: 112px;
  }

  .dex-engine-card-copy {
    align-self: center;
  }

  .dex-engine-card h3 {
    margin-bottom: 8px;
    font-size: 20px;
    line-height: 1.15;
  }

  .dex-engine-card p {
    font-size: 13.5px;
    line-height: 1.48;
  }

  .dex-engine-card::after {
    top: -80px;
    right: -80px;
    width: 160px;
    height: 160px;
    opacity: 0.52;
  }

  .dex-engine-card::before {
    top: -64px;
    right: -64px;
    width: 128px;
    height: 128px;
    border-width: 5px;
    opacity: 0.58;
  }

  .dex-engine-outcome {
    gap: 12px;
    margin-top: 18px;
    padding: 16px;
  }

  .dex-engine-outcome strong {
    font-size: 15px;
  }

  .dex-engine-outcome p {
    font-size: 12.5px;
  }

  .rt-feature-v1 {
    padding: 56px 0 !important;
  }

  .rt-feature-v1::after {
    top: 76px;
    right: -132px;
    width: 290px;
    opacity: 0.075;
  }

  .dex-spec-heading {
    margin-bottom: 28px;
  }

  .dex-spec-heading .rt-sub-text {
    margin-bottom: 10px;
    font-size: 10px;
  }

  .dex-spec-heading h2 {
    font-size: 34px;
    line-height: 1.08;
  }

  .dex-spec-heading p {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.48;
  }

  .dex-spec-layout {
    gap: 26px;
  }

  .dex-spec-selectors {
    gap: 10px;
  }

  .dex-spec-selector {
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    gap: 10px;
    padding: 12px;
  }

  .dex-spec-selector>span {
    width: 40px;
    height: 40px;
  }

  .dex-spec-selector h3 {
    font-size: 13px;
  }

  .dex-spec-selector p {
    font-size: 9.5px;
    line-height: 1.3;
  }

  .dex-spec-preview-stage {
    min-height: 570px;
  }

  .dex-spec-preview {
    padding: 22px 16px 20px 26px;
  }

  .dex-spec-preview>p {
    max-width: 100%;
    margin-bottom: 16px;
    font-size: 12px;
  }

  .dex-spec-topic-grid {
    gap: 8px;
  }

  .dex-spec-topic-grid>span {
    min-height: 44px;
    padding: 8px;
  }

  .dex-spec-topic-grid b {
    font-size: 9.5px;
  }
}

@media screen and (max-width: 374px) {

  .rt-hero-v1-heading-wrap h1,
  .dex-engine-heading h2,
  .dex-spec-heading h2 {
    font-size: 32px;
  }

  .dex-engine-card,
  .dex-engine-card:last-child {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .dex-agent-avatar,
  .dex-agent-avatar img {
    width: 88px;
    height: 100px;
  }

  .dex-engine-card h3 {
    font-size: 18px;
  }
}

/* DeX business outcomes */
.dex-business-outcomes-section {
  position: relative;
  padding: clamp(86px, 9vw, 128px) 0;
  overflow: hidden;
  background-color: var(--dex-surface);
  background-image:
    radial-gradient(circle, rgba(var(--dex-blue-rgb), 0.2) 1.2px, transparent 1.6px),
    radial-gradient(circle, rgba(var(--dex-yellow-rgb), 0.22) 1.2px, transparent 1.6px),
    radial-gradient(circle at 12% 76%, rgba(var(--dex-blue-rgb), 0.17), transparent 28%),
    radial-gradient(circle at 88% 14%, rgba(var(--dex-yellow-rgb), 0.18), transparent 24%),
    radial-gradient(circle at 52% 90%, rgba(var(--dex-blue-dark-rgb), 0.1), transparent 34%);
  background-position:
    0 0,
    14px 14px,
    center,
    center,
    center;
  background-size:
    28px 28px,
    28px 28px,
    auto,
    auto,
    auto;
}

.dex-business-outcomes-section::before,
.dex-business-outcomes-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.dex-business-outcomes-section::before {
  left: clamp(-260px, -12vw, -90px);
  bottom: clamp(48px, 8vw, 120px);
  z-index: 0;
  width: clamp(360px, 34vw, 650px);
  aspect-ratio: 419 / 454;
  background: url("/assets/dex-icon-blue.svg") center / contain no-repeat;
  opacity: 0.11;
}

.dex-business-outcomes-section::after {
  top: -260px;
  right: -220px;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(var(--dex-yellow-rgb), 0.18);
  border-radius: 50%;
}

.dex-business-outcomes-inner {
  position: relative;
  z-index: 1;
}

.dex-business-outcomes-heading {
  max-width: 1080px;
  margin: 0 auto clamp(38px, 5vw, 62px);
  text-align: center;
}

.dex-business-outcomes-heading>small,
.dex-outcome-copy>small {
  color: var(--dex-blue-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dex-business-outcomes-heading h2 {
  margin: 12px 0 0;
  color: #0f172a;
  font-size: clamp(43px, 5vw, 68px);
  font-weight: 500;
  line-height: 1.03;
}

.dex-business-outcomes-heading h2 span {
  display: block;
  color: #2563eb;
  font-weight: 700;
}

.dex-business-outcomes-heading p {
  max-width: 850px;
  margin: 22px auto 0;
  color: #475569;
  font-size: clamp(16px, 1.55vw, 20px);
  font-weight: 600;
  line-height: 1.55;
}

.dex-outcome-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f1f5f9;
  scrollbar-width: none;
}

.dex-outcome-tabs::-webkit-scrollbar {
  display: none;
}

.dex-outcome-tab {
  display: flex;
  min-width: 0;
  min-height: 58px;
  gap: 9px;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #64748b;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: color 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.dex-outcome-tab:hover {
  color: #1e40af;
  transform: translateY(-1px);
}

.dex-outcome-tab:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.24);
  outline-offset: 2px;
}

.dex-outcome-tab span {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
}

.dex-outcome-tab svg,
.dex-outcome-panel svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-outcome-tab b {
  min-width: 0;
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
}

.dex-outcome-tab.is-active {
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.2);
  background: #fff;
  box-shadow: 0 7px 20px rgba(15, 23, 42, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.dex-outcome-tab-yellow.is-active {
  color: #8a5b00;
  border-color: rgba(251, 191, 36, 0.45);
}

.dex-outcome-panel {
  --outcome-accent: #2563eb;
  --outcome-accent-rgb: 37, 99, 235;
  display: grid;
  min-height: 610px;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(42px, 6vw, 82px);
  align-items: center;
  margin-top: 38px;
  padding: clamp(38px, 5vw, 66px);
  border: 1px solid #e2e8f0;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.075);
}

.dex-outcome-panel-yellow {
  --outcome-accent: #d99a00;
  --outcome-accent-rgb: 251, 191, 36;
}

.dex-outcome-panel.is-changing .dex-outcome-copy,
.dex-outcome-panel.is-changing .dex-outcome-console-body {
  opacity: 0;
  transform: translateX(10px);
}

.dex-outcome-copy,
.dex-outcome-console-body {
  transition: opacity 300ms ease, transform 360ms ease;
}

.dex-outcome-icon {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  margin-bottom: 32px;
  border: 1px solid rgba(var(--outcome-accent-rgb), 0.3);
  border-radius: 20px;
  color: var(--outcome-accent);
  background: rgba(var(--outcome-accent-rgb), 0.08);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.65);
}

.dex-outcome-icon svg {
  width: 31px;
  height: 31px;
}

.dex-outcome-copy>small {
  color: var(--outcome-accent);
}

.dex-outcome-copy h3 {
  margin: 11px 0 20px;
  color: #0f172a;
  font-size: clamp(34px, 3.7vw, 50px);
  line-height: 1.06;
}

.dex-outcome-copy>p {
  margin: 0;
  color: #475569;
  font-size: 17px;
  font-weight: 550;
  line-height: 1.65;
}

.dex-outcome-copy ul {
  display: grid;
  gap: 15px;
  margin: 29px 0 0;
  padding: 0;
  list-style: none;
}

.dex-outcome-copy li {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  color: #334155;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
}

.dex-outcome-copy li>svg {
  width: 27px;
  height: 27px;
  padding: 6px;
  border: 1px solid rgba(var(--outcome-accent-rgb), 0.28);
  border-radius: 50%;
  color: var(--outcome-accent);
  background: rgba(var(--outcome-accent-rgb), 0.09);
}

.dex-outcome-console {
  overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 22px;
  background: #f8fafc;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.1), inset 0 0 0 8px rgba(226, 232, 240, 0.45);
}

.dex-outcome-console>header {
  display: flex;
  height: 47px;
  gap: 7px;
  align-items: center;
  padding: 0 17px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.dex-outcome-console>header>i {
  width: 8px;
  height: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  background: transparent;
}

.dex-outcome-console>header>i:nth-child(2) {
  border-color: var(--outcome-accent);
}

.dex-outcome-console>header>span {
  margin-left: 8px;
  color: #64748b;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dex-outcome-console>header>b {
  margin-left: auto;
  color: var(--outcome-accent);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.dex-outcome-console-body {
  display: grid;
  min-height: 420px;
  place-items: center;
  padding: clamp(24px, 3vw, 42px);
}

.dex-outcome-flow {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.dex-hollow-node {
  display: grid;
  width: 112px;
  height: 112px;
  flex: 0 0 112px;
  place-items: center;
  border: 2px solid #d7e1ec;
  border-radius: 25px;
  color: #4f8df7;
  background: transparent;
  box-shadow: 0 9px 22px rgba(15, 23, 42, 0.06);
}

.dex-hollow-node svg {
  width: 36px;
  height: 36px;
}

.dex-hollow-node span {
  color: #475569;
  font-size: 10px;
  font-weight: 800;
}

.dex-hollow-node.is-primary {
  width: 128px;
  height: 128px;
  flex-basis: 128px;
  border-color: var(--outcome-accent);
  color: #fff;
  background: var(--outcome-accent);
  box-shadow: 0 15px 34px rgba(var(--outcome-accent-rgb), 0.28);
}

.dex-hollow-node.is-primary span {
  color: #fff;
}

.dex-flow-line {
  position: relative;
  width: clamp(25px, 4vw, 52px);
  height: 2px;
  flex: 0 1 52px;
  margin: 0 9px;
  overflow: visible;
  background: #cbd5e1;
}

.dex-flow-line::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid #94a3b8;
  border-right: 2px solid #94a3b8;
  transform: rotate(45deg);
}

.dex-flow-line::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 10px;
  height: 6px;
  border-radius: 99px;
  background: var(--outcome-accent);
  animation: dexOutcomeTravel 2s ease-in-out infinite;
}

.dex-outcome-timelines,
.dex-outcome-bars,
.dex-outcome-status,
.dex-outcome-comparison,
.dex-advantage-console-visual {
  width: 100%;
}

.dex-outcome-timelines>div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 30px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.dex-outcome-timelines>div strong {
  color: #334155;
}

.dex-outcome-timelines>div i {
  grid-column: 1 / -1;
  height: 15px;
  border-radius: 99px;
  background: #e2e8f0;
}

.dex-outcome-timelines>div i.is-traditional {
  width: 100%;
}

.dex-outcome-timelines>div i.is-dex {
  width: 36%;
  background: linear-gradient(90deg, #2563eb, #fbbf24);
  animation: dexOutcomeGrow 2.6s ease-in-out infinite alternate;
}

.dex-outcome-timelines footer {
  display: flex;
  gap: 11px;
  align-items: center;
  margin-top: 45px;
  color: var(--outcome-accent);
}

.dex-outcome-timelines footer svg {
  width: 27px;
  height: 27px;
}

.dex-outcome-timelines footer b {
  color: #334155;
  font-size: 11px;
}

.dex-outcome-timelines footer em {
  height: 1px;
  flex: 1;
  background: repeating-linear-gradient(90deg, #94a3b8 0 5px, transparent 5px 10px);
}

.dex-outcome-bars header {
  margin-bottom: 30px;
}

.dex-outcome-bars header span {
  display: block;
  color: var(--outcome-accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dex-outcome-bars header strong {
  display: block;
  margin-top: 7px;
  color: #0f172a;
  font-size: 20px;
}

.dex-outcome-bars>div {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr) 70px;
  gap: 12px;
  align-items: center;
  margin: 19px 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
}

.dex-outcome-bars>div i {
  height: 24px;
  border-radius: 6px;
  transform-origin: left;
  animation: dexOutcomeBar 2.4s ease-in-out infinite alternate;
}

.dex-outcome-bars .is-cost {
  width: 42%;
  background: #cbd5e1;
}

.dex-outcome-bars .is-output {
  width: 92%;
  background: linear-gradient(90deg, #1e40af, #2563eb);
  animation-delay: 180ms;
}

.dex-outcome-bars>div b {
  color: #334155;
  font-size: 10px;
}

.dex-outcome-bars footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 18px;
  margin-top: 35px;
  padding-top: 22px;
  border-top: 1px solid #e2e8f0;
}

.dex-outcome-bars footer small {
  color: #94a3b8;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.dex-outcome-bars footer strong {
  color: var(--outcome-accent);
  font-size: 18px;
}

.dex-outcome-status>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.dex-outcome-status>header b {
  color: var(--outcome-accent);
  font-size: 9px;
  text-transform: uppercase;
}

.dex-outcome-status>header b i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--outcome-accent);
  box-shadow: 0 0 0 5px rgba(var(--outcome-accent-rgb), 0.1);
  animation: dexOutcomePulse 1.8s ease-in-out infinite;
}

.dex-outcome-status>div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 80px 25px;
  gap: 10px;
  align-items: center;
  margin: 9px 0;
  padding: 15px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #64748b;
  background: #fff;
  font-size: 11px;
  opacity: 0;
  animation: dexOutcomeRow 500ms ease forwards calc(var(--dex-row) * 130ms);
}

.dex-outcome-status>div>span {
  color: #94a3b8;
  font-size: 9px;
}

.dex-outcome-status>div>strong {
  color: #334155;
}

.dex-outcome-status>div>i {
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(var(--outcome-accent-rgb), 0.12);
}

.dex-outcome-status>div>i::after {
  content: "";
  display: block;
  width: var(--dex-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1e40af 0%, #2563eb 55%, #fbbf24 82%, #2563eb 100%);
  background-size: 220% 100%;
  transform-origin: left;
  animation:
    dexOutcomeGrow 1.25s cubic-bezier(0.22, 1, 0.36, 1) both calc(220ms + var(--dex-row) * 150ms),
    dexQualityFlow 2.6s linear infinite calc(1.4s + var(--dex-row) * 150ms);
}

.dex-outcome-status>div>svg {
  width: 20px;
  height: 20px;
  padding: 4px;
  border-radius: 50%;
  color: #fff;
  background: var(--outcome-accent);
}

.dex-advantage-copy-comparison {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.dex-advantage-copy-comparison article {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 13px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #fff;
  opacity: 0;
  animation: dexOutcomeRow 500ms ease forwards calc(var(--dex-row) * 120ms);
}

.dex-advantage-copy-comparison article b {
  color: #334155;
  font-size: 9px;
  text-transform: uppercase;
}

.dex-advantage-copy-comparison article span {
  color: #94a3b8;
  font-size: 9px;
  font-weight: 700;
}

.dex-advantage-copy-comparison article i {
  color: #cbd5e1;
  text-align: center;
}

.dex-advantage-copy-comparison article strong {
  color: var(--outcome-accent);
  font-size: 10px;
}

.dex-outcome-network {
  position: relative;
  width: min(100%, 450px);
  height: 350px;
}

.dex-outcome-network::before {
  content: "";
  position: absolute;
  inset: 52px 75px 80px;
  border: 1px dashed rgba(var(--outcome-accent-rgb), 0.48);
  border-radius: 50%;
  animation: dexOutcomeSpin 24s linear infinite;
}

.dex-network-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #2563eb, #1e40af);
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.26);
  transform: translate(-50%, -58%);
}

.dex-network-core svg {
  width: 30px;
  height: 30px;
}

.dex-network-core strong {
  font-size: 13px;
}

.dex-outcome-network>span {
  position: absolute;
  display: grid;
  width: 102px;
  min-height: 70px;
  place-items: center;
  padding: 10px;
  border: 1px solid #d8e1ec;
  border-radius: 15px;
  color: var(--outcome-accent);
  background: #fff;
  box-shadow: 0 9px 22px rgba(15, 23, 42, 0.07);
}

.dex-outcome-network>span b {
  color: #475569;
  font-size: 9px;
  text-align: center;
}

.dex-outcome-network>span:nth-of-type(1) {
  top: 8px;
  left: 20px;
}

.dex-outcome-network>span:nth-of-type(2) {
  top: 18px;
  right: 12px;
}

.dex-outcome-network>span:nth-of-type(3) {
  right: 0;
  bottom: 44px;
}

.dex-outcome-network>span:nth-of-type(4) {
  bottom: 48px;
  left: 5px;
}

.dex-outcome-network footer {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 210px;
  padding: 10px 15px;
  border: 1px solid rgba(var(--outcome-accent-rgb), 0.3);
  border-radius: 99px;
  color: var(--outcome-accent);
  background: #fff;
  transform: translateX(-50%);
}

.dex-outcome-network footer strong {
  color: #334155;
  font-size: 11px;
}

.dex-outcome-network footer span {
  margin-left: auto;
  color: #64748b;
  font-size: 9px;
}

.dex-outcome-comparison>header {
  display: grid;
  grid-template-columns: 1fr 42px 1fr;
  align-items: center;
  margin-bottom: 15px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 850;
  text-align: center;
  text-transform: uppercase;
}

.dex-outcome-comparison>header strong {
  color: var(--outcome-accent);
}

.dex-outcome-comparison>header i {
  height: 1px;
  background: #dbe4ef;
}

.dex-outcome-comparison>.dex-comparison-row {
  display: grid;
  grid-template-columns: 75px minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin: 9px 0;
  padding: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #fff;
  opacity: 0;
  animation: dexOutcomeRow 500ms ease forwards calc(var(--dex-row) * 120ms);
}

.dex-outcome-comparison>.dex-comparison-row b {
  color: #334155;
  font-size: 9px;
  text-transform: uppercase;
}

.dex-outcome-comparison>.dex-comparison-row span {
  color: #94a3b8;
  font-size: 9px;
  font-weight: 700;
}

.dex-outcome-comparison>.dex-comparison-row i {
  color: #cbd5e1;
}

.dex-outcome-comparison>.dex-comparison-row strong {
  color: var(--outcome-accent);
  font-size: 10px;
}

.dex-advantage-shift {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.dex-advantage-shift>article {
  position: relative;
  min-height: 180px;
  padding: 22px 16px;
  overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 18px;
  background: #fff;
}

.dex-advantage-shift>article small {
  display: block;
  color: #94a3b8;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dex-advantage-shift>article strong {
  display: block;
  margin-top: 7px;
  color: #475569;
  font-size: 15px;
}

.dex-advantage-shift>article>div {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 25px;
}

.dex-advantage-shift>article>div i {
  display: block;
  width: 27px;
  height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #f8fafc;
  animation: dexLegacyDrift 2.8s ease-in-out infinite;
}

.dex-advantage-shift>article>div i:nth-child(2) {
  animation-delay: 180ms;
}

.dex-advantage-shift>article>div i:nth-child(3) {
  animation-delay: 360ms;
}

.dex-advantage-shift>article>div i:nth-child(4) {
  animation-delay: 540ms;
}

.dex-advantage-shift>article.is-dex {
  border-color: rgba(var(--outcome-accent-rgb), 0.48);
  background:
    radial-gradient(circle at 85% 15%, rgba(37, 99, 235, 0.13), transparent 35%),
    linear-gradient(145deg, #fff, rgba(var(--outcome-accent-rgb), 0.07));
  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.11);
}

.dex-advantage-shift>article.is-dex small {
  color: var(--outcome-accent);
}

.dex-advantage-shift>article.is-dex strong {
  color: #0f172a;
}

.dex-advantage-shift>article.is-dex>div {
  position: relative;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, #2563eb, #1e40af);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.26);
}

.dex-advantage-shift>article.is-dex>div svg {
  width: 26px;
  height: 26px;
}

.dex-advantage-shift>article.is-dex>div em,
.dex-advantage-shift>article.is-dex>div::before,
.dex-advantage-shift>article.is-dex>div::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(37, 99, 235, 0.24);
  border-radius: 20px;
  animation: dexAdvantageOrbit 2.4s ease-out infinite;
}

.dex-advantage-shift>article.is-dex>div::before {
  animation-delay: 800ms;
}

.dex-advantage-shift>article.is-dex>div::after {
  animation-delay: 1600ms;
}

.dex-advantage-bridge {
  position: relative;
  display: grid;
  min-height: 90px;
  place-items: center;
  color: #2563eb;
}

.dex-advantage-bridge::before {
  content: "";
  position: absolute;
  right: 5px;
  left: 5px;
  height: 2px;
  background: linear-gradient(90deg, #cbd5e1, #2563eb 58%, #fbbf24);
}

.dex-advantage-bridge::after {
  content: "";
  position: absolute;
  right: 4px;
  width: 9px;
  height: 9px;
  border-top: 2px solid #d99a00;
  border-right: 2px solid #d99a00;
  transform: rotate(45deg);
}

.dex-advantage-bridge>i {
  position: absolute;
  left: 6px;
  width: 14px;
  height: 8px;
  border-radius: 99px;
  background: #2563eb;
  box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.1);
  animation: dexAdvantageTravel 2.1s ease-in-out infinite;
}

.dex-advantage-bridge>svg {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  padding: 9px;
  border: 1px solid #dbe4ef;
  border-radius: 50%;
  background: #fff;
}

.dex-advantage-bridge>b {
  position: absolute;
  bottom: 2px;
  color: #64748b;
  font-size: 8px;
  letter-spacing: 0.12em;
}

.dex-advantage-console-visual>footer {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-top: 38px;
  padding: 13px 16px;
  border: 1px solid rgba(var(--outcome-accent-rgb), 0.35);
  border-radius: 999px;
  color: #475569;
  background: #fff;
  font-size: 10px;
  font-weight: 800;
}

.dex-advantage-console-visual>footer i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.11);
  animation: dexOutcomePulse 1.8s ease-in-out infinite;
}

.dex-advantage-console-visual>footer b {
  margin-left: auto;
  color: var(--outcome-accent);
  font-size: 8px;
  letter-spacing: 0.1em;
}

@keyframes dexOutcomeTravel {
  0% {
    transform: translateX(0);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateX(42px);
    opacity: 0;
  }
}

@keyframes dexOutcomeGrow {
  from {
    transform: scaleX(0.18);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes dexOutcomeBar {
  from {
    transform: scaleX(0.72);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes dexOutcomePulse {
  50% {
    transform: scale(0.7);
    opacity: 0.55;
  }
}

@keyframes dexOutcomeRow {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dexOutcomeSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dexQualityFlow {
  to {
    background-position: -220% 0;
  }
}

@keyframes dexLegacyDrift {
  50% {
    transform: translateY(-5px);
    border-color: #94a3b8;
  }
}

@keyframes dexAdvantageOrbit {
  0% {
    transform: scale(0.82);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: scale(1.28);
    opacity: 0;
  }
}

@keyframes dexAdvantageTravel {
  0% {
    transform: translateX(0);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateX(118px);
    opacity: 0;
  }
}

@media screen and (max-width: 1100px) {
  .dex-outcome-tabs {
    grid-template-columns: repeat(6, 180px);
    border-radius: 22px;
  }

  .dex-outcome-tab {
    justify-content: flex-start;
  }

  .dex-outcome-panel {
    min-height: 560px;
    gap: 32px;
    padding: 38px;
  }

  .dex-hollow-node {
    width: 90px;
    height: 90px;
    flex-basis: 90px;
  }

  .dex-hollow-node.is-primary {
    width: 104px;
    height: 104px;
    flex-basis: 104px;
  }
}

@media screen and (max-width: 767px) {
  .dex-business-outcomes-section {
    padding: 64px 0;
  }

  .dex-business-outcomes-section::before {
    left: auto;
    right: -145px;
    bottom: 32px;
    width: 310px;
    opacity: 0.08;
  }

  .dex-business-outcomes-section::after {
    top: -210px;
    right: -260px;
    width: 420px;
    height: 420px;
  }

  .dex-business-outcomes-heading {
    margin-bottom: 28px;
  }

  .dex-business-outcomes-heading h2 {
    font-size: 36px;
    line-height: 1.08;
  }

  .dex-business-outcomes-heading p {
    margin-top: 16px;
    font-size: 15px;
  }

  .dex-outcome-tabs {
    grid-template-columns: repeat(6, 178px);
    margin-right: -20px;
    padding-right: 20px;
    border-radius: 18px 0 0 18px;
  }

  .dex-outcome-tab {
    min-height: 52px;
  }

  .dex-outcome-panel {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 35px;
    margin-top: 24px;
    padding: 26px 20px;
    border-radius: 22px;
  }

  .dex-advantage-shift {
    grid-template-columns: 1fr 48px 1fr;
    gap: 6px;
    margin-bottom: 26px;
  }

  .dex-advantage-shift>article {
    min-height: 135px;
    padding: 16px 10px;
  }

  .dex-advantage-shift>article strong {
    font-size: 11px;
  }

  .dex-advantage-shift>article>div {
    gap: 4px;
    margin-top: 20px;
  }

  .dex-advantage-shift>article>div i {
    width: 24px;
    height: 27px;
  }

  .dex-advantage-shift>article.is-dex>div {
    width: 48px;
    height: 48px;
  }

  .dex-advantage-bridge>svg {
    width: 30px;
    height: 30px;
    padding: 7px;
  }

  .dex-advantage-bridge>b {
    display: none;
  }

  .dex-advantage-bridge>i {
    animation-name: dexAdvantageTravelMobile;
  }

  .dex-advantage-copy-comparison article {
    grid-template-columns: 68px minmax(0, 1fr) 18px minmax(0, 1fr);
    gap: 6px;
    padding: 12px 8px;
  }

  .dex-advantage-console-visual>footer {
    margin-top: 24px;
  }

  .dex-outcome-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 22px;
    border-radius: 17px;
  }

  .dex-outcome-copy h3 {
    font-size: 31px;
  }

  .dex-outcome-copy>p {
    font-size: 15px;
  }

  .dex-outcome-console-body {
    min-height: 350px;
    padding: 20px 14px;
  }

  .dex-hollow-node {
    width: 75px;
    height: 88px;
    flex-basis: 75px;
    border-radius: 18px;
  }

  .dex-hollow-node.is-primary {
    width: 86px;
    height: 104px;
    flex-basis: 86px;
  }

  .dex-hollow-node svg {
    width: 27px;
    height: 27px;
  }

  .dex-flow-line {
    margin: 0 5px;
  }

  .dex-outcome-bars>div {
    grid-template-columns: 86px minmax(0, 1fr) 56px;
    gap: 8px;
  }

  .dex-outcome-status>div {
    grid-template-columns: 25px minmax(0, 1fr) 45px 21px;
    gap: 7px;
    padding: 13px 9px;
  }

  .dex-outcome-comparison>.dex-comparison-row {
    grid-template-columns: 56px minmax(0, 1fr) 19px minmax(0, 1fr);
    padding: 11px 8px;
  }
}

@keyframes dexAdvantageTravelMobile {
  0% {
    transform: translateX(0);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateX(32px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .dex-business-outcomes-section *,
  .dex-business-outcomes-section *::before,
  .dex-business-outcomes-section *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .dex-outcome-status>div,
  .dex-outcome-comparison>.dex-comparison-row,
  .dex-advantage-copy-comparison article {
    opacity: 1;
  }
}

/* DeX delivery workflow, phases, and core capabilities */
.dex-delivery-system-section {
  position: relative;
  padding: clamp(86px, 9vw, 126px) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 5% 18%, rgba(var(--dex-blue-rgb), 0.09), transparent 25%),
    radial-gradient(circle at 94% 78%, rgba(var(--dex-yellow-rgb), 0.12), transparent 24%),
    linear-gradient(180deg, #ffffff, #f7faff 52%, #fffdf5);
}

.dex-delivery-system-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(var(--dex-blue-rgb), 0.13) 1px, transparent 1.4px),
    linear-gradient(rgba(var(--dex-blue-rgb), 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.03) 1px, transparent 1px);
  background-size: 28px 28px, 56px 56px, 56px 56px;
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  pointer-events: none;
}

.dex-delivery-system-inner {
  position: relative;
  z-index: 1;
}

.dex-delivery-system-heading {
  max-width: 910px;
  margin: 0 auto clamp(44px, 5vw, 66px);
  text-align: center;
}

.dex-delivery-heading-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.dex-delivery-heading-logo {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.16);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow:
    0 10px 22px rgba(var(--dex-blue-rgb), 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.dex-delivery-heading-logo img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.dex-delivery-system-heading .rt-sub-text,
.dex-delivery-phase-section>header small,
.dex-core-capabilities>header small,
.dex-workflow-board>header small {
  display: block;
  color: var(--dex-blue-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.dex-delivery-system-heading h2 {
  margin: 14px 0 0;
  color: var(--dex-text);
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 500;
  line-height: 1.05;
}

.dex-delivery-system-heading h2 span {
  color: var(--dex-blue);
  background: linear-gradient(100deg, var(--dex-blue-dark), var(--dex-blue) 62%, #d89b00);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dex-delivery-system-heading p {
  max-width: 800px;
  margin: 22px auto 0;
  color: var(--dex-text-secondary);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  line-height: 1.55;
}

.dex-workflow-board {
  padding: clamp(26px, 3.2vw, 42px);
  border: 1px solid rgba(var(--dex-blue-rgb), 0.17);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.08);
}

.dex-workflow-board>header,
.dex-delivery-phase-section>header,
.dex-core-capabilities>header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.dex-workflow-board>header h3,
.dex-delivery-phase-section>header h3,
.dex-core-capabilities>header h3 {
  margin: 8px 0 0;
  color: var(--dex-text);
  font-size: clamp(27px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.12;
}

.dex-workflow-board>header>span {
  padding: 8px 12px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.2);
  border-radius: 999px;
  color: var(--dex-blue-dark);
  background: rgba(var(--dex-blue-rgb), 0.06);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.dex-delivery-workflow-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(36px, 4vw, 54px);
}

/* Pipeline container replaces the old ::before line */
.dex-workflow-pipeline-container {
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  height: 20px;
  z-index: 0;
  pointer-events: none;
}

.dex-workflow-pipeline-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dex-pipeline-line-bg {
  stroke: rgba(var(--dex-blue-rgb), 0.1);
  stroke-width: 4px;
  stroke-linecap: round;
}

.dex-pipeline-line-flow {
  stroke: url(#pipelineGlowGradient);
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-dasharray: calc((var(--active-index) / 7) * 875px) 1000px;
  transition: stroke-dasharray 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  filter: drop-shadow(0 0 6px rgba(var(--dex-blue-rgb), 0.7));
}

.dex-delivery-workflow-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 8px 20px;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
  cursor: pointer;
}

.dex-workflow-card-visual {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease, background 0.6s ease;
  z-index: 1;
  pointer-events: none;
}

.dex-delivery-workflow-step:hover .dex-workflow-card-visual {
  background: radial-gradient(circle, rgba(var(--dex-yellow-rgb), 0.18) 0%, rgba(var(--dex-blue-rgb), 0.1) 50%, transparent 70%);
  transform: scale(2) !important;
  z-index: 10;
  filter: drop-shadow(0 0 16px rgba(var(--dex-blue-rgb), 0.6));
}

.dex-delivery-workflow-step.is-active:not(:hover) .dex-workflow-card-visual {
  background: radial-gradient(circle, rgba(var(--dex-yellow-rgb), 0.12) 0%, rgba(var(--dex-blue-rgb), 0.07) 50%, transparent 70%);
  transform: scale(1.1) !important;
  z-index: 5;
  filter: drop-shadow(0 0 8px rgba(var(--dex-blue-rgb), 0.4));
}

/* Fragment assembly: parts start displaced/faded, assemble on hover/active */
.dex-illustration-svg .illustration-part {
  transform: translate(var(--part-x, 0px), var(--part-y, 0px)) scale(var(--part-scale, 1));
  opacity: var(--part-opacity, 0.55);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s ease,
    fill 0.6s ease,
    stroke 0.6s ease;
}

.dex-delivery-workflow-step:hover .dex-illustration-svg .illustration-part,
.dex-delivery-workflow-step.is-active .dex-illustration-svg .illustration-part {
  transform: translate(0px, 0px) scale(1) !important;
  opacity: 1 !important;
}

.dex-illustration-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dex-workflow-card-badge {
  position: absolute;
  top: -2px;
  left: -2px;
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 4px;
  border-radius: 12px;
  color: #ffffff;
  background: var(--dex-blue);
  font-size: 9px;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(var(--dex-blue-rgb), 0.35);
  transition: background-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.dex-delivery-workflow-step:hover .dex-workflow-card-badge,
.dex-delivery-workflow-step.is-active .dex-workflow-card-badge {
  transform: scale(1.15);
  background-color: var(--dex-blue-dark);
  box-shadow: 0 0 10px rgba(var(--dex-blue-rgb), 0.8);
}

.dex-delivery-workflow-step:nth-child(even) .dex-workflow-card-badge {
  background: var(--dex-yellow);
  color: var(--dex-text);
  box-shadow: 0 2px 6px rgba(var(--dex-yellow-rgb), 0.35);
}

.dex-delivery-workflow-step:nth-child(even):hover .dex-workflow-card-badge,
.dex-delivery-workflow-step:nth-child(even).is-active .dex-workflow-card-badge {
  background-color: #f59e0b;
  box-shadow: 0 0 10px rgba(var(--dex-yellow-rgb), 0.8);
}

.dex-workflow-card-body {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dex-delivery-workflow-step strong {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.dex-delivery-workflow-step:hover strong,
.dex-delivery-workflow-step.is-active strong {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(var(--dex-blue-rgb), 0.6);
}

/* Sibling fade when hovering track */
.dex-delivery-workflow-track:hover .dex-delivery-workflow-step:not(:hover) {
  opacity: 0.35;
}

@keyframes pulseBullet {
  0% {
    box-shadow: 0 0 0 0px rgba(var(--dex-yellow-rgb), 0.5);
  }

  100% {
    box-shadow: 0 0 0 8px rgba(var(--dex-yellow-rgb), 0);
  }
}

.dex-workflow-dynamic-desc {
  display: flex;
  max-width: 800px;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin: 40px auto 0;
  padding: 16px 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

.dex-workflow-dynamic-desc i {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--dex-yellow);
  box-shadow: 0 0 0 6px rgba(var(--dex-yellow-rgb), 0.2);
  animation: pulseBullet 2s infinite;
}

.dex-workflow-dynamic-desc-text {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(210, 228, 255, 0.88);
  transition: opacity 0.15s ease, transform 0.15s ease;
  text-align: left;
}

.dex-core-capability-card>span svg,
.dex-delivery-phase-card li svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-delivery-phase-section,
.dex-core-capabilities {
  margin-top: clamp(74px, 8vw, 112px);
}

.dex-delivery-phase-section>header,
.dex-core-capabilities>header {
  display: block;
  justify-content: flex-start;
  text-align: center;
}

.dex-delivery-phase-section>header small,
.dex-core-capabilities>header small {
  margin-bottom: 10px;
}

.dex-delivery-phase-section>header h3,
.dex-core-capabilities>header h3 {
  margin-top: 0;
}

.dex-delivery-phase-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px;
}

.dex-delivery-phase-grid::before {
  content: "";
  position: absolute;
  top: 30px;
  right: 12.5%;
  left: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.2), var(--dex-blue) 68%, var(--dex-yellow));
}

.dex-delivery-phase-card {
  position: relative;
  z-index: 1;
  padding-top: 62px;
}

.dex-delivery-phase-marker {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.dex-delivery-phase-marker span {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 7px solid #edf3ff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--dex-blue), var(--dex-blue-dark));
  box-shadow: 0 10px 24px rgba(var(--dex-blue-rgb), 0.22);
  font-size: 15px;
  font-weight: 900;
}

.dex-delivery-phase-card:nth-child(even) .dex-delivery-phase-marker span {
  border-color: #fff6d8;
  color: var(--dex-text);
  background: linear-gradient(145deg, var(--dex-yellow), #f0a90a);
}

.dex-delivery-phase-content {
  display: grid;
  min-height: 450px;
  grid-template-rows: 14px 70px 76px minmax(138px, 1fr) auto;
  padding: 34px 24px 24px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.065);
}

.dex-delivery-phase-content>small {
  color: var(--dex-blue);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dex-delivery-phase-content h4 {
  align-self: start;
  margin: 8px 0 12px;
  color: var(--dex-text);
  font-size: 22px;
  line-height: 1.12;
}

.dex-delivery-phase-content>p {
  align-self: start;
  margin: 0;
  color: var(--dex-text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.dex-delivery-phase-content ul {
  display: grid;
  align-content: start;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dex-delivery-phase-content li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  color: var(--dex-text-secondary);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
}

.dex-delivery-phase-card li svg {
  width: 17px;
  height: 17px;
  color: var(--dex-yellow);
}

.dex-delivery-phase-content footer {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--dex-blue-rgb), 0.11);
  color: var(--dex-blue-dark);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.4;
}

.dex-core-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}

.dex-core-capability-card {
  position: relative;
  display: grid;
  min-height: 210px;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.dex-core-capability-card::after {
  content: "";
  position: absolute;
  right: -72px;
  bottom: -72px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(var(--dex-blue-rgb), 0.025);
}

.dex-core-capability-card>span {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 8px;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.08);
}

.dex-core-capability-card:nth-child(even)>span {
  color: #9a6700;
  background: rgba(var(--dex-yellow-rgb), 0.17);
}

.dex-core-capability-card h4 {
  margin: 5px 0 12px;
  color: var(--dex-text);
  font-size: 20px;
  line-height: 1.18;
}

.dex-core-capability-card p {
  margin: 0;
  color: var(--dex-text-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.dex-scroll-reveal .dex-delivery-system-heading,
.dex-scroll-reveal .dex-workflow-board,
.dex-scroll-reveal .dex-delivery-phase-section>header,
.dex-scroll-reveal .dex-delivery-phase-card,
.dex-scroll-reveal .dex-core-capabilities>header,
.dex-scroll-reveal .dex-core-capability-card {
  opacity: 0;
  transform: translateY(34px);
}

.dex-scroll-reveal .dex-delivery-phase-grid::before {
  transform: scaleX(0);
  transform-origin: left;
}

.dex-scroll-reveal.is-in-view .dex-delivery-system-heading,
.dex-scroll-reveal.is-in-view .dex-workflow-board,
.dex-scroll-reveal.is-in-view .dex-delivery-phase-section>header,
.dex-scroll-reveal.is-in-view .dex-delivery-phase-card,
.dex-scroll-reveal.is-in-view .dex-core-capabilities>header,
.dex-scroll-reveal.is-in-view .dex-core-capability-card {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 650ms ease, transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-scroll-reveal.is-in-view .dex-workflow-board {
  transition-delay: 90ms;
}

.dex-scroll-reveal.is-in-view .dex-delivery-phase-section>header {
  transition-delay: 170ms;
}

.dex-scroll-reveal.is-in-view .dex-delivery-phase-card {
  transition-delay: calc(220ms + var(--dex-order) * 80ms);
}

.dex-scroll-reveal.is-in-view .dex-core-capabilities>header {
  transition-delay: 300ms;
}

.dex-scroll-reveal.is-in-view .dex-core-capability-card {
  transition-delay: calc(340ms + var(--dex-order) * 60ms);
}

.dex-scroll-reveal.is-in-view .dex-delivery-phase-grid::before {
  transform: scaleX(1);
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1) 260ms;
}

.dex-delivery-system-section.dex-scroll-reveal.is-in-view .dex-delivery-phase-section:not(.is-phase-in-view)>header,
.dex-delivery-system-section.dex-scroll-reveal.is-in-view .dex-delivery-phase-section:not(.is-phase-in-view) .dex-delivery-phase-card {
  opacity: 0 !important;
  transform: translateY(44px) scale(0.96) !important;
}

.dex-delivery-system-section.dex-scroll-reveal.is-in-view .dex-delivery-phase-section:not(.is-phase-in-view) .dex-delivery-phase-grid::before,
.dex-delivery-system-section.dex-scroll-reveal.is-in-view .dex-delivery-phase-section:not(.is-phase-in-view) .dex-delivery-phase-grid::after {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}

.dex-delivery-system-section.dex-scroll-reveal.is-in-view .dex-delivery-phase-section:not(.is-phase-in-view) .dex-delivery-phase-marker span {
  opacity: 0 !important;
  transform: scale(0.55) !important;
}

.dex-delivery-system-section .dex-delivery-phase-section.is-phase-in-view>header {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 620ms ease, transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-delivery-system-section .dex-delivery-phase-section.is-phase-in-view .dex-delivery-phase-grid::before {
  opacity: 1 !important;
  transform: scaleX(1) !important;
  transition: opacity 380ms ease 120ms, transform 1200ms cubic-bezier(0.22, 1, 0.36, 1) 180ms;
}

.dex-delivery-system-section .dex-delivery-phase-section.is-phase-in-view .dex-delivery-phase-grid::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
  transition: opacity 500ms ease 520ms, transform 1000ms cubic-bezier(0.22, 1, 0.36, 1) 520ms;
}

.dex-delivery-system-section .dex-delivery-phase-section.is-phase-in-view .dex-delivery-phase-card {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition:
    opacity 700ms ease calc(260ms + var(--dex-order) * 130ms),
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1) calc(260ms + var(--dex-order) * 130ms);
}

.dex-delivery-system-section .dex-delivery-phase-section.is-phase-in-view .dex-delivery-phase-marker span {
  opacity: 1 !important;
  transform: scale(1) !important;
  transition:
    opacity 520ms ease calc(180ms + var(--dex-order) * 130ms),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1) calc(180ms + var(--dex-order) * 130ms);
}

.dex-scroll-reveal .dex-delivery-workflow-step {
  opacity: 0;
  transform: translateY(30px) scale(0.88);
}

.dex-scroll-reveal.is-in-view .dex-delivery-workflow-step {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition:
    opacity 800ms cubic-bezier(0.16, 1, 0.3, 1) calc(150ms + var(--dex-order) * 90ms),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1) calc(150ms + var(--dex-order) * 90ms);
}

@keyframes floatVisual {
  0% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-5px) scale(1.02);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

.dex-scroll-reveal.is-in-view .dex-workflow-card-visual {
  animation: floatVisual 4s ease-in-out infinite;
  animation-delay: calc(var(--dex-order) * 200ms);
}

.dex-delivery-workflow-step:hover .dex-workflow-card-visual,
.dex-delivery-workflow-step.is-active .dex-workflow-card-visual {
  animation: none !important;
}

@media screen and (max-width: 991px) {
  .dex-delivery-workflow-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 28px;
  }

  .dex-workflow-pipeline-container {
    display: none;
  }

  .dex-delivery-phase-grid,
  .dex-core-capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dex-delivery-phase-grid::before {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .dex-delivery-system-section {
    padding: 58px 0;
  }

  .dex-delivery-system-heading {
    margin-bottom: 30px;
  }

  .dex-delivery-system-heading h2 {
    font-size: 34px;
    line-height: 1.08;
  }

  .dex-delivery-system-heading p {
    margin-top: 15px;
    font-size: 15px;
    line-height: 1.48;
  }

  .dex-workflow-board {
    padding: 20px 16px;
  }

  .dex-workflow-board>header,
  .dex-delivery-phase-section>header,
  .dex-core-capabilities>header {
    display: block;
  }

  .dex-workflow-board>header h3,
  .dex-delivery-phase-section>header h3,
  .dex-core-capabilities>header h3 {
    font-size: 27px;
  }

  .dex-workflow-board>header>span {
    display: inline-flex;
    margin-top: 12px;
  }

  .dex-delivery-workflow-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
  }

  .dex-delivery-workflow-step {
    display: grid;
    min-height: 116px;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 10px;
    align-content: center;
    padding: 12px;
    border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
    border-radius: 8px;
    background: rgba(248, 251, 255, 0.9);
    text-align: left;
  }

  .dex-workflow-card-visual {
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
  }

  .dex-workflow-card-badge {
    font-size: 8px;
    min-width: 18px;
    height: 18px;
  }

  .dex-delivery-workflow-step strong {
    font-size: 12px;
  }

  .dex-workflow-dynamic-desc {
    margin-top: 22px;
    padding: 12px 16px;
    font-size: 12px;
  }

  .dex-delivery-phase-section,
  .dex-core-capabilities {
    margin-top: 58px;
  }

  .dex-delivery-phase-grid,
  .dex-core-capability-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 26px;
  }

  .dex-delivery-phase-card {
    padding: 0 0 0 44px;
  }

  .dex-delivery-phase-card::before {
    content: "";
    position: absolute;
    top: 50px;
    bottom: -13px;
    left: 18px;
    width: 2px;
    background: rgba(var(--dex-blue-rgb), 0.18);
  }

  .dex-delivery-phase-card:last-child::before {
    display: none;
  }

  .dex-delivery-phase-marker {
    top: 18px;
    left: 0;
    transform: none;
  }

  .dex-delivery-phase-marker span {
    width: 38px;
    height: 38px;
    border-width: 4px;
    font-size: 11px;
  }

  .dex-delivery-phase-content {
    min-height: 0;
    grid-template-rows: auto;
    padding: 22px 18px;
  }

  .dex-delivery-phase-content h4 {
    font-size: 20px;
  }

  .dex-delivery-phase-content>p {
    margin-top: 10px;
  }

  .dex-delivery-phase-content ul {
    margin-top: 16px;
  }

  .dex-delivery-phase-content footer {
    margin-top: 18px;
  }

  .dex-core-capability-card {
    min-height: 0;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
  }

  .dex-core-capability-card>span {
    width: 48px;
    height: 48px;
  }

  .dex-core-capability-card>span svg {
    width: 24px;
    height: 24px;
  }

  .dex-core-capability-card h4 {
    margin-top: 2px;
    font-size: 18px;
  }

  .dex-core-capability-card p {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .dex-scroll-reveal .dex-delivery-system-heading,
  .dex-scroll-reveal .dex-workflow-board,
  .dex-scroll-reveal .dex-delivery-workflow-step,
  .dex-scroll-reveal .dex-delivery-phase-section>header,
  .dex-scroll-reveal .dex-delivery-phase-card,
  .dex-scroll-reveal .dex-core-capabilities>header,
  .dex-scroll-reveal .dex-core-capability-card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .dex-scroll-reveal .dex-delivery-phase-grid::before {
    transform: none;
    transition: none;
  }
}

/* Live documentation console */
.dex-spec-preview {
  display: flex;
  flex-direction: column;
  padding: 20px 22px 16px 30px;
}

.dex-spec-preview header {
  margin-bottom: 10px;
  padding-bottom: 12px;
}

.dex-spec-preview>p {
  max-width: 100%;
  margin-bottom: 9px;
  font-size: 11.5px;
  line-height: 1.4;
}

.dex-spec-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}

.dex-spec-status-row span {
  display: inline-flex;
  min-height: 23px;
  gap: 5px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.15);
  border-radius: 999px;
  color: var(--dex-blue-dark);
  background: rgba(var(--dex-blue-rgb), 0.055);
  font-size: 8.5px;
  font-weight: 850;
}

.dex-spec-status-row span:nth-child(2) {
  border-color: rgba(var(--dex-yellow-rgb), 0.34);
  color: #7a5600;
  background: rgba(var(--dex-yellow-rgb), 0.13);
}

.dex-spec-status-row svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.dex-spec-live-line {
  display: flex;
  min-height: 34px;
  gap: 8px;
  align-items: center;
  margin-bottom: 9px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.14);
  border-radius: 8px;
  color: #dbeafe;
  background: #0f172a;
  box-shadow: inset 3px 0 0 var(--dex-blue);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  white-space: nowrap;
}

.dex-spec-live-line>i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--dex-yellow);
  box-shadow: 0 0 0 4px rgba(var(--dex-yellow-rgb), 0.12);
}

.dex-spec-live-line>span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dex-spec-live-line>b {
  width: 2px;
  height: 14px;
  flex: 0 0 2px;
  background: var(--dex-yellow);
  animation: dex-spec-cursor 900ms steps(1, end) infinite;
}

.dex-spec-preview .dex-spec-topic-grid {
  gap: 6px;
}

.dex-spec-preview .dex-spec-topic-grid>span {
  min-height: 36px;
  padding: 7px 8px;
  transition: border-color 320ms ease, background 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}

.dex-spec-preview .dex-spec-topic-grid b {
  font-size: 9px;
  line-height: 1.25;
}

.dex-spec-preview .dex-spec-topic-grid>span.is-active {
  z-index: 1;
  border-color: rgba(var(--dex-blue-rgb), 0.5);
  border-left-color: var(--dex-yellow);
  background: linear-gradient(100deg, rgba(var(--dex-blue-rgb), 0.12), rgba(var(--dex-yellow-rgb), 0.12));
  box-shadow: 0 8px 20px rgba(var(--dex-blue-rgb), 0.13), inset 0 0 0 1px rgba(var(--dex-yellow-rgb), 0.2);
  transform: translateY(-1px);
}

.dex-spec-preview .dex-spec-topic-grid>span.is-active svg {
  color: var(--dex-blue);
}

.dex-spec-trace-strip {
  display: grid;
  min-height: 32px;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 5px;
  align-items: center;
  margin-top: 9px;
  padding: 7px 9px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.13);
  border-radius: 8px;
  color: var(--dex-text-secondary);
  background: linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.05), rgba(var(--dex-yellow-rgb), 0.08));
  font-size: 7.5px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}

.dex-spec-trace-strip i {
  color: var(--dex-blue);
  font-size: 11px;
  font-style: normal;
}

@keyframes dex-spec-cursor {

  0%,
  48% {
    opacity: 1;
  }

  49%,
  100% {
    opacity: 0;
  }
}

@media screen and (max-width: 767px) {
  .dex-spec-preview {
    padding: 20px 14px 18px 24px;
  }

  .dex-spec-live-line {
    font-size: 9px;
  }

  .dex-spec-preview .dex-spec-topic-grid>span {
    min-height: 36px;
  }

  .dex-spec-trace-strip {
    gap: 3px;
    padding-inline: 6px;
    font-size: 6.8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dex-spec-live-line>b {
    opacity: 1;
    animation: none;
  }

  .dex-spec-preview .dex-spec-topic-grid>span {
    transition: none;
  }
}

/* Document blueprint route */
.dex-spec-preview .dex-spec-topic-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 34px;
  padding: 3px 0;
}

.dex-spec-preview .dex-spec-topic-grid::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--dex-blue-rgb), 0.18), var(--dex-blue) 48%, var(--dex-yellow));
  transform: translateX(-50%);
}

.dex-spec-preview .dex-spec-topic-grid::after {
  content: "";
  position: absolute;
  top: var(--dex-active-progress, 0%);
  left: 50%;
  z-index: 3;
  width: 10px;
  height: 10px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--dex-yellow);
  box-shadow: 0 0 0 5px rgba(var(--dex-yellow-rgb), 0.18), 0 5px 14px rgba(var(--dex-blue-rgb), 0.2);
  transform: translate(-50%, -50%);
  transition: top 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-spec-preview .dex-spec-topic-grid>span {
  position: relative;
  display: grid;
  min-height: 26px;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding: 2px 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-spec-preview .dex-spec-topic-grid>span:nth-child(odd) {
  grid-template-columns: minmax(0, 1fr) 24px;
  text-align: right;
}

.dex-spec-preview .dex-spec-topic-grid>span:nth-child(odd) em {
  order: 2;
}

.dex-spec-preview .dex-spec-topic-grid>span:nth-child(odd) b {
  order: 1;
}

.dex-spec-preview .dex-spec-topic-grid em {
  position: relative;
  z-index: 2;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.22);
  border-radius: 50%;
  color: var(--dex-blue-dark);
  background: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  transition: color 320ms ease, background 320ms ease, border-color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}

.dex-spec-preview .dex-spec-topic-grid em::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 17px;
  height: 1px;
  background: rgba(var(--dex-blue-rgb), 0.2);
}

.dex-spec-preview .dex-spec-topic-grid>span:nth-child(odd) em::after {
  right: -17px;
}

.dex-spec-preview .dex-spec-topic-grid>span:nth-child(even) em::after {
  left: -17px;
}

.dex-spec-preview .dex-spec-topic-grid b {
  color: var(--dex-text-secondary);
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.18;
  transition: color 320ms ease, font-weight 320ms ease;
}

.dex-spec-preview .dex-spec-topic-grid>span.is-active {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.dex-spec-preview .dex-spec-topic-grid>span:nth-child(odd).is-active {
  transform: translateX(4px);
}

.dex-spec-preview .dex-spec-topic-grid>span:nth-child(even).is-active {
  transform: translateX(-4px);
}

.dex-spec-preview .dex-spec-topic-grid>span.is-active em {
  color: #fff;
  border-color: var(--dex-blue);
  background: linear-gradient(145deg, var(--dex-blue), var(--dex-blue-dark));
  box-shadow: 0 0 0 4px rgba(var(--dex-blue-rgb), 0.12), 0 8px 18px rgba(var(--dex-blue-rgb), 0.2);
  transform: scale(1.08);
}

.dex-spec-preview .dex-spec-topic-grid>span.is-active b {
  color: var(--dex-blue-dark);
  font-weight: 900;
}

.dex-spec-preview.is-active .dex-spec-topic-grid>span {
  animation: dex-blueprint-stop-in 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dex-blueprint-stop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media screen and (max-width: 767px) {
  .dex-spec-preview .dex-spec-topic-grid {
    gap: 5px 28px;
  }

  .dex-spec-preview .dex-spec-topic-grid>span {
    min-height: 29px;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 6px;
  }

  .dex-spec-preview .dex-spec-topic-grid>span:nth-child(odd) {
    grid-template-columns: minmax(0, 1fr) 22px;
  }

  .dex-spec-preview .dex-spec-topic-grid em {
    width: 22px;
    height: 22px;
  }

  .dex-spec-preview .dex-spec-topic-grid em::after {
    width: 14px;
  }

  .dex-spec-preview .dex-spec-topic-grid>span:nth-child(odd) em::after {
    right: -14px;
  }

  .dex-spec-preview .dex-spec-topic-grid>span:nth-child(even) em::after {
    left: -14px;
  }

  .dex-spec-preview .dex-spec-topic-grid b {
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .dex-spec-preview .dex-spec-topic-grid::after,
  .dex-spec-preview .dex-spec-topic-grid>span,
  .dex-spec-preview .dex-spec-topic-grid em,
  .dex-spec-preview .dex-spec-topic-grid b {
    transition: none;
    animation: none;
  }
}

/* Focused document journey */
.dex-spec-preview {
  padding: 26px 30px 24px;
}

.dex-spec-preview header {
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: 0;
}

.dex-spec-preview>p {
  margin-bottom: 22px;
  font-size: 12px;
}

.dex-spec-preview .dex-spec-topic-grid {
  flex: 1;
  align-content: space-around;
  gap: 0 52px;
  padding: 8px 0;
}

.dex-spec-preview .dex-spec-topic-grid::before {
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: linear-gradient(to bottom,
      var(--dex-blue) 0%,
      var(--dex-blue) var(--dex-active-progress, 0%),
      rgba(var(--dex-blue-rgb), 0.12) var(--dex-active-progress, 0%),
      rgba(var(--dex-blue-rgb), 0.12) 100%);
  box-shadow: 0 0 18px rgba(var(--dex-blue-rgb), 0.09);
  transition: background 280ms linear;
}

.dex-spec-preview .dex-spec-topic-grid::after {
  width: 12px;
  height: 12px;
  border-width: 3px;
  box-shadow: 0 0 0 6px rgba(var(--dex-yellow-rgb), 0.17), 0 0 24px rgba(var(--dex-yellow-rgb), 0.55);
  transition: top 260ms cubic-bezier(0.22, 1, 0.36, 1), transform 260ms ease, box-shadow 260ms ease;
}

.dex-spec-preview .dex-spec-topic-grid>span {
  min-height: 30px;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
}

.dex-spec-preview .dex-spec-topic-grid>span:nth-child(odd) {
  grid-template-columns: minmax(0, 1fr) 20px;
}

.dex-spec-preview .dex-spec-topic-grid>span::after {
  content: none;
}

.dex-spec-preview .dex-spec-topic-grid em {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(var(--dex-blue-rgb), 0.22);
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.92);
}

.dex-spec-preview .dex-spec-topic-grid em::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(var(--dex-blue-rgb), 0.16);
  transition: background 220ms ease, transform 220ms ease;
}

.dex-spec-preview .dex-spec-topic-grid em::after {
  width: 27px;
  background: rgba(var(--dex-blue-rgb), 0.15);
  transition: background 220ms ease, box-shadow 220ms ease;
}

.dex-spec-preview .dex-spec-topic-grid>span:nth-child(odd) em::after {
  right: -27px;
}

.dex-spec-preview .dex-spec-topic-grid>span:nth-child(even) em::after {
  left: -27px;
}

.dex-spec-preview .dex-spec-topic-grid b {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  transition: color 220ms ease, transform 220ms ease;
}

.dex-spec-preview .dex-spec-topic-grid>span.is-complete em {
  border-color: var(--dex-blue);
  background: var(--dex-blue);
  box-shadow: 0 0 0 5px rgba(var(--dex-blue-rgb), 0.08);
}

.dex-spec-preview .dex-spec-topic-grid>span.is-complete em::before {
  background: #fff;
  transform: scale(0.38);
}

.dex-spec-preview .dex-spec-topic-grid>span.is-complete em::after {
  background: var(--dex-blue);
  box-shadow: 0 0 9px rgba(var(--dex-blue-rgb), 0.2);
}

.dex-spec-preview .dex-spec-topic-grid>span.is-complete b {
  color: var(--dex-text-secondary);
}

.dex-spec-preview .dex-spec-topic-grid>span.is-active em {
  border-color: var(--dex-yellow);
  background: var(--dex-yellow);
  box-shadow: 0 0 0 6px rgba(var(--dex-yellow-rgb), 0.17), 0 0 20px rgba(var(--dex-yellow-rgb), 0.42);
  transform: scale(1.14);
}

.dex-spec-preview .dex-spec-topic-grid>span.is-active em::before {
  background: var(--dex-blue-dark);
  transform: scale(0.48);
}

.dex-spec-preview .dex-spec-topic-grid>span.is-active em::after {
  background: linear-gradient(90deg, var(--dex-blue), var(--dex-yellow));
}

.dex-spec-preview .dex-spec-topic-grid>span.is-active b {
  color: var(--dex-blue-dark);
}

.dex-spec-preview.is-route-complete .dex-spec-topic-grid::after {
  transform: translate(-50%, -50%) scale(1.35);
  box-shadow: 0 0 0 9px rgba(var(--dex-yellow-rgb), 0.15), 0 0 30px rgba(var(--dex-yellow-rgb), 0.64);
}

@media screen and (max-width: 767px) {
  .dex-spec-preview {
    padding: 22px 18px 20px;
  }

  .dex-spec-preview>p {
    margin-bottom: 16px;
  }

  .dex-spec-preview .dex-spec-topic-grid {
    gap: 0 34px;
  }

  .dex-spec-preview .dex-spec-topic-grid>span,
  .dex-spec-preview .dex-spec-topic-grid>span:nth-child(odd) {
    min-height: 31px;
  }

  .dex-spec-preview .dex-spec-topic-grid b {
    font-size: 8.4px;
  }

  .dex-spec-preview .dex-spec-topic-grid em::after {
    width: 18px;
  }

  .dex-spec-preview .dex-spec-topic-grid>span:nth-child(odd) em::after {
    right: -18px;
  }

  .dex-spec-preview .dex-spec-topic-grid>span:nth-child(even) em::after {
    left: -18px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .dex-spec-preview .dex-spec-topic-grid::before,
  .dex-spec-preview .dex-spec-topic-grid::after,
  .dex-spec-preview .dex-spec-topic-grid em::before,
  .dex-spec-preview .dex-spec-topic-grid em::after {
    transition: none;
  }
}

/* Colakin footer */
.floating-popup,
.wand-tooltip,
.similar-panel {
  display: none !important;
}

.rt-footer.colakin-footer {
  position: relative;
  padding: 0 !important;
  overflow: hidden !important;
  border-top: 0;
  background:
    radial-gradient(circle at 13% 12%, rgba(255, 255, 255, 0.12), transparent 25%),
    radial-gradient(circle at 92% 88%, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(135deg, #174fc5 0%, #123fa9 45%, #0f338f 100%) !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.rt-footer.colakin-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 36%),
    radial-gradient(circle at 88% 82%, rgba(var(--dex-yellow-rgb), 0.08), transparent 23%);
  opacity: 0.85;
}

.colakin-footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(18px, 2.5vw, 30px);
  padding-top: clamp(26px, 3.4vw, 42px);
  padding-bottom: clamp(18px, 2.4vw, 28px);
}

.colakin-footer-top,
.colakin-footer-middle,
.colakin-footer-bottom {
  display: grid;
  grid-template-columns: minmax(260px, 0.45fr) minmax(0, 1fr) minmax(190px, 0.3fr);
  gap: clamp(20px, 3vw, 42px);
  align-items: center;
}

.colakin-footer-connect {
  display: inline-flex;
  width: fit-content;
  gap: clamp(18px, 2.2vw, 28px);
  align-items: center;
  color: #fff;
  font-size: clamp(30px, 3.8vw, 44px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: 0;
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}

.colakin-footer-connect:hover {
  color: rgba(255, 255, 255, 0.88);
  transform: translateY(-2px);
}

.colakin-footer-connect i {
  display: flex;
  width: clamp(26px, 2.6vw, 32px);
  height: clamp(26px, 2.6vw, 32px);
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  color: #fff;
  font-size: clamp(16px, 1.8vw, 20px);
  font-style: normal;
  line-height: 1;
}

.colakin-footer-nav {
  display: grid;
  grid-column: 3;
  gap: 10px;
  justify-items: start;
}

.colakin-footer-nav span,
.colakin-footer-nav a,
.colakin-footer-policy a,
.colakin-footer-regions span,
.rt-footer .colakin-footer-copyright {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}

.colakin-footer-policy a,
.colakin-footer-legal a {
  transition: color 180ms ease, opacity 180ms ease;
}

.colakin-footer-policy-button {
  color: rgba(255, 255, 255, 0.72);
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 180ms ease, opacity 180ms ease;
}

.colakin-footer-policy a:hover,
.colakin-footer-legal a:hover,
.colakin-footer-policy-button:hover {
  color: var(--dex-yellow);
}

.colakin-footer-policy-button:focus-visible {
  border-radius: 3px;
  outline: 3px solid var(--dex-yellow);
  outline-offset: 4px;
}

.colakin-footer-middle {
  align-items: center;
}

.colakin-footer-social {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: var(--dex-blue-dark);
  background: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.colakin-footer-line {
  display: block;
  height: 2px;
  background: rgba(255, 255, 255, 0.82);
}

.colakin-footer-policy {
  display: flex;
  grid-column: 3;
  gap: 18px;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
}

.colakin-footer-bottom {
  align-items: end;
  grid-template-columns: minmax(260px, 0.45fr) minmax(0, 1fr) minmax(220px, 0.5fr);
}

.colakin-footer-regions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.colakin-footer-legal {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
}

.colakin-footer-legal a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.rt-footer .colakin-footer-copyright {
  grid-column: 3;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.45;
  text-align: right;
}

@media screen and (min-width: 992px) {
  .colakin-footer-bottom {
    grid-template-columns: minmax(260px, 0.45fr) minmax(0, 1fr) minmax(340px, 0.62fr);
  }

  .rt-footer .colakin-footer-copyright {
    white-space: nowrap;
  }
}

@media screen and (max-width: 991px) {

  .colakin-footer-top,
  .colakin-footer-middle,
  .colakin-footer-bottom {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .colakin-footer-nav,
  .colakin-footer-policy,
  .colakin-footer-legal,
  .rt-footer .colakin-footer-copyright {
    grid-column: auto;
  }

  .colakin-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .colakin-footer-policy {
    justify-content: flex-start;
    text-align: left;
  }

  .colakin-footer-legal {
    justify-content: flex-start;
  }

  .rt-footer .colakin-footer-copyright {
    text-align: left;
  }
}

@media screen and (max-width: 767px) {
  .colakin-footer-inner {
    gap: 18px;
    padding-top: 28px;
    padding-bottom: 24px;
  }

  .colakin-footer-connect {
    gap: 10px;
    font-size: clamp(30px, 9vw, 38px);
  }

  .colakin-footer-connect i {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .colakin-footer-nav {
    gap: 14px 20px;
  }

  .colakin-footer-middle {
    gap: 20px;
  }

  .colakin-footer-line {
    width: 100%;
  }

  .colakin-footer-policy,
  .colakin-footer-legal,
  .colakin-footer-regions {
    gap: 14px;
  }

  .colakin-footer-nav span,
  .colakin-footer-nav a,
  .colakin-footer-policy a,
  .colakin-footer-regions span,
  .rt-footer .colakin-footer-copyright {
    font-size: 13px;
  }

  .colakin-footer-legal a,
  .colakin-footer-policy-button {
    font-size: 12px;
  }
}

/* Partner program is a full page section, not a contained white card. */
.rt-cta-v1 .dex-partner-program-v2 {
  gap: clamp(64px, 8vw, 110px);
  margin: 0;
  padding: clamp(82px, 9vw, 124px) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media screen and (max-width: 767px) {
  .rt-cta-v1 .dex-partner-program-v2 {
    gap: 54px;
    padding: 64px 0;
  }
}

/* Dimensional DeX agent emblems replace character avatars. */
.dex-agent-avatar.dex-agent-emblem,
.dex-engine-card-yellow .dex-agent-avatar.dex-agent-emblem {
  position: relative;
  display: grid;
  width: 150px;
  height: 140px;
  place-items: center;
  margin-bottom: 24px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

.dex-agent-emblem-ring {
  position: absolute;
  width: 128px;
  height: 94px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.23);
  border-radius: 50%;
  transform: rotate(-14deg);
  animation: dexAgentEmblemOrbit 9s linear infinite;
}

.dex-agent-emblem-ring::before,
.dex-agent-emblem-ring::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--dex-yellow);
  box-shadow: 0 5px 13px rgba(var(--dex-yellow-rgb), 0.35);
}

.dex-agent-emblem-ring::before {
  top: 6px;
  right: 14px;
}

.dex-agent-emblem-ring::after {
  bottom: 5px;
  left: 16px;
  background: var(--dex-blue);
  box-shadow: 0 5px 13px rgba(var(--dex-blue-rgb), 0.3);
}

.dex-agent-emblem-core {
  position: relative;
  z-index: 3;
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 27px;
  color: #fff;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.4), transparent 27%),
    linear-gradient(145deg, #4f82f8, var(--dex-blue) 48%, var(--dex-blue-dark));
  box-shadow:
    0 10px 0 #16368e,
    0 22px 35px rgba(var(--dex-blue-rgb), 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-5px) rotate(-5deg);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease;
}

.dex-agent-emblem-yellow .dex-agent-emblem-core {
  color: var(--dex-text);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.68), transparent 28%),
    linear-gradient(145deg, #ffe58a, var(--dex-yellow) 54%, #e3a20d);
  box-shadow:
    0 10px 0 #b77c00,
    0 22px 35px rgba(var(--dex-yellow-rgb), 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.dex-agent-emblem-core svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 5px rgba(15, 23, 42, 0.18));
  transform: rotate(5deg);
}

.dex-engine-card:hover .dex-agent-emblem-core {
  box-shadow:
    0 6px 0 #16368e,
    0 16px 30px rgba(var(--dex-blue-rgb), 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(0) rotate(0deg);
}

.dex-engine-card-yellow:hover .dex-agent-emblem-core {
  box-shadow:
    0 6px 0 #b77c00,
    0 16px 30px rgba(var(--dex-yellow-rgb), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.dex-agent-emblem>i {
  position: absolute;
  z-index: 4;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 4px;
  background: var(--dex-blue);
  box-shadow: 0 5px 12px rgba(var(--dex-blue-rgb), 0.3);
}

.dex-agent-emblem>i:nth-of-type(1) {
  top: 14px;
  left: 19px;
  transform: rotate(18deg);
}

.dex-agent-emblem>i:nth-of-type(2) {
  top: 20px;
  right: 14px;
  border-radius: 50%;
  background: var(--dex-yellow);
}

.dex-agent-emblem>i:nth-of-type(3) {
  right: 24px;
  bottom: 11px;
  transform: rotate(45deg);
}

.dex-agent-emblem>small {
  position: absolute;
  z-index: 5;
  right: 19px;
  bottom: 5px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 10px;
  color: var(--dex-blue-dark);
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
  font-size: 9px;
  font-weight: 950;
}

@keyframes dexAgentEmblemOrbit {
  to {
    transform: rotate(346deg);
  }
}

@media screen and (max-width: 767px) {

  .dex-agent-avatar.dex-agent-emblem,
  .dex-engine-card-yellow .dex-agent-avatar.dex-agent-emblem {
    width: 104px;
    height: 108px;
    margin: 0;
  }

  .dex-agent-emblem-ring {
    width: 96px;
    height: 72px;
  }

  .dex-agent-emblem-core {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    box-shadow: 0 7px 0 #16368e, 0 16px 25px rgba(var(--dex-blue-rgb), 0.25);
  }

  .dex-agent-emblem-yellow .dex-agent-emblem-core {
    box-shadow: 0 7px 0 #b77c00, 0 16px 25px rgba(var(--dex-yellow-rgb), 0.25);
  }

  .dex-agent-emblem-core svg {
    width: 32px;
    height: 32px;
  }

  .dex-agent-emblem>i:nth-of-type(1) {
    top: 8px;
    left: 3px;
  }

  .dex-agent-emblem>i:nth-of-type(2) {
    top: 10px;
    right: 2px;
  }

  .dex-agent-emblem>i:nth-of-type(3) {
    right: 8px;
    bottom: 8px;
  }

  .dex-agent-emblem>small {
    right: 5px;
    bottom: 1px;
    width: 27px;
    height: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dex-agent-emblem-ring {
    animation: none;
  }

  .dex-agent-emblem-core {
    transition: none;
  }
}

.dex-engine-card::before,
.dex-engine-card::after,
.dex-agent-emblem>i {
  display: none;
  content: none;
}

/* Desktop agent rail: five purpose-built modules in one connected system. */
@media screen and (min-width: 1200px) {
  .dex-engine-grid {
    position: relative;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }

  .dex-engine-grid::before {
    content: "";
    position: absolute;
    top: 78px;
    right: 4%;
    left: 4%;
    z-index: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.12), var(--dex-blue), var(--dex-yellow), var(--dex-blue), rgba(var(--dex-blue-rgb), 0.12));
  }

  .dex-engine-card,
  .dex-engine-card:nth-child(4),
  .dex-engine-card:nth-child(5) {
    min-height: 370px;
    grid-column: auto;
    padding: 22px 20px 24px;
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(var(--dex-blue-rgb), 0.035)),
      #fff;
  }

  .dex-engine-card-yellow {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(var(--dex-yellow-rgb), 0.065)),
      #fff;
  }

  .dex-agent-avatar.dex-agent-emblem,
  .dex-engine-card-yellow .dex-agent-avatar.dex-agent-emblem {
    width: 116px;
    height: 112px;
    margin-bottom: 22px;
  }

  .dex-agent-emblem-ring {
    width: 106px;
    height: 78px;
  }

  .dex-agent-emblem-core {
    width: 78px;
    height: 78px;
    border-radius: 23px;
    box-shadow: 0 8px 0 #16368e, 0 18px 30px rgba(var(--dex-blue-rgb), 0.26);
  }

  .dex-agent-emblem-yellow .dex-agent-emblem-core {
    box-shadow: 0 8px 0 #b77c00, 0 18px 30px rgba(var(--dex-yellow-rgb), 0.26);
  }

  .dex-agent-emblem-core svg {
    width: 34px;
    height: 34px;
  }

  .dex-agent-emblem>i:nth-of-type(1) {
    top: 8px;
    left: 5px;
  }

  .dex-agent-emblem>i:nth-of-type(2) {
    top: 10px;
    right: 3px;
  }

  .dex-agent-emblem>i:nth-of-type(3) {
    right: 10px;
    bottom: 5px;
  }

  .dex-agent-emblem>small {
    right: 5px;
    bottom: 0;
    width: 27px;
    height: 27px;
  }

  .dex-engine-card-copy {
    display: block;
    min-height: 0;
  }

  .dex-engine-card h3 {
    min-height: 0;
    margin-bottom: 9px;
    font-size: 21px;
  }

  .dex-engine-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
  }
}

/* Keep each agent emblem optically centered while the supporting copy stays left aligned. */
.dex-engine-card .dex-agent-emblem {
  justify-self: center;
  margin-left: auto;
  margin-right: auto;
}

/* Build-ready documentation: a stable console fed by a selectable document pipeline. */
.dex-doc-flow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.72fr);
  gap: 34px;
  align-items: stretch;
  margin-top: 52px;
}

.dex-doc-console-stage {
  display: grid;
  height: 610px;
  min-width: 0;
}

.dex-doc-console {
  position: relative;
  grid-area: 1 / 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.22);
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 8%, rgba(var(--dex-yellow-rgb), 0.18), transparent 27%),
    linear-gradient(145deg, #071b4f 0%, var(--dex-blue-dark) 58%, var(--dex-blue) 145%);
  box-shadow: 0 28px 70px rgba(var(--dex-blue-rgb), 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.985);
  transition: opacity 280ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1), visibility 280ms ease;
  pointer-events: none;
}

.dex-doc-console.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.dex-doc-console::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -110px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--dex-yellow-rgb), 0.17), transparent 68%);
  pointer-events: none;
}

.dex-doc-console-bar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #a9b8d4;
  background: rgba(255, 255, 255, 0.035);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dex-doc-window-dots {
  display: flex;
  gap: 6px;
}

.dex-doc-window-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}

.dex-doc-window-dots i:nth-child(2) {
  background: var(--dex-yellow);
}

.dex-doc-window-dots i:nth-child(3) {
  background: var(--dex-blue);
}

.dex-doc-console-bar>b {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: #dce7fb;
  font-size: 10px;
}

.dex-doc-console-bar>b i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dex-yellow);
  box-shadow: 0 0 0 5px rgba(var(--dex-yellow-rgb), 0.12);
  animation: dexDocStatusPulse 1.8s ease-in-out infinite;
}

.dex-doc-status-ready {
  display: none;
}

.dex-doc-console.is-route-complete .dex-doc-status-running {
  display: none;
}

.dex-doc-console.is-route-complete .dex-doc-status-ready {
  display: inline;
}

.dex-doc-console.is-route-complete .dex-doc-console-bar>b i {
  background: var(--dex-yellow);
  box-shadow: 0 0 0 5px rgba(var(--dex-yellow-rgb), 0.14);
}

.dex-doc-console-body {
  position: relative;
  z-index: 1;
  display: flex;
  height: calc(100% - 45px);
  min-height: 0;
  flex-direction: column;
  padding: 34px 38px 28px;
  color: #fff;
}

.dex-doc-console-intro {
  display: flex;
  gap: 17px;
  align-items: center;
}

.dex-doc-console-icon {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  color: #071328;
  background: linear-gradient(145deg, #ffe57d, var(--dex-yellow));
  box-shadow: 0 12px 28px rgba(var(--dex-yellow-rgb), 0.18);
}

.dex-doc-console-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.dex-doc-console-intro small {
  display: block;
  margin-bottom: 4px;
  color: #82a8fa;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dex-doc-console-intro h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2.1vw, 32px);
  line-height: 1.12;
}

.dex-doc-console-body>p {
  max-width: 760px;
  margin: 20px 0 24px;
  color: #b7c5dc;
  font-size: 15px;
  line-height: 1.65;
}

.dex-doc-console-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.dex-doc-console-stats>span {
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.045);
}

.dex-doc-console-stats small,
.dex-doc-console-stats strong {
  display: block;
}

.dex-doc-console-stats small {
  margin-bottom: 3px;
  color: #7f91ad;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dex-doc-console-stats strong {
  color: #f4f7fc;
  font-size: 12px;
}

.dex-doc-generation-flow {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.24);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(var(--dex-blue-rgb), 0.1), rgba(255, 255, 255, 0.025));
}

.dex-doc-flow-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  color: #91a3bf;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dex-doc-flow-head span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.dex-doc-flow-head span i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--dex-blue);
  box-shadow: 0 0 14px rgba(var(--dex-blue-rgb), 0.8);
}

.dex-doc-flow-head b {
  color: var(--dex-yellow);
}

.dex-doc-flow-progress {
  height: 4px;
  overflow: hidden;
  margin: 13px 0 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}

.dex-doc-flow-progress i {
  display: block;
  width: var(--dex-active-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dex-blue), #6fa0ff, var(--dex-yellow));
  box-shadow: 0 0 18px rgba(var(--dex-blue-rgb), 0.55);
  transition: width 420ms ease;
}

.dex-doc-focus-list {
  position: relative;
  min-height: 72px;
}

.dex-doc-focus-item {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 40px 1fr 30px;
  gap: 13px;
  align-items: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 260ms ease, transform 320ms ease;
  pointer-events: none;
}

.dex-doc-focus-item.is-active {
  opacity: 1;
  transform: none;
}

.dex-doc-focus-item>span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.4);
  border-radius: 12px;
  color: #a9c5ff;
  background: rgba(var(--dex-blue-rgb), 0.12);
  font-size: 11px;
  font-weight: 900;
}

.dex-doc-focus-item small,
.dex-doc-focus-item strong {
  display: block;
}

.dex-doc-focus-item small {
  margin-bottom: 3px;
  color: #7688a5;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dex-doc-focus-item strong {
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dex-doc-focus-item>i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #081329;
  background: var(--dex-yellow);
}

.dex-doc-focus-item>i svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.dex-srs-blueprint-demo {
  display: flex;
  min-height: 392px;
  flex-direction: column;
  overflow: hidden;
  padding: 17px;
  border-color: rgba(var(--dex-blue-rgb), 0.18);
  background:
    radial-gradient(circle at 86% 8%, rgba(var(--dex-yellow-rgb), 0.18), transparent 24%),
    linear-gradient(135deg, #ffffff 0%, #eef5ff 100%);
}

.dex-srs-blueprint-stage {
  position: relative;
  display: grid;
  flex: 1;
  min-height: 322px;
  grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 14px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.2);
  border-radius: 16px;
  background:
    linear-gradient(rgba(var(--dex-blue-rgb), 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.075) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, rgba(var(--dex-blue-rgb), 0.11), transparent 28%),
    #f8fbff;
  background-size: 24px 24px, 24px 24px, auto, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 16px 34px rgba(15, 39, 91, 0.1);
}

.dex-srs-component-column {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 7px;
}

.dex-srs-component-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 35px;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 6px 9px;
  overflow: visible;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.14);
  border-radius: 11px;
  color: var(--dex-text);
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 39, 91, 0.08);
  opacity: 0.72;
  transform: translateY(8px);
  transition:
    opacity 280ms ease,
    transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms ease,
    box-shadow 240ms ease,
    background 240ms ease;
}

.dex-srs-component-card>i {
  position: absolute;
  top: 50%;
  z-index: 0;
  display: block;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.12), rgba(var(--dex-blue-rgb), 0.42));
  transform: translateY(-50%);
  pointer-events: none;
}

.dex-srs-component-column:first-child .dex-srs-component-card>i {
  right: -24px;
}

.dex-srs-component-column:last-child .dex-srs-component-card>i {
  left: -24px;
  background: linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.42), rgba(var(--dex-blue-rgb), 0.12));
}

.dex-srs-component-card span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 9px;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.09);
  font-size: 9px;
  font-weight: 950;
}

.dex-srs-component-card strong,
.dex-srs-component-card em {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dex-srs-component-card strong {
  color: #122246;
  font-size: 11px;
  font-weight: 880;
  line-height: 1.12;
  white-space: normal;
}

.dex-srs-component-card em {
  margin-top: 2px;
  color: #63758f;
  font-size: 7px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
}

.dex-srs-component-card.is-complete,
.dex-srs-component-card.is-prev {
  opacity: 0.95;
  transform: none;
}

.dex-srs-component-card.is-active {
  z-index: 3;
  border-color: rgba(var(--dex-yellow-rgb), 0.72);
  background: linear-gradient(135deg, #fff9df 0%, #ffffff 58%, #fff2bf 100%);
  box-shadow:
    0 14px 30px rgba(122, 86, 0, 0.12),
    0 0 0 1px rgba(var(--dex-yellow-rgb), 0.18),
    0 0 24px rgba(var(--dex-yellow-rgb), 0.26);
  opacity: 1;
  transform: translateY(-2px);
}

.dex-srs-component-card.is-active span {
  color: #101a2f;
  background: var(--dex-yellow);
  box-shadow: 0 0 0 5px rgba(var(--dex-yellow-rgb), 0.16);
}

.dex-srs-component-card.is-active>i {
  height: 2px;
  background: var(--dex-yellow);
  box-shadow: 0 0 14px rgba(var(--dex-yellow-rgb), 0.45);
}

.dex-srs-core-document {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: 212px;
  align-content: start;
  padding: 20px 18px;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.2);
  border-radius: 18px;
  color: #122246;
  background:
    linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  box-shadow:
    0 18px 38px rgba(15, 39, 91, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.dex-srs-core-document::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--dex-blue), var(--dex-yellow));
}

.dex-srs-core-document small {
  color: var(--dex-blue);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dex-srs-core-document strong {
  max-width: 174px;
  margin-top: 10px;
  color: #0f1f3d;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.05;
}

.dex-srs-core-document span {
  margin-top: 9px;
  color: #687992;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.dex-srs-core-document i {
  display: block;
  height: 8px;
  margin-top: 18px;
  border-radius: 999px;
  background: rgba(var(--dex-blue-rgb), 0.12);
  transform-origin: left center;
  animation: dexSrsDocPulse 5.2s ease-in-out infinite;
}

.dex-srs-core-document i:nth-of-type(2) {
  width: 78%;
  margin-top: 10px;
  animation-delay: 0.4s;
}

.dex-srs-core-document i:nth-of-type(3) {
  width: 58%;
  margin-top: 10px;
  animation-delay: 0.8s;
}

@keyframes dexSrsDocPulse {

  0%,
  100% {
    transform: scaleX(0.58);
    opacity: 0.48;
  }

  45%,
  65% {
    transform: scaleX(1);
    opacity: 0.95;
  }
}

.dex-doc-prototype {
  min-height: 392px;
  overflow: hidden;
  border-color: rgba(var(--dex-blue-rgb), 0.18);
  color: var(--dex-text);
  background:
    radial-gradient(circle at 92% 4%, rgba(var(--dex-yellow-rgb), 0.16), transparent 25%),
    linear-gradient(135deg, #ffffff 0%, #f1f6ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dex-brd-canvas-stage {
  position: relative;
  min-height: 322px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.16);
  border-radius: 16px;
  background:
    linear-gradient(rgba(var(--dex-blue-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.06) 1px, transparent 1px),
    #f9fbff;
  background-size: 28px 28px, 28px 28px, auto;
}

.dex-brd-canvas-stage::before,
.dex-brd-canvas-stage::after {
  content: "";
  position: absolute;
  inset: 50% 24px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--dex-blue-rgb), 0.22), transparent);
}

.dex-brd-canvas-stage::after {
  inset: 24px auto 24px 50%;
  width: 1px;
  height: auto;
}

.dex-brd-canvas-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  width: 218px;
  min-height: 150px;
  align-content: center;
  padding: 22px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.2);
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 20px 42px rgba(15, 39, 91, 0.12),
    inset 0 4px 0 var(--dex-yellow);
  transform: translate(-50%, -50%);
}

.dex-brd-canvas-core small {
  color: var(--dex-blue);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dex-brd-canvas-core strong {
  margin-top: 7px;
  color: #102045;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.06;
}

.dex-brd-canvas-core span {
  margin-top: 9px;
  color: #65758d;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.4;
}

.dex-brd-canvas-grid {
  position: relative;
  z-index: 2;
  display: grid;
  height: 100%;
  min-height: 322px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  align-content: stretch;
  padding: 18px;
}

.dex-brd-canvas-card {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  align-self: center;
  min-height: 54px;
  padding: 8px 9px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 24px rgba(15, 39, 91, 0.08);
  opacity: 0.68;
  transform: translateY(8px) scale(0.98);
  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms ease,
    box-shadow 240ms ease,
    background 240ms ease;
}

.dex-brd-canvas-card:nth-child(4n + 1),
.dex-brd-canvas-card:nth-child(4n + 2) {
  transform-origin: left center;
}

.dex-brd-canvas-card:nth-child(4n + 3),
.dex-brd-canvas-card:nth-child(4n + 4) {
  transform-origin: right center;
}

.dex-brd-canvas-card span,
.dex-fsd-module-card span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.09);
  font-size: 9px;
  font-weight: 950;
}

.dex-brd-canvas-card strong,
.dex-brd-canvas-card em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dex-brd-canvas-card strong {
  color: #122246;
  font-size: 10.5px;
  font-weight: 880;
  line-height: 1.12;
}

.dex-brd-canvas-card em {
  margin-top: 3px;
  color: #66758f;
  font-size: 6.5px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.dex-brd-canvas-card.is-complete,
.dex-brd-canvas-card.is-prev,
.dex-fsd-module-card.is-complete,
.dex-fsd-module-card.is-prev {
  opacity: 0.94;
  transform: none;
}

.dex-brd-canvas-card.is-active {
  z-index: 4;
  border-color: rgba(var(--dex-yellow-rgb), 0.72);
  background: #fff8dc;
  box-shadow:
    0 16px 30px rgba(121, 85, 0, 0.12),
    0 0 0 1px rgba(var(--dex-yellow-rgb), 0.2),
    0 0 24px rgba(var(--dex-yellow-rgb), 0.24);
  opacity: 1;
  transform: translateY(-3px) scale(1.02);
}

.dex-brd-canvas-card.is-active span,
.dex-fsd-module-card.is-active span {
  color: #101a2f;
  background: var(--dex-yellow);
  box-shadow: 0 0 0 5px rgba(var(--dex-yellow-rgb), 0.16);
}

.dex-fsd-blueprint-stage {
  position: relative;
  display: grid;
  min-height: 322px;
  grid-template-columns: minmax(0, 1fr) 214px;
  gap: 17px;
  align-items: stretch;
  margin-top: 14px;
  padding: 17px;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.16);
  border-radius: 16px;
  background:
    linear-gradient(rgba(var(--dex-blue-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.06) 1px, transparent 1px),
    radial-gradient(circle at 78% 38%, rgba(var(--dex-blue-rgb), 0.12), transparent 27%),
    #f9fbff;
  background-size: 26px 26px, 26px 26px, auto, auto;
}

.dex-fsd-rail {
  position: absolute;
  inset: 34px 236px 34px 37px;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  pointer-events: none;
}

.dex-fsd-rail i {
  align-self: center;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.18), rgba(var(--dex-blue-rgb), 0.35), transparent);
}

.dex-fsd-module-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: center;
}

.dex-fsd-module-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 48px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 24px rgba(15, 39, 91, 0.08);
  opacity: 0.68;
  transform: translateY(8px);
  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms ease,
    box-shadow 240ms ease,
    background 240ms ease;
}

.dex-fsd-module-card strong {
  overflow: hidden;
  color: #122246;
  font-size: 10.5px;
  font-weight: 880;
  line-height: 1.14;
  text-overflow: ellipsis;
}

.dex-fsd-module-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -18px;
  width: 18px;
  height: 1px;
  background: rgba(var(--dex-blue-rgb), 0.28);
}

.dex-fsd-module-card.is-active {
  z-index: 4;
  border-color: rgba(var(--dex-yellow-rgb), 0.72);
  background: linear-gradient(135deg, #fff7d5, #ffffff 72%);
  box-shadow:
    0 16px 30px rgba(121, 85, 0, 0.12),
    0 0 24px rgba(var(--dex-yellow-rgb), 0.24);
  opacity: 1;
  transform: translateY(-3px);
}

.dex-fsd-module-card.is-active::after {
  height: 2px;
  background: var(--dex-yellow);
  box-shadow: 0 0 14px rgba(var(--dex-yellow-rgb), 0.45);
}

.dex-fsd-spec-stack {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: center;
  padding: 20px 18px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.2);
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 18px 38px rgba(15, 39, 91, 0.12),
    inset 0 4px 0 var(--dex-blue);
}

.dex-fsd-spec-stack small {
  color: var(--dex-blue);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dex-fsd-spec-stack strong {
  margin-top: 9px;
  color: #102045;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.08;
}

.dex-fsd-spec-stack i {
  display: block;
  height: 8px;
  margin-top: 16px;
  border-radius: 999px;
  background: rgba(var(--dex-blue-rgb), 0.12);
  animation: dexFsdStackPulse 5s ease-in-out infinite;
}

.dex-fsd-spec-stack i:nth-of-type(2) {
  width: 78%;
  margin-top: 9px;
  animation-delay: 0.35s;
}

.dex-fsd-spec-stack i:nth-of-type(3) {
  width: 58%;
  margin-top: 9px;
  animation-delay: 0.7s;
}

@keyframes dexFsdStackPulse {

  0%,
  100% {
    transform: scaleX(0.55);
    transform-origin: left center;
    opacity: 0.45;
  }

  45%,
  65% {
    transform: scaleX(1);
    transform-origin: left center;
    opacity: 0.95;
  }
}

.dex-plan-chapters-demo {
  display: flex;
  min-height: 392px;
  flex-direction: column;
  background:
    radial-gradient(circle at 90% 10%, rgba(var(--dex-yellow-rgb), 0.16), transparent 24%),
    linear-gradient(135deg, #ffffff 0%, #f2f7ff 100%);
}

.dex-plan-progress-track {
  position: relative;
  height: 10px;
  margin: 15px 0 17px;
}

.dex-plan-progress-track span {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--dex-blue-rgb), 0.12);
}

.dex-plan-progress-track span::before {
  content: "";
  display: block;
  width: var(--dex-active-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dex-blue), #74a4ff, var(--dex-yellow));
  box-shadow: 0 0 18px rgba(var(--dex-blue-rgb), 0.34);
  transition: width 420ms ease;
}

.dex-plan-progress-track i {
  position: absolute;
  top: 0;
  left: var(--dex-active-progress, 0%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dex-yellow);
  box-shadow:
    0 0 0 5px rgba(var(--dex-yellow-rgb), 0.16),
    0 0 22px rgba(var(--dex-yellow-rgb), 0.4);
  transform: translateX(-50%);
  transition: left 420ms ease;
}

.dex-plan-chapter-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-content: stretch;
}

.dex-plan-chapter-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 82px;
  align-content: start;
  padding: 13px 12px;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.14);
  border-radius: 14px;
  color: var(--dex-text);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 26px rgba(15, 39, 91, 0.08);
  opacity: 0;
  transform: translateY(14px);
  animation: dexPlanChapterIn 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--chapter-index) * 90ms);
  transition:
    border-color 240ms ease,
    box-shadow 240ms ease,
    background 240ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms ease;
}

.dex-plan-chapter-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: rgba(var(--dex-blue-rgb), 0.18);
}

.dex-plan-chapter-card span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.09);
  font-size: 9px;
  font-weight: 950;
}

.dex-plan-chapter-card strong {
  display: block;
  margin-top: 10px;
  color: #122246;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1.16;
}

.dex-plan-chapter-card em {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.dex-plan-chapter-card.is-complete,
.dex-plan-chapter-card.is-prev {
  opacity: 0.9;
  transform: none;
}

.dex-plan-chapter-card.is-active {
  z-index: 3;
  border-color: rgba(var(--dex-yellow-rgb), 0.78);
  background: linear-gradient(135deg, #fff7d5 0%, #ffffff 72%);
  box-shadow:
    0 16px 34px rgba(121, 85, 0, 0.13),
    0 0 0 1px rgba(var(--dex-yellow-rgb), 0.22),
    0 0 24px rgba(var(--dex-yellow-rgb), 0.24);
  opacity: 1;
  transform: translateY(-4px);
}

.dex-plan-chapter-card.is-active::before {
  background: var(--dex-yellow);
  box-shadow: 0 0 16px rgba(var(--dex-yellow-rgb), 0.42);
}

.dex-plan-chapter-card.is-active span {
  color: #101a2f;
  background: var(--dex-yellow);
  box-shadow: 0 0 0 5px rgba(var(--dex-yellow-rgb), 0.16);
}

@keyframes dexPlanChapterIn {
  to {
    opacity: 0.78;
    transform: none;
  }
}

.dex-tasks-document-demo {
  min-height: 392px;
  background:
    radial-gradient(circle at 86% 8%, rgba(var(--dex-yellow-rgb), 0.13), transparent 24%),
    linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%);
}

.dex-tasks-document-sheet {
  position: relative;
  display: grid;
  gap: 7px;
  margin-top: 15px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.16);
  border-radius: 16px;
  background:
    linear-gradient(rgba(var(--dex-blue-rgb), 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.055) 1px, transparent 1px),
    rgba(255, 255, 255, 0.72);
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.dex-tasks-document-rule {
  position: absolute;
  top: 0;
  left: 15px;
  right: 15px;
  height: 3px;
  overflow: hidden;
  border-radius: 0 0 999px 999px;
  background: rgba(var(--dex-blue-rgb), 0.08);
}

.dex-tasks-document-rule i {
  display: block;
  width: var(--dex-active-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dex-blue), #76a5ff, var(--dex-yellow));
  box-shadow: 0 0 18px rgba(var(--dex-blue-rgb), 0.34);
  transition: width 420ms ease;
}

.dex-tasks-document-row {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  min-height: 35px;
  grid-template-columns: 34px minmax(0, 1fr) 92px;
  gap: 10px;
  align-items: center;
  padding: 7px 9px;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 18px rgba(15, 39, 91, 0.055);
  opacity: 0;
  transform: translateY(10px);
  animation: dexTaskRowIn 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--task-index) * 78ms);
  transition:
    opacity 240ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.dex-tasks-document-row>span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.09);
  font-size: 9px;
  font-weight: 950;
}

.dex-tasks-document-row small {
  display: block;
  margin-bottom: 2px;
  color: #71819a;
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.dex-tasks-document-row strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #122246;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dex-tasks-document-row strong>span {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  vertical-align: bottom;
  text-overflow: ellipsis;
}

.dex-tasks-document-row em {
  display: inline-flex;
  justify-self: end;
  gap: 6px;
  align-items: center;
  color: #6b7d95;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dex-tasks-document-row em i {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.09);
  transform: scale(0.86);
  transition: color 220ms ease, background 220ms ease, transform 240ms ease;
}

.dex-tasks-document-row em svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 360ms ease;
}

.dex-tasks-document-row.is-complete,
.dex-tasks-document-row.is-prev {
  opacity: 0.94;
  transform: none;
}

.dex-tasks-document-row.is-complete em i,
.dex-tasks-document-row.is-prev em i,
.dex-tasks-document-row.is-active em i {
  color: #101a2f;
  background: var(--dex-yellow);
  transform: scale(1);
}

.dex-tasks-document-row.is-complete em svg,
.dex-tasks-document-row.is-prev em svg,
.dex-tasks-document-row.is-active em svg {
  stroke-dashoffset: 0;
}

.dex-tasks-document-row.is-active {
  z-index: 3;
  border-color: rgba(var(--dex-yellow-rgb), 0.76);
  background: linear-gradient(135deg, #fff8dc 0%, #ffffff 72%);
  box-shadow:
    0 13px 26px rgba(121, 85, 0, 0.12),
    0 0 0 1px rgba(var(--dex-yellow-rgb), 0.2),
    0 0 22px rgba(var(--dex-yellow-rgb), 0.2);
  opacity: 1;
  transform: translateY(-2px);
}

.dex-tasks-document-row.is-active>span {
  color: #101a2f;
  background: var(--dex-yellow);
  box-shadow: 0 0 0 5px rgba(var(--dex-yellow-rgb), 0.14);
}

.dex-tasks-document-row.is-active strong>span {
  position: relative;
  width: 0;
  max-width: none;
  text-overflow: clip;
  white-space: nowrap;
  animation: dexTaskTypewriter 980ms steps(var(--task-characters), end) forwards;
}

.dex-tasks-document-row.is-active strong>span::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  border-radius: 999px;
  background: var(--dex-blue);
  vertical-align: -0.12em;
  animation: dexTaskCursor 720ms steps(2, start) infinite;
}

@keyframes dexTaskRowIn {
  to {
    opacity: 0.78;
    transform: none;
  }
}

@keyframes dexTaskTypewriter {
  to {
    width: calc(var(--task-characters) * 0.68em);
  }
}

/* Development Tasks Accordion Demo Start */
.dex-tasks-accordion-demo {
  min-height: 430px;
}

.dex-task-roll-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.35fr 0.9fr;
  gap: 10px;
  align-items: start;
  min-height: 338px;
  overflow: visible;
}

.dex-task-roll {
  position: relative;
  z-index: 1;
  min-width: 0;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.16);
  border-radius: 13px;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 39, 91, 0.08);
  transition: border-color 240ms ease, box-shadow 240ms ease, transform 300ms ease;
}

.dex-task-roll.is-open {
  z-index: 3;
  border-color: rgba(var(--dex-yellow-rgb), 0.72);
  box-shadow:
    0 16px 30px rgba(15, 39, 91, 0.1),
    0 0 0 1px rgba(var(--dex-yellow-rgb), 0.14);
  transform: translateY(-2px);
}

.dex-task-roll-trigger {
  display: grid;
  width: 100%;
  min-height: 78px;
  grid-template-columns: minmax(0, 1fr) 26px;
  gap: 10px;
  align-items: center;
  padding: 12px 13px;
  border: 0;
  color: #122246;
  background:
    linear-gradient(180deg, rgba(var(--dex-blue-rgb), 0.04), transparent),
    #ffffff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dex-task-roll.is-open .dex-task-roll-trigger {
  background: linear-gradient(135deg, #fff6cf 0%, #ffffff 78%);
}

.dex-task-roll-trigger small {
  display: block;
  margin-bottom: 5px;
  color: var(--dex-blue);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}

.dex-task-roll-trigger strong {
  display: block;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.1;
}

.dex-task-roll-trigger span {
  display: block;
  margin-top: 5px;
  color: #71819a;
  font-size: 7.5px;
  font-weight: 700;
  line-height: 1.2;
}

.dex-task-roll-trigger>i {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  justify-self: end;
  border-radius: 50%;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.08);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), background 220ms ease;
}

.dex-task-roll-trigger>i svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.dex-task-roll.is-open .dex-task-roll-trigger>i {
  color: #101a2f;
  background: var(--dex-yellow);
  transform: rotate(180deg);
}

.dex-task-roll-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 380ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease;
}

.dex-task-roll-paper {
  display: grid;
  min-height: 0;
  gap: 5px;
  overflow: hidden;
  padding: 0 7px;
  border-top: 1px dashed rgba(var(--dex-blue-rgb), 0.2);
  background:
    linear-gradient(rgba(var(--dex-blue-rgb), 0.04) 1px, transparent 1px),
    #fbfdff;
  background-size: 100% 22px;
  transition: padding 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-task-roll.is-open .dex-task-roll-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.dex-task-roll.is-open .dex-task-roll-paper {
  padding: 8px 7px 9px;
}

.dex-task-roll .dex-tasks-document-row {
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 1;
  transform: none;
  animation: none;
  border-radius: 9px;
  box-shadow: none;
}

.dex-task-roll.is-open .dex-tasks-document-row {
  animation: dexTaskRollItemIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--roll-item-index) * 45ms);
}

.dex-task-roll .dex-tasks-accordion-trigger {
  display: grid;
  width: 100%;
  min-height: 38px;
  grid-template-columns: 25px minmax(0, 1fr) 20px;
  gap: 7px;
  align-items: center;
  padding: 6px 7px;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dex-task-roll .dex-tasks-accordion-trigger>span {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 7px;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.08);
  font-size: 7px;
  font-weight: 950;
}

.dex-task-roll .dex-tasks-accordion-trigger strong {
  display: block;
  overflow: visible;
  font-size: 8px;
  line-height: 1.16;
  text-overflow: clip;
  white-space: normal;
}

.dex-task-roll .dex-tasks-accordion-trigger small {
  display: block;
  margin-top: 3px;
  color: #71819a;
  font-size: 5.8px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.dex-task-roll .dex-tasks-accordion-trigger>i {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  justify-self: end;
  border-radius: 50%;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.08);
}

.dex-task-roll .dex-tasks-accordion-trigger>i svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
}

.dex-task-roll .dex-tasks-document-row.is-active {
  border-color: rgba(var(--dex-yellow-rgb), 0.72);
  background: #fff7d6;
  box-shadow: 0 7px 14px rgba(var(--dex-yellow-rgb), 0.13);
}

.dex-task-roll .dex-tasks-document-row.is-active .dex-tasks-accordion-trigger>span,
.dex-task-roll .dex-tasks-document-row.is-active .dex-tasks-accordion-trigger>i {
  color: #101a2f;
  background: var(--dex-yellow);
}

@keyframes dexTaskRollItemIn {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }
}

@media screen and (max-width: 767px) {
  .dex-task-roll-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    max-height: 440px;
    overflow-y: auto;
  }

  .dex-task-roll-trigger {
    min-height: 64px;
    padding: 10px 12px;
  }

  .dex-task-roll .dex-tasks-accordion-trigger strong {
    font-size: 9px;
  }
}

/* Development Tasks Accordion Demo End */

/* Development Tasks Readable Focus Demo Start */
.dex-tasks-accordion-demo .dex-task-roll-grid {
  grid-template-columns: 0.72fr 0.72fr 0.72fr;
  gap: 14px;
  transition: grid-template-columns 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-tasks-accordion-demo[data-active-task-group="0"] .dex-task-roll-grid {
  grid-template-columns: 1.55fr 0.72fr 0.72fr;
}

.dex-tasks-accordion-demo[data-active-task-group="1"] .dex-task-roll-grid {
  grid-template-columns: 0.72fr 1.65fr 0.72fr;
}

.dex-tasks-accordion-demo[data-active-task-group="2"] .dex-task-roll-grid {
  grid-template-columns: 0.72fr 0.72fr 1.55fr;
}

.dex-tasks-accordion-demo .dex-task-roll {
  transform-origin: top center;
  transition:
    border-color 280ms ease,
    box-shadow 420ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms ease;
}

.dex-tasks-accordion-demo .dex-task-roll:not(.is-open) {
  opacity: 0.78;
  transform: scale(0.975);
}

.dex-tasks-accordion-demo .dex-task-roll.is-open {
  opacity: 1;
  transform: translateY(-5px) scale(1.012);
  box-shadow:
    0 24px 48px rgba(15, 39, 91, 0.14),
    0 0 0 2px rgba(var(--dex-yellow-rgb), 0.18);
}

.dex-tasks-accordion-demo .dex-task-roll-trigger {
  min-height: 94px;
  padding: 16px 17px;
  transition: min-height 420ms ease, padding 420ms ease, background 280ms ease;
}

.dex-tasks-accordion-demo .dex-task-roll-trigger small {
  font-size: 9px;
}

.dex-tasks-accordion-demo .dex-task-roll-trigger strong {
  font-size: 16px;
}

.dex-tasks-accordion-demo .dex-task-roll-trigger span {
  font-size: 10px;
}

.dex-tasks-accordion-demo .dex-task-roll.is-open .dex-task-roll-trigger {
  min-height: 112px;
  padding: 18px 20px;
}

.dex-tasks-accordion-demo .dex-task-roll.is-open .dex-task-roll-trigger strong {
  font-size: 20px;
}

.dex-tasks-accordion-demo .dex-task-roll.is-open .dex-task-roll-trigger span {
  font-size: 11.5px;
}

.dex-tasks-accordion-demo .dex-task-roll.is-open .dex-task-roll-paper {
  gap: 8px;
  padding: 12px 11px 14px;
}

.dex-tasks-accordion-demo .dex-task-roll .dex-tasks-accordion-trigger {
  min-height: 54px;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  gap: 11px;
  padding: 9px 11px;
  transition:
    min-height 440ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 440ms cubic-bezier(0.22, 1, 0.36, 1),
    background 260ms ease;
}

.dex-tasks-accordion-demo .dex-task-roll .dex-tasks-accordion-trigger>span {
  width: 32px;
  height: 32px;
  font-size: 9px;
  transition: width 380ms ease, height 380ms ease, font-size 380ms ease;
}

.dex-tasks-accordion-demo .dex-task-roll .dex-tasks-accordion-trigger strong {
  font-size: 11.5px;
  line-height: 1.2;
  transition: font-size 420ms ease, color 260ms ease;
}

.dex-tasks-accordion-demo .dex-task-roll .dex-tasks-accordion-trigger small {
  margin-top: 4px;
  font-size: 8px;
  line-height: 1.3;
  transition: font-size 420ms ease;
}

.dex-tasks-accordion-demo .dex-task-roll .dex-tasks-accordion-trigger>i {
  width: 26px;
  height: 26px;
  transition:
    width 380ms ease,
    height 380ms ease,
    background 260ms ease,
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-tasks-accordion-demo .dex-task-roll .dex-tasks-document-row {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.13);
  background: rgba(255, 255, 255, 0.94);
  transition:
    background 300ms ease,
    border-color 300ms ease,
    box-shadow 380ms ease,
    transform 440ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-tasks-accordion-demo .dex-task-roll .dex-tasks-document-row.is-active {
  z-index: 4;
  border-color: var(--dex-yellow);
  background: linear-gradient(135deg, #fff3bb 0%, #fffdf4 100%);
  box-shadow:
    0 14px 26px rgba(var(--dex-yellow-rgb), 0.22),
    0 0 0 2px rgba(var(--dex-yellow-rgb), 0.12);
  transform: scale(1.025);
}

.dex-tasks-accordion-demo .dex-task-roll .dex-tasks-document-row.is-active .dex-tasks-accordion-trigger {
  min-height: 72px;
  padding: 12px 13px;
}

.dex-tasks-accordion-demo .dex-task-roll .dex-tasks-document-row.is-active .dex-tasks-accordion-trigger>span {
  width: 38px;
  height: 38px;
  font-size: 11px;
}

.dex-tasks-accordion-demo .dex-task-roll .dex-tasks-document-row.is-active .dex-tasks-accordion-trigger strong {
  color: #101a2f;
  font-size: 16px;
}

.dex-tasks-accordion-demo .dex-task-roll .dex-tasks-document-row.is-active .dex-tasks-accordion-trigger small {
  color: #53647e;
  font-size: 10.5px;
}

.dex-tasks-accordion-demo .dex-task-roll .dex-tasks-document-row.is-active .dex-tasks-accordion-trigger>i {
  width: 32px;
  height: 32px;
  transform: scale(1.08);
}

@media screen and (max-width: 767px) {

  .dex-tasks-accordion-demo .dex-task-roll-grid,
  .dex-tasks-accordion-demo[data-active-task-group="0"] .dex-task-roll-grid,
  .dex-tasks-accordion-demo[data-active-task-group="1"] .dex-task-roll-grid,
  .dex-tasks-accordion-demo[data-active-task-group="2"] .dex-task-roll-grid {
    grid-template-columns: 1fr;
  }

  .dex-tasks-accordion-demo .dex-task-roll:not(.is-open) {
    transform: none;
  }

  .dex-tasks-accordion-demo .dex-task-roll.is-open {
    transform: translateY(-2px);
  }

  .dex-tasks-accordion-demo .dex-task-roll-trigger,
  .dex-tasks-accordion-demo .dex-task-roll.is-open .dex-task-roll-trigger {
    min-height: 76px;
    padding: 12px 14px;
  }

  .dex-tasks-accordion-demo .dex-task-roll.is-open .dex-task-roll-trigger strong {
    font-size: 17px;
  }

  .dex-tasks-accordion-demo .dex-task-roll .dex-tasks-accordion-trigger strong {
    font-size: 12px;
  }

  .dex-tasks-accordion-demo .dex-task-roll .dex-tasks-document-row.is-active {
    transform: none;
  }
}

/* Development Tasks Readable Focus Demo End */

/* Build-ready Blueprint Journey Experiment Start */
.dex-blueprint-journey {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  padding: 18px;
  background:
    linear-gradient(rgba(var(--dex-blue-rgb), 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.055) 1px, transparent 1px),
    radial-gradient(circle at 85% 12%, rgba(var(--dex-yellow-rgb), 0.19), transparent 28%),
    #f8fbff;
  background-size: 24px 24px, 24px 24px, auto, auto;
}

.dex-blueprint-focus {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: 92px;
  grid-template-columns: 54px minmax(0, 1fr) 34px;
  gap: 15px;
  align-items: center;
  margin-top: 14px;
  padding: 15px 17px;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.2);
  border-radius: 17px;
  color: #152341;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 36px rgba(20, 55, 120, 0.12);
}

.dex-blueprint-focus::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--dex-active-progress, 0%);
  height: 4px;
  border-radius: 0 99px 99px 0;
  background: linear-gradient(90deg, var(--dex-blue), var(--dex-yellow));
  box-shadow: 0 0 16px rgba(var(--dex-blue-rgb), 0.42);
  content: "";
  transition: width 680ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-blueprint-focus-index {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 15px;
  color: #101827;
  background: linear-gradient(145deg, #ffe478, var(--dex-yellow));
  box-shadow: 0 10px 24px rgba(var(--dex-yellow-rgb), 0.24);
  font-size: 16px;
  font-weight: 950;
}

.dex-blueprint-focus small,
.dex-blueprint-focus strong,
.dex-blueprint-focus span {
  display: block;
}

.dex-blueprint-focus small {
  margin-bottom: 4px;
  color: var(--dex-blue);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dex-blueprint-focus strong {
  overflow: hidden;
  color: #14213d;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dex-blueprint-focus span {
  margin-top: 4px;
  color: #62718a;
  font-size: 9px;
  font-weight: 700;
}

.dex-blueprint-focus>i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--dex-blue);
  box-shadow: 0 0 0 7px rgba(var(--dex-blue-rgb), 0.08);
  animation: dexBlueprintFocusPulse 1.6s ease-in-out infinite;
}

.dex-blueprint-focus>i svg,
.dex-blueprint-topic>i svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
}

.dex-blueprint-route {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.dex-blueprint-route-line {
  position: absolute;
  z-index: -1;
  inset: 50% 8% auto;
  height: 2px;
  overflow: hidden;
  background: rgba(var(--dex-blue-rgb), 0.12);
}

.dex-blueprint-route-line i {
  display: block;
  width: 26%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--dex-blue), var(--dex-yellow), transparent);
  animation: dexBlueprintRouteScan 2.8s linear infinite;
}

.dex-blueprint-topic {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 62px;
  grid-template-columns: 30px minmax(0, 1fr) 20px;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.13);
  border-radius: 12px;
  color: #192846;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 7px 16px rgba(21, 53, 112, 0.065);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 300ms ease, box-shadow 400ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms ease;
}

.dex-blueprint-topic>span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 9px;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.08);
  font-size: 8px;
  font-weight: 950;
}

.dex-blueprint-topic strong,
.dex-blueprint-topic small {
  display: block;
}

.dex-blueprint-topic strong {
  color: #25324a;
  font-size: 9.5px;
  font-weight: 900;
  line-height: 1.16;
}

.dex-blueprint-topic small {
  margin-top: 4px;
  color: #8290a6;
  font-size: 6.5px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.dex-blueprint-topic>i {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  color: #8da0bd;
  background: rgba(var(--dex-blue-rgb), 0.06);
}

.dex-blueprint-topic.is-complete {
  opacity: 0.68;
}

.dex-blueprint-topic.is-complete>i {
  color: #fff;
  background: var(--dex-blue);
}

.dex-blueprint-topic.is-next {
  border-color: rgba(var(--dex-blue-rgb), 0.28);
  transform: translateY(-2px);
}

.dex-blueprint-topic.is-active {
  z-index: 2;
  border-color: var(--dex-yellow);
  background: linear-gradient(135deg, #fff3b9, #fffef7 74%);
  box-shadow: 0 13px 28px rgba(var(--dex-yellow-rgb), 0.22), 0 0 0 2px rgba(var(--dex-yellow-rgb), 0.12);
  transform: translateY(-4px) scale(1.025);
}

.dex-blueprint-topic.is-active>span,
.dex-blueprint-topic.is-active>i {
  color: #111827;
  background: var(--dex-yellow);
}

@keyframes dexBlueprintRouteScan {
  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(470%);
  }
}

@keyframes dexBlueprintFocusPulse {
  50% {
    box-shadow: 0 0 0 12px rgba(var(--dex-blue-rgb), 0.025);
    transform: scale(0.94);
  }
}

@media screen and (max-width: 767px) {
  .dex-blueprint-journey {
    min-height: 520px;
    padding: 14px;
  }

  .dex-blueprint-focus {
    grid-template-columns: 44px minmax(0, 1fr) 28px;
    gap: 10px;
    padding: 12px;
  }

  .dex-blueprint-focus-index {
    width: 43px;
    height: 43px;
    border-radius: 12px;
  }

  .dex-blueprint-focus strong {
    font-size: 13px;
    white-space: normal;
  }

  .dex-blueprint-focus span {
    display: none;
  }

  .dex-blueprint-focus>i {
    width: 27px;
    height: 27px;
  }

  .dex-blueprint-route {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .dex-blueprint-topic {
    min-height: 58px;
    grid-template-columns: 27px minmax(0, 1fr);
    padding: 8px;
  }

  .dex-blueprint-topic>i {
    display: none;
  }

  .dex-blueprint-topic strong {
    font-size: 8.5px;
  }

  .dex-blueprint-topic.is-active {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {

  .dex-blueprint-route-line i,
  .dex-blueprint-focus>i {
    animation: none;
  }

  .dex-blueprint-topic,
  .dex-blueprint-focus::after {
    transition: none;
  }
}

/* Build-ready Blueprint Journey Experiment End */

/* BRD Approval Scroll Experiment Start */
.dex-doc-console[data-spec-preview="brd"] .dex-blueprint-route {
  max-height: 214px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 5px 10px 3px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.dex-doc-console[data-spec-preview="brd"] .dex-blueprint-route::-webkit-scrollbar {
  display: none;
}

.dex-doc-console[data-spec-preview="brd"] .dex-blueprint-topic {
  scroll-margin-block: 58px;
}

@media screen and (max-width: 767px) {
  .dex-doc-console .dex-blueprint-route {
    max-height: 286px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 7px;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .dex-doc-console .dex-blueprint-route::-webkit-scrollbar {
    display: none;
  }

  .dex-doc-switcher-head {
    order: 0;
  }

  .dex-doc-switch {
    order: 1;
  }

  .dex-doc-switch.is-active {
    order: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dex-doc-console[data-spec-preview="brd"] .dex-blueprint-route {
    scroll-behavior: auto;
  }
}

/* BRD Approval Scroll Experiment End */

/* Reserve enough height for the expanded seven-epic group. */
.dex-doc-console-stage:has(.dex-doc-console[data-spec-preview="development-tasks"].is-active) {
  height: 780px !important;
}

@media screen and (max-width: 991px) {
  .dex-doc-console-stage:has(.dex-doc-console[data-spec-preview="development-tasks"].is-active) {
    height: 720px !important;
  }
}

@media screen and (max-width: 640px) {
  .dex-doc-console-stage:has(.dex-doc-console[data-spec-preview="development-tasks"].is-active) {
    height: 650px !important;
  }
}

@keyframes dexTaskCursor {
  50% {
    opacity: 0;
  }
}

.dex-doc-console-body footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
}

.dex-doc-console-body footer span {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: #8fa0bb;
  background: rgba(255, 255, 255, 0.035);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dex-doc-switcher {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 17px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.13);
  border-radius: 24px;
  background: linear-gradient(180deg, #f8faff, #f1f5fc);
  box-shadow: 0 20px 54px rgba(26, 51, 102, 0.09);
}

.dex-doc-switcher-head {
  padding: 5px 7px 11px;
}

.dex-doc-switcher-head small,
.dex-doc-switcher-head strong {
  display: block;
}

.dex-doc-switcher-head small {
  margin-bottom: 3px;
  color: var(--dex-blue);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dex-doc-switcher-head strong {
  color: var(--dex-text);
  font-size: 17px;
}

.dex-doc-switch {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 43px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: var(--dex-text);
  background: rgba(255, 255, 255, 0.7);
  text-align: left;
  cursor: pointer;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease, background 220ms ease;
}

.dex-doc-switch:hover {
  transform: none;
}

.dex-doc-switch.is-active {
  border-color: rgba(var(--dex-blue-rgb), 0.25);
  background: #fff;
  box-shadow: 0 11px 28px rgba(var(--dex-blue-rgb), 0.12);
  transform: none;
}

.dex-doc-switch-icon {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 13px;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.09);
  transition: color 220ms ease, background 220ms ease;
}

.dex-doc-switch.is-active .dex-doc-switch-icon {
  color: #071328;
  background: var(--dex-yellow);
}

.dex-doc-switch-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.dex-doc-switch small,
.dex-doc-switch h3 {
  display: block;
  margin: 0;
}

.dex-doc-switch small {
  margin-bottom: 2px;
  color: #7b8ba6;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.dex-doc-switch h3 {
  color: var(--dex-text);
  font-size: 12px;
  line-height: 1.25;
}

@keyframes dexDocStatusPulse {
  50% {
    opacity: 0.45;
    transform: scale(0.78);
  }
}

@media screen and (max-width: 991px) {
  .dex-doc-flow-layout {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 38px;
  }

  .dex-doc-switcher {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dex-doc-switcher-head {
    grid-column: 1 / -1;
  }

  .dex-doc-switch:hover,
  .dex-doc-switch.is-active {
    transform: none;
  }
}

@media screen and (max-width: 767px) {
  .dex-doc-flow-layout {
    margin-top: 30px;
  }

  .dex-doc-console-stage {
    height: 700px;
  }

  .dex-doc-console {
    border-radius: 19px;
  }

  .dex-doc-console-bar {
    grid-template-columns: auto 1fr;
    padding: 12px 15px;
  }

  .dex-doc-console-bar>b {
    display: none;
  }

  .dex-doc-console-body {
    height: calc(100% - 43px);
    min-height: 0;
    padding: 24px 19px 20px;
  }

  .dex-doc-console-intro {
    align-items: flex-start;
  }

  .dex-doc-console-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 13px;
  }

  .dex-doc-console-intro h3 {
    font-size: 21px;
  }

  .dex-doc-console-body>p {
    margin: 17px 0 19px;
    font-size: 13px;
    line-height: 1.55;
  }

  .dex-doc-console-stats {
    grid-template-columns: 1fr 1fr;
  }

  .dex-doc-console-stats>span:last-child {
    grid-column: 1 / -1;
  }

  .dex-doc-generation-flow {
    margin-top: 16px;
    padding: 15px;
  }

  .dex-doc-flow-head>b {
    display: none;
  }

  .dex-doc-focus-item {
    grid-template-columns: 36px 1fr 26px;
    gap: 10px;
  }

  .dex-doc-focus-item>span {
    width: 36px;
    height: 36px;
  }

  .dex-doc-focus-item strong {
    font-size: 13px;
  }

  .dex-doc-console-body footer {
    padding-top: 16px;
  }

  .dex-doc-switcher {
    grid-template-columns: 1fr;
    padding: 12px;
    border-radius: 18px;
  }

  .dex-doc-switcher-head {
    padding-bottom: 6px;
  }

  .dex-doc-switch {
    grid-template-columns: 39px 1fr;
    padding: 11px;
  }

  .dex-doc-switch-icon {
    width: 39px;
    height: 39px;
  }

  .dex-srs-blueprint-demo {
    min-height: 480px;
    padding: 13px;
  }

  .dex-srs-blueprint-stage {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 12px;
  }

  .dex-srs-core-document {
    min-height: 112px;
    padding: 18px 16px;
  }

  .dex-srs-core-document strong {
    max-width: none;
    font-size: 17px;
  }

  .dex-srs-core-document i {
    margin-top: 12px;
  }

  .dex-srs-component-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .dex-srs-component-card {
    min-height: 46px;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 7px;
    padding: 7px 8px;
  }

  .dex-srs-component-card>i {
    display: none;
  }

  .dex-srs-component-card span {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: 9px;
  }

  .dex-srs-component-card strong {
    font-size: 10px;
    line-height: 1.14;
  }

  .dex-srs-component-card em {
    font-size: 6.5px;
    white-space: normal;
  }

  .dex-doc-prototype {
    min-height: 480px;
    padding: 13px;
  }

  .dex-brd-canvas-stage,
  .dex-fsd-blueprint-stage {
    min-height: 410px;
    margin-top: 12px;
    padding: 12px;
  }

  .dex-brd-canvas-stage::before,
  .dex-brd-canvas-stage::after,
  .dex-fsd-rail,
  .dex-fsd-module-card::after {
    display: none;
  }

  .dex-brd-canvas-core {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    min-height: 98px;
    margin-bottom: 10px;
    padding: 16px;
    transform: none;
  }

  .dex-brd-canvas-core strong {
    font-size: 17px;
  }

  .dex-brd-canvas-grid {
    height: auto;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 0;
  }

  .dex-brd-canvas-card,
  .dex-fsd-module-card {
    min-height: 45px;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 7px;
    padding: 7px 8px;
  }

  .dex-brd-canvas-card span,
  .dex-fsd-module-card span {
    width: 23px;
    height: 23px;
    border-radius: 8px;
    font-size: 8px;
  }

  .dex-brd-canvas-card strong,
  .dex-fsd-module-card strong {
    font-size: 9.5px;
    line-height: 1.12;
  }

  .dex-brd-canvas-card em {
    font-size: 6px;
  }

  .dex-fsd-blueprint-stage {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dex-fsd-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .dex-fsd-spec-stack {
    min-height: 110px;
    padding: 17px 16px;
  }

  .dex-fsd-spec-stack strong {
    font-size: 16px;
  }

  .dex-fsd-spec-stack i {
    margin-top: 12px;
  }

  .dex-plan-chapters-demo {
    min-height: 480px;
  }

  .dex-plan-progress-track {
    margin: 12px 0 13px;
  }

  .dex-plan-chapter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .dex-plan-chapter-card {
    min-height: 68px;
    padding: 10px 9px;
    border-radius: 12px;
  }

  .dex-plan-chapter-card span {
    width: 23px;
    height: 23px;
    border-radius: 8px;
    font-size: 8px;
  }

  .dex-plan-chapter-card strong {
    margin-top: 7px;
    font-size: 9.5px;
    line-height: 1.12;
  }

  .dex-plan-chapter-card em {
    margin-top: 4px;
    font-size: 6px;
  }

  .dex-tasks-document-demo {
    min-height: 480px;
  }

  .dex-tasks-document-sheet {
    gap: 6px;
    margin-top: 12px;
    padding: 12px;
  }

  .dex-tasks-document-row {
    min-height: 42px;
    grid-template-columns: 27px minmax(0, 1fr) 25px;
    gap: 8px;
    padding: 7px 8px;
  }

  .dex-tasks-document-row>span {
    width: 23px;
    height: 23px;
    border-radius: 8px;
    font-size: 8px;
  }

  .dex-tasks-document-row small {
    font-size: 5.8px;
  }

  .dex-tasks-document-row strong {
    font-size: 9.3px;
    line-height: 1.12;
  }

  .dex-tasks-document-row em {
    justify-self: center;
  }

  .dex-tasks-document-row em b {
    display: none;
  }

  .dex-tasks-document-row em i {
    width: 21px;
    height: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .dex-doc-console,
  .dex-doc-focus-item,
  .dex-brd-canvas-card,
  .dex-fsd-module-card,
  .dex-plan-chapter-card,
  .dex-tasks-document-row,
  .dex-srs-component-card,
  .dex-fsd-spec-stack i,
  .dex-srs-core-document i,
  .dex-plan-progress-track span::before,
  .dex-plan-progress-track i,
  .dex-tasks-document-rule i,
  .dex-doc-flow-progress i,
  .dex-doc-switch {
    transition: none;
  }

  .dex-plan-chapter-card {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .dex-tasks-document-row,
  .dex-tasks-document-row.is-active strong>span,
  .dex-tasks-document-row.is-active strong>span::after {
    animation: none;
  }

  .dex-tasks-document-row {
    opacity: 1;
    transform: none;
  }

  .dex-tasks-document-row.is-active strong>span {
    width: auto;
    max-width: 100%;
  }

  .dex-doc-console-bar>b i {
    animation: none;
  }
}

/* Mobile flow corrections: keep hero metrics inside their section and reveal tall content promptly. */
@media screen and (max-width: 767px) {
  .rt-hero-v1 {
    padding-bottom: 160px !important;
  }

  .dex-delivery-metrics,
  .dex-delivery-metrics.is-visible {
    position: relative;
    z-index: 3;
    opacity: 1;
    transform: none;
  }

  .dex-delivery-system-section.dex-scroll-reveal .dex-delivery-system-heading,
  .dex-delivery-system-section.dex-scroll-reveal .dex-workflow-board,
  .dex-delivery-system-section.dex-scroll-reveal .dex-delivery-phase-section>header,
  .dex-delivery-system-section.dex-scroll-reveal .dex-delivery-phase-card,
  .dex-delivery-system-section.dex-scroll-reveal .dex-core-capabilities>header,
  .dex-delivery-system-section.dex-scroll-reveal .dex-core-capability-card,
  .dex-delivery-system-section.dex-scroll-reveal .dex-delivery-workflow-step {
    opacity: 1;
    transform: none;
  }
}

/* New project contact section following the Channel Partner Program. */
.dex-contact-section {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 6vw, 78px) 0;
  color: var(--dex-text);
  background: transparent;
  /* Removed background gradient */
}

/* Removed .dex-contact-section::before background mask */

.dex-contact-inner {
  position: relative;
  z-index: 1;
}

.dex-form-workspace-card {
  position: relative;
  min-height: 390px;
  padding: clamp(32px, 5vw, 64px);
  overflow: hidden;
  border-radius: 30px;
  background-color: #ffffff;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(var(--dex-blue-rgb), 0.12), transparent 40%),
    radial-gradient(circle at 82% 16%, rgba(var(--dex-yellow-rgb), 0.12), transparent 40%),
    linear-gradient(rgba(var(--dex-blue-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.06) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 30px 30px, 30px 30px;
  background-position: 0 0, 0 0, -1px -1px, -1px -1px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(var(--dex-blue-rgb), 0.1);
  margin-bottom: 20px;
}

.dex-form-workspace-card>* {
  position: relative;
  z-index: 10;
}

.dex-contact-heading {
  max-width: 740px;
  margin: 0 auto 28px;
  text-align: center;
}

.dex-contact-heading>small {
  display: block;
  margin-bottom: 10px;
  color: var(--dex-blue-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.dex-contact-heading h2 {
  margin: 0;
  color: var(--dex-text);
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 700 !important;
  line-height: 1.05;
}

.dex-contact-heading h2 span {
  background: linear-gradient(100deg, var(--dex-blue-dark), var(--dex-blue) 62%, #d89b00);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dex-contact-heading p {
  max-width: 620px;
  margin: 13px auto 0;
  color: var(--dex-text-secondary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
}

.dex-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(330px, 0.76fr);
  gap: 22px;
  align-items: stretch;
}

.dex-contact-form-card,
.dex-strategy-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.15);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.91);
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  height: 100%;
  min-height: 520px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.dex-contact-form-card {
  padding: clamp(22px, 2.6vw, 32px);
}

.dex-contact-card-icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  place-items: center;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.18);
  border-radius: 14px;
  color: var(--dex-blue);
  background: linear-gradient(145deg, rgba(var(--dex-blue-rgb), 0.1), #fff);
  box-shadow: 0 12px 26px rgba(var(--dex-blue-rgb), 0.12);
}

.dex-contact-card-icon svg,
.dex-strategy-orbit svg,
.dex-contact-form button svg,
.dex-strategy-card>a svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-contact-form-card h3,
.dex-strategy-card h3 {
  margin: 0;
  color: var(--dex-text);
  font-size: clamp(24px, 2.25vw, 32px);
  font-weight: 700 !important;
  line-height: 1.1;
}

.dex-contact-form-card>p {
  margin: 7px 0 18px;
  color: var(--dex-text-secondary);
  font-size: 15px;
  font-weight: 650;
}

.dex-contact-form {
  display: grid;
  gap: 12px;
}

.dex-contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dex-contact-form label {
  display: grid;
  gap: 6px;
  color: var(--dex-text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.dex-contact-form label b {
  display: inline;
  color: #b77900;
}

.dex-contact-form input,
.dex-contact-form textarea {
  width: 100%;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.16);
  border-radius: 12px;
  outline: 0;
  color: var(--dex-text);
  background: rgba(248, 251, 255, 0.88);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.dex-contact-form input {
  height: 44px;
  padding: 0 14px;
}

.dex-contact-form textarea {
  height: 96px;
  min-height: 92px;
  padding: 12px 14px;
  resize: vertical;
}

.dex-contact-form input::placeholder,
.dex-contact-form textarea::placeholder {
  color: #8a98ad;
}

.dex-contact-form input:focus,
.dex-contact-form textarea:focus {
  border-color: var(--dex-blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(var(--dex-blue-rgb), 0.14);
}

.dex-contact-form button,
.dex-strategy-card>a {
  display: inline-flex;
  min-height: 46px;
  justify-content: center;
  gap: 11px;
  align-items: center;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--dex-blue), var(--dex-blue-dark));
  box-shadow: 0 15px 34px rgba(var(--dex-blue-rgb), 0.28);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.dex-contact-form button:hover,
.dex-strategy-card>a:hover {
  box-shadow: 0 18px 38px rgba(var(--dex-blue-rgb), 0.36);
  transform: translateY(-2px);
}

.dex-contact-form>small {
  color: var(--dex-text-muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.dex-strategy-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(26px, 3.4vw, 42px);
  text-align: center;
}

.dex-strategy-card::before,
.dex-strategy-card::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.13);
  border-radius: 50%;
  pointer-events: none;
}

.dex-strategy-card::before {
  top: -120px;
  right: -110px;
  width: 250px;
  height: 250px;
  background: rgba(var(--dex-blue-rgb), 0.04);
}

.dex-strategy-card::after {
  right: -72px;
  bottom: -92px;
  width: 180px;
  height: 180px;
  background: rgba(var(--dex-yellow-rgb), 0.08);
}

.dex-strategy-orbit {
  position: relative;
  display: grid;
  width: 76px;
  height: 76px;
  margin-bottom: 20px;
  place-items: center;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.22);
  border-radius: 50%;
  color: var(--dex-blue);
  background: linear-gradient(145deg, #fff, rgba(var(--dex-blue-rgb), 0.08));
  box-shadow: 0 14px 32px rgba(var(--dex-blue-rgb), 0.12);
}

.dex-strategy-orbit i {
  position: absolute;
  inset: -9px;
  border: 1px dashed rgba(var(--dex-yellow-rgb), 0.65);
  border-radius: 50%;
  animation: dexContactOrbit 14s linear infinite;
}

.dex-strategy-orbit i::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 14px;
  width: 9px;
  height: 9px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--dex-yellow);
}

.dex-strategy-orbit svg {
  width: 28px;
  height: 28px;
}

.dex-strategy-card>small {
  margin-bottom: 12px;
  color: var(--dex-blue-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dex-strategy-card>p {
  max-width: 440px;
  margin: 14px 0 20px;
  color: var(--dex-text-secondary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

.dex-strategy-card>a {
  width: 100%;
  max-width: 520px;
  text-decoration: none;
}

.dex-strategy-card footer {
  margin-top: 18px;
  color: var(--dex-text-muted);
  font-size: 11px;
  font-weight: 750;
}

@keyframes dexContactOrbit {
  to {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 991px) {
  .dex-contact-grid {
    grid-template-columns: 1fr;
  }

  .dex-strategy-card {
    min-height: 300px;
  }
}

@media screen and (max-width: 767px) {
  .dex-contact-section {
    padding: 44px 0;
  }

  .dex-contact-heading {
    margin-bottom: 22px;
    text-align: left;
  }

  .dex-contact-heading h2 {
    font-size: 30px;
  }

  .dex-contact-heading p {
    margin-top: 12px;
    font-size: 14px;
  }

  .dex-contact-grid {
    gap: 18px;
  }

  .dex-contact-form-card,
  .dex-strategy-card {
    border-radius: 20px;
  }

  .dex-contact-form-card {
    padding: 20px 16px;
  }

  .dex-contact-form-card h3,
  .dex-strategy-card h3 {
    font-size: 26px;
  }

  .dex-contact-form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .dex-contact-form input {
    height: 44px;
  }

  .dex-contact-form textarea {
    height: 92px;
    min-height: 88px;
  }

  .dex-strategy-card {
    min-height: 0;
    padding: 24px 18px;
  }

  .dex-strategy-card>p {
    margin: 12px 0 18px;
    font-size: 14px;
    line-height: 1.45;
  }

  .dex-strategy-card footer {
    margin-top: 14px;
  }

  .dex-strategy-orbit {
    width: 66px;
    height: 66px;
    margin-bottom: 16px;
  }

  .dex-strategy-orbit svg {
    width: 26px;
    height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dex-strategy-orbit i {
    animation: none;
  }

  .dex-contact-form button,
  .dex-strategy-card>a {
    transition: none;
  }
}

/* Stabilize the rotating hero console and contain long outcome labels on mobile. */
@media screen and (max-width: 767px) {
  .dex-hero-workflow-status {
    height: 820px;
    overflow: hidden;
  }

  .dex-stage-console {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(var(--dex-blue-rgb), 0.35) transparent;
    scrollbar-width: thin;
  }

  .dex-stage-console::-webkit-scrollbar {
    width: 5px;
  }

  .dex-stage-console::-webkit-scrollbar-track {
    background: transparent;
  }

  .dex-stage-console::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(var(--dex-blue-rgb), 0.35);
  }

  .dex-outcome-tab {
    min-width: 0;
    overflow: hidden;
    justify-content: flex-start;
  }

  .dex-outcome-tab b {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

@media screen and (max-width: 374px) {
  .dex-hero-workflow-status {
    height: 850px;
  }
}

/* Compact Partner Program while retaining 6-card animation */
.rt-cta-v1 .dex-partner-program-v2.dex-partner-program-compact {
  gap: clamp(28px, 3.5vw, 44px);
  padding: clamp(42px, 5vw, 68px) clamp(18px, 3vw, 42px);
}

.dex-partner-program-compact .dex-partner-compact-heading {
  max-width: 900px;
}

.dex-partner-program-compact .dex-partner-v2-heading h2 {
  margin-top: 10px;
  font-size: clamp(36px, 4.5vw, 58px);
  line-height: 1.03;
}

.dex-partner-program-compact .dex-partner-v2-heading>p {
  max-width: 760px;
  margin-top: 14px;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.45;
}

.dex-partner-program-compact .dex-partner-actions {
  margin-top: 20px;
}

.dex-partner-program-compact .dex-partner-value-section>header,
.dex-partner-program-compact .dex-partner-tier-section>header {
  margin-bottom: clamp(20px, 2.5vw, 28px);
}

.dex-partner-program-compact .dex-partner-value-section>header p,
.dex-partner-program-compact .dex-partner-tier-section>header p {
  display: none;
}

.dex-partner-program-compact .dex-partner-value-section>header h3,
.dex-partner-program-compact .dex-partner-tier-section>header h3 {
  font-size: clamp(26px, 3vw, 40px);
}

.dex-partner-program-compact .dex-partner-value-map {
  grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(92px, auto));
  gap: 12px 24px;
}

.dex-partner-program-compact .dex-partner-core {
  width: 178px;
  height: 178px;
  padding: 30px;
}

.dex-partner-program-compact .dex-partner-core>i {
  inset: -9px;
}

.dex-partner-program-compact .dex-partner-core>i:nth-child(2) {
  inset: -22px;
}

.dex-partner-program-compact .dex-partner-core>i:nth-child(3) {
  inset: 20px;
}

.dex-partner-program-compact .dex-partner-core>span {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}

.dex-partner-program-compact .dex-partner-core svg {
  width: 21px;
  height: 21px;
}

.dex-partner-program-compact .dex-partner-core>strong {
  font-size: 15px;
}

.dex-partner-program-compact .dex-partner-core>small {
  font-size: 8px;
}

.dex-partner-program-compact .dex-partner-value-map>article {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  min-height: 92px;
  padding: 15px;
  border-radius: 14px;
}

.dex-partner-program-compact .dex-partner-value-map>article>span {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.dex-partner-program-compact .dex-partner-value-map article svg {
  width: 19px;
  height: 19px;
}

.dex-partner-program-compact .dex-partner-value-map article strong {
  font-size: 14px;
}

.dex-partner-program-compact .dex-partner-value-map article p {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.35;
}

.dex-partner-program-compact .dex-partner-tier-section {
  padding-top: clamp(28px, 4vw, 42px);
}

.dex-partner-program-compact .dex-partner-v2-tiers {
  gap: 14px;
}

.dex-partner-program-compact .dex-partner-v2-tiers>article {
  min-height: 0;
  padding: clamp(20px, 2vw, 26px);
  border-radius: 18px;
}

.dex-partner-program-compact .dex-partner-v2-tiers>article>header {
  grid-template-columns: 42px minmax(0, 1fr) 26px;
}

.dex-partner-program-compact .dex-partner-v2-tiers>article>header>span {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}

.dex-partner-program-compact .dex-partner-v2-tiers h4 {
  margin-top: 18px;
  font-size: clamp(21px, 2vw, 28px);
}

.dex-partner-program-compact .dex-partner-v2-tiers ul {
  gap: 9px;
  margin: 18px 0;
}

.dex-partner-program-compact .dex-partner-v2-tiers li {
  font-size: 12px;
  line-height: 1.32;
}

.dex-partner-program-compact .dex-partner-v2-tiers>article>a {
  min-height: 42px;
  font-size: 12px;
}

@media screen and (max-width: 1100px) {
  .dex-partner-program-compact .dex-partner-value-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .dex-partner-program-compact .dex-partner-core {
    grid-column: 1 / -1;
    grid-row: auto;
    margin: 14px auto 22px;
  }
}

@media screen and (max-width: 767px) {
  .rt-cta-v1 .dex-partner-program-v2.dex-partner-program-compact {
    gap: 38px;
    padding: 42px 14px;
  }

  .dex-partner-program-compact .dex-partner-v2-heading h2 {
    font-size: 34px;
  }

  .dex-partner-program-compact .dex-partner-value-map,
  .dex-partner-program-compact .dex-partner-v2-tiers {
    grid-template-columns: 1fr;
  }

  .dex-partner-program-compact .dex-partner-core {
    width: 160px;
    height: 160px;
    padding: 26px;
  }

  .dex-partner-program-compact .dex-partner-value-map>article {
    min-height: 0;
  }
}

/* Minimal document console with prev/current/next section animation */
.dex-doc-console-bar>span {
  color: #d8e4f8;
}

.dex-doc-console-body-minimal {
  justify-content: flex-start;
  padding: 28px 34px 28px;
}

.dex-doc-console-body-minimal .dex-doc-console-intro {
  margin-bottom: 22px;
}

.dex-doc-generation-flow-minimal {
  margin-top: 0;
  padding: 22px;
  border-radius: 20px;
}

.dex-doc-focus-list-stack {
  display: grid;
  gap: 14px;
  min-height: 250px;
}

.dex-doc-focus-list-stack .dex-doc-focus-item {
  position: relative;
  inset: auto;
  min-height: 78px;
  padding: 16px 18px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  grid-template-columns: 42px 1fr 30px;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition:
    opacity 280ms ease,
    transform 320ms ease,
    border-color 280ms ease,
    background 280ms ease,
    box-shadow 280ms ease;
  pointer-events: none;
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-prev,
.dex-doc-focus-list-stack .dex-doc-focus-item.is-active,
.dex-doc-focus-list-stack .dex-doc-focus-item.is-next {
  opacity: 1;
  pointer-events: auto;
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-prev {
  transform: translateY(0) scale(0.98);
  opacity: 0.45;
  background: rgba(255, 255, 255, 0.03);
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-active {
  transform: translateY(0) scale(1);
  border-color: rgba(var(--dex-yellow-rgb), 0.42);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 36px rgba(6, 20, 59, 0.22);
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-next {
  transform: translateY(0) scale(0.99);
  opacity: 0.72;
  background: rgba(255, 255, 255, 0.05);
}

.dex-doc-focus-list-stack .dex-doc-focus-item>span {
  width: 42px;
  height: 42px;
}

.dex-doc-focus-list-stack .dex-doc-focus-item small {
  margin-bottom: 4px;
}

.dex-doc-focus-list-stack .dex-doc-focus-item strong {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.28;
}

.dex-doc-focus-list-stack .dex-doc-focus-item>i {
  opacity: 0.35;
  transform: scale(0.9);
  transition: opacity 220ms ease, transform 220ms ease;
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-prev>i,
.dex-doc-focus-list-stack .dex-doc-focus-item.is-active>i {
  opacity: 1;
  transform: scale(1);
}

.dex-doc-switcher {
  overflow: visible;
}

.dex-doc-switch {
  position: relative;
}

.dex-doc-switch.is-active::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -34px;
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.25), rgba(var(--dex-blue-rgb), 0.85));
  transform: translateY(-50%);
}

.dex-doc-switch.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -42px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dex-blue);
  box-shadow: 0 0 0 6px rgba(var(--dex-blue-rgb), 0.12);
  transform: translateY(-50%);
}

@media screen and (max-width: 991px) {

  .dex-doc-switch.is-active::before,
  .dex-doc-switch.is-active::after {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .dex-doc-console-body-minimal {
    padding: 22px 18px 20px;
  }

  .dex-doc-generation-flow-minimal {
    padding: 16px;
  }

  .dex-doc-focus-list-stack {
    min-height: 224px;
    gap: 10px;
  }

  .dex-doc-focus-list-stack .dex-doc-focus-item {
    min-height: 70px;
    padding: 14px;
    grid-template-columns: 36px 1fr 26px;
  }

  .dex-doc-focus-list-stack .dex-doc-focus-item>span {
    width: 36px;
    height: 36px;
  }

  .dex-doc-focus-list-stack .dex-doc-focus-item strong {
    font-size: 13px;
  }
}

/* Fix document console step animation clipping after step 04 */
.dex-doc-focus-list-stack {
  position: relative;
  display: block;
  min-height: 250px;
  overflow: hidden;
}

.dex-doc-focus-list-stack .dex-doc-focus-item {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  min-height: 76px;
  padding: 16px 18px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  grid-template-columns: 42px 1fr 30px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.96);
  transition:
    opacity 320ms ease,
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 280ms ease,
    background 280ms ease,
    box-shadow 280ms ease;
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-prev {
  opacity: 0.42;
  pointer-events: auto;
  transform: translateY(calc(-50% - 92px)) scale(0.96);
  background: rgba(255, 255, 255, 0.035);
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
  border-color: rgba(var(--dex-yellow-rgb), 0.45);
  background: rgba(255, 255, 255, 0.085);
  box-shadow: 0 16px 38px rgba(6, 20, 59, 0.22);
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-next {
  opacity: 0.68;
  pointer-events: auto;
  transform: translateY(calc(-50% + 92px)) scale(0.97);
  background: rgba(255, 255, 255, 0.045);
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-complete:not(.is-prev) {
  opacity: 0;
  transform: translateY(calc(-50% - 150px)) scale(0.94);
}

.dex-doc-focus-list-stack .dex-doc-focus-item:not(.is-prev):not(.is-active):not(.is-next):not(.is-complete) {
  opacity: 0;
  transform: translateY(calc(-50% + 150px)) scale(0.94);
}

/* Make active item brighter */
.dex-doc-focus-list-stack .dex-doc-focus-item.is-active>span {
  color: #ffffff;
  border-color: rgba(var(--dex-yellow-rgb), 0.4);
  background: rgba(var(--dex-blue-rgb), 0.28);
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-active>i {
  opacity: 1;
  transform: scale(1);
}

/* Mobile adjustment */
@media screen and (max-width: 767px) {
  .dex-doc-focus-list-stack {
    min-height: 220px;
  }

  .dex-doc-focus-list-stack .dex-doc-focus-item {
    min-height: 68px;
    padding: 13px;
    grid-template-columns: 36px 1fr 26px;
  }

  .dex-doc-focus-list-stack .dex-doc-focus-item.is-prev {
    transform: translateY(calc(-50% - 78px)) scale(0.96);
  }

  .dex-doc-focus-list-stack .dex-doc-focus-item.is-next {
    transform: translateY(calc(-50% + 78px)) scale(0.97);
  }
}

/* Hero buttons: same size, blue at rest, yellow on hover */
.rt-hero-v1 .rt-hero-v1-button-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 22px !important;
  margin: 24px auto 0 !important;
  overflow: visible !important;
}

.rt-hero-v1 .rt-hero-v1-button-wrap .rt-button-v1-main {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

/* Same resting style for BOTH buttons */
.rt-hero-v1 .rt-hero-v1-button-wrap .rt-button-v1-main .rt-button-v1 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: 56px !important;
  min-height: 56px !important;

  padding: 0 24px !important;
  border: 1px solid var(--dex-blue) !important;
  border-radius: 8px !important;

  background: var(--dex-blue) !important;
  color: #ffffff !important;
  box-shadow: none !important;

  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  transition:
    background 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease !important;
}

.rt-hero-v1 .rt-hero-v1-button-wrap .rt-button-v1-main .rt-button-text {
  color: #ffffff !important;
}

/* Same hover style for BOTH buttons */
.rt-hero-v1 .rt-hero-v1-button-wrap .rt-button-v1-main:hover {
  transform: none !important;
}

.rt-hero-v1 .rt-hero-v1-button-wrap .rt-button-v1-main:hover .rt-button-v1 {
  background: var(--dex-yellow) !important;
  border-color: var(--dex-yellow) !important;
  color: #ffffff !important;
  box-shadow: 5px 5px 0 #111827 !important;
}

.rt-hero-v1 .rt-hero-v1-button-wrap .rt-button-v1-main:hover .rt-button-text {
  color: #ffffff !important;
}

/* Remove previous Webflow overlay hover */
.rt-hero-v1 .rt-hero-v1-button-wrap .rt-button-overlay {
  display: none !important;
}

/* Mobile */
@media screen and (max-width: 767px) {
  .rt-hero-v1 .rt-hero-v1-button-wrap {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .rt-hero-v1 .rt-hero-v1-button-wrap .rt-button-v1-main,
  .rt-hero-v1 .rt-hero-v1-button-wrap .rt-button-v1-main .rt-button-v1 {
    width: 100% !important;
    max-width: 300px !important;
    min-width: 0 !important;
  }

  .rt-hero-v1 .rt-hero-v1-button-wrap .rt-button-v1-main .rt-button-v1 {
    height: 54px !important;
    min-height: 54px !important;
  }
}

/* Hero buttons: yellow hover shadow with thin black edge */
.rt-hero-v1 .rt-hero-v1-button-wrap .rt-button-v1-main:hover .rt-button-v1 {
  background: var(--dex-yellow) !important;
  border-color: #111827 !important;
  color: #ffffff !important;

  /* yellow body shadow + thin black line */
  box-shadow:
    5px 5px 0 var(--dex-yellow),
    6px 6px 0 #111827 !important;
}

.rt-hero-v1 .rt-hero-v1-button-wrap .rt-button-v1-main:hover .rt-button-text {
  color: #ffffff !important;
}

/* Hero hover: no black top border, black only behind the shadow */
.rt-hero-v1 .rt-hero-v1-button-wrap .rt-button-v1-main:hover .rt-button-v1 {
  border-color: var(--dex-yellow) !important;
  background: var(--dex-yellow) !important;
  color: #ffffff !important;

  box-shadow:
    5px 5px 0 var(--dex-yellow),
    6px 6px 0 #111827 !important;
}

.rt-hero-v1 .rt-hero-v1-button-wrap .rt-button-v1-main:hover .rt-button-text {
  color: #ffffff !important;
}

/* Hero buttons: slightly shorter width */
.rt-hero-v1 .rt-hero-v1-button-wrap .rt-button-v1-main .rt-button-v1 {
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  height: 54px !important;
  min-height: 54px !important;
}

/* Header restore + Services mega menu fix */
@media screen and (min-width: 992px) {

  /* Restore original-feeling header height */
  .rt-top-nav,
  .rt-nav {
    min-height: 76px !important;
    overflow: visible !important;
  }

  .rt-nav .rt-container-xl,
  .rt-navbar-wrapper {
    min-height: 76px !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .rt-navbar-logo-wrap,
  .rt-navbar-logo {
    display: flex !important;
    align-items: center !important;
    min-height: 76px !important;
  }

  .rt-navbar-logo .dex-header-logo-full {
    width: clamp(150px, 11vw, 180px) !important;
    max-height: 48px !important;
    object-fit: contain !important;
  }

  .rt-navbar-v1-menu-desktop {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(34px, 4vw, 64px) !important;
    height: 76px !important;
  }

  .dex-header-dropdown,
  .rt-navbar-dropdown,
  .rt-navber-dropdown {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 76px !important;
  }

  .rt-navbar-dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 76px !important;
    padding: 0 !important;
  }

  .rt-menu-text,
  .dex-header-access-link {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  /* Prevent dropdowns from being clipped */
  .rt-top-nav,
  .rt-nav,
  .rt-navbar-wrapper,
  .rt-navbar-v1-menu-desktop,
  .dex-header-dropdown {
    overflow: visible !important;
  }

  .dex-header-dropdown>.w-dropdown-list {
    top: 100% !important;
    z-index: 99999 !important;
  }

  /* Simple dropdowns */
  .dex-header-simple-menu {
    min-width: 260px !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .dex-header-simple-menu .rt-nav-menu-link {
    padding: 12px 14px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  /* Services mega menu */
  .dex-header-mega-dropdown {
    position: relative !important;
  }

  .dex-header-mega-menu {
    left: 50% !important;
    width: 940px !important;
    min-width: 940px !important;
    max-width: calc(100vw - 64px) !important;
    padding: 22px !important;
    overflow: visible !important;
    border: 1px solid rgba(var(--dex-blue-rgb), 0.14) !important;
    border-radius: 16px !important;
    background: var(--dex-white) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14) !important;
    transform: translateX(-50%) translateY(10px) !important;
  }

  .dex-header-dropdown:hover>.dex-header-mega-menu,
  .dex-header-dropdown:focus-within>.dex-header-mega-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(10px) !important;
  }

  .dex-header-mega-wrap {
    display: grid !important;
    grid-template-columns: 320px minmax(0, 1fr) !important;
    gap: 28px !important;
    align-items: stretch !important;
  }

  .dex-header-menu-left {
    width: 320px !important;
    min-width: 320px !important;
    min-height: 250px !important;
    padding: 34px 30px !important;
    border-radius: 12px !important;
  }

  .dex-header-menu-left .rt-text-style-h6 {
    font-size: 22px !important;
    line-height: 1.35 !important;
    color: #ffffff !important;
  }

  .dex-header-menu-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(230px, 1fr)) !important;
    gap: 0 28px !important;
    align-items: stretch !important;
  }

  .dex-header-menu-grid .rt-pages-menu-list-wrap {
    display: grid !important;
    gap: 12px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .dex-header-menu-grid .rt-pages-menu-list-wrap.border {
    padding-right: 28px !important;
    border-right: 1px solid rgba(var(--dex-blue-rgb), 0.14) !important;
  }

  .dex-header-mega-menu .rt-pages-menu-link-wrap {
    display: flex !important;
    align-items: center !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border: 0 !important;
  }

  .dex-header-mega-menu .rt-pages-menu-content {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .dex-header-menu-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
  }

  .dex-header-mega-menu .rt-nav-menu-link.rt-padding-off {
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: var(--dex-text) !important;
    white-space: normal !important;
  }
}

/* Final header + Services mega menu alignment fix */
@media screen and (min-width: 992px) {

  /* Header shell */
  .rt-top-nav,
  .rt-nav {
    min-height: 88px !important;
    overflow: visible !important;
  }

  .rt-nav .rt-container-xl {
    max-width: none !important;
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .rt-navbar-wrapper {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) 220px !important;
    align-items: center !important;
    min-height: 88px !important;
    overflow: visible !important;
  }

  /* Logo back to left, like original reference */
  .rt-navbar-logo-wrap {
    grid-column: 1 !important;
    justify-self: start !important;
    position: relative !important;
    z-index: 3 !important;
  }

  .rt-navbar-logo {
    display: flex !important;
    align-items: center !important;
    min-height: 88px !important;
    padding: 0 !important;
  }

  .rt-navbar-logo .dex-header-logo-full {
    width: 180px !important;
    max-width: 180px !important;
    max-height: 48px !important;
    object-fit: contain !important;
  }

  /* Center nav, but do not overlap logo */
  .rt-navbar-v1-menu-desktop {
    grid-column: 2 !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(34px, 4vw, 62px) !important;
    height: 88px !important;
    min-width: 0 !important;
    z-index: 2 !important;
  }

  .dex-header-dropdown,
  .rt-navbar-dropdown,
  .rt-navber-dropdown {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 88px !important;
  }

  .rt-navbar-dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 88px !important;
    padding: 0 !important;
  }

  .rt-menu-text,
  .dex-header-access-link {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .dex-header-access-link {
    min-height: 88px !important;
    padding: 0 !important;
  }

  /* Prevent dropdown clipping */
  .rt-top-nav,
  .rt-nav,
  .rt-navbar-wrapper,
  .rt-navbar-v1-menu-desktop,
  .dex-header-dropdown {
    overflow: visible !important;
  }

  /* Kill the double-white-card effect */
  .dex-header-mega-dropdown>.rt-navbar-menu-dropdown,
  .dex-header-mega-dropdown>.rt-pages-menu,
  .dex-header-mega-menu {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* Make ONE visible mega menu card */
  .dex-header-mega-menu {
    position: absolute !important;
    top: 88px !important;
    left: 50% !important;
    width: min(1040px, calc(100vw - 96px)) !important;
    min-width: min(1040px, calc(100vw - 96px)) !important;
    max-width: calc(100vw - 96px) !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: translateX(-50%) !important;
    z-index: 99999 !important;
  }

  .dex-header-dropdown:hover>.dex-header-mega-menu,
  .dex-header-dropdown:focus-within>.dex-header-mega-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) !important;
  }

  .dex-header-mega-wrap {
    display: grid !important;
    grid-template-columns: 320px minmax(0, 1fr) !important;
    gap: 28px !important;
    align-items: stretch !important;

    width: 100% !important;
    padding: 28px !important;
    border: 1px solid rgba(var(--dex-blue-rgb), 0.14) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14) !important;
  }

  /* Left blue panel */
  .dex-header-menu-left {
    width: 320px !important;
    min-width: 320px !important;
    min-height: 300px !important;
    padding: 34px 30px !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, var(--dex-blue), var(--dex-blue-dark)) !important;
  }

  .dex-header-menu-left .rt-text-style-h6 {
    max-width: 250px !important;
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
  }

  .dex-header-menu-mark {
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 32px !important;
  }

  .dex-header-menu-mark img {
    width: 46px !important;
    height: 46px !important;
    object-fit: contain !important;
  }

  /* Right services grid */
  .dex-header-menu-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(230px, 1fr)) !important;
    gap: 0 32px !important;
    align-items: stretch !important;
    flex: none !important;
    min-width: 0 !important;
  }

  .dex-header-menu-grid.is-single-column {
    grid-template-columns: minmax(280px, 1fr) !important;
  }

  .dex-header-menu-grid .rt-pages-menu-list-wrap {
    display: grid !important;
    gap: 18px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .dex-header-menu-grid .rt-pages-menu-list-wrap.border {
    padding-right: 32px !important;
    border-right: 1px solid rgba(var(--dex-blue-rgb), 0.14) !important;
  }

  .dex-header-mega-menu .rt-pages-menu-link-wrap {
    display: flex !important;
    align-items: center !important;
    min-height: 60px !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .dex-header-mega-menu .rt-pages-menu-link-wrap:hover {
    background: rgba(var(--dex-blue-rgb), 0.045) !important;
  }

  .dex-header-mega-menu .rt-pages-menu-content {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .dex-header-menu-icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 11px !important;
  }

  .dex-header-menu-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .dex-header-mega-menu .rt-nav-menu-link.rt-padding-off {
    color: #000000 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  /* Keep simple dropdowns separate and neat */
  .dex-header-simple-menu {
    top: 88px !important;
    min-width: 260px !important;
    padding: 12px !important;
    border: 1px solid rgba(var(--dex-blue-rgb), 0.12) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12) !important;
  }

  .dex-header-product-menu {
    top: 88px !important;
    min-width: 320px !important;
    padding: 12px !important;
    border: 1px solid rgba(var(--dex-blue-rgb), 0.12) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12) !important;
  }
}

/* Force header logo to true left corner */
@media screen and (min-width: 992px) {
  .rt-top-nav .rt-nav {
    min-height: 88px !important;
  }

  .rt-top-nav .rt-nav>.rt-container-xl,
  .rt-top-nav .rt-nav .rt-container-xl.w-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .rt-top-nav .rt-navbar-wrapper {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-height: 88px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .rt-top-nav .rt-navbar-logo-wrap {
    position: absolute !important;
    left: 28px !important;
    top: 50% !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center !important;
    transform: translateY(-50%) !important;
  }

  .rt-top-nav .rt-navbar-logo {
    display: flex !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: center !important;
    padding: 0 !important;
  }

  .rt-top-nav .rt-navbar-logo .dex-header-logo-full {
    width: 190px !important;
    max-width: 190px !important;
    height: auto !important;
    max-height: 52px !important;
    object-fit: contain !important;
  }

  .rt-top-nav .rt-navbar-v1-menu-desktop {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    display: flex !important;
    height: 88px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(34px, 4vw, 64px) !important;
    margin: 0 auto !important;
  }

  .rt-top-nav .dex-header-dropdown,
  .rt-top-nav .rt-navbar-dropdown,
  .rt-top-nav .rt-navber-dropdown,
  .rt-top-nav .rt-navbar-dropdown-toggle,
  .rt-top-nav .dex-header-access-link {
    min-height: 88px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* ============================================================
   SECTION BLUE TREATMENTS — Autonomous multi-agent delivery &
   DeX delivery system (v20260626)
   ============================================================ */

/* ----------------------------------------------------------
   1. Autonomous multi-agent delivery (.rt-ai-agents-v1)
   ---------------------------------------------------------- */
.rt-ai-agents-v1 {
  background:
    radial-gradient(ellipse at 18% 28%, rgba(37, 99, 235, 0.55), transparent 52%),
    radial-gradient(ellipse at 80% 72%, rgba(251, 191, 36, 0.18), transparent 44%),
    radial-gradient(ellipse at 50% 100%, rgba(37, 99, 235, 0.35), transparent 55%),
    #1E40AF !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

/* Adjust dot grid to show on dark bg */
.rt-ai-agents-v1::before {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
  background-size: 34px 34px, 68px 68px, 68px 68px !important;
}

/* Soft ambient glow ring */
.rt-ai-agents-v1::after {
  content: "";
  position: absolute;
  top: -120px;
  right: -180px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 70%);
  pointer-events: none;
}

/* Heading text on dark bg */
.rt-ai-agents-v1 .dex-engine-heading .rt-sub-text {
  color: #93c5fd !important;
}

.rt-ai-agents-v1 .dex-engine-heading h2 {
  color: #ffffff !important;
}

.rt-ai-agents-v1 .dex-engine-heading h2 .rt-heading-gradient {
  background-image: linear-gradient(90deg, #93c5fd, #fbbf24) !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rt-ai-agents-v1 .dex-engine-heading p {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Cards: keep white/translucent surface, lift border opacity */
.rt-ai-agents-v1 .dex-engine-card {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28) !important;
}

.rt-ai-agents-v1 .dex-engine-card h3 {
  color: #f0f6ff !important;
}

.rt-ai-agents-v1 .dex-engine-card p {
  color: rgba(220, 232, 255, 0.78) !important;
}

/* Avatar keeps its gradient, just slightly brighter border */
.rt-ai-agents-v1 .dex-agent-avatar {
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* Outcome bar on dark bg */
.rt-ai-agents-v1 .dex-engine-outcome {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.rt-ai-agents-v1 .dex-engine-outcome strong {
  color: #f0f6ff !important;
}

.rt-ai-agents-v1 .dex-engine-outcome p {
  color: rgba(220, 232, 255, 0.8) !important;
}

.rt-ai-agents-v1 .dex-engine-outcome small {
  color: #93c5fd !important;
}

.rt-ai-agents-v1 .dex-engine-outcome>span {
  background: #93c5fd !important;
  box-shadow: 0 0 0 8px rgba(147, 197, 253, 0.16) !important;
}

/* ----------------------------------------------------------
   2. DeX delivery system (.dex-delivery-system-section)
   ---------------------------------------------------------- */
.dex-delivery-system-section {
  background:
    radial-gradient(ellipse at 14% 22%, rgba(37, 99, 235, 0.55), transparent 50%),
    radial-gradient(ellipse at 85% 76%, rgba(251, 191, 36, 0.16), transparent 44%),
    radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.35), transparent 48%),
    #1E40AF !important;
  margin: 0 !important;
  border-radius: clamp(20px, 2.5vw, 36px) clamp(20px, 2.5vw, 36px) 0 0 !important;
  overflow: hidden !important;
}

/* Update dot grid for dark bg */
.dex-delivery-system-section::before {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
  background-size: 28px 28px, 56px 56px, 56px 56px !important;
}

/* Section-level headings on dark bg */
.dex-delivery-system-section .dex-delivery-system-heading .rt-sub-text {
  color: #93c5fd !important;
}

.dex-delivery-system-section .dex-delivery-system-heading h2 {
  color: #ffffff !important;
}

.dex-delivery-system-section .dex-delivery-system-heading h2 span {
  color: #93c5fd !important;
  background: linear-gradient(100deg, #93c5fd, #60a5fa 55%, #fbbf24) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.dex-delivery-system-section .dex-delivery-system-heading p {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Sub-section labels */
.dex-delivery-system-section .dex-delivery-phase-section>header small,
.dex-delivery-system-section .dex-core-capabilities>header small {
  color: #93c5fd !important;
}

.dex-delivery-system-section .dex-delivery-phase-section>header h3,
.dex-delivery-system-section .dex-core-capabilities>header h3 {
  color: #f0f6ff !important;
}

/* Workflow board card: glossy white surface */
.dex-delivery-system-section .dex-workflow-board {
  border-color: rgba(255, 255, 255, 0.7) !important;
  background: linear-gradient(160deg, #ffffff 0%, #f0f5ff 100%) !important;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.9) inset,
    0 32px 80px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(37, 99, 235, 0.08) !important;
  border-radius: 16px !important;
}

/* On white background, header text goes dark */
.dex-delivery-system-section .dex-workflow-board>header small,
.dex-delivery-system-section .dex-workflow-board .dex-workflow-board-header small {
  color: var(--dex-blue) !important;
}

.dex-delivery-system-section .dex-workflow-board>header h3,
.dex-delivery-system-section .dex-workflow-board .dex-workflow-board-header h3 {
  color: var(--dex-text) !important;
}

/* Illustration colours need to be vivid against white — keep SVG strokes */
.dex-delivery-system-section .dex-delivery-workflow-step strong {
  color: var(--dex-text-secondary) !important;
}

.dex-delivery-system-section .dex-delivery-workflow-step:hover strong,
.dex-delivery-system-section .dex-delivery-workflow-step.is-active strong {
  color: var(--dex-blue-dark) !important;
  text-shadow: none !important;
}

/* Dynamic desc bar: subtle blue tint on white card */
.dex-delivery-system-section .dex-workflow-dynamic-desc {
  border-color: rgba(37, 99, 235, 0.12) !important;
  background: rgba(37, 99, 235, 0.04) !important;
  color: var(--dex-blue-dark) !important;
}

.dex-delivery-system-section .dex-workflow-dynamic-desc-text {
  color: var(--dex-text-secondary) !important;
}

/* Sibling fade on white bg */
.dex-delivery-system-section .dex-delivery-workflow-track:hover .dex-delivery-workflow-step:not(:hover) {
  opacity: 0.3 !important;
}

/* Workflow board agent count badge */
.dex-delivery-system-section .dex-workflow-agent-count {
  border-color: rgba(147, 197, 253, 0.3) !important;
  background: rgba(147, 197, 253, 0.1) !important;
  color: #93c5fd !important;
}

/* Phase cards: solid white surface on dark bg for clear separation */
.dex-delivery-system-section .dex-delivery-phase-content {
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 24px 60px rgba(8, 18, 46, 0.35), 0 0 0 1px rgba(37, 99, 235, 0.08) !important;
}

.dex-delivery-system-section .dex-delivery-phase-content>small {
  color: var(--dex-blue) !important;
}

.dex-delivery-system-section .dex-delivery-phase-content h4 {
  color: var(--dex-text) !important;
}

.dex-delivery-system-section .dex-delivery-phase-content p {
  color: var(--dex-text-secondary) !important;
}

.dex-delivery-system-section .dex-delivery-phase-content li span {
  color: var(--dex-text-secondary) !important;
}

.dex-delivery-system-section .dex-delivery-phase-content footer {
  color: var(--dex-blue-dark) !important;
  border-top-color: rgba(37, 99, 235, 0.12) !important;
}

/* Phase marker: smaller bubble, soft glow instead of hard ring */
.dex-delivery-system-section .dex-delivery-phase-marker span,
.dex-delivery-system-section .dex-delivery-phase-card:nth-child(even) .dex-delivery-phase-marker span {
  width: 44px !important;
  height: 44px !important;
  border: none !important;
  font-size: 12px !important;
}

.dex-delivery-system-section .dex-delivery-phase-marker span {
  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.18),
    0 0 18px rgba(96, 165, 250, 0.45) !important;
}

.dex-delivery-system-section .dex-delivery-phase-card:nth-child(even) .dex-delivery-phase-marker span {
  box-shadow:
    0 0 0 4px rgba(251, 191, 36, 0.18),
    0 0 18px rgba(251, 191, 36, 0.5) !important;
}

/* Connector line: glowing gradient track with animated shimmer */
.dex-delivery-system-section .dex-delivery-phase-grid {
  overflow: visible;
}

.dex-delivery-system-section .dex-delivery-phase-grid::before {
  top: 21px !important;
  /* centre of 44px bubble */
  height: 3px !important;
  right: 12.5% !important;
  left: 12.5% !important;
  background: linear-gradient(90deg,
      rgba(96, 165, 250, 0.0) 0%,
      rgba(96, 165, 250, 0.85) 18%,
      rgba(251, 191, 36, 0.95) 82%,
      rgba(251, 191, 36, 0.0) 100%) !important;
  border-radius: 999px !important;
  box-shadow:
    0 0 12px rgba(96, 165, 250, 0.45),
    0 0 22px rgba(251, 191, 36, 0.35) !important;
  overflow: visible !important;
}

/* Shimmer: travelling highlight along the line */
.dex-delivery-system-section .dex-delivery-phase-grid::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 12.5%;
  right: 12.5%;
  height: 7px;
  pointer-events: none;
  background: linear-gradient(90deg,
      transparent 0%,
      transparent 40%,
      rgba(255, 255, 255, 0.85) 50%,
      transparent 60%,
      transparent 100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  filter: blur(2px);
  mix-blend-mode: screen;
  animation: dexPhaseShimmer 3.8s ease-in-out infinite;
  border-radius: 999px;
}

@keyframes dexPhaseShimmer {
  0% {
    background-position: -60% 0;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    background-position: 160% 0;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dex-delivery-system-section .dex-delivery-phase-grid::after {
    animation: none;
    opacity: 0;
  }
}

/* Core capability cards: translucent surface */
.dex-delivery-system-section .dex-core-capability-card {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28) !important;
}

.dex-delivery-system-section .dex-core-capability-card h4 {
  color: #f0f6ff !important;
}

.dex-delivery-system-section .dex-core-capability-card p {
  color: rgba(210, 228, 255, 0.82) !important;
}

.dex-delivery-system-section .dex-workflow-board>header>span {
  border-color: rgba(147, 197, 253, 0.3) !important;
  background: rgba(147, 197, 253, 0.1) !important;
  color: #93c5fd !important;
}

/* Workflow row: raised square tiles matching workflow-animation-update 2.patch */
.dex-delivery-system-section .dex-workflow-board {
  padding: clamp(34px, 4.2vw, 58px) clamp(24px, 4vw, 54px) !important;
  background: linear-gradient(160deg, #ffffff 0%, #f8fbff 100%) !important;
}

.dex-delivery-system-section .dex-workflow-board-header {
  align-items: flex-start !important;
}

.dex-delivery-system-section .dex-workflow-agent-count {
  color: var(--dex-blue-dark) !important;
  background: rgba(var(--dex-blue-rgb), 0.045) !important;
}

.dex-delivery-system-section .dex-delivery-workflow-track {
  gap: clamp(10px, 1.4vw, 22px) !important;
  margin-top: clamp(42px, 5vw, 70px) !important;
}

.dex-delivery-system-section .dex-workflow-pipeline-container {
  top: 48px !important;
  right: 5.5% !important;
  left: 5.5% !important;
  height: 16px !important;
}

.dex-delivery-system-section .dex-pipeline-line-bg {
  stroke: rgba(var(--dex-blue-rgb), 0.18) !important;
  stroke-width: 3px !important;
}

.dex-delivery-system-section .dex-pipeline-line-flow {
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 5px rgba(var(--dex-yellow-rgb), 0.42)) !important;
}

.dex-delivery-system-section .dex-delivery-workflow-step {
  padding: 0 4px 18px !important;
  opacity: 1 !important;
}

.dex-delivery-system-section .dex-delivery-workflow-track:hover .dex-delivery-workflow-step:not(:hover) {
  opacity: 0.78 !important;
}

.dex-delivery-system-section .dex-workflow-card-visual {
  width: clamp(72px, 6vw, 96px) !important;
  height: clamp(72px, 6vw, 96px) !important;
  margin-bottom: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.44), transparent 28%),
    linear-gradient(145deg, #4f82f8, var(--dex-blue) 48%, var(--dex-blue-dark)) !important;
  box-shadow:
    0 5px 0 #16368e,
    0 14px 30px rgba(var(--dex-blue-rgb), 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
  filter: none !important;
  pointer-events: none;
  transform: none !important;
}

.dex-delivery-system-section .dex-delivery-workflow-step:nth-child(odd) .dex-workflow-card-visual {
  color: #111827 !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.68), transparent 28%),
    linear-gradient(145deg, #ffe58a, var(--dex-yellow) 54%, #e3a20d) !important;
  box-shadow:
    0 5px 0 #b77c00,
    0 14px 30px rgba(var(--dex-yellow-rgb), 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

.dex-delivery-system-section .dex-delivery-workflow-step:nth-child(even) .dex-workflow-card-visual {
  color: #ffffff !important;
}

.dex-delivery-system-section .dex-delivery-workflow-step:hover .dex-workflow-card-visual,
.dex-delivery-system-section .dex-delivery-workflow-step.is-active .dex-workflow-card-visual,
.dex-delivery-system-section .dex-delivery-workflow-step.is-active:not(:hover) .dex-workflow-card-visual {
  transform: translateY(-5px) scale(1.08) !important;
}

.dex-delivery-system-section .dex-delivery-workflow-step.is-active:nth-child(odd) .dex-workflow-card-visual,
.dex-delivery-system-section .dex-delivery-workflow-step:hover:nth-child(odd) .dex-workflow-card-visual {
  box-shadow:
    0 5px 0 #b77c00,
    0 0 28px rgba(251, 191, 36, 0.58),
    0 16px 34px rgba(var(--dex-yellow-rgb), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.dex-delivery-system-section .dex-delivery-workflow-step.is-active:nth-child(even) .dex-workflow-card-visual,
.dex-delivery-system-section .dex-delivery-workflow-step:hover:nth-child(even) .dex-workflow-card-visual {
  box-shadow:
    0 5px 0 #16368e,
    0 0 28px rgba(37, 99, 235, 0.62),
    0 16px 34px rgba(var(--dex-blue-rgb), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.44) !important;
}

.dex-delivery-system-section .dex-workflow-icon-mark,
.dex-delivery-system-section .dex-workflow-icon-mark svg {
  display: block;
  width: clamp(28px, 2.6vw, 38px);
  height: clamp(28px, 2.6vw, 38px);
}

.dex-delivery-system-section .dex-workflow-icon-mark svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.14));
}

.dex-delivery-system-section .dex-workflow-card-badge {
  top: -8px !important;
  left: -8px !important;
  min-width: 24px !important;
  height: 24px !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  font-size: 10px !important;
}

.dex-delivery-system-section .dex-workflow-card-body strong,
.dex-delivery-system-section .dex-delivery-workflow-step strong {
  color: #111827 !important;
  font-size: clamp(13px, 1.1vw, 16px) !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
  text-shadow: none !important;
}

.dex-delivery-system-section .dex-workflow-dynamic-desc {
  max-width: 780px !important;
  margin-top: clamp(36px, 5vw, 72px) !important;
  border-color: rgba(var(--dex-blue-rgb), 0.14) !important;
  background: rgba(var(--dex-blue-rgb), 0.045) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7) !important;
}

.dex-delivery-system-section .dex-workflow-dynamic-desc i {
  background: var(--dex-blue) !important;
  box-shadow: 0 0 0 6px rgba(var(--dex-blue-rgb), 0.12) !important;
}

.dex-delivery-system-section .dex-workflow-dynamic-desc-text {
  color: var(--dex-blue-dark) !important;
  font-size: clamp(13px, 1.2vw, 16px) !important;
  font-weight: 800 !important;
  text-align: center !important;
}

@media screen and (max-width: 991px) {
  .dex-delivery-system-section .dex-delivery-workflow-track {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 26px 12px !important;
  }

  .dex-delivery-system-section .dex-workflow-pipeline-container {
    display: none !important;
  }
}

@media screen and (max-width: 575px) {
  .dex-delivery-system-section .dex-workflow-board {
    padding: 30px 16px !important;
  }

  .dex-delivery-system-section .dex-workflow-board-header {
    display: block !important;
  }

  .dex-delivery-system-section .dex-workflow-agent-count {
    display: inline-flex !important;
    margin-top: 18px !important;
  }

  .dex-delivery-system-section .dex-delivery-workflow-track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   BLUEPRINT SECTION — scrolling step list + equal-height panels
   ============================================================ */

/* --- 2-column layout, panels stretch to same height --- */
.dex-doc-flow-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.68fr) !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 52px !important;
  align-items: stretch !important;
}

/* --- Console stage: fixed height, both panels match --- */
.dex-doc-console-stage {
  display: grid !important;
  height: 610px !important;
}

.dex-doc-console {
  height: 100% !important;
  overflow: hidden !important;
}

/* Console body: flex column so list takes remaining space */
.dex-doc-console-body {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100% - 45px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Hide the heading (icon + "PLAN / BUILD BLUEPRINT" + title) —
   right panel already shows which doc is active */
.dex-doc-console-intro {
  display: none !important;
}

/* Generation flow: flex column, takes remaining height */
.dex-doc-generation-flow-minimal {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* --- Focus list: scrollable, shows ALL steps --- */
.dex-doc-focus-list-stack {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  gap: 7px !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  /* padding gives scaled items room so corners aren't clipped */
  padding: 6px 10px 10px !important;
  scrollbar-width: none !important;
}

.dex-doc-focus-list-stack::-webkit-scrollbar {
  display: none !important;
}

/* All items: in-flow, scaled down + dimmed, smooth transition */
.dex-doc-focus-list-stack .dex-doc-focus-item {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  opacity: 0.30 !important;
  transform: scale(0.95) !important;
  transform-origin: center center !important;
  pointer-events: auto !important;
  min-height: 0 !important;
  padding: 11px 15px !important;
  flex-shrink: 0 !important;
  transition:
    opacity 320ms ease,
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 280ms ease,
    background 280ms ease,
    box-shadow 320ms ease !important;
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-complete {
  opacity: 0.45 !important;
  transform: scale(0.96) !important;
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-prev {
  opacity: 0.62 !important;
  transform: scale(0.975) !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-next {
  opacity: 0.52 !important;
  transform: scale(0.975) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Active step: scale up + bold highlight */
.dex-doc-focus-list-stack .dex-doc-focus-item.is-active {
  opacity: 1 !important;
  transform: scale(1.025) !important;
  border-color: rgba(var(--dex-yellow-rgb), 0.55) !important;
  background: rgba(255, 255, 255, 0.11) !important;
  box-shadow:
    0 0 0 1px rgba(var(--dex-yellow-rgb), 0.22),
    0 14px 40px rgba(6, 20, 59, 0.28) !important;
}

/* Active: brighter number badge */
.dex-doc-focus-list-stack .dex-doc-focus-item.is-active>span {
  color: #ffffff !important;
  border-color: rgba(var(--dex-yellow-rgb), 0.5) !important;
  background: rgba(var(--dex-blue-rgb), 0.3) !important;
}

/* Active: bright text */
.dex-doc-focus-list-stack .dex-doc-focus-item.is-active strong {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-active small {
  color: rgba(255, 255, 255, 0.6) !important;
}

.dex-doc-focus-list-stack .dex-doc-focus-item:not(.is-prev):not(.is-active):not(.is-next):not(.is-complete) {
  opacity: 0.28 !important;
  transform: scale(0.95) !important;
}

/* Documentation console: light hero-style surface */
.dex-doc-console {
  border-color: rgba(var(--dex-blue-rgb), 0.14) !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(var(--dex-yellow-rgb), 0.2), transparent 28%),
    radial-gradient(circle at 12% 92%, rgba(var(--dex-blue-rgb), 0.1), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96) 56%, rgba(255, 251, 235, 0.92)) !important;
  box-shadow:
    0 22px 55px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.dex-doc-console::before {
  background:
    radial-gradient(circle, rgba(var(--dex-blue-rgb), 0.12) 1px, transparent 1.5px) !important;
  background-size: 22px 22px !important;
  opacity: 0.45 !important;
}

.dex-doc-console-bar {
  border-bottom-color: rgba(var(--dex-blue-rgb), 0.1) !important;
  color: var(--dex-text-secondary) !important;
  background: rgba(255, 255, 255, 0.74) !important;
}

.dex-doc-console-bar>span,
.dex-doc-console-bar>b {
  color: var(--dex-text-secondary) !important;
}

.dex-doc-console-bar>b i {
  background: var(--dex-yellow) !important;
  box-shadow: 0 0 0 6px rgba(var(--dex-yellow-rgb), 0.16) !important;
}

.dex-doc-window-dots i {
  background: rgba(var(--dex-blue-rgb), 0.18) !important;
}

.dex-doc-window-dots i:nth-child(2) {
  background: rgba(var(--dex-yellow-rgb), 0.75) !important;
}

.dex-doc-window-dots i:nth-child(3) {
  background: rgba(var(--dex-blue-rgb), 0.85) !important;
}

.dex-doc-console-body {
  color: var(--dex-text) !important;
}

.dex-doc-generation-flow,
.dex-doc-generation-flow-minimal {
  border-color: rgba(var(--dex-blue-rgb), 0.13) !important;
  background:
    linear-gradient(135deg, rgba(var(--dex-blue-rgb), 0.055), rgba(var(--dex-yellow-rgb), 0.09)),
    rgba(255, 255, 255, 0.76) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.dex-doc-flow-head {
  color: var(--dex-text-secondary) !important;
}

.dex-doc-flow-head b {
  color: var(--dex-blue) !important;
}

.dex-doc-flow-progress {
  background: rgba(var(--dex-blue-rgb), 0.09) !important;
}

.dex-doc-flow-progress i {
  background: linear-gradient(90deg, var(--dex-blue), var(--dex-yellow)) !important;
  box-shadow: none !important;
  transition: width 620ms ease !important;
}

.dex-doc-focus-list-stack .dex-doc-focus-item {
  border-color: rgba(var(--dex-blue-rgb), 0.08) !important;
  color: var(--dex-text) !important;
  background: rgba(255, 255, 255, 0.55) !important;
  box-shadow: none !important;
  transition:
    opacity 420ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 360ms ease,
    background 360ms ease,
    box-shadow 420ms ease !important;
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-prev {
  background: rgba(var(--dex-blue-rgb), 0.045) !important;
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-next {
  background: rgba(var(--dex-yellow-rgb), 0.075) !important;
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-active {
  border-color: rgba(var(--dex-yellow-rgb), 0.45) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(var(--dex-yellow-rgb), 0.13)) !important;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.08),
    inset 0 0 0 1px rgba(var(--dex-yellow-rgb), 0.18) !important;
}

.dex-doc-focus-list-stack .dex-doc-focus-item>span {
  border-color: rgba(var(--dex-blue-rgb), 0.2) !important;
  color: var(--dex-blue) !important;
  background: rgba(var(--dex-blue-rgb), 0.08) !important;
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-active>span {
  border-color: rgba(var(--dex-yellow-rgb), 0.55) !important;
  color: var(--dex-text) !important;
  background: var(--dex-yellow) !important;
}

.dex-doc-focus-list-stack .dex-doc-focus-item strong,
.dex-doc-focus-list-stack .dex-doc-focus-item.is-active strong {
  color: var(--dex-text) !important;
}

.dex-doc-focus-list-stack .dex-doc-focus-item small,
.dex-doc-focus-list-stack .dex-doc-focus-item.is-active small {
  color: var(--dex-text-muted) !important;
}

.dex-doc-focus-list-stack .dex-doc-focus-item>i {
  color: #ffffff !important;
  background: var(--dex-blue) !important;
}

.dex-doc-focus-list-stack .dex-doc-focus-item.is-prev>i,
.dex-doc-focus-list-stack .dex-doc-focus-item.is-active>i {
  color: var(--dex-text) !important;
  background: var(--dex-yellow) !important;
}

/* Right panel: stretch to match console height */
.dex-doc-switcher {
  height: 100% !important;
  box-sizing: border-box !important;
  gap: 6px !important;
  padding: 14px !important;
  border-radius: 20px !important;
}

/* --- Right panel: "Select a blueprint" list --- */
.dex-doc-switcher {
  gap: 6px !important;
  padding: 14px !important;
  border-radius: 20px !important;
}

.dex-doc-switcher-head {
  padding: 6px 8px 12px !important;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  margin-bottom: 4px !important;
}

.dex-doc-switcher-head small {
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 4px !important;
}

.dex-doc-switcher-head strong {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.dex-doc-switch {
  grid-template-columns: 48px 1fr !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border-radius: 13px !important;
  opacity: 0.52;
  transition: opacity 320ms ease, border-color 320ms ease,
    box-shadow 320ms ease, background 320ms ease !important;
}

.dex-doc-switch-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 13px !important;
}

.dex-doc-switch-icon svg {
  width: 22px !important;
  height: 22px !important;
}

.dex-doc-switch.is-active {
  opacity: 1 !important;
  border-color: rgba(var(--dex-blue-rgb), 0.28) !important;
  background: #fff !important;
  box-shadow: 0 8px 28px rgba(var(--dex-blue-rgb), 0.13) !important;
}

.dex-doc-switch small {
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 3px !important;
}

.dex-doc-switch h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  line-height: 1.25 !important;
}

.dex-doc-switch.is-active h3 {
  font-weight: 700 !important;
}

/* ============================================================
   CAPABILITIES HIGHWAY ANIMATION — extracted from patch
   (workflow-animation-update.patch, delivery system section only)
   ============================================================ */

.dex-core-capabilities-header {
  display: block !important;
  text-align: center !important;
  margin-bottom: 40px !important;
}

.dex-core-capabilities-header h3 {
  margin: 0 0 16px !important;
  color: var(--dex-text) !important;
  font-size: clamp(28px, 3.5vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

.dex-core-capabilities-header h3 .dex-heading-gradient {
  background: linear-gradient(90deg, var(--dex-blue), var(--dex-blue-dark)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.dex-core-capabilities-sub {
  max-width: 720px !important;
  margin: 0 auto !important;
  color: var(--dex-text-secondary) !important;
  font-size: 15px !important;
  font-weight: 550 !important;
  line-height: 1.5 !important;
}

/* Shapeless Minimalist Node Highway Track Container */
.dex-capabilities-track {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 40px !important;
  margin-top: 48px !important;
  padding: 40px 16px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  z-index: 2 !important;
  background: none !important;
  border: none !important;
}

.dex-capabilities-track::-webkit-scrollbar {
  display: none !important;
}

/* Neural Laser Highway Line running horizontally behind cards */
.dex-highway-line {
  position: absolute !important;
  top: 120px !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--dex-blue), var(--dex-yellow), var(--dex-blue)) !important;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.4), 0 0 24px rgba(251, 191, 36, 0.3) !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Shapeless Minimalist Capability Card Node */
.dex-core-capability-card.dex-capabilities-step-card {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 10px !important;
  min-height: auto !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  scroll-snap-align: center !important;
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease !important;
}

/* Revealed but Inactive state */
.dex-core-capability-card.dex-capabilities-step-card.is-visible {
  opacity: 0.45 !important;
  transform: translateY(0) !important;
}

.dex-core-capability-card.dex-capabilities-step-card.is-visible .dex-cap-content p {
  opacity: 0.6 !important;
  transition: opacity 0.4s ease !important;
}

/* Active state: fully illuminated, scaled up */
.dex-core-capability-card.dex-capabilities-step-card.is-active {
  opacity: 1 !important;
  transform: scale(1.1) !important;
  z-index: 5 !important;
}

.dex-core-capability-card.dex-capabilities-step-card.is-active .dex-cap-content p {
  opacity: 1 !important;
  color: var(--dex-text-secondary) !important;
}

/* Hover acts like active state */
.dex-core-capability-card.dex-capabilities-step-card.is-visible:hover {
  opacity: 1 !important;
  transform: scale(1.1) !important;
  z-index: 5 !important;
}

.dex-core-capability-card.dex-capabilities-step-card.is-visible:hover .dex-cap-content p {
  opacity: 1 !important;
  color: var(--dex-text-secondary) !important;
}

/* Remove default card pseudo-elements */
.dex-core-capability-card.dex-capabilities-step-card::before,
.dex-core-capability-card.dex-capabilities-step-card::after {
  display: none !important;
}

/* Highway Dot Connection Point */
.dex-highway-dot {
  width: 8px !important;
  height: 8px !important;
  background: var(--dex-blue) !important;
  border-radius: 50% !important;
  margin: 16px 0 !important;
  z-index: 4 !important;
  position: relative !important;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
  box-shadow: 0 0 6px var(--dex-blue) !important;
}

.dex-core-capability-card.dex-capabilities-step-card.is-active .dex-highway-dot,
.dex-core-capability-card.dex-capabilities-step-card:hover .dex-highway-dot {
  background: var(--dex-yellow) !important;
  transform: scale(1.5) !important;
  box-shadow: 0 0 10px var(--dex-yellow), 0 0 20px var(--dex-yellow) !important;
  animation: dexDotPulse 0.8s infinite alternate !important;
}

@keyframes dexDotPulse {
  0% {
    transform: scale(1.2);
    box-shadow: 0 0 8px var(--dex-yellow);
  }

  100% {
    transform: scale(1.8);
    box-shadow: 0 0 18px var(--dex-yellow), 0 0 28px var(--dex-yellow);
  }
}

/* Re-engineered High-Contrast 3D-Style Vector Wireframe Container */
.dex-cap-3d-visual {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.22) 0%, rgba(7, 18, 38, 0.96) 100%) !important;
  border: 1.5px solid rgba(37, 99, 235, 0.5) !important;
  box-shadow: 0 8px 24px rgba(7, 18, 38, 0.6), inset 0 2px 6px rgba(255, 255, 255, 0.12) !important;
  overflow: visible !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease !important;
}

/* Card Content */
.dex-cap-content h4 {
  margin: 8px 0 !important;
  color: var(--dex-text) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  transition: color 0.3s ease !important;
}

.dex-cap-content p {
  margin: 0 !important;
  color: var(--dex-text-secondary) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  overflow: visible !important;
  display: block !important;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

/* Hover effects */
.dex-core-capability-card.dex-capabilities-step-card:hover .dex-cap-3d-visual,
.dex-core-capability-card.dex-capabilities-step-card.is-active .dex-cap-3d-visual {
  transform: scale(1.15) !important;
  border-color: rgba(37, 99, 235, 0.7) !important;
  background: radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.3) 0%, rgba(11, 28, 58, 0.98) 100%) !important;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.4), inset 0 2px 8px rgba(255, 255, 255, 0.18) !important;
}

/* 1. AGENTIC ORCHESTRATION VISUAL */
.dex-visual-agentic .dex-3d-node {
  position: absolute !important;
  top: 50%;
  left: 50% !important;
  width: 14px;
  height: 14px !important;
  margin: -7px 0 0 -7px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, var(--dex-blue) 60%, var(--dex-blue-dark) 100%) !important;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.8) !important;
  animation: dexNodePulse 2s ease-in-out infinite !important;
}

.dex-visual-agentic .dex-3d-ring {
  position: absolute !important;
  top: 50%;
  left: 50% !important;
  border-radius: 50% !important;
  border: 1px dashed rgba(37, 99, 235, 0.8) !important;
}

.dex-visual-agentic .ring-1 {
  width: 36px;
  height: 36px !important;
  margin: -18px 0 0 -18px !important;
  transform: rotateX(65deg) rotateY(15deg) !important;
  animation: dexOrbitRotate1 8s linear infinite !important;
}

.dex-visual-agentic .ring-2 {
  width: 46px;
  height: 46px !important;
  margin: -23px 0 0 -23px !important;
  border-color: rgba(251, 191, 36, 0.8) !important;
  transform: rotateX(65deg) rotateY(-35deg) !important;
  animation: dexOrbitRotate2 10s linear infinite !important;
}

@keyframes dexNodePulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.95);
  }
}

@keyframes dexOrbitRotate1 {
  from {
    transform: rotateX(65deg) rotateY(15deg) rotateZ(0deg);
  }

  to {
    transform: rotateX(65deg) rotateY(15deg) rotateZ(360deg);
  }
}

@keyframes dexOrbitRotate2 {
  from {
    transform: rotateX(65deg) rotateY(-35deg) rotateZ(360deg);
  }

  to {
    transform: rotateX(65deg) rotateY(-35deg) rotateZ(0deg);
  }
}

/* 2. FULL-STACK AUTOMATION VISUAL */
.dex-visual-fullstack {
  perspective: 200px !important;
}

.dex-visual-fullstack .dex-3d-plate {
  position: absolute !important;
  left: 50% !important;
  width: 32px;
  height: 14px !important;
  margin-left: -16px !important;
  border-radius: 2.5px !important;
  background: rgba(37, 99, 235, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  transform: rotateX(60deg) rotateZ(45deg) !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  animation: dexPlateFloat 3s ease-in-out infinite !important;
}

.dex-visual-fullstack .plate-1 {
  top: 10px !important;
  animation-delay: -0.6s !important;
  background: rgba(251, 191, 36, 0.75) !important;
}

.dex-visual-fullstack .plate-2 {
  top: 20px !important;
  animation-delay: -0.3s !important;
}

.dex-visual-fullstack .plate-3 {
  top: 30px !important;
}

@keyframes dexPlateFloat {

  0%,
  100% {
    transform: rotateX(60deg) rotateZ(45deg) translateY(0);
    opacity: 0.85;
  }

  50% {
    transform: rotateX(60deg) rotateZ(45deg) translateY(-5px);
    opacity: 1;
    border-color: #ffffff;
  }
}

/* 3. SELF-HEALING QA VISUAL */
.dex-visual-selfhealing .dex-3d-shield {
  position: absolute !important;
  top: 50%;
  left: 50% !important;
  width: 20px;
  height: 24px !important;
  margin: -12px 0 0 -10px !important;
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, var(--dex-blue) 70%, var(--dex-blue-dark) 100%) !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 70%, 50% 100%, 0% 70%, 0% 25%) !important;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.5) !important;
  z-index: 2 !important;
  animation: dexShieldFloat 2.5s ease-in-out infinite !important;
}

.dex-visual-selfhealing .dex-3d-pulse {
  position: absolute !important;
  top: 50%;
  left: 50% !important;
  width: 12px;
  height: 12px !important;
  margin: -6px 0 0 -6px !important;
  border: 2px solid var(--dex-yellow) !important;
  border-radius: 50% !important;
  opacity: 0 !important;
  z-index: 1 !important;
  animation: dexRadarPulse 2s cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
}

.dex-visual-selfhealing .pulse-2 {
  animation-delay: 1s !important;
  border-color: var(--dex-blue) !important;
}

@keyframes dexShieldFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes dexRadarPulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }

  100% {
    transform: scale(3.5);
    opacity: 0;
  }
}

/* 4. GOVERNED CI/CD VISUAL */
.dex-visual-cicd .dex-3d-pipe-node {
  position: absolute !important;
  top: 50% !important;
  width: 8px;
  height: 8px !important;
  margin-top: -4px !important;
  border-radius: 50% !important;
  background: var(--dex-blue) !important;
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.6) !important;
}

.dex-visual-cicd .node-left {
  left: 10px !important;
}

.dex-visual-cicd .node-right {
  right: 10px !important;
  background: var(--dex-yellow) !important;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.6) !important;
}

.dex-visual-cicd .dex-3d-pipe-path {
  position: absolute !important;
  top: 50%;
  left: 16px;
  right: 16px !important;
  height: 3px !important;
  margin-top: -1.5px !important;
  background: linear-gradient(90deg, var(--dex-blue), var(--dex-yellow)) !important;
  opacity: 0.85 !important;
}

.dex-visual-cicd .dex-3d-spark {
  position: absolute !important;
  top: 50% !important;
  width: 5px;
  height: 5px !important;
  margin: -2.5px 0 0 -2.5px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 8px #ffffff, 0 0 14px var(--dex-yellow) !important;
  animation: dexLaserSpark 3s ease-in-out infinite !important;
}

@keyframes dexLaserSpark {
  0% {
    left: 12px;
  }

  50% {
    left: 48px;
  }

  100% {
    left: 12px;
  }
}

/* 5. PREDICTIVE MONITORING VISUAL */
.dex-visual-monitoring .dex-wave-svg {
  position: absolute !important;
  top: 12px;
  left: 3px !important;
  width: 54px;
  height: 36px !important;
  overflow: visible !important;
}

.dex-visual-monitoring .dex-wave-path {
  fill: none !important;
  stroke-width: 3.5 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 180 !important;
}

.dex-visual-monitoring .wave-path-1 {
  stroke: var(--dex-blue) !important;
  animation: dexWaveRun1 3s linear infinite, dexColorCycle1 6s linear infinite !important;
}

.dex-visual-monitoring .wave-path-2 {
  stroke: var(--dex-yellow) !important;
  opacity: 0.8 !important;
  animation: dexWaveRun2 3s linear infinite, dexColorCycle2 6s linear infinite !important;
}

@keyframes dexWaveRun1 {
  0% {
    stroke-dashoffset: 360;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes dexWaveRun2 {
  0% {
    stroke-dashoffset: -360;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes dexColorCycle1 {

  0%,
  100% {
    stroke: var(--dex-blue);
  }

  50% {
    stroke: #06b6d4;
  }
}

@keyframes dexColorCycle2 {

  0%,
  100% {
    stroke: var(--dex-yellow);
  }

  50% {
    stroke: #10b981;
  }
}

/* 6. POLYGLOT STACK VISUAL */
.dex-polyglot-svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.dex-polyglot-svg .poly-layer {
  stroke-width: 2.5 !important;
  stroke-linejoin: round !important;
  transition: transform 0.3s ease, stroke 0.3s ease !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

.dex-polyglot-svg .poly-layer-1 {
  fill: rgba(37, 99, 235, 0.75) !important;
  stroke: #ffffff !important;
  animation: polyFloat1 3s ease-in-out infinite !important;
}

.dex-polyglot-svg .poly-layer-2 {
  fill: rgba(251, 191, 36, 0.85) !important;
  stroke: #ffffff !important;
  animation: polyFloat2 3s ease-in-out infinite !important;
  animation-delay: -1s !important;
}

.dex-polyglot-svg .poly-layer-3 {
  fill: rgba(30, 64, 175, 0.85) !important;
  stroke: #ffffff !important;
  animation: polyFloat3 3s ease-in-out infinite !important;
  animation-delay: -2s !important;
}

.dex-polyglot-svg .poly-edge {
  stroke: var(--dex-blue) !important;
  stroke-width: 2.5 !important;
  opacity: 0.9 !important;
  stroke-linecap: round !important;
}

.dex-polyglot-svg .poly-connect {
  stroke: var(--dex-yellow) !important;
  stroke-width: 2.5 !important;
  opacity: 0.9 !important;
  stroke-dasharray: 2 2 !important;
  stroke-linecap: round !important;
}

@keyframes polyFloat1 {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes polyFloat2 {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1.5px);
  }
}

@keyframes polyFloat3 {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(0px);
  }
}

/* RESPONSIVE BREAKPOINTS */
@media (min-width: 992px) {
  .dex-core-capability-card.dex-capabilities-step-card {
    flex: 0 0 calc((100% - 200px) / 6) !important;
    min-width: 170px !important;
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  .dex-core-capability-grid.dex-capabilities-track {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px 24px !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
  }

  .dex-core-capability-card.dex-capabilities-step-card {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 8px !important;
  }

  .dex-highway-line,
  .dex-highway-dot {
    display: none !important;
  }

  .dex-capabilities-track {
    padding: 24px 8px !important;
  }
}

@media (max-width: 575px) {
  .dex-core-capability-grid.dex-capabilities-track {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    position: relative !important;
    padding-left: 64px !important;
    padding-right: 16px !important;
  }

  .dex-core-capability-card.dex-capabilities-step-card {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 0 !important;
  }

  .dex-highway-line {
    display: block !important;
    position: absolute !important;
    left: 32px !important;
    top: 20px !important;
    bottom: 20px !important;
    width: 2px !important;
    height: calc(100% - 40px) !important;
    background: linear-gradient(180deg, var(--dex-blue), var(--dex-yellow), var(--dex-blue)) !important;
    transform: translateX(-50%) !important;
    z-index: 1 !important;
  }

  .dex-highway-dot {
    display: block !important;
    position: absolute !important;
    left: 32px !important;
    top: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    z-index: 4 !important;
  }

  .dex-core-capability-card.dex-capabilities-step-card.is-active .dex-highway-dot,
  .dex-core-capability-card.dex-capabilities-step-card:hover .dex-highway-dot {
    transform: translate(-50%, -50%) scale(1.5) !important;
    animation: dexDotPulseMobile 0.8s infinite alternate !important;
  }

  @keyframes dexDotPulseMobile {
    0% {
      transform: translate(-50%, -50%) scale(1.2);
      box-shadow: 0 0 8px var(--dex-yellow);
    }

    100% {
      transform: translate(-50%, -50%) scale(1.8);
      box-shadow: 0 0 18px var(--dex-yellow), 0 0 28px var(--dex-yellow);
    }
  }

  .dex-cap-content {
    flex: 1 !important;
  }

  .dex-cap-3d-visual {
    flex-shrink: 0 !important;
  }

  .dex-core-capabilities-header h3 {
    font-size: 24px !important;
  }
}

/* ── Handover Cards — complete rework ──────────────────────────── */

/* Grid: 5 equal columns */
.dex-handover-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 48px;
}

/* Base card — dark glass */
.dex-handover-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: border-color 280ms ease, transform 280ms ease, box-shadow 280ms ease;
}

.dex-handover-card:hover {
  border-color: rgba(var(--dex-yellow-rgb), 0.4);
  transform: translateY(-5px);
  box-shadow: 0 24px 48px rgba(6, 18, 60, 0.35);
}

/* Corner glow decoration */
.dex-handover-card::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--dex-blue-rgb), 0.18), transparent 70%);
  pointer-events: none;
}

.dex-handover-card-yellow::after {
  background: radial-gradient(circle, rgba(var(--dex-yellow-rgb), 0.14), transparent 70%);
}

/* ── Zone label ── */
.dex-hov-zone-label {
  margin: 0 0 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}

.dex-hov-agent-label {
  color: rgba(var(--dex-yellow-rgb), 0.55);
}

/* ── Human zone ── */
.dex-hov-human {
  padding: 18px 16px 14px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  transition: opacity 350ms ease;
}

.dex-handover-card.is-firing .dex-hov-human {
  opacity: 0.38;
}

/* Avatar cluster */
.dex-hov-cluster {
  display: flex;
  margin-bottom: 10px;
}

.dex-hov-cluster-2 {
  width: 56px;
}

.dex-hov-cluster-3 {
  width: 72px;
}

.dex-hov-av {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: -10px;
}

.dex-hov-cluster .dex-hov-av:last-child {
  margin-right: 0;
}

.dex-hov-av svg {
  width: 16px;
  height: 16px;
}

/* Avatar colours */
.dex-av-blue {
  background: rgba(59, 130, 246, 0.28);
}

.dex-av-blue svg {
  stroke: #93c5fd;
}

.dex-av-indigo {
  background: rgba(99, 102, 241, 0.28);
}

.dex-av-indigo svg {
  stroke: #a5b4fc;
}

.dex-av-green {
  background: rgba(16, 185, 129, 0.25);
}

.dex-av-green svg {
  stroke: #6ee7b7;
}

.dex-av-amber {
  background: rgba(251, 191, 36, 0.22);
}

.dex-av-amber svg {
  stroke: #fde68a;
}

.dex-av-rose {
  background: rgba(244, 63, 94, 0.22);
}

.dex-av-rose svg {
  stroke: #fda4af;
}

.dex-hov-roles {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.35;
  margin-bottom: 3px;
}

.dex-hov-domain {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.38);
}

/* ── Beam / transfer indicator ── */
.dex-hov-beam {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  height: 34px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
}

.dex-hov-beam-rail {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--dex-blue-rgb), 0.5), transparent);
  position: relative;
  overflow: hidden;
}

/* Animated sweep on the rail */
.dex-hov-beam-rail::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -100%;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fbbf24, rgba(251, 191, 36, 0.4));
  animation: dexBeamSweep 2.4s ease-in-out infinite;
}

@keyframes dexBeamSweep {
  0% {
    left: -100%;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    left: 160%;
    opacity: 0;
  }
}

.dex-hov-beam-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #fbbf24;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
  animation: dexBeamDotPulse 2s ease-in-out infinite;
}

@keyframes dexBeamDotPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.5);
    opacity: 1;
  }
}

.dex-hov-beam-text {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.6);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Agent zone ── */
.dex-hov-agent {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dex-hov-agent-row {
  display: flex;
  align-items: center;
  gap: 11px;
}

/* Agent icon box */
.dex-hov-agent-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 350ms ease 450ms;
}

.dex-hov-icon-blue {
  background: linear-gradient(140deg, #3b82f6, #1e40af);
  box-shadow: 0 5px 0 #1432a0;
}

.dex-hov-icon-yellow {
  background: linear-gradient(140deg, #f59e0b, #d97706);
  box-shadow: 0 5px 0 #a05c00;
}

/* Icon glow when firing */
.dex-handover-card.is-firing .dex-hov-icon-blue {
  box-shadow: 0 5px 0 #1432a0, 0 0 0 5px rgba(var(--dex-blue-rgb), 0.2), 0 0 22px rgba(59, 130, 246, 0.5);
}

.dex-handover-card.is-firing .dex-hov-icon-yellow {
  box-shadow: 0 5px 0 #a05c00, 0 0 0 5px rgba(var(--dex-yellow-rgb), 0.2), 0 0 22px rgba(251, 191, 36, 0.45);
}

.dex-hov-agent-icon svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-hov-agent-info strong {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 3px;
}

/* Active status dot */
.dex-hov-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  color: #4ade80;
  letter-spacing: 0.04em;
}

.dex-hov-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  animation: dexStatusPulse 2.2s ease-in-out infinite;
}

@keyframes dexStatusPulse {

  0%,
  100% {
    opacity: 0.55;
    box-shadow: 0 0 4px #4ade80;
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 10px #4ade80, 0 0 20px rgba(74, 222, 128, 0.3);
  }
}

/* Outcome strip */
.dex-hov-outcome {
  margin-top: auto;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dex-hov-outcome-chip {
  display: block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--dex-yellow-rgb), 0.7);
  margin-bottom: 4px;
}

.dex-hov-outcome p {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.5;
}

/* ── Particles ── */
.dex-hov-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.dex-particle {
  position: absolute;
  /* Start near human avatar cluster (upper-left of card) */
  top: 22%;
  left: 30%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0;
}

/* Each particle fires only when .is-firing is present */
.dex-handover-card.is-firing .dex-p1 {
  background: #fbbf24;
  width: 6px;
  height: 6px;
  animation: dexP1 0.75s ease-out forwards;
}

.dex-handover-card.is-firing .dex-p2 {
  background: #60a5fa;
  width: 4px;
  height: 4px;
  animation: dexP2 0.70s ease-out 50ms forwards;
}

.dex-handover-card.is-firing .dex-p3 {
  background: #fff;
  width: 3px;
  height: 3px;
  animation: dexP3 0.80s ease-out 90ms forwards;
}

.dex-handover-card.is-firing .dex-p4 {
  background: #fde68a;
  width: 4px;
  height: 4px;
  animation: dexP4 0.65s ease-out 30ms forwards;
}

.dex-handover-card.is-firing .dex-p5 {
  background: #fbbf24;
  width: 7px;
  height: 7px;
  animation: dexP5 0.82s ease-out 110ms forwards;
}

.dex-handover-card.is-firing .dex-p6 {
  background: #93c5fd;
  width: 3px;
  height: 3px;
  animation: dexP6 0.70s ease-out 70ms forwards;
}

.dex-handover-card.is-firing .dex-p7 {
  background: #60a5fa;
  width: 5px;
  height: 5px;
  animation: dexP7 0.75s ease-out 140ms forwards;
}

.dex-handover-card.is-firing .dex-p8 {
  background: #fff;
  width: 4px;
  height: 4px;
  animation: dexP8 0.68s ease-out 20ms forwards;
}

.dex-handover-card.is-firing .dex-p9 {
  background: #fbbf24;
  width: 3px;
  height: 3px;
  animation: dexP9 0.72s ease-out 160ms forwards;
}

/* Particles burst outward from human avatar area, converge toward agent icon */
@keyframes dexP1 {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0)
  }

  18% {
    opacity: 1;
    transform: translate(0, 0) scale(1.2)
  }

  100% {
    opacity: 0;
    transform: translate(-24px, 148px) scale(0)
  }
}

@keyframes dexP2 {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0)
  }

  18% {
    opacity: 1;
    transform: translate(0, 0) scale(1)
  }

  100% {
    opacity: 0;
    transform: translate(18px, 158px) scale(0)
  }
}

@keyframes dexP3 {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0)
  }

  18% {
    opacity: 1;
    transform: translate(0, 0) scale(1)
  }

  100% {
    opacity: 0;
    transform: translate(-8px, 152px) scale(0)
  }
}

@keyframes dexP4 {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0)
  }

  18% {
    opacity: 1;
    transform: translate(0, 0) scale(1.1)
  }

  100% {
    opacity: 0;
    transform: translate(30px, 138px) scale(0)
  }
}

@keyframes dexP5 {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0)
  }

  18% {
    opacity: 1;
    transform: translate(0, 0) scale(1)
  }

  100% {
    opacity: 0;
    transform: translate(-16px, 162px) scale(0)
  }
}

@keyframes dexP6 {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0)
  }

  18% {
    opacity: 1;
    transform: translate(0, 0) scale(1.2)
  }

  100% {
    opacity: 0;
    transform: translate(10px, 145px) scale(0)
  }
}

@keyframes dexP7 {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0)
  }

  18% {
    opacity: 1;
    transform: translate(0, 0) scale(1)
  }

  100% {
    opacity: 0;
    transform: translate(-32px, 132px) scale(0)
  }
}

@keyframes dexP8 {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0)
  }

  18% {
    opacity: 1;
    transform: translate(0, 0) scale(1)
  }

  100% {
    opacity: 0;
    transform: translate(22px, 155px) scale(0)
  }
}

@keyframes dexP9 {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0)
  }

  18% {
    opacity: 1;
    transform: translate(0, 0) scale(1.1)
  }

  100% {
    opacity: 0;
    transform: translate(-4px, 142px) scale(0)
  }
}

/* ── Responsive ── */
@media (max-width: 1199px) {
  .dex-handover-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .dex-handover-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 28px;
  }

  .dex-handover-card {
    min-height: 360px;
  }

  .dex-hov-beam-text {
    display: none;
  }
}

@media (max-width: 479px) {
  .dex-handover-grid {
    grid-template-columns: 1fr;
  }

  .dex-handover-card {
    min-height: 0;
  }
}

/* ── Agent Handoff Cards v2 ─────────────────────────────────────── */

/* Expand card height to fit new content */
.dex-engine-card.dex-engine-card-v2 {
  min-height: 420px;
  gap: 0;
}

/* Remove the description paragraph (no longer shown) */
.dex-engine-card-v2 .dex-engine-card-copy p {
  display: none !important;
}

/* Trim bottom margin on copy block - outcome block handles spacing */
.dex-engine-card-v2 .dex-engine-card-copy {
  margin-bottom: 0 !important;
}

/* ── Human handoff section ── */
.dex-handoff-source {
  width: 100%;
  margin-bottom: 14px;
}

.dex-handoff-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 7px;
  margin-bottom: 7px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.2);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dex-text-secondary);
  background: rgba(var(--dex-blue-rgb), 0.05);
  line-height: 1.2;
}

.dex-handoff-badge svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.dex-handoff-roles {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--dex-text);
  line-height: 1.4;
}

/* ── Transfer arrow ── */
.dex-transfer-arrow {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-bottom: 16px;
}

.dex-transfer-line {
  flex: 1;
  height: 0;
  border-top: 1px dashed rgba(var(--dex-blue-rgb), 0.28);
}

.dex-transfer-chevron {
  flex: 0 0 auto;
  color: var(--dex-blue);
  opacity: 0.55;
}

.dex-transfer-tag {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dex-blue);
  opacity: 0.6;
  white-space: nowrap;
}

/* ── Outcome block ── */
.dex-agent-outcome-block {
  width: 100%;
  margin-top: auto;
  padding: 13px 16px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.14);
  border-radius: 10px;
  background: rgba(var(--dex-blue-rgb), 0.055);
}

.dex-engine-card-yellow .dex-agent-outcome-block {
  border-color: rgba(var(--dex-yellow-rgb), 0.22);
  background: rgba(var(--dex-yellow-rgb), 0.06);
}

.dex-outcome-chip {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dex-blue);
}

.dex-engine-card-yellow .dex-outcome-chip {
  color: #a06200;
}

.dex-agent-outcome-text {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dex-text-secondary);
  line-height: 1.55;
}

/* ── Hover: yellow accent on outcome for blue cards ── */
.dex-engine-card-v2:hover .dex-agent-outcome-block {
  border-color: rgba(var(--dex-yellow-rgb), 0.35);
  background: rgba(var(--dex-yellow-rgb), 0.06);
}

.dex-engine-card-v2:hover .dex-outcome-chip {
  color: #a06200;
}

/* ── Responsive: tablet ── */
@media (max-width: 991px) {
  .dex-engine-card.dex-engine-card-v2 {
    min-height: 380px;
  }
}

/* ── Responsive: mobile ── */
@media (max-width: 767px) {
  .dex-engine-card.dex-engine-card-v2 {
    min-height: 0;
  }

  .dex-transfer-tag {
    display: none;
  }
}

/* ── Core Capabilities Section — visibility + clipping fixes ──── */

/* 1. Extra top padding so the scaled active icon never clips */
.dex-core-capability-grid.dex-capabilities-track {
  padding-top: 80px !important;
}

/* 2. Move highway line down to match new padding */
.dex-core-capability-grid.dex-capabilities-track .dex-highway-line {
  top: 160px !important;
}

/* 3. Section heading: white on dark blue */
.dex-core-capabilities-header h3 {
  color: #ffffff !important;
}

/* 4. Gradient span: light blue → yellow (visible on dark bg) */
.dex-core-capabilities-header h3 .dex-heading-gradient {
  background: linear-gradient(90deg, #60a5fa, #fbbf24) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* 5. Sub heading */
.dex-core-capabilities-sub {
  color: rgba(255, 255, 255, 0.62) !important;
}

/* 6. Card titles — white on dark blue */
.dex-cap-content h4 {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* 7. Card description — readable on dark blue */
.dex-cap-content p {
  color: rgba(255, 255, 255, 0.48) !important;
}

/* 8. Active card content fully bright */
.dex-core-capability-card.dex-capabilities-step-card.is-active .dex-cap-content h4,
.dex-core-capability-card.dex-capabilities-step-card:hover .dex-cap-content h4 {
  color: #ffffff !important;
}

.dex-core-capability-card.dex-capabilities-step-card.is-active .dex-cap-content p,
.dex-core-capability-card.dex-capabilities-step-card:hover .dex-cap-content p {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* 9. Inactive cards less faint — 0.45 was too dim to read */
.dex-core-capability-card.dex-capabilities-step-card.is-visible {
  opacity: 0.68 !important;
}

/* 10. Text alignment — centre all card text */
.dex-cap-content {
  text-align: center !important;
}

/* Improve text contrast in DeX capabilities highway section */
.dex-delivery-system-section .dex-core-capabilities-header h3,
.dex-delivery-system-section .dex-core-capabilities-header h3 span,
.dex-delivery-system-section .dex-core-capabilities-header h3 .dex-heading-gradient {
  color: #ffffff !important;
  -webkit-text-fill-color: initial !important;
}

.dex-delivery-system-section .dex-core-capabilities-header h3 .dex-heading-gradient {
  color: #fbbf24 !important;
  background: none !important;
}

.dex-delivery-system-section .dex-core-capabilities-sub {
  color: rgba(255, 255, 255, 0.88) !important;
}

.dex-delivery-system-section .dex-cap-content h4,
.dex-delivery-system-section .dex-core-capability-card.dex-capabilities-step-card .dex-cap-content h4 {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(15, 23, 42, 0.35) !important;
}

.dex-delivery-system-section .dex-cap-content p,
.dex-delivery-system-section .dex-core-capability-card.dex-capabilities-step-card .dex-cap-content p {
  color: rgba(255, 255, 255, 0.86) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 10px rgba(15, 23, 42, 0.28) !important;
}

.dex-delivery-system-section .dex-core-capability-card.dex-capabilities-step-card.is-visible {
  opacity: 0.82 !important;
}

.dex-delivery-system-section .dex-core-capability-card.dex-capabilities-step-card.is-visible .dex-cap-content p {
  opacity: 1 !important;
}

.dex-delivery-system-section .dex-core-capability-card.dex-capabilities-step-card.is-active,
.dex-delivery-system-section .dex-core-capability-card.dex-capabilities-step-card:hover {
  opacity: 1 !important;
}

.dex-delivery-system-section .dex-core-capability-card.dex-capabilities-step-card.is-active .dex-cap-content p,
.dex-delivery-system-section .dex-core-capability-card.dex-capabilities-step-card:hover .dex-cap-content p {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Core Capabilities timeline from workflow-animation-update 2.patch */
.dex-delivery-system-section {
  --cc-blue-gradient-start: var(--dex-blue);
  --cc-blue-gradient-end: #3b82f6;
  --cc-gold-gradient-start: #f59e0b;
  --cc-gold-gradient-end: var(--dex-yellow);
  --cc-line: rgba(147, 197, 253, 0.42);
  --cc-text-primary: #ffffff;
  --cc-text-secondary: rgba(255, 255, 255, 0.78);
}

.dex-delivery-system-section .dex-core-capabilities>header.dex-capabilities-header {
  display: block !important;
  max-width: 920px !important;
  margin: 0 auto 40px !important;
  text-align: center !important;
}

.dex-delivery-system-section .dex-core-capabilities {
  padding: clamp(38px, 4.4vw, 64px) clamp(18px, 3.6vw, 46px) !important;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle, rgba(var(--dex-blue-rgb), 0.08) 1px, transparent 1.5px),
    linear-gradient(115deg, #ffffff 0%, #f8fbff 58%, #fffaf0 100%) !important;
  background-size: 22px 22px, auto !important;
  box-shadow:
    0 26px 70px rgba(8, 18, 46, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.dex-delivery-system-section .dex-capabilities-header .dex-section-label {
  display: block !important;
  margin: 0 auto 12px !important;
  color: var(--dex-blue) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0.11em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.dex-delivery-system-section .dex-capabilities-header .dex-section-heading {
  max-width: 860px !important;
  margin: 0 auto !important;
  color: #1f2937 !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

.dex-delivery-system-section .dex-capabilities-timeline-container {
  position: relative;
  width: 100%;
  margin-top: 56px;
}

.dex-delivery-system-section .dex-capabilities-timeline-line {
  position: absolute;
  top: 34px;
  right: 0;
  left: 0;
  z-index: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.28), rgba(251, 191, 36, 0.62), rgba(59, 130, 246, 0.28));
  box-shadow: 0 0 16px rgba(96, 165, 250, 0.18);
}

.dex-delivery-system-section .dex-capabilities-timeline-nodes {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.dex-delivery-system-section .cc {
  display: grid;
  grid-template-rows: 124px 92px 1px auto;
  min-width: 0;
  align-items: start;
  justify-items: center;
  padding: 0 8px;
  color: #1f2937;
  text-align: center;
  background: transparent;
  box-shadow: none;
  opacity: 0.88;
  transition: opacity 260ms ease, transform 260ms ease;
}

.dex-delivery-system-section .cc:hover,
.dex-delivery-system-section .cc.is-active {
  opacity: 1;
  transform: translateY(-4px);
}

.dex-delivery-system-section .cicon-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
}

.dex-delivery-system-section .cicon-tile {
  position: relative;
  z-index: 3;
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease;
}

.dex-delivery-system-section .cc:hover .cicon-tile,
.dex-delivery-system-section .cc.is-active .cicon-tile {
  transform: translateY(-4px) scale(1.06);
}

.dex-delivery-system-section .cicon-tile.dex-icon-theme-blue {
  border: 1px solid rgba(59, 130, 246, 0.44);
  color: #ffffff;
  background: linear-gradient(145deg, var(--cc-blue-gradient-start), var(--cc-blue-gradient-end));
  box-shadow:
    0 5px 12px rgba(37, 99, 235, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -4px 6px rgba(0, 0, 0, 0.15);
}

.dex-delivery-system-section .cicon-tile.dex-icon-theme-gold {
  border: 1px solid rgba(251, 191, 36, 0.46);
  color: #111827;
  background: linear-gradient(145deg, var(--cc-gold-gradient-start), var(--cc-gold-gradient-end));
  box-shadow:
    0 5px 12px rgba(245, 158, 11, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -4px 6px rgba(0, 0, 0, 0.15);
}

.dex-delivery-system-section .cc.is-active .cicon-tile.dex-icon-theme-blue {
  box-shadow:
    0 0 28px rgba(59, 130, 246, 0.6),
    0 14px 26px rgba(37, 99, 235, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.dex-delivery-system-section .cc.is-active .cicon-tile.dex-icon-theme-gold {
  box-shadow:
    0 0 28px rgba(251, 191, 36, 0.58),
    0 14px 26px rgba(245, 158, 11, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

.dex-delivery-system-section .cicon-gloss {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.46) 0%, transparent 60%);
  pointer-events: none;
}

.dex-delivery-system-section .cicon-svg {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}

.dex-delivery-system-section .cicon-svg svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
}

.dex-delivery-system-section .cicon-dot {
  width: 10px;
  height: 10px;
  margin-top: 16px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
}

.dex-delivery-system-section .cicon-dot.dex-icon-theme-blue {
  color: var(--cc-blue-gradient-end);
  background: var(--cc-blue-gradient-end);
}

.dex-delivery-system-section .cicon-dot.dex-icon-theme-gold {
  color: var(--cc-gold-gradient-end);
  background: var(--cc-gold-gradient-end);
}

.dex-delivery-system-section .ctitle {
  display: flex;
  width: 100%;
  height: 92px;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  padding: 20px 0 14px;
  color: #1f2937;
  font-size: clamp(16px, 1.45vw, 20px);
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.dex-delivery-system-section .cdivider {
  width: 100%;
  height: 1px;
  margin: 0;
  background: rgba(var(--dex-blue-rgb), 0.12);
}

.dex-delivery-system-section .cpara {
  margin: 18px 0 0;
  color: #4b5563;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.55;
  text-align: center;
}

.dex-scroll-reveal .dex-capabilities-timeline-nodes .cc {
  opacity: 0;
  transform: translateY(18px);
}

.dex-scroll-reveal.is-in-view .dex-capabilities-timeline-nodes .cc {
  opacity: 0.88;
  transform: translateY(0);
  transition-delay: calc(320ms + var(--dex-order) * 70ms);
}

.dex-scroll-reveal.is-in-view .dex-capabilities-timeline-nodes .cc.is-active,
.dex-scroll-reveal.is-in-view .dex-capabilities-timeline-nodes .cc:hover {
  opacity: 1;
  transform: translateY(-4px);
}

@media screen and (max-width: 1023px) {
  .dex-delivery-system-section .dex-capabilities-timeline-line {
    display: none;
  }

  .dex-delivery-system-section .dex-capabilities-timeline-nodes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 18px;
  }
}

@media screen and (max-width: 639px) {
  .dex-delivery-system-section .dex-capabilities-timeline-container {
    margin-top: 36px;
  }

  .dex-delivery-system-section .dex-capabilities-timeline-nodes {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .dex-delivery-system-section .cc {
    grid-template-rows: auto;
    padding: 0 8px;
  }

  .dex-delivery-system-section .ctitle {
    height: auto;
    min-height: 0;
    padding: 18px 0 12px;
  }
}

/* ============================================================
   PARTNER PROGRAM — DeX Blue background overrides
   Scoped to .rt-cta-v1 so nothing outside is affected
   ============================================================ */

/* --- Heading block --- */
.rt-cta-v1 .dex-partner-v2-heading .rt-sub-text,
.rt-cta-v1 .dex-partner-v2-heading small {
  color: #93c5fd !important;
}

.rt-cta-v1 .dex-partner-v2-heading h2 {
  color: #ffffff !important;
}

.rt-cta-v1 .dex-partner-v2-heading h2 span {
  background: linear-gradient(90deg, #60a5fa, #fbbf24) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.rt-cta-v1 .dex-partner-v2-heading>p {
  color: rgba(210, 228, 255, 0.82) !important;
}

/* --- CTA buttons --- */
.rt-cta-v1 .dex-partner-secondary-link {
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.rt-cta-v1 .dex-partner-secondary-link:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

/* --- Sub-section headers (Why partner / Tier structure) --- */
.rt-cta-v1 .dex-partner-value-section>header small,
.rt-cta-v1 .dex-partner-tier-section>header small {
  color: #93c5fd !important;
}

.rt-cta-v1 .dex-partner-value-section>header h3,
.rt-cta-v1 .dex-partner-tier-section>header h3 {
  color: #ffffff !important;
}

.rt-cta-v1 .dex-partner-value-section>header h3 span {
  color: #fbbf24 !important;
}

/* --- Partner core orb (centre element) --- */
.rt-cta-v1 .dex-partner-core {
  border-color: rgba(var(--dex-blue-rgb), 0.14) !important;
  background:
    radial-gradient(circle at 78% 10%, rgba(var(--dex-yellow-rgb), 0.16), transparent 34%),
    #ffffff !important;
  box-shadow:
    0 22px 48px rgba(15, 23, 42, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: none !important;
}

.rt-cta-v1 .dex-partner-core>strong {
  color: var(--dex-text) !important;
}

.rt-cta-v1 .dex-partner-core>small {
  color: var(--dex-blue-dark) !important;
}

/* --- Value map benefit cards --- */
.rt-cta-v1 .dex-partner-value-map>article {
  border-color: rgba(var(--dex-blue-rgb), 0.11) !important;
  background: #ffffff !important;
  box-shadow:
    0 16px 36px rgba(15, 23, 42, 0.13),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: none !important;
}

.rt-cta-v1 .dex-partner-value-map>article:hover {
  border-color: rgba(var(--dex-yellow-rgb), 0.42) !important;
  background:
    linear-gradient(135deg, #ffffff, rgba(var(--dex-yellow-rgb), 0.08)) !important;
  box-shadow:
    0 20px 42px rgba(15, 23, 42, 0.16),
    inset 0 0 0 1px rgba(var(--dex-yellow-rgb), 0.12) !important;
}

.rt-cta-v1 .dex-partner-value-map article strong {
  color: var(--dex-text) !important;
}

.rt-cta-v1 .dex-partner-value-map article p {
  color: var(--dex-text-secondary) !important;
}

/* All 6 benefit icons: white bg + DeX yellow */
.rt-cta-v1 .dex-partner-value-map>article>span,
.rt-cta-v1 .dex-partner-value-map>article:nth-of-type(even)>span {
  background: rgba(var(--dex-blue-rgb), 0.08) !important;
  border-color: rgba(var(--dex-blue-rgb), 0.12) !important;
  color: var(--dex-blue) !important;
  box-shadow: none !important;
}

/* --- Tier cards --- */
.rt-cta-v1 .dex-partner-v2-tiers>article {
  border-color: rgba(var(--dex-blue-rgb), 0.12) !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14) !important;
}

.rt-cta-v1 .dex-partner-v2-tiers>article::after {
  border-color: rgba(var(--dex-blue-rgb), 0.12) !important;
  box-shadow: 0 0 0 22px rgba(var(--dex-blue-rgb), 0.025) !important;
}

.rt-cta-v1 .dex-partner-v2-tiers>article:nth-child(2) {
  border-color: rgba(var(--dex-yellow-rgb), 0.42) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(var(--dex-yellow-rgb), 0.15), transparent 34%),
    #ffffff !important;
}

.rt-cta-v1 .dex-partner-v2-tiers>article:nth-child(2)::after {
  border-color: rgba(var(--dex-yellow-rgb), 0.2) !important;
  box-shadow: 0 0 0 22px rgba(var(--dex-yellow-rgb), 0.045) !important;
}

.rt-cta-v1 .dex-partner-v2-tiers>article>header>span {
  box-shadow: 0 10px 22px rgba(var(--dex-blue-rgb), 0.16) !important;
}

.rt-cta-v1 .dex-partner-v2-tiers>article:nth-child(2)>header>span {
  box-shadow: 0 10px 22px rgba(var(--dex-yellow-rgb), 0.2) !important;
}

.rt-cta-v1 .dex-partner-v2-tiers>article>header small {
  color: var(--dex-text-muted) !important;
}

.rt-cta-v1 .dex-partner-v2-tiers>article>header>svg {
  color: var(--dex-blue) !important;
}

.rt-cta-v1 .dex-partner-v2-tiers h4 {
  color: var(--dex-text) !important;
}

.rt-cta-v1 .dex-partner-v2-tiers li {
  color: var(--dex-text-secondary) !important;
}

.rt-cta-v1 .dex-partner-v2-tiers li svg {
  color: var(--dex-blue) !important;
}

.rt-cta-v1 .dex-partner-v2-tiers>article:nth-child(2) li svg {
  color: #d99a00 !important;
}

/* Tier CTA link */
.rt-cta-v1 .dex-partner-v2-tiers>article>a {
  border-color: rgba(var(--dex-blue-rgb), 0.14) !important;
  color: var(--dex-blue-dark) !important;
  background: rgba(var(--dex-blue-rgb), 0.055) !important;
}

.rt-cta-v1 .dex-partner-v2-tiers>article>a:hover {
  border-color: rgba(var(--dex-blue-rgb), 0.28) !important;
  background: var(--dex-blue) !important;
  color: #ffffff !important;
}

.rt-cta-v1 .dex-partner-v2-tiers>article:nth-child(2)>a {
  border-color: rgba(var(--dex-yellow-rgb), 0.4) !important;
  color: var(--dex-text) !important;
  background: rgba(var(--dex-yellow-rgb), 0.18) !important;
}

@media screen and (max-width: 991px) {

  .rt-cta-v1 .dex-partner-value-map>article,
  .rt-cta-v1 .dex-partner-v2-tiers>article {
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12) !important;
  }
}

@media screen and (max-width: 767px) {
  .rt-cta-v1 .dex-partner-program-v2.dex-partner-program-compact {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .rt-cta-v1 .dex-partner-value-map>article,
  .rt-cta-v1 .dex-partner-v2-tiers>article {
    border-radius: 16px !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12) !important;
  }

  .rt-cta-v1 .dex-partner-value-map article strong,
  .rt-cta-v1 .dex-partner-v2-tiers h4 {
    overflow-wrap: anywhere;
  }

  .rt-cta-v1 .dex-partner-v2-tiers li {
    align-items: start;
  }
}


/* ================================================================
   Chrome-tab: active stage card visually connects to the console
   ================================================================ */

/* Elevate the flow container above the console. Both were z-index: 1;
   DOM order caused the console to paint on top — this reverses it so
   the connector bridge is visible over the console's top edge. */
.dex-project-flow {
  z-index: 2;
}

/* Active card: open-bottom tab shape.
   overflow: visible lets ::after extend below the card's border box. */
.dex-project-flow-card.is-active {
  overflow: visible !important;
  z-index: 10;
  border-bottom-color: transparent !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Yellow tone: same open-bottom treatment */
.dex-project-flow-card.dex-flow-tone-yellow.is-active {
  border-bottom-color: transparent !important;
}

/* Accent stripe: moves from bottom edge → top edge (Chrome-tab style).
   Color matches the card's border so all four sides read as one unified frame. */
.dex-project-flow-card.is-active::before {
  top: 0 !important;
  bottom: auto !important;
  height: 3px !important;
  border-radius: 6px 6px 0 0 !important;
  background: rgba(var(--dex-blue-rgb), 0.75) !important;
}

.dex-project-flow-card.dex-flow-tone-yellow.is-active::before {
  background: rgba(var(--dex-yellow-rgb), 0.85) !important;
}

/* Connector bridge: replaces the between-card arrow for the active card.
   Extends from the card's bottom down to the console, creating the tab-
   covers-panel effect. Does NOT animate — the console inner content is
   re-rendered by JS on every tick; adding animation here causes flashes. */
.dex-project-flow-card.is-active::after {
  content: "";
  position: absolute;
  top: calc(100% - 3px);
  /* offset compensates for translateY(-2px) gap */
  right: -1px;
  left: -1px;
  bottom: auto;
  width: auto;
  height: 26px;
  border-top: none;
  border-left: 1px solid rgba(var(--dex-blue-rgb), 0.44);
  border-right: 1px solid rgba(var(--dex-blue-rgb), 0.44);
  border-bottom: none;
  border-radius: 0 !important;
  background: rgba(239, 246, 255, 0.96);
  box-shadow: none;
  transform: none;
  z-index: 3;
}

/* Yellow tone connector: match yellow card border and background */
.dex-project-flow-card.dex-flow-tone-yellow.is-active::after {
  border-left-color: rgba(var(--dex-yellow-rgb), 0.65);
  border-right-color: rgba(var(--dex-yellow-rgb), 0.65);
  background: rgba(255, 251, 235, 0.96);
}

/* Console top tint: soft colored wash at the top of the console area that
   matches the active card's tone, making the card-console connection visible.
   Uses :has() — broadly supported in 2024+ browsers. */
.dex-project-flow:has(.dex-flow-tone-blue.is-active)+.dex-hero-workflow-status {
  background: linear-gradient(180deg,
      rgba(239, 246, 255, 0.9) 0px,
      rgba(239, 246, 255, 0.5) 28px,
      transparent 64px);
}

.dex-project-flow:has(.dex-flow-tone-yellow.is-active)+.dex-hero-workflow-status {
  background: linear-gradient(180deg,
      rgba(255, 251, 235, 0.9) 0px,
      rgba(255, 251, 235, 0.5) 28px,
      transparent 64px);
}

/* Reduced motion: skip lift and connector bridge */
@media (prefers-reduced-motion: reduce) {
  .dex-project-flow-card.is-active {
    transform: translateY(0) !important;
  }

  .dex-project-flow-card.is-active::after {
    display: none;
  }
}

/* Substep tab active highlight: top stripe (matches card direction) at 4px
   for clear visual prominence, yellow on blue bg for maximum contrast. */
.dex-stage-tabs button.is-active {
  box-shadow: inset 0 4px 0 var(--dex-yellow);
}

.dex-stage-console-yellow .dex-stage-tabs button.is-active {
  box-shadow: inset 0 4px 0 var(--dex-blue);
}

/* Flow bottom border = console top line. Match the active card's border color
   so the dividing line between cards and console reads as part of the same frame.
   The connector bridge already covers this line under the active card, creating
   the open-tab gap exactly like Chrome. */
.dex-project-flow:has(.dex-flow-tone-blue.is-active) {
  border-bottom: 2px solid rgba(var(--dex-blue-rgb), 0.5);
}

.dex-project-flow:has(.dex-flow-tone-yellow.is-active) {
  border-bottom: 2px solid rgba(var(--dex-yellow-rgb), 0.7);
}

/* Connector bridge background: fully opaque so it completely covers the flow's
   border-bottom under the active card, creating a clean open gap (3-sided tab).
   Semi-transparent was leaking ~4% of the border through. */
.dex-project-flow-card.is-active::after {
  background: #eff6ff;
}

.dex-project-flow-card.dex-flow-tone-yellow.is-active::after {
  background: #fffbeb;
}

/* Open-tab fix: the flow's border-bottom cannot be gapped by a child element.
   Instead, draw the colored top line on the STATUS (z-index:1) and let the
   connector bridge (inside the flow, z-index:2) paint over it at the active
   card's position — guaranteeing a clean open gap. */

/* 1. Hide the flow's own border-bottom when a card is active */
.dex-project-flow:has(.dex-flow-tone-blue.is-active),
.dex-project-flow:has(.dex-flow-tone-yellow.is-active) {
  border-bottom-color: transparent;
}

/* 2. Full-width colored line via status::before (z-index:1 context).
      Connector bridge (z-index:2 context) covers it at the active card width. */
.dex-project-flow:has(.dex-flow-tone-blue.is-active)+.dex-hero-workflow-status::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(var(--dex-blue-rgb), 0.5);
}

.dex-project-flow:has(.dex-flow-tone-yellow.is-active)+.dex-hero-workflow-status::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(var(--dex-yellow-rgb), 0.7);
}

/* Final hero stage tab treatment: active card opens into console */
.dex-delivery-surface,
.dex-project-flow {
  overflow: visible !important;
}

.dex-project-flow {
  position: relative !important;
  z-index: 3 !important;
}

.dex-hero-workflow-status {
  position: relative !important;
  z-index: 1 !important;
}

.dex-project-flow-card.is-active {
  border-width: 1.5px 1.5px 0 !important;
  border-style: solid !important;
  border-color: rgba(var(--dex-blue-rgb), 0.62) !important;
  border-bottom-color: transparent !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow:
    0 20px 42px rgba(var(--dex-blue-rgb), 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  transform: translateY(-2px) !important;
}

.dex-project-flow-card.dex-flow-tone-yellow.is-active {
  border-color: rgba(var(--dex-yellow-rgb), 0.78) !important;
  border-bottom-color: transparent !important;
}

.dex-project-flow-card.is-active::before {
  display: none !important;
}

.dex-project-flow-card.is-active::after {
  top: calc(100% - 1px) !important;
  right: -1.5px !important;
  left: -1.5px !important;
  z-index: 30 !important;
  height: 17px !important;
  border: 0 !important;
  border-left: 1.5px solid rgba(var(--dex-blue-rgb), 0.62) !important;
  border-right: 1.5px solid rgba(var(--dex-blue-rgb), 0.62) !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.99) 0%, rgba(248, 251, 255, 0.99) 100%) !important;
}

.dex-project-flow-card.dex-flow-tone-yellow.is-active::after {
  border-left: 1.5px solid rgba(var(--dex-yellow-rgb), 0.78) !important;
  border-right: 1.5px solid rgba(var(--dex-yellow-rgb), 0.78) !important;
  border-bottom: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 251, 235, 0.99) 0%, rgba(255, 253, 244, 0.99) 100%) !important;
}

.dex-project-flow:has(.dex-flow-tone-blue.is-active)+.dex-hero-workflow-status::before,
.dex-project-flow:has(.dex-flow-tone-yellow.is-active)+.dex-hero-workflow-status::before {
  display: block !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

@media screen and (max-width: 767px) {
  .dex-project-flow-card.is-active::after {
    right: -1.5px !important;
    left: -1.5px !important;
    height: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dex-project-flow-card.is-active {
    transform: translateY(0) !important;
  }
}

/* Unified hero workflow tabbed console */
.dex-delivery-surface {
  --dex-workflow-line: rgba(var(--dex-blue-rgb), 0.58);
  --dex-workflow-panel: rgba(248, 251, 255, 0.98);
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.16) !important;
  border-radius: clamp(18px, 2vw, 26px) !important;
  background:
    linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(var(--dex-blue-rgb), 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.94)) !important;
  background-size: 32px 32px, 32px 32px, auto !important;
  box-shadow: 0 22px 70px rgba(var(--dex-blue-rgb), 0.11) !important;
}

.dex-delivery-surface:has(.dex-flow-tone-yellow.is-active) {
  --dex-workflow-line: rgba(var(--dex-yellow-rgb), 0.78);
  --dex-workflow-panel: rgba(255, 253, 244, 0.98);
}

.dex-delivery-surface .dex-project-flow {
  position: relative !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: clamp(16px, 2vw, 26px) clamp(16px, 2vw, 26px) 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-width: none !important;
}

.dex-delivery-surface .dex-project-flow::-webkit-scrollbar {
  display: none;
}

.dex-delivery-surface .dex-project-flow-row {
  align-items: end !important;
  padding: 0 !important;
}

.dex-delivery-surface .dex-project-flow-card {
  align-self: end !important;
  min-height: clamp(138px, 13vw, 158px) !important;
  margin-bottom: 6px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  transform: none !important;
}

html.dex-home-page .dex-delivery-surface .dex-project-flow-card.is-active {
  z-index: 5 !important;
  overflow: hidden !important;
  border: 1.5px solid var(--dex-workflow-line) !important;
  border-bottom-color: var(--dex-workflow-line) !important;
  border-bottom-right-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
  background: var(--dex-workflow-panel) !important;
  box-shadow: 0 20px 46px rgba(var(--dex-blue-rgb), 0.16) !important;
  transform: none !important;
}

.dex-delivery-surface .dex-project-flow-card.is-active::before {
  display: none !important;
}

html.dex-home-page .dex-delivery-surface .dex-project-flow-card.is-active::after {
  display: none !important;
}

.dex-delivery-surface .dex-hero-workflow-status {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
  padding: clamp(18px, 2vw, 26px) !important;
  overflow: visible !important;
  border-top: 2px solid var(--dex-workflow-line) !important;
  background:
    linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(var(--dex-blue-rgb), 0.03) 1px, transparent 1px),
    var(--dex-workflow-panel) !important;
  background-size: 32px 32px, 32px 32px, auto !important;
}

.dex-delivery-surface .dex-hero-workflow-status::before {
  display: none !important;
}

.dex-delivery-surface .dex-stage-console {
  background: rgba(255, 255, 255, 0.72) !important;
}

@media screen and (max-width: 991px) {
  .dex-delivery-surface .dex-project-flow {
    padding-inline: 14px !important;
    scroll-padding-inline: 14px !important;
  }

  .dex-delivery-surface .dex-project-flow-row {
    grid-template-columns: repeat(8, minmax(132px, 156px)) !important;
    width: max-content !important;
    min-width: 100% !important;
  }
}

@media screen and (max-width: 767px) {
  .dex-delivery-surface {
    border-radius: 18px !important;
  }

  .dex-delivery-surface .dex-project-flow-card {
    min-height: 132px !important;
    margin-bottom: 14px !important;
  }

  .dex-delivery-surface .dex-project-flow-card.is-active {
    margin-bottom: 14px !important;
  }

  .dex-delivery-surface .dex-hero-workflow-status {
    padding: 14px !important;
  }
}

/* Blue-section DeX spiral pattern watermarks */
.dex-delivery-system-section::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image:
    url("/assets/dex-triangle-mark.png"),
    url("/assets/dex-triangle-mark.png") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position:
    left clamp(-170px, -8vw, -86px) top clamp(22px, 5vw, 78px),
    right clamp(-180px, -9vw, -92px) bottom clamp(52px, 7vw, 112px) !important;
  background-size:
    clamp(330px, 32vw, 560px) auto,
    clamp(280px, 27vw, 470px) auto !important;
  opacity: 0.16 !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
}

.dex-delivery-system-section .dex-delivery-system-inner {
  position: relative !important;
  z-index: 1 !important;
}

.rt-cta-v1::after {
  top: auto !important;
  right: clamp(-150px, -7vw, -78px) !important;
  bottom: clamp(34px, 6vw, 96px) !important;
  width: clamp(280px, 28vw, 460px) !important;
  height: auto !important;
  aspect-ratio: 382 / 417 !important;
  border-radius: 0 !important;
  background: url("/assets/dex-triangle-mark.png") center / contain no-repeat !important;
  opacity: 0.16 !important;
  mix-blend-mode: screen !important;
}

@media screen and (max-width: 991px) {
  .dex-delivery-system-section::after {
    background-position:
      left -138px top 42px,
      right -144px bottom 64px !important;
    background-size:
      360px auto,
      320px auto !important;
    opacity: 0.13 !important;
  }

  .rt-cta-v1::after {
    right: -136px !important;
    bottom: 58px !important;
    width: 330px !important;
  }
}

@media screen and (max-width: 767px) {
  .dex-delivery-system-section::after {
    background-position:
      left -148px top 34px,
      right -152px bottom 50px !important;
    background-size:
      300px auto,
      270px auto !important;
    opacity: 0.11 !important;
  }

  .rt-cta-v1::after {
    right: -145px !important;
    bottom: 46px !important;
    width: 280px !important;
    opacity: 0.1 !important;
  }
}

/* ================================================================
   Hero workflow: Chrome-tab merge between active card and console
   ----------------------------------------------------------------
   DESIGN:
   - All cards sit 16px above the divider line (breathing room).
   - Active card has a borderless, panel-colored ::after "bridge" that
     extends from the card bottom down past the divider line, with an
     outward-flaring trapezoid shape (narrow at top to match card width,
     wider at the bottom to merge smoothly into the console).
   - The bridge covers the divider line ONLY under the active card,
     creating the open-tab effect.
   - Mobile: bridge is hidden (flow's overflow-x: auto clips it
     vertically); active card just reads as a coloured tab.
   ================================================================ */

/* Flow must allow vertical overflow on desktop so the bridge can extend
   past the flow's bottom edge into the status area. */
@media screen and (min-width: 992px) {
  .dex-delivery-surface .dex-project-flow {
    overflow: visible !important;
  }
}

/* Status keeps its full-width border-top as the visible divider line. */
.dex-delivery-surface .dex-hero-workflow-status {
  border-top: 2px solid var(--dex-workflow-line) !important;
}

.dex-delivery-surface .dex-hero-workflow-status::before {
  display: none !important;
}

/* Keep active workflow cards self-contained instead of extending them into
   the console as a browser-tab bridge. */
html.dex-home-page .dex-delivery-surface .dex-project-flow-card.is-active::after {
  display: none !important;
}

/* Mobile: bridge is hidden because (a) flow's overflow-x: auto forces
   overflow-y: auto and would clip it, and (b) the connection looks
   awkward at narrow widths. Instead, active card reads as a fully
   closed coloured tab.
   - Hide BOTH the namespaced and the legacy unprefixed ::after rules.
   - Restore bottom border + radius on the active card so it doesn't
     read as an "open" tab waiting for a bridge.
   - Use align-items: stretch so longer titles (e.g. "Business Request"
     wrapping to 2 lines) don't make one card visibly taller than its
     siblings — every card matches the tallest cell.
   - Force min-height generous enough for 2-line titles. */
@media screen and (max-width: 991px) {
  .dex-delivery-surface .dex-project-flow-row {
    align-items: stretch !important;
  }

  .dex-delivery-surface .dex-project-flow-card {
    min-height: 168px !important;
    align-self: stretch !important;
  }

  .dex-delivery-surface .dex-project-flow-card.is-active {
    border-bottom-color: var(--dex-workflow-line) !important;
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
    transform: none !important;
  }

  .dex-delivery-surface .dex-project-flow-card.is-active::after,
  .dex-project-flow-card.is-active::after {
    display: none !important;
  }
}

/* ================================================================
   Blueprint section (rt-feature-v1): mobile rework
   ----------------------------------------------------------------
   On desktop the layout is two columns (preview console on the left,
   blueprint switcher on the right). At narrow widths the forced
   `grid-template-columns: 1.45fr 0.68fr !important` (line 13905) was
   squeezing both panels — the preview's header text got truncated
   ("REQUIREM…", "SPECIFICA…") and the switcher overlapped it.
   Fix:
   - Stack vertically on tablets and below.
   - Put the switcher FIRST (most useful for touch).
   - Reduce the console preview height so it isn't an oversized block.
   - On the smallest screens, hide the preview entirely — the
     switcher already shows every blueprint with name + label, and
     the preview's tall vertical document badges (10/11/12) don't
     translate well to narrow widths.
   ================================================================ */

@media screen and (max-width: 991px) {
  .dex-doc-flow-layout {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  /* Switcher above preview on mobile (better for touch + scanning) */
  .dex-doc-switcher {
    order: -1 !important;
    height: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dex-doc-switcher-head {
    grid-column: 1 / -1 !important;
  }

  /* Preview console: shorter on mobile so it doesn't dominate */
  .dex-doc-console-stage {
    height: 420px !important;
  }
}

/* ================================================================
   Business Outcomes panel: close it cleanly on mobile
   ----------------------------------------------------------------
   The outcome panel wraps a copy block (icon + heading + bullets)
   and a visual "console" block. On mobile the console's
   min-height: 350px + complex bar visuals made the panel feel
   open-ended past the bullets. Hide the console on phones — the
   copy + bullets already convey the value, and the panel now
   closes cleanly right after the last bullet.
   ================================================================ */
@media screen and (max-width: 767px) {
  .dex-business-outcomes-section .dex-outcome-console {
    display: none !important;
  }

  /* Panel becomes a simple card around the copy (console hidden above).
     STABLE min-height — without this, the panel resizes each time the
     7s auto-cycle swaps in a different outcome (different h3 / p /
     bullet lengths), which shifts everything below it on the page.
     Set to a value that comfortably fits the tallest variant so the
     panel stays the same size through all 6 cycles. */
  .dex-business-outcomes-section .dex-outcome-panel {
    min-height: 540px !important;
    padding-bottom: 28px !important;
  }

  /* Outcome tab capsule: outer pill fits the viewport end-to-end,
     inner tab row scrolls horizontally so the active tab stays
     centered (existing JS `tabsRail.scrollTo` handles the centering
     on every activate / auto-cycle tick).
     Key tricks:
     - `padding-inline: 50%` gives the rail enough empty space at
       both ends so the first and last tabs can also scroll to the
       middle — without this, Math.max(0, …) in the JS clamps them
       to the left/right edges.
     - Inactive tabs are icon-only; active expands and shows its
       label, so as the cycle advances you see the inner pill slide
       to the middle with the new tab's name. */
  .dex-business-outcomes-section .dex-outcome-tabs {
    display: flex !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    padding: 6px !important;
    padding-inline: 50% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    border-radius: 999px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
  }

  .dex-business-outcomes-section .dex-outcome-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .dex-business-outcomes-section .dex-outcome-tab {
    flex: 0 0 auto !important;
    min-width: 44px !important;
    min-height: 0 !important;
    padding: 6px !important;
    gap: 6px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    justify-content: center !important;
  }

  /* Hide label on inactive tabs — icon only */
  .dex-business-outcomes-section .dex-outcome-tab b {
    display: none !important;
  }

  /* Active tab: take natural width with its label visible */
  .dex-business-outcomes-section .dex-outcome-tab.is-active {
    padding: 6px 14px !important;
  }

  .dex-business-outcomes-section .dex-outcome-tab.is-active b {
    display: inline-block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
  }

  /* Smaller icon circles so the rail isn't excessively wide */
  .dex-business-outcomes-section .dex-outcome-tab span {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
  }

  .dex-business-outcomes-section .dex-outcome-tab svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ================================================================
   Hero console (stage console): let the page scroll through it
   ----------------------------------------------------------------
   At line 12409 the console was given a fixed 820px height + internal
   `overflow-y: auto` + `overscroll-behavior: contain` on mobile to
   "stabilize" the rotating content. The side effect was that any
   touch gesture starting inside the console was captured for
   internal scrolling, so the page couldn't scroll vertically when
   the user's finger landed on the console area.
   Fix on mobile: let the console grow to its natural content height
   and let the page handle vertical scroll. `touch-action: pan-y`
   makes the intent explicit even if some lingering overflow remains. */
@media screen and (max-width: 767px) {
  .dex-hero-workflow-status {
    height: auto !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  .dex-stage-console {
    height: auto !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    overscroll-behavior: auto !important;
    touch-action: pan-y !important;
  }
}


@media screen and (max-width: 640px) {

  /* Single-column switcher at phone widths */
  .dex-doc-switcher {
    grid-template-columns: 1fr !important;
  }

  /* Preview console: keep it visible but make it work at phone width.
     Reduce overall height + tighten internal spacing so the section
     list still reads naturally. */
  .dex-doc-console-stage {
    height: 360px !important;
  }

  /* Console header bar: hide the "Generating/Ready" pill on phones —
     the window dots + title already convey the same context. */
  .dex-doc-console-bar {
    grid-template-columns: auto 1fr !important;
    padding: 12px 14px !important;
  }

  .dex-doc-console-bar>b {
    display: none !important;
  }

  /* Console body / generation flow: tighter padding */
  .dex-doc-console-body-minimal {
    padding: 16px 14px 14px !important;
  }

  .dex-doc-generation-flow-minimal {
    padding: 14px !important;
  }

  /* "NN mapped" tag — drop on phones to keep the row clean */
  .dex-doc-flow-head>b {
    display: none !important;
  }

  /* Section list: tighter, smaller badges so 3 items fit visibly */
  .dex-doc-focus-list-stack {
    gap: 10px !important;
    min-height: 0 !important;
  }

  .dex-doc-focus-list-stack .dex-doc-focus-item {
    grid-template-columns: 34px 1fr 24px !important;
    min-height: 60px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  .dex-doc-focus-list-stack .dex-doc-focus-item>span {
    width: 34px !important;
    height: 34px !important;
    font-size: 12px !important;
  }

  .dex-doc-focus-list-stack .dex-doc-focus-item strong {
    font-size: 13px !important;
  }

  .dex-doc-focus-list-stack .dex-doc-focus-item small {
    font-size: 10px !important;
  }
}

.dex-link-disabled {
  display: none !important;
  pointer-events: none !important;
  cursor: default !important;
}

.dex-mail-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  max-width: min(360px, calc(100vw - 32px));
  padding: 13px 16px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.18);
  border-radius: 12px;
  color: var(--dex-text);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.18);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.dex-mail-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 767px) {
  .rt-hero-v1 .rt-hero-v1-button-wrap {
    display: flex !important;
    width: min(100%, 320px) !important;
    max-width: 320px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    align-items: stretch !important;
    justify-content: center !important;
    flex-direction: column !important;
  }

  .rt-hero-v1 .rt-hero-v1-button-wrap .rt-button-v1-main,
  .rt-hero-v1 .rt-hero-v1-button-wrap .rt-button-v1-main .rt-button-v1 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .dex-mail-toast {
    right: 16px;
    bottom: 16px;
    left: 16px;
    max-width: none;
    text-align: center;
  }
}

/* Final mobile hero workflow override: keep all 8 stage tabs visible. */
@media screen and (max-width: 767px) {

  .dex-delivery-system-section,
  .dex-delivery-system-section .dex-delivery-system-inner {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .dex-delivery-surface,
  .dex-delivery-surface .dex-hero-workflow-status,
  .dex-delivery-surface .dex-stage-console,
  .dex-delivery-surface .dex-stage-console-body,
  .dex-delivery-surface .dex-stage-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .dex-delivery-surface {
    overflow: hidden !important;
  }

  .dex-delivery-surface .dex-project-flow {
    padding: 12px 10px 0 !important;
    overflow: hidden !important;
  }

  .dex-delivery-surface .dex-project-flow-row {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .dex-delivery-surface .dex-project-flow-card {
    width: auto !important;
    min-width: 0 !important;
    min-height: 84px !important;
    margin-bottom: 10px !important;
    gap: 5px !important;
    padding: 9px 5px 8px !important;
    align-self: stretch !important;
    border-radius: 12px !important;
  }

  .dex-delivery-surface .dex-project-flow-card.is-active {
    margin-bottom: 10px !important;
    border-bottom-color: var(--dex-workflow-line) !important;
    border-bottom-right-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(var(--dex-blue-rgb), 0.15) !important;
  }

  .dex-delivery-surface .dex-project-flow-card.is-active::after,
  .dex-project-flow-card.is-active::after {
    display: none !important;
  }

  .dex-delivery-surface .dex-project-flow-card small {
    top: 5px !important;
    left: 5px !important;
    width: 17px !important;
    height: 17px !important;
    font-size: 8px !important;
  }

  .dex-delivery-surface .dex-project-flow-card>span {
    width: 32px !important;
    height: 32px !important;
    margin-top: 1px !important;
  }

  .dex-delivery-surface .dex-project-flow-card svg {
    width: 17px !important;
    height: 17px !important;
  }

  .dex-delivery-surface .dex-project-flow-card p,
  .dex-delivery-surface .dex-project-flow-card em {
    display: none !important;
  }

  .dex-delivery-surface .dex-project-flow-card strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: clamp(9px, 2.45vw, 11px) !important;
    line-height: 1.08 !important;
    text-align: center !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  .dex-delivery-surface .dex-hero-workflow-status {
    height: auto !important;
    min-height: 430px !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  .dex-delivery-surface .dex-stage-console {
    height: auto !important;
    overflow: visible !important;
  }

  .dex-stage-console-body,
  .dex-stage-console-body.is-document-layout,
  .dex-stage-console-body.is-build-layout,
  .dex-stage-console-body.is-code-layout,
  .dex-stage-console-body.is-qa-layout,
  .dex-stage-console-body.is-deploy-layout,
  .dex-stage-console-body.is-history-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  .dex-stage-document-aside,
  .dex-stage-terminal,
  .dex-build-duo>div:nth-child(2),
  .dex-qa-checks,
  .dex-deploy-board>div:not(.dex-deploy-command),
  .dex-deploy-live-inline {
    display: none !important;
  }

  .dex-stage-panel {
    min-height: 350px !important;
  }

  .dex-build-duo,
  .dex-qa-showcase,
  .dex-deploy-board {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media screen and (max-width: 374px) {
  .dex-delivery-surface .dex-project-flow-row {
    gap: 6px !important;
  }

  .dex-delivery-surface .dex-project-flow-card {
    min-height: 76px !important;
    padding: 8px 4px 7px !important;
  }

  .dex-delivery-surface .dex-project-flow-card>span {
    width: 28px !important;
    height: 28px !important;
  }

  .dex-delivery-surface .dex-project-flow-card strong {
    font-size: 8.5px !important;
  }
}

/* Stable hero workflow height: stage changes must not move the page. */
.dex-delivery-surface .dex-hero-workflow-status {
  height: 548px !important;
  min-height: 548px !important;
  max-height: 548px !important;
  overflow: hidden !important;
}

.dex-delivery-surface .dex-stage-console {
  height: 100% !important;
  max-height: 100% !important;
  transition: opacity 180ms ease, transform 180ms ease;
}

.dex-project-workspace.is-workflow-transitioning .dex-stage-console {
  opacity: 0.78;
  transform: translateY(4px);
}

.dex-delivery-surface .dex-stage-console-body {
  min-height: 0 !important;
  overflow: hidden !important;
}

.dex-delivery-surface .dex-stage-panel,
.dex-delivery-surface .dex-stage-terminal,
.dex-delivery-surface .dex-stage-document-aside {
  overflow: hidden !important;
}

.dex-stage-console-body.is-document-layout:has(.dex-problem-brief) {
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.dex-stage-console-body.is-document-layout:has(.dex-problem-brief)>.dex-stage-panel,
.dex-stage-console-body.is-document-layout:has(.dex-problem-brief)>.dex-problem-document-preview {
  height: 394px !important;
  min-height: 394px !important;
  max-height: 394px !important;
}

.dex-stage-console-body.is-build-layout>.dex-stage-panel,
.dex-stage-console-body.is-build-layout>.dex-build-terminal,
.dex-stage-console-body.is-code-layout>.dex-stage-panel,
.dex-stage-console-body.is-code-layout>.dex-code-output-panel,
.dex-stage-console-body.is-deploy-layout>.dex-stage-panel,
.dex-stage-console-body.is-deploy-layout>.dex-deploy-terminal,
.dex-stage-console-body.is-history-layout>.dex-stage-panel {
  height: 394px !important;
  min-height: 394px !important;
  max-height: 394px !important;
}

.dex-problem-brief {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
  color: #000000;
}

.dex-problem-writer,
.dex-problem-paper {
  min-height: 0 !important;
}

.dex-problem-writer {
  flex: 1 1 auto;
}

.dex-problem-paper {
  height: 100% !important;
  padding: 16px !important;
  gap: 7px !important;
}

.dex-problem-paper p {
  grid-template-columns: minmax(0, 1fr) !important;
  font-size: 12.5px !important;
  line-height: 1.34 !important;
}

.dex-problem-paper p b {
  color: #000000 !important;
}

.dex-problem-paper .dex-document-cursor {
  margin-left: 0 !important;
}

.dex-problem-document-preview {
  overflow: hidden;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  color: #000000 !important;
  background: #ffffff !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.dex-problem-document-preview header {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.1);
}

.dex-problem-document-preview header small {
  color: #000000;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.dex-problem-document-preview button {
  display: inline-flex;
  min-height: 30px;
  padding: 0 10px;
  gap: 6px;
  align-items: center;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 999px;
  color: #000000;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.dex-problem-document-preview button svg {
  width: 15px;
  height: 15px;
}

.dex-problem-document-preview h4 {
  margin: 0 0 6px;
  color: #000000;
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 900;
  line-height: 1.08;
  text-align: justify;
}

.dex-problem-document-preview section {
  margin-top: 4px;
}

.dex-problem-document-preview section strong {
  display: block;
  margin-bottom: 2px;
  color: #000000;
  font-size: 11.9px;
  font-weight: 900;
  line-height: 1.12;
  text-align: justify;
}

.dex-problem-document-preview p,
.dex-problem-document-preview li {
  color: #000000;
  font-size: 11.15px;
  font-weight: 800;
  line-height: 1.23;
  text-align: justify;
}

.dex-problem-document-preview p {
  margin: 0;
}

.dex-problem-document-preview ol,
.dex-problem-document-preview ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.dex-problem-document-preview li {
  position: relative;
  padding-left: 12px;
}

.dex-problem-document-preview li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--dex-blue);
  box-shadow: 0 0 0 3px rgba(var(--dex-blue-rgb), 0.08);
}

.dex-problem-document-preview li b {
  color: #000000;
  font-weight: 950;
}

.dex-problem-document-preview h4,
.dex-problem-document-preview section {
  opacity: 1 !important;
  transition: none !important;
  transform: none !important;
}

.dex-problem-document-preview h4.is-visible,
.dex-problem-document-preview section.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

.dex-problem-document-cursor {
  display: block;
  width: 8px;
  height: 16px;
  margin-top: 5px;
  margin-left: 2px;
  border-radius: 2px;
  background: var(--dex-blue);
  box-shadow: 0 0 14px rgba(var(--dex-blue-rgb), 0.36);
  animation: dex-terminal-cursor-blink 760ms steps(2, start) infinite;
}

.dex-problem-document-preview,
.dex-problem-document-preview *,
.dex-problem-document-preview h4,
.dex-problem-document-preview section,
.dex-problem-document-preview section *,
.dex-problem-document-preview li,
.dex-problem-document-preview li *,
.dex-problem-document-preview li::marker {
  color: #000000 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.dex-problem-document-preview h4.is-visible,
.dex-problem-document-preview section.is-visible {
  opacity: 1 !important;
}

.dex-problem-document-preview li {
  transform: none !important;
  transition: none !important;
}

.dex-delivery-document-preview footer,
.dex-generated-document-preview footer {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 6px;
  padding: 5px 9px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.16);
  border-radius: 999px;
  color: #000000 !important;
  background: rgba(var(--dex-blue-rgb), 0.06);
  font-size: 10.5px;
  font-weight: 950;
  line-height: 1.1;
}

.dex-delivery-document-preview section,
.dex-generated-document-preview section {
  margin-top: 3px;
}

.dex-generated-document-preview h4 {
  font-size: clamp(16px, 1.22vw, 18px);
}

.dex-generated-document-preview p,
.dex-generated-document-preview li {
  font-size: 11.2px;
  line-height: 1.22;
}

.dex-generated-document-preview ul {
  gap: 2px;
}

/* Hero generated document preview: compact paper treatment that avoids clipping. */
.dex-stage-console-body.is-document-layout:has(.dex-generated-document-preview) {
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr) !important;
  gap: 16px !important;
}

.dex-stage-console-body.is-document-layout:has(.dex-generated-document-preview)>.dex-stage-panel,
.dex-stage-console-body.is-document-layout:has(.dex-generated-document-preview)>.dex-generated-document-preview {
  height: 394px !important;
  min-height: 394px !important;
  max-height: 394px !important;
}

.dex-stage-console-body.is-document-layout:has(.dex-generated-document-preview) .dex-stage-panel {
  display: flex !important;
  min-height: 0 !important;
  flex-direction: column !important;
}

.dex-stage-console-body.is-document-layout:has(.dex-generated-document-preview) .dex-problem-brief {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.dex-stage-console-body.is-document-layout:has(.dex-generated-document-preview) .dex-problem-writer {
  overflow: hidden !important;
}

.dex-stage-console-body.is-document-layout:has(.dex-generated-document-preview) .dex-problem-paper {
  position: relative !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: 14px 16px 38px !important;
  gap: 6px !important;
  overflow: hidden !important;
}

.dex-stage-console-body.is-document-layout:has(.dex-generated-document-preview) .dex-problem-paper::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 58px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 252, 244, 0.96) 72%);
  pointer-events: none;
}

.dex-stage-console-body.is-document-layout:has(.dex-generated-document-preview) .dex-problem-paper p {
  margin: 0 !important;
  font-size: 11.6px !important;
  line-height: 1.22 !important;
}

.dex-stage-console-body.is-document-layout:has(.dex-generated-document-preview) .dex-stage-stream-meter {
  flex: 0 0 auto !important;
}

.dex-generated-document-preview {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 15px 18px 18px !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #ffffff 68%, #fbfdff 100%) !important;
}

.dex-generated-document-preview::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  height: 54px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 76%);
  pointer-events: none;
}

.dex-generated-document-preview header {
  flex: 0 0 auto;
  margin-bottom: 8px !important;
  padding-bottom: 8px !important;
}

.dex-generated-document-preview header small {
  font-size: 10px !important;
  letter-spacing: 0.09em !important;
}

.dex-generated-document-preview button {
  min-height: 28px !important;
  padding-inline: 10px !important;
  font-size: 11px !important;
}

.dex-generated-document-preview h4 {
  flex: 0 0 auto;
  margin-bottom: 12px !important;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.08);
  font-size: clamp(16px, 1.35vw, 19px) !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

.dex-generated-document-preview section {
  margin-top: 0 !important;
  padding: 8px 0 6px;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.055);
}

.dex-generated-document-preview section:last-of-type {
  border-bottom: 0;
}

.dex-generated-document-preview section strong {
  margin-bottom: 4px !important;
  font-size: 12px !important;
  line-height: 1.12 !important;
  text-align: left !important;
}

.dex-generated-document-preview p,
.dex-generated-document-preview li {
  font-size: 11.2px !important;
  font-weight: 800 !important;
  line-height: 1.22 !important;
  text-align: left !important;
}

.dex-generated-document-preview ul {
  gap: 1px !important;
}

.dex-generated-document-preview li {
  padding-left: 13px !important;
}

.dex-generated-document-preview li::before {
  top: 0.56em !important;
  width: 3px !important;
  height: 3px !important;
}

.dex-generated-document-preview .dex-problem-document-cursor {
  display: none !important;
}

/* Hero document panels: remove loose vertical gaps and make draft lines read as bullets. */
.dex-stage-console-body.is-document-layout:has(.dex-generated-document-preview) .dex-problem-paper {
  display: grid !important;
  align-content: start !important;
  gap: 5px !important;
}

.dex-stage-console-body.is-document-layout:has(.dex-generated-document-preview) .dex-problem-paper p {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 8px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: start !important;
  padding: 0 !important;
}

.dex-stage-console-body.is-document-layout:has(.dex-generated-document-preview) .dex-problem-paper p::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-top: 0.55em;
  border-radius: 999px;
  background: var(--dex-blue);
  box-shadow: 0 0 0 3px rgba(var(--dex-blue-rgb), 0.08);
}

.dex-stage-console-body.is-document-layout:has(.dex-generated-document-preview) .dex-problem-paper p b {
  min-width: 0;
}

.dex-generated-document-preview h4 {
  margin-bottom: 7px !important;
  padding-bottom: 6px !important;
}

.dex-generated-document-preview section {
  padding: 5px 0 4px !important;
}

.dex-generated-document-preview section strong {
  margin-bottom: 2px !important;
}

.dex-generated-document-preview section strong+p,
.dex-generated-document-preview section strong+ul {
  margin-top: 0 !important;
}

.dex-generated-document-preview p,
.dex-generated-document-preview ul {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.dex-generated-document-preview ul {
  gap: 0 !important;
}

.dex-stage-console-body.is-document-layout:has(.dex-problem-brief) .dex-problem-paper {
  display: grid !important;
  align-content: start !important;
  gap: 7px !important;
}

.dex-stage-console-body.is-document-layout:has(.dex-problem-brief) .dex-problem-paper p {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 9px minmax(0, 1fr) !important;
  gap: 9px !important;
  align-items: start !important;
  padding: 0 !important;
  margin: 0 !important;
}

.dex-stage-console-body.is-document-layout:has(.dex-problem-brief) .dex-problem-paper p::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-top: 0.54em;
  border-radius: 999px;
  background: var(--dex-blue);
  box-shadow: 0 0 0 3px rgba(var(--dex-blue-rgb), 0.09);
}

.dex-stage-console-body.is-document-layout:has(.dex-problem-brief) .dex-problem-paper p b {
  min-width: 0;
  font-size: clamp(12.5px, 0.9vw, 15px) !important;
  line-height: 1.32 !important;
}

@media screen and (max-width: 767px) {
  .dex-stage-console-body.is-document-layout:has(.dex-problem-brief) .dex-problem-paper {
    align-content: start !important;
    gap: 7px !important;
  }

  .dex-stage-console-body.is-document-layout:has(.dex-problem-brief) .dex-problem-paper p b {
    font-size: 12.5px !important;
    line-height: 1.3 !important;
  }
}

.dex-stage-console-body.is-build-layout {
  grid-template-columns: minmax(0, 0.96fr) minmax(320px, 0.84fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.dex-build-stream {
  display: grid;
  min-height: 310px;
  align-content: start;
  gap: 9px;
}

.dex-build-stream>strong {
  color: #000000;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.1;
}

.dex-build-stream>p {
  margin: -2px 0 4px;
  color: #000000;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.dex-build-stream>div {
  display: grid;
  gap: 8px;
}

.dex-build-stream span {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 9px 10px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 10px;
  color: #000000;
  background: rgba(255, 255, 255, 0.78);
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1.3;
}

.dex-build-stream i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--dex-blue);
  box-shadow: 0 0 0 4px rgba(var(--dex-blue-rgb), 0.12);
}

.dex-build-terminal {
  overflow: hidden;
  background: #07111f !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}

.dex-build-terminal pre {
  margin: 0;
  padding: 16px;
  color: #dbeafe;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.55;
  white-space: pre-wrap;
}

.dex-build-terminal pre::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 3px;
  border-radius: 2px;
  background: var(--dex-yellow);
  vertical-align: -2px;
  animation: dex-terminal-cursor-blink 760ms steps(2, start) infinite;
}

@media screen and (max-width: 767px) {
  .dex-stage-console-body.is-build-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dex-build-terminal {
    display: none !important;
  }
}

.dex-stage-console-body.is-code-layout {
  grid-template-columns: minmax(0, 0.94fr) minmax(330px, 0.86fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.dex-code-stream {
  display: grid;
  min-height: 310px;
  align-content: start;
  gap: 9px;
}

.dex-code-stream>strong {
  color: #000000;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.1;
}

.dex-code-stream>p {
  margin: -2px 0 4px;
  overflow: hidden;
  color: #000000;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dex-code-stream>div {
  display: grid;
  gap: 8px;
}

.dex-code-stream span {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 10px;
  color: #000000;
  background: rgba(255, 255, 255, 0.78);
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1.3;
}

.dex-code-stream i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: var(--dex-blue-dark);
  background: rgba(var(--dex-blue-rgb), 0.09);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.dex-code-output-panel {
  display: flex;
  min-width: 0;
  min-height: 390px;
  flex-direction: column;
  gap: 9px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 14px;
  color: #000000;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.dex-code-output-panel header,
.dex-code-output-panel footer {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.dex-code-output-panel small {
  color: #000000;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.dex-code-output-panel button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.14);
  border-radius: 999px;
  color: #000000;
  background: rgba(var(--dex-blue-rgb), 0.06);
  font: inherit;
  font-size: 10.5px;
  font-weight: 950;
}

.dex-code-output-panel h4 {
  margin: 5px 0 2px;
  color: #000000;
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 950;
  line-height: 1.08;
}

.dex-code-output-panel p {
  margin: 0;
  color: #000000;
  font-size: 11.2px;
  font-weight: 800;
  line-height: 1.32;
}

.dex-code-output-panel section {
  display: grid;
  gap: 5px;
  margin-top: 5px;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--dex-blue-rgb), 0.1);
}

.dex-code-output-panel section strong {
  color: #000000;
  font-size: 11.5px;
  font-weight: 950;
}

.dex-code-output-panel section span {
  padding: 6px 8px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.09);
  border-radius: 8px;
  color: #000000;
  background: rgba(var(--dex-blue-rgb), 0.035);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.22;
}

.dex-code-output-panel pre {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 13px;
  overflow: hidden;
  border-radius: 12px;
  color: #dbeafe;
  background: #07111f;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.5;
  white-space: pre-wrap;
}

.dex-code-editor {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  background: #07111f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dex-code-editor-top {
  display: flex;
  min-height: 38px;
  gap: 7px;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: #0f1a2d;
}

.dex-code-editor-top span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
}

.dex-code-editor-top span:nth-child(2) {
  background: #f59e0b;
}

.dex-code-editor-top span:nth-child(3) {
  background: #22c55e;
}

.dex-code-editor-top b {
  margin-left: 8px;
  color: #7dd3fc;
  font-size: 11.5px;
  font-weight: 950;
}

.dex-code-editor-top em {
  margin-left: auto;
  color: #94a3b8;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 850;
}

.dex-code-editor pre {
  border-radius: 0;
  background: #07111f;
}

.dex-code-editor pre::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 3px;
  border-radius: 2px;
  background: var(--dex-yellow);
  vertical-align: -2px;
  animation: dex-terminal-cursor-blink 760ms steps(2, start) infinite;
}

@media screen and (max-width: 767px) {
  .dex-stage-console-body.is-code-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dex-code-output-panel {
    display: none !important;
  }
}

/* Final Deployment-stage workspace: one controlled preview release in DeX. */
.dex-stage-console-body.is-deploy-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.72fr) !important;
  gap: 14px !important;
}

.dex-deploy-workbench {
  display: grid;
  align-content: start;
  gap: 13px;
  min-height: 310px;
}

.dex-deploy-workbench>strong {
  color: var(--dex-blue-dark);
  font-size: 18px;
  line-height: 1.1;
}

.dex-deploy-workbench>p {
  margin: -3px 0 2px;
  color: var(--dex-muted);
  font-size: 12px;
  line-height: 1.45;
}

.dex-deploy-config {
  display: grid;
  gap: 8px;
}

.dex-deploy-config span {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.14);
  border-radius: 9px;
  background: linear-gradient(100deg, rgba(var(--dex-blue-rgb), 0.045), rgba(255, 255, 255, 0.9));
}

.dex-deploy-config b {
  color: var(--dex-blue-dark);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dex-deploy-config em {
  color: var(--dex-blue);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.dex-deploy-workbench>button {
  justify-self: start;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--dex-blue);
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(100deg, var(--dex-blue), #4f46e5);
  font-size: 11px;
  font-weight: 950;
}

.dex-stage-console-body.is-deploy-layout .dex-deploy-terminal {
  border: 1px solid rgba(var(--dex-blue-rgb), 0.2) !important;
  background: linear-gradient(145deg, #ffffff 0%, #eff6ff 100%) !important;
  box-shadow: none !important;
}

.dex-stage-console-body.is-deploy-layout .dex-deploy-terminal .dex-terminal-top {
  border-bottom-color: rgba(var(--dex-blue-rgb), 0.17) !important;
  background: linear-gradient(100deg, rgba(var(--dex-blue-rgb), 0.12), rgba(var(--dex-yellow-rgb), 0.2)) !important;
}

.dex-stage-console-body.is-deploy-layout .dex-deploy-terminal pre {
  color: var(--dex-blue-dark) !important;
  font-size: 11px !important;
  line-height: 1.7 !important;
}

.dex-stage-console-body.is-deploy-layout .dex-deploy-terminal .dex-terminal-top b {
  color: var(--dex-blue-dark) !important;
}

.dex-stage-console-body.is-deploy-layout .dex-deploy-terminal .dex-terminal-top span:nth-child(1) {
  background: var(--dex-blue) !important;
}

.dex-stage-console-body.is-deploy-layout .dex-deploy-terminal .dex-terminal-top span:nth-child(2) {
  background: var(--dex-yellow) !important;
}

.dex-stage-console-body.is-deploy-layout .dex-deploy-terminal .dex-terminal-top span:nth-child(3) {
  background: #60a5fa !important;
}

@media screen and (max-width: 767px) {
  .dex-stage-console-body.is-deploy-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dex-stage-console-body.is-deploy-layout>.dex-deploy-terminal {
    display: none !important;
  }
}

/* Final QA-stage workspace: DeX validates the build before preview release. */
.dex-stage-console-body.is-qa-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.72fr) !important;
  gap: 14px !important;
}

.dex-qa-workbench {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 13px;
  height: 100%;
  min-height: 0;
}

.dex-qa-workbench>strong {
  color: var(--dex-blue-dark);
  font-size: 18px;
  line-height: 1.1;
}

.dex-qa-workbench>p {
  margin: -3px 0 2px;
  color: var(--dex-muted);
  font-size: 12px;
  line-height: 1.45;
}

.dex-qa-workbench>button {
  justify-self: start;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--dex-blue);
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(100deg, var(--dex-blue), #4f46e5);
  font-size: 11px;
  font-weight: 950;
}

.dex-qa-log {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  margin-top: 3px;
}

.dex-qa-log>b {
  color: var(--dex-blue-dark);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.dex-qa-log pre {
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 16px 18px;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.2);
  border-radius: 10px;
  color: var(--dex-blue-dark);
  background: linear-gradient(145deg, #ffffff 0%, #eff6ff 100%);
  font-family: var(--dex-mono-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  white-space: pre-wrap;
}

.dex-qa-matrix {
  display: grid;
  overflow: hidden;
  min-height: 394px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.2);
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff 0%, #eff6ff 100%);
}

.dex-qa-matrix>header {
  display: flex;
  min-height: 38px;
  gap: 7px;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.17);
  background: linear-gradient(100deg, rgba(var(--dex-blue-rgb), 0.12), rgba(var(--dex-yellow-rgb), 0.2));
}

.dex-qa-matrix>header span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dex-blue);
}

.dex-qa-matrix>header span:nth-child(2) {
  background: var(--dex-yellow);
}

.dex-qa-matrix>header span:nth-child(3) {
  background: #60a5fa;
}

.dex-qa-matrix>header b {
  margin-left: 4px;
  color: var(--dex-blue-dark);
  font-size: 12px;
  font-weight: 950;
}

.dex-qa-matrix>div {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 11px;
}

.dex-qa-matrix article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.13);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.74);
}

.dex-qa-matrix article strong {
  color: var(--dex-blue-dark);
  font-size: 11px;
  line-height: 1.35;
}

.dex-qa-matrix article em {
  padding: 4px 6px;
  border-radius: 5px;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.1);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.dex-qa-matrix>div>p {
  margin: 0;
  color: var(--dex-muted);
  font-size: 11px;
}

@media screen and (max-width: 767px) {
  .dex-stage-console-body.is-qa-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dex-stage-console-body.is-qa-layout>.dex-qa-matrix {
    display: none !important;
  }
}

/* Hero Code stage: a compact DeX workspace explorer beside the typed editor. */
.dex-code-workspace {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.14);
  border-radius: 12px;
  background: linear-gradient(155deg, rgba(var(--dex-blue-rgb), 0.055), rgba(255, 255, 255, 0.96));
}

.dex-code-workspace>header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.11);
}

.dex-code-workspace>header b,
.dex-code-workspace>header span {
  display: grid;
  min-height: 30px;
  place-items: center;
  border-radius: 7px;
  color: #64748b;
  font-size: 10px;
  font-weight: 950;
}

.dex-code-workspace>header b {
  color: var(--dex-blue-dark);
  background: rgba(var(--dex-blue-rgb), 0.1);
}

.dex-code-workspace>small {
  display: block;
  padding: 11px 12px 7px;
  color: #64748b;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.dex-code-workspace>div {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 2px 10px 12px;
  overflow: hidden;
}

.dex-code-workspace p {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 25px;
  margin: 0;
  padding: 0 7px;
  border-radius: 6px;
  color: #334155;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.15;
}

.dex-code-workspace p.is-folder {
  color: var(--dex-blue-dark);
}

.dex-code-workspace p:nth-child(2) {
  padding-left: 15px;
}

.dex-code-workspace p:nth-child(3) {
  padding-left: 23px;
}

.dex-code-workspace p:nth-child(4),
.dex-code-workspace p:nth-child(5) {
  padding-left: 31px;
}

.dex-code-workspace p:nth-child(6),
.dex-code-workspace p:nth-child(7) {
  padding-left: 39px;
}

.dex-code-workspace p i {
  color: var(--dex-yellow);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  text-align: center;
}

.dex-code-workspace p:not(.is-folder) i {
  color: var(--dex-blue);
}

.dex-stage-console-body.is-code-layout .dex-code-output-panel {
  border-color: rgba(var(--dex-blue-rgb), 0.2);
  background: #16181f;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.14);
}

.dex-stage-console-body.is-code-layout .dex-code-output-panel header {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.22);
}

.dex-stage-console-body.is-code-layout .dex-code-output-panel small {
  color: #93c5fd;
}

.dex-stage-console-body.is-code-layout .dex-code-output-panel button {
  border-color: rgba(var(--dex-blue-rgb), 0.45);
  color: #ffffff;
  background: var(--dex-blue);
}

.dex-stage-console-body.is-code-layout .dex-code-editor {
  border-color: rgba(var(--dex-blue-rgb), 0.25);
  background: #16181f;
}

.dex-stage-console-body.is-code-layout .dex-code-editor-top {
  border-bottom-color: rgba(var(--dex-blue-rgb), 0.2);
  background: linear-gradient(100deg, rgba(var(--dex-blue-rgb), 0.18), rgba(var(--dex-yellow-rgb), 0.08));
}

.dex-stage-console-body.is-code-layout .dex-code-editor-top span:nth-child(1) {
  background: var(--dex-blue);
}

.dex-stage-console-body.is-code-layout .dex-code-editor-top span:nth-child(2) {
  background: var(--dex-yellow);
}

.dex-stage-console-body.is-code-layout .dex-code-editor-top span:nth-child(3) {
  background: #60a5fa;
}

.dex-stage-console-body.is-code-layout .dex-code-editor-top b {
  color: #dbeafe;
}

.dex-stage-console-body.is-code-layout .dex-code-editor-top em {
  color: #93c5fd;
}

.dex-stage-console-body.is-code-layout .dex-code-editor pre {
  color: #bfdbfe;
  background: #16181f;
}

.dex-stage-console-body.is-deploy-layout {
  grid-template-columns: minmax(0, 0.94fr) minmax(330px, 0.86fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.dex-deploy-stream {
  display: grid;
  min-height: 310px;
  align-content: start;
  gap: 9px;
}

.dex-deploy-stream>strong {
  color: #000000;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.1;
}

.dex-deploy-stream>p {
  margin: -2px 0 4px;
  color: #000000;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.dex-deploy-stream>div {
  display: grid;
  gap: 8px;
}

.dex-deploy-stream span {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 10px;
  color: #000000;
  background: rgba(255, 255, 255, 0.78);
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1.3;
}

.dex-deploy-stream i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: var(--dex-blue-dark);
  background: rgba(var(--dex-blue-rgb), 0.09);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.dex-deploy-terminal {
  overflow: hidden;
  background: #07111f !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}

.dex-deploy-terminal pre {
  margin: 0;
  padding: 14px 16px;
  color: #dbeafe;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.42;
  white-space: pre-wrap;
}

.dex-deploy-terminal pre::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 3px;
  border-radius: 2px;
  background: var(--dex-yellow);
  vertical-align: -2px;
  animation: dex-terminal-cursor-blink 760ms steps(2, start) infinite;
}

@media screen and (max-width: 767px) {
  .dex-stage-console-body.is-deploy-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dex-deploy-terminal {
    display: none !important;
  }
}

.dex-project-workspace.is-workflow-paused .dex-stage-stream-meter span {
  background: linear-gradient(90deg, var(--dex-blue), var(--dex-blue-dark));
}

.dex-project-workspace.is-workflow-paused .dex-stage-tabs button.is-active,
.dex-project-workspace.is-workflow-paused .dex-project-flow-card.is-active {
  box-shadow:
    0 0 0 2px rgba(var(--dex-yellow-rgb), 0.45),
    0 18px 36px rgba(var(--dex-blue-rgb), 0.14) !important;
}

@media screen and (max-width: 767px) {
  .dex-delivery-surface .dex-hero-workflow-status {
    height: 528px !important;
    min-height: 528px !important;
    max-height: 528px !important;
  }

  .dex-stage-console-body.is-document-layout:has(.dex-problem-brief) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dex-stage-console-body.is-document-layout:has(.dex-problem-brief)>.dex-stage-panel {
    height: 382px !important;
    min-height: 382px !important;
    max-height: 382px !important;
  }

  .dex-problem-paper {
    padding: 14px !important;
  }

  .dex-problem-document-preview {
    display: none !important;
  }
}

/* DeX Engine readability override: white panels on the blue section. */
.rt-ai-agents-v1 .dex-handover-card {
  border-color: rgba(var(--dex-blue-rgb), 0.18) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.rt-ai-agents-v1 .dex-handover-card:hover {
  border-color: rgba(var(--dex-yellow-rgb), 0.62) !important;
  box-shadow: 0 28px 64px rgba(15, 23, 42, 0.24) !important;
}

.rt-ai-agents-v1 .dex-handover-card::after {
  background: radial-gradient(circle, rgba(var(--dex-blue-rgb), 0.08), transparent 70%) !important;
}

.rt-ai-agents-v1 .dex-handover-card-yellow::after {
  background: radial-gradient(circle, rgba(var(--dex-yellow-rgb), 0.14), transparent 70%) !important;
}

.rt-ai-agents-v1 .dex-hov-human {
  border-bottom-color: rgba(var(--dex-blue-rgb), 0.13) !important;
}

.rt-ai-agents-v1 .dex-hov-beam {
  border-bottom-color: rgba(var(--dex-blue-rgb), 0.1) !important;
  background: rgba(var(--dex-blue-rgb), 0.035) !important;
}

.rt-ai-agents-v1 .dex-hov-zone-label {
  color: #64748b !important;
}

.rt-ai-agents-v1 .dex-hov-agent-label,
.rt-ai-agents-v1 .dex-hov-beam-text,
.rt-ai-agents-v1 .dex-hov-outcome-chip {
  color: #b77900 !important;
}

.rt-ai-agents-v1 .dex-hov-roles,
.rt-ai-agents-v1 .dex-hov-agent-info strong,
.rt-ai-agents-v1 .dex-hov-outcome p {
  color: #0f172a !important;
}

.rt-ai-agents-v1 .dex-hov-domain {
  color: #475569 !important;
}

.rt-ai-agents-v1 .dex-hov-outcome {
  border-color: rgba(var(--dex-blue-rgb), 0.14) !important;
  background: rgba(var(--dex-blue-rgb), 0.045) !important;
}

.rt-ai-agents-v1 .dex-av-blue {
  background: rgba(37, 99, 235, 0.12) !important;
}

.rt-ai-agents-v1 .dex-av-indigo {
  background: rgba(99, 102, 241, 0.12) !important;
}

.rt-ai-agents-v1 .dex-av-green {
  background: rgba(16, 185, 129, 0.13) !important;
}

.rt-ai-agents-v1 .dex-av-amber {
  background: rgba(251, 191, 36, 0.16) !important;
}

.rt-ai-agents-v1 .dex-av-rose {
  background: rgba(244, 63, 94, 0.12) !important;
}

.rt-ai-agents-v1 .dex-engine-outcome {
  border-color: rgba(var(--dex-blue-rgb), 0.16) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.16) !important;
}

.rt-ai-agents-v1 .dex-engine-outcome strong {
  color: #0f172a !important;
}

.rt-ai-agents-v1 .dex-engine-outcome p {
  color: #334155 !important;
}

.rt-ai-agents-v1 .dex-engine-outcome small {
  color: #64748b !important;
}

/* Hero workflow terminals: DeX themed surface instead of black console panels. */
.dex-delivery-surface .dex-stage-terminal,
.dex-delivery-surface .dex-build-terminal,
.dex-delivery-surface .dex-qa-terminal,
.dex-delivery-surface .dex-deploy-terminal,
.dex-delivery-surface .dex-code-editor,
.dex-delivery-surface .dex-code-output-panel pre {
  border: 1px solid rgba(var(--dex-blue-rgb), 0.16) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--dex-yellow-rgb), 0.18), transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #eef5ff 55%, #f8fbff 100%) !important;
  box-shadow:
    0 18px 44px rgba(var(--dex-blue-rgb), 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

.dex-delivery-surface .dex-terminal-top,
.dex-delivery-surface .dex-code-editor-top,
.dex-delivery-surface .dex-qa-terminal div {
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.13) !important;
  background:
    linear-gradient(90deg, rgba(var(--dex-blue-rgb), 0.12), rgba(var(--dex-yellow-rgb), 0.1)) !important;
}

.dex-delivery-surface .dex-terminal-top b,
.dex-delivery-surface .dex-code-editor-top b {
  color: var(--dex-blue-dark) !important;
}

.dex-delivery-surface .dex-code-editor-top em {
  color: var(--dex-text-secondary) !important;
}

.dex-delivery-surface .dex-stage-terminal pre,
.dex-delivery-surface .dex-build-terminal pre,
.dex-delivery-surface .dex-qa-terminal pre,
.dex-delivery-surface .dex-deploy-terminal pre,
.dex-delivery-surface .dex-code-editor pre,
.dex-delivery-surface .dex-code-output-panel pre {
  color: var(--dex-blue-dark) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(var(--dex-blue-rgb), 0.045)) !important;
  text-shadow: none !important;
}

.dex-delivery-surface .dex-stage-terminal pre::selection,
.dex-delivery-surface .dex-code-editor pre::selection,
.dex-delivery-surface .dex-code-output-panel pre::selection {
  color: #ffffff;
  background: var(--dex-blue);
}

.dex-delivery-surface .dex-terminal-top span,
.dex-delivery-surface .dex-code-editor-top span,
.dex-delivery-surface .dex-qa-terminal div span {
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08) !important;
}

.dex-delivery-surface .dex-terminal-top span:nth-child(1),
.dex-delivery-surface .dex-code-editor-top span:nth-child(1),
.dex-delivery-surface .dex-qa-terminal div span:nth-child(1) {
  background: var(--dex-blue) !important;
}

.dex-delivery-surface .dex-terminal-top span:nth-child(2),
.dex-delivery-surface .dex-code-editor-top span:nth-child(2),
.dex-delivery-surface .dex-qa-terminal div span:nth-child(2) {
  background: var(--dex-yellow) !important;
}

.dex-delivery-surface .dex-terminal-top span:nth-child(3),
.dex-delivery-surface .dex-code-editor-top span:nth-child(3),
.dex-delivery-surface .dex-qa-terminal div span:nth-child(3) {
  background: #60a5fa !important;
}

/* Final mobile hero workflow polish: fit tab counts and prevent clipped panels. */
@media screen and (max-width: 767px) {

  .dex-delivery-system-section,
  .dex-delivery-system-section .dex-delivery-system-inner,
  .dex-delivery-surface,
  .dex-delivery-surface .dex-hero-workflow-status,
  .dex-delivery-surface .dex-stage-console {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .dex-delivery-surface .dex-hero-workflow-status,
  .dex-delivery-surface .dex-stage-console {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  .dex-delivery-surface .dex-stage-tabs {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-auto-columns: unset !important;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
    overflow: hidden !important;
  }

  .dex-delivery-surface .dex-stage-tabs:has(button:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dex-delivery-surface .dex-stage-tabs:has(button:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .dex-delivery-surface .dex-stage-tabs button {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 58px !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 8px !important;
    padding: 10px 8px !important;
  }

  .dex-delivery-surface .dex-stage-tabs button:last-child {
    border-right: 0 !important;
  }

  .dex-delivery-surface .dex-stage-tabs b {
    display: block !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  .dex-delivery-surface .dex-stage-console-body,
  .dex-stage-console-body.is-document-layout,
  .dex-stage-console-body.is-build-layout,
  .dex-stage-console-body.is-code-layout,
  .dex-stage-console-body.is-qa-layout,
  .dex-stage-console-body.is-deploy-layout,
  .dex-stage-console-body.is-history-layout {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .dex-stage-console-body.is-build-layout>.dex-stage-panel,
  .dex-stage-console-body.is-code-layout>.dex-stage-panel,
  .dex-stage-console-body.is-deploy-layout>.dex-stage-panel,
  .dex-stage-console-body.is-history-layout>.dex-stage-panel,
  .dex-stage-console-body.is-document-layout:has(.dex-problem-brief)>.dex-stage-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .dex-code-stream {
    min-height: 0 !important;
  }

  .dex-code-stream>p {
    white-space: normal !important;
    text-overflow: clip !important;
  }
}

/* Final mobile workflow-board polish: prevent icon tiles from colliding with labels. */
@media screen and (max-width: 575px) {
  .dex-delivery-system-section .dex-delivery-workflow-track {
    gap: 28px 14px !important;
  }

  .dex-delivery-system-section .dex-delivery-workflow-step {
    display: flex !important;
    min-height: 0 !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 4px 10px !important;
    text-align: center !important;
  }

  .dex-delivery-system-section .dex-workflow-card-visual {
    width: clamp(76px, 28vw, 104px) !important;
    height: clamp(76px, 28vw, 104px) !important;
    margin: 0 auto 14px !important;
  }

  .dex-delivery-system-section .dex-workflow-card-body {
    width: 100% !important;
    max-width: 138px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    align-items: center !important;
    text-align: center !important;
  }

  .dex-delivery-system-section .dex-workflow-card-body strong,
  .dex-delivery-system-section .dex-delivery-workflow-step strong {
    display: block !important;
    width: 100% !important;
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
  }
}

/* Final delivery workflow sizing: compact tiles and 4 x 2 mobile grid. */
.dex-delivery-system-section .dex-workflow-board {
  padding: clamp(30px, 3.4vw, 46px) clamp(20px, 3.2vw, 42px) !important;
}

.dex-delivery-system-section .dex-delivery-workflow-track {
  gap: clamp(8px, 1.1vw, 16px) !important;
  margin-top: clamp(30px, 3.8vw, 48px) !important;
}

.dex-delivery-system-section .dex-workflow-card-visual {
  width: clamp(62px, 4.9vw, 76px) !important;
  height: clamp(62px, 4.9vw, 76px) !important;
  margin-bottom: 12px !important;
  border-radius: 16px !important;
  box-shadow:
    0 4px 0 #16368e,
    0 12px 24px rgba(var(--dex-blue-rgb), 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

.dex-delivery-system-section .dex-delivery-workflow-step:nth-child(odd) .dex-workflow-card-visual {
  box-shadow:
    0 4px 0 #b77c00,
    0 12px 24px rgba(var(--dex-yellow-rgb), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

.dex-delivery-system-section .dex-delivery-workflow-step:hover .dex-workflow-card-visual,
.dex-delivery-system-section .dex-delivery-workflow-step.is-active .dex-workflow-card-visual,
.dex-delivery-system-section .dex-delivery-workflow-step.is-active:not(:hover) .dex-workflow-card-visual {
  transform: translateY(-3px) scale(1.04) !important;
}

.dex-delivery-system-section .dex-workflow-icon-mark,
.dex-delivery-system-section .dex-workflow-icon-mark svg {
  width: clamp(23px, 2vw, 30px) !important;
  height: clamp(23px, 2vw, 30px) !important;
}

.dex-delivery-system-section .dex-workflow-card-badge {
  top: -7px !important;
  left: -7px !important;
  min-width: 20px !important;
  height: 20px !important;
  font-size: 8px !important;
}

.dex-delivery-system-section .dex-workflow-card-body strong,
.dex-delivery-system-section .dex-delivery-workflow-step strong {
  font-size: clamp(12px, 0.95vw, 14px) !important;
  line-height: 1.14 !important;
}

.dex-delivery-system-section .dex-workflow-dynamic-desc {
  margin-top: clamp(28px, 3.5vw, 44px) !important;
}

@media screen and (max-width: 575px) {
  .dex-delivery-system-section .dex-workflow-board {
    padding: 24px 12px 28px !important;
    border-radius: 18px !important;
  }

  .dex-delivery-system-section .dex-workflow-board-header {
    text-align: left !important;
  }

  .dex-delivery-system-section .dex-workflow-board-header h3 {
    font-size: clamp(25px, 7.2vw, 34px) !important;
    line-height: 1.08 !important;
  }

  .dex-delivery-system-section .dex-workflow-agent-count {
    display: none !important;
  }

  .dex-delivery-system-section .dex-delivery-workflow-track {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px 7px !important;
    margin-top: 24px !important;
  }

  .dex-delivery-system-section .dex-delivery-workflow-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
  }

  .dex-delivery-system-section .dex-workflow-card-visual {
    width: clamp(48px, 13.4vw, 56px) !important;
    height: clamp(48px, 13.4vw, 56px) !important;
    margin: 0 auto 8px !important;
    border-radius: 13px !important;
  }

  .dex-delivery-system-section .dex-workflow-icon-mark,
  .dex-delivery-system-section .dex-workflow-icon-mark svg {
    width: clamp(18px, 5vw, 22px) !important;
    height: clamp(18px, 5vw, 22px) !important;
  }

  .dex-delivery-system-section .dex-workflow-card-badge {
    top: -5px !important;
    left: -5px !important;
    min-width: 17px !important;
    height: 17px !important;
    border-width: 1.5px !important;
    font-size: 7px !important;
  }

  .dex-delivery-system-section .dex-workflow-card-body {
    max-width: 74px !important;
  }

  .dex-delivery-system-section .dex-workflow-card-body strong,
  .dex-delivery-system-section .dex-delivery-workflow-step strong {
    font-size: clamp(9px, 2.75vw, 11px) !important;
    line-height: 1.12 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .dex-delivery-system-section .dex-workflow-dynamic-desc {
    margin-top: 24px !important;
    padding: 12px 14px !important;
  }
}

/* Final core capabilities compact pass: balanced cards and tighter timeline. */
.dex-delivery-system-section .dex-core-capabilities {
  padding: clamp(30px, 3.4vw, 46px) clamp(18px, 3vw, 38px) !important;
  border-radius: 18px !important;
}

.dex-delivery-system-section .dex-core-capabilities>header.dex-capabilities-header {
  margin-bottom: clamp(26px, 3.2vw, 38px) !important;
}

.dex-delivery-system-section .dex-capabilities-header .dex-section-label {
  margin-bottom: 8px !important;
}

.dex-delivery-system-section .dex-capabilities-header .dex-section-heading {
  max-width: 760px !important;
  font-size: clamp(30px, 3vw, 40px) !important;
  line-height: 1.12 !important;
}

.dex-delivery-system-section .dex-capabilities-timeline-container {
  margin-top: clamp(30px, 3.4vw, 44px) !important;
}

.dex-delivery-system-section .dex-capabilities-timeline-line {
  top: 28px !important;
}

.dex-delivery-system-section .dex-capabilities-timeline-nodes {
  gap: clamp(10px, 1.2vw, 16px) !important;
}

.dex-delivery-system-section .cc {
  grid-template-rows: 96px 48px 1px auto !important;
  padding: 0 6px !important;
}

.dex-delivery-system-section .cicon-tile {
  width: clamp(54px, 4.2vw, 62px) !important;
  height: clamp(54px, 4.2vw, 62px) !important;
  border-radius: 15px !important;
}

.dex-delivery-system-section .cc:hover .cicon-tile,
.dex-delivery-system-section .cc.is-active .cicon-tile {
  transform: translateY(-3px) scale(1.04) !important;
}

.dex-delivery-system-section .cicon-svg svg {
  width: clamp(22px, 1.8vw, 27px) !important;
  height: clamp(22px, 1.8vw, 27px) !important;
}

.dex-delivery-system-section .cicon-dot {
  width: 8px !important;
  height: 8px !important;
  margin-top: 12px !important;
}

.dex-delivery-system-section .ctitle {
  height: 48px !important;
  align-items: center !important;
  padding: 8px 0 10px !important;
  font-size: clamp(13px, 1.05vw, 16px) !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
}

.dex-delivery-system-section .cpara {
  max-width: 228px !important;
  margin: 12px auto 0 !important;
  color: #4f5f73 !important;
  font-size: clamp(11px, 0.9vw, 12px) !important;
  font-weight: 650 !important;
  line-height: 1.48 !important;
  text-align: justify !important;
  text-align-last: center !important;
  hyphens: auto !important;
  overflow-wrap: normal !important;
}

@media screen and (max-width: 1023px) {
  .dex-delivery-system-section .dex-capabilities-timeline-nodes {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px 14px !important;
  }
}

@media screen and (max-width: 639px) {
  .dex-delivery-system-section .dex-core-capabilities {
    padding: 26px 12px 30px !important;
  }

  .dex-delivery-system-section .dex-capabilities-header .dex-section-heading {
    max-width: 330px !important;
    font-size: clamp(24px, 7vw, 31px) !important;
    line-height: 1.08 !important;
  }

  .dex-delivery-system-section .dex-capabilities-timeline-container {
    margin-top: 26px !important;
  }

  .dex-delivery-system-section .dex-capabilities-timeline-nodes {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 10px !important;
  }

  .dex-delivery-system-section .cc {
    grid-template-rows: 82px 36px 1px auto !important;
    padding: 0 3px !important;
  }

  .dex-delivery-system-section .cicon-tile {
    width: clamp(48px, 13.6vw, 56px) !important;
    height: clamp(48px, 13.6vw, 56px) !important;
    border-radius: 13px !important;
  }

  .dex-delivery-system-section .cicon-svg svg {
    width: clamp(19px, 5vw, 22px) !important;
    height: clamp(19px, 5vw, 22px) !important;
  }

  .dex-delivery-system-section .ctitle {
    height: 36px !important;
    padding: 4px 0 7px !important;
    font-size: clamp(10px, 2.85vw, 12px) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
  }

  .dex-delivery-system-section .cpara {
    max-width: 158px !important;
    margin-top: 9px !important;
    font-size: clamp(9px, 2.55vw, 10.5px) !important;
    line-height: 1.35 !important;
    text-align: center !important;
    text-align-last: auto !important;
    hyphens: auto !important;
  }
}

/* Final header brand pairing: DeX left, Colakin right. */
.rt-top-nav .dex-header-product-brand {
  position: absolute !important;
  top: 50% !important;
  right: 28px !important;
  z-index: 22 !important;
  display: inline-flex !important;
  width: 132px !important;
  height: 52px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
  transition: opacity 180ms ease, transform 180ms ease !important;
}

.rt-top-nav .dex-header-product-brand[href]:hover {
  opacity: 0.82 !important;
  transform: translateY(-50%) translateY(-1px) !important;
}

.rt-top-nav .dex-header-product-brand img {
  display: block !important;
  width: 118px !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 44px !important;
  object-fit: contain !important;
}

@media screen and (min-width: 992px) {
  .rt-top-nav .rt-navbar-v1-menu-desktop {
    padding-right: 190px !important;
    padding-left: 190px !important;
  }
}

@media screen and (max-width: 991px) {
  .rt-top-nav .dex-header-product-brand {
    right: 18px !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
  }

  .rt-top-nav .dex-header-product-brand img {
    width: 24px !important;
    height: 24px !important;
    content: url("/assets/colakin-mark.png");
  }
}

@media screen and (max-width: 575px) {
  .rt-top-nav .dex-header-product-brand {
    right: 14px !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
  }

  .rt-top-nav .dex-header-product-brand img {
    width: 22px !important;
    height: 22px !important;
  }
}

/* Experimental hero-blended header: remove the white slab and place nav actions in individual bubbles. */
.rt-top-nav {
  background-color: #eef4ff !important;
  background-image:
    radial-gradient(circle, rgba(var(--dex-blue-rgb), 0.2) 1.2px, transparent 1.6px),
    radial-gradient(circle, rgba(var(--dex-yellow-rgb), 0.2) 1.2px, transparent 1.6px),
    radial-gradient(circle at 18% 28%, rgba(var(--dex-blue-rgb), 0.14), transparent 26%),
    radial-gradient(circle at 84% 12%, rgba(var(--dex-yellow-rgb), 0.16), transparent 24%) !important;
  background-position:
    0 0,
    14px 14px,
    center,
    center !important;
  background-size:
    28px 28px,
    28px 28px,
    auto,
    auto !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.rt-top-nav .rt-nav,
.rt-top-nav .rt-background-white {
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.rt-top-nav .rt-navbar-wrapper {
  isolation: isolate;
}

.rt-top-nav .rt-navbar-v1-menu-desktop {
  gap: 14px !important;
}

.rt-top-nav .dex-header-dropdown,
.rt-top-nav .rt-navbar-dropdown,
.rt-top-nav .rt-navber-dropdown,
.rt-top-nav .rt-navbar-dropdown-toggle,
.rt-top-nav .dex-header-access-link,
.rt-top-nav .dex-header-connect-link {
  min-height: 0 !important;
}

.rt-top-nav .rt-navbar-dropdown-toggle,
.rt-top-nav .dex-header-access-link,
.rt-top-nav .dex-header-connect-link {
  display: inline-flex !important;
  height: 42px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.15) !important;
  border-radius: 999px !important;
  color: #26364f !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 10px 26px rgba(15, 39, 91, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms ease !important;
}

.rt-top-nav .rt-navbar-dropdown-toggle:hover,
.rt-top-nav .rt-navbar-dropdown-toggle.w--open,
.rt-top-nav .dex-header-access-link:hover,
.rt-top-nav .dex-header-connect-link:hover {
  color: var(--dex-blue-dark) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(var(--dex-blue-rgb), 0.24) !important;
  box-shadow:
    0 14px 32px rgba(15, 39, 91, 0.11),
    0 0 0 4px rgba(var(--dex-blue-rgb), 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transform: translateY(-1px) !important;
}

.rt-top-nav .rt-menu-text,
.rt-top-nav .dex-header-access-link,
.rt-top-nav .dex-header-connect-link {
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.rt-top-nav .rt-nav-menu-arrow-holder {
  display: inline-flex !important;
  width: 12px !important;
  height: 12px !important;
  align-items: center !important;
  justify-content: center !important;
}

.rt-top-nav .rt-nav-menu-arrow-holder img {
  width: 9px !important;
  height: auto !important;
  opacity: 0.74 !important;
}

.rt-top-nav .dex-header-access-link {
  color: #111827 !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

.rt-top-nav .dex-header-connect-link {
  color: var(--dex-blue-dark) !important;
  border-color: rgba(var(--dex-blue-rgb), 0.22) !important;
  background: rgba(255, 255, 255, 0.76) !important;
}

.rt-top-nav .dex-header-dex-dropdown {
  position: relative !important;
}

.rt-top-nav .dex-header-dex-dropdown>.dex-header-dex-menu {
  position: absolute !important;
  top: calc(100% + 14px) !important;
  left: 50% !important;
  right: auto !important;
  display: block !important;
  width: min(760px, calc(100vw - 48px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 48px) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 14px !important;
  overflow: visible !important;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.14) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 30px 78px rgba(15, 39, 91, 0.18) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-50%) translateY(10px) !important;
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease !important;
  z-index: 99999 !important;
}

.rt-top-nav .dex-header-dex-dropdown:hover>.dex-header-dex-menu,
.rt-top-nav .dex-header-dex-dropdown:focus-within>.dex-header-dex-menu,
.rt-top-nav .dex-header-dex-dropdown.w--open>.dex-header-dex-menu,
.rt-top-nav .dex-header-dex-dropdown>.dex-header-dex-menu.w--open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

.rt-top-nav .dex-header-dex-panel {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: minmax(250px, 0.9fr) minmax(330px, 1.1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.rt-top-nav .dex-header-dex-feature,
.rt-top-nav .dex-header-dex-links,
.rt-top-nav .dex-header-dex-link {
  min-width: 0 !important;
}

@media screen and (min-width: 992px) {

  .rt-top-nav .rt-nav,
  .rt-top-nav .rt-navbar-wrapper {
    min-height: 96px !important;
  }

  .rt-top-nav .rt-navbar-v1-menu-desktop {
    height: 96px !important;
    padding-right: 210px !important;
    padding-left: 210px !important;
  }
}

@media screen and (max-width: 991px) {
  .rt-top-nav {
    background-size:
      24px 24px,
      24px 24px,
      auto,
      auto !important;
  }

  .rt-top-nav .rt-mobile-navbar {
    gap: 9px !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(var(--dex-blue-rgb), 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 42px rgba(15, 39, 91, 0.12) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .rt-top-nav .rt-mobile-navbar .rt-navbar-dropdown-toggle,
  .rt-top-nav .rt-mobile-navbar .dex-header-access-link,
  .rt-top-nav .rt-mobile-navbar .dex-header-connect-link {
    width: 100% !important;
    height: 44px !important;
    justify-content: space-between !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-dex-dropdown {
    width: 100% !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-dex-dropdown>.dex-header-dex-menu {
    position: static !important;
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-top: 8px !important;
    padding: 10px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-dex-dropdown:hover>.dex-header-dex-menu,
  .rt-top-nav .rt-mobile-navbar .dex-header-dex-dropdown:focus-within>.dex-header-dex-menu,
  .rt-top-nav .rt-mobile-navbar .dex-header-dex-dropdown.w--open>.dex-header-dex-menu,
  .rt-top-nav .rt-mobile-navbar .dex-header-dex-dropdown>.dex-header-dex-menu.w--open {
    display: block !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-dex-panel {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-dex-feature {
    min-height: 0 !important;
    padding: 18px !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-dex-logo {
    width: 104px !important;
    margin-bottom: 18px !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-dex-feature strong {
    font-size: 22px !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-dex-feature a {
    margin-top: 18px !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-dex-link {
    grid-template-columns: 36px minmax(0, 1fr) 16px !important;
    gap: 12px !important;
    padding: 14px 4px !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-dex-link>span {
    width: 36px !important;
    height: 36px !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-dex-link strong {
    font-size: 15px !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-dex-link small {
    font-size: 11px !important;
  }
}

@media screen and (max-width: 575px) {
  .rt-top-nav .rt-navbar-logo .dex-header-logo-full {
    width: 154px !important;
    max-width: 154px !important;
  }

  .rt-top-nav .rt-navbar-dropdown-toggle,
  .rt-top-nav .dex-header-access-link,
  .rt-top-nav .dex-header-connect-link {
    font-size: 13px !important;
  }
}

/* Hero workflow console brand marker. */
.dex-hero-workflow-top {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
}

.dex-hero-workflow-top>div {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

.dex-hero-workflow-logo {
  display: inline-flex !important;
  width: 60px !important;
  height: 60px !important;
  flex: 0 0 60px !important;
  place-items: center !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dex-hero-workflow-logo img {
  display: block !important;
  width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
}

@media screen and (max-width: 575px) {
  .dex-hero-workflow-top {
    gap: 12px !important;
  }

  .dex-hero-workflow-logo {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  .dex-hero-workflow-logo img {
    width: 42px !important;
    height: 42px !important;
  }
}

/* Workflow pipeline experiment: unified DeX blue blocks with a yellow active state. */
.dex-delivery-system-section .dex-workflow-card-visual,
.dex-delivery-system-section .dex-delivery-workflow-step:nth-child(odd) .dex-workflow-card-visual,
.dex-delivery-system-section .dex-delivery-workflow-step:nth-child(even) .dex-workflow-card-visual {
  color: #ffffff !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.5), transparent 24%),
    linear-gradient(145deg, #4f8cff 0%, var(--dex-blue) 56%, #1740a8 100%) !important;
  box-shadow:
    0 4px 0 #16368e,
    0 12px 24px rgba(var(--dex-blue-rgb), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

.dex-delivery-system-section .dex-workflow-icon-mark,
.dex-delivery-system-section .dex-workflow-icon-mark svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

.dex-delivery-system-section .dex-delivery-workflow-step.is-active .dex-workflow-card-visual,
.dex-delivery-system-section .dex-delivery-workflow-step.is-active:not(:hover) .dex-workflow-card-visual,
.dex-delivery-system-section .dex-delivery-workflow-step.is-active:nth-child(odd) .dex-workflow-card-visual,
.dex-delivery-system-section .dex-delivery-workflow-step.is-active:nth-child(even) .dex-workflow-card-visual {
  color: #101827 !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.7), transparent 25%),
    linear-gradient(145deg, #ffe58a 0%, var(--dex-yellow) 56%, #e4a500 100%) !important;
  box-shadow:
    0 4px 0 #b77900,
    0 16px 34px rgba(var(--dex-yellow-rgb), 0.3),
    0 0 34px rgba(var(--dex-yellow-rgb), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}

.dex-delivery-system-section .dex-delivery-workflow-step:hover:not(.is-active) .dex-workflow-card-visual {
  color: #ffffff !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.62), transparent 25%),
    linear-gradient(145deg, #5c94ff 0%, var(--dex-blue) 52%, #173b98 100%) !important;
  box-shadow:
    0 4px 0 #16368e,
    0 16px 30px rgba(var(--dex-blue-rgb), 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

.dex-delivery-system-section .dex-workflow-card-badge {
  color: var(--dex-blue) !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 2px rgba(var(--dex-blue-rgb), 0.12),
    0 7px 16px rgba(var(--dex-blue-rgb), 0.2) !important;
}

.dex-delivery-system-section .dex-delivery-workflow-step.is-active .dex-workflow-card-badge {
  color: #101827 !important;
  background: var(--dex-yellow) !important;
  box-shadow:
    0 0 0 2px #ffffff,
    0 8px 18px rgba(var(--dex-yellow-rgb), 0.3) !important;
}

.dex-delivery-system-section .dex-workflow-desc-connector {
  display: block;
  width: 100%;
  height: 60px;
  margin-top: 0;
  overflow: visible;
  pointer-events: none;
}

.dex-delivery-system-section .dex-workflow-desc-connector path {
  fill: none;
  stroke: url("#pipelineGlowGradient");
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(var(--dex-yellow-rgb), 0.28));
  transition: d 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-delivery-system-section .dex-workflow-dynamic-desc {
  position: relative !important;
  margin-top: 0 !important;
  overflow: visible !important;
}

.dex-delivery-system-section .dex-workflow-dynamic-desc::before {
  content: none !important;
}

.dex-delivery-system-section .dex-workflow-dynamic-desc::after {
  content: none !important;
}

/* Blueprint journey owns its console height; the legacy task accordion no longer does. */
.dex-blueprint-route-line {
  display: none !important;
}

.dex-doc-console-stage:has(.dex-doc-console[data-spec-preview="development-tasks"].is-active) {
  height: 610px !important;
}

@media screen and (max-width: 767px) {

  /* Stable across BRD, SRS, FSD, Plan, and Tasks. This intentionally
     overrides the older 420px/360px phone rules above so switching
     documents never expands or collapses the page. */
  .dex-doc-console-stage,
  .dex-doc-console-stage:has(.dex-doc-console[data-spec-preview="development-tasks"].is-active) {
    height: 580px !important;
  }

  .dex-doc-console,
  .dex-doc-console-body-minimal {
    min-height: 0 !important;
  }

  .dex-blueprint-journey {
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Give BRD the same eight-card viewport as every other document. */
  .dex-doc-console[data-spec-preview="brd"] .dex-blueprint-route,
  .dex-doc-console .dex-blueprint-route {
    max-height: 286px !important;
    padding-top: 8px !important;
  }

  /* Keep the first row fully inside the clipped chapter viewport. */
  .dex-blueprint-topic.is-active,
  .dex-blueprint-topic.is-next {
    transform: none !important;
  }

  /* The chapter cards already communicate progress; the scanning line
     behind them reads as an unnecessary loading indicator on mobile. */
  .dex-blueprint-route-line {
    display: none !important;
  }
}

/* On phones, retain the full document list and full-height console, but nest
   both in one panel so the active title reads as the console's own header. */
@media screen and (max-width: 767px) {
  .dex-doc-mobile-stack {
    display: grid;
    min-width: 0;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(var(--dex-blue-rgb), 0.13);
    border-radius: 18px;
    background: linear-gradient(180deg, #f8faff, #f1f5fc);
    box-shadow: 0 20px 54px rgba(26, 51, 102, 0.09);
  }

  .dex-doc-mobile-stack .dex-doc-switcher {
    display: contents !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .dex-doc-mobile-stack .dex-doc-switcher-head {
    order: 0 !important;
  }

  .dex-doc-mobile-stack .dex-doc-switch:not(.is-active) {
    order: 3 !important;
  }

  .dex-doc-mobile-stack .dex-doc-switch.is-active {
    order: 1 !important;
    border-bottom-color: transparent !important;
    border-radius: 15px 15px 0 0 !important;
    box-shadow: 0 11px 28px rgba(var(--dex-blue-rgb), 0.1) !important;
  }

  .dex-doc-mobile-stack .dex-doc-console-stage {
    order: 2;
    width: 100%;
    margin-top: -10px;
  }

  .dex-doc-mobile-stack .dex-doc-console {
    border-top-color: rgba(var(--dex-blue-rgb), 0.1) !important;
    border-radius: 0 0 17px 17px !important;
  }
}

/* Final Build-stage layout override: keep a useful primary story panel on phones. */
.dex-stage-console-body.is-build-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr) !important;
  gap: 14px !important;
}

.dex-stage-console-body.is-build-layout .dex-build-terminal {
  border: 1px solid rgba(var(--dex-blue-rgb), 0.2) !important;
  background: linear-gradient(145deg, #ffffff 0%, #eff6ff 100%) !important;
  box-shadow: none !important;
}

.dex-stage-console-body.is-build-layout .dex-build-terminal .dex-terminal-top {
  border-bottom-color: rgba(var(--dex-blue-rgb), 0.17) !important;
  background: linear-gradient(100deg, rgba(var(--dex-blue-rgb), 0.12), rgba(var(--dex-yellow-rgb), 0.2)) !important;
}

.dex-stage-console-body.is-build-layout .dex-build-terminal pre {
  color: var(--dex-blue-dark) !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}

.dex-stage-console-body.is-build-layout .dex-build-terminal .dex-terminal-top b {
  color: var(--dex-blue-dark) !important;
}

.dex-stage-console-body.is-build-layout .dex-build-terminal .dex-terminal-top span:nth-child(1) {
  background: var(--dex-blue) !important;
}

.dex-stage-console-body.is-build-layout .dex-build-terminal .dex-terminal-top span:nth-child(2) {
  background: var(--dex-yellow) !important;
}

.dex-stage-console-body.is-build-layout .dex-build-terminal .dex-terminal-top span:nth-child(3) {
  background: #60a5fa !important;
}

/* Build activity remains compact, but each typed line is now a distinct step. */
.dex-build-progress>div {
  gap: 8px;
}

.dex-build-progress p {
  grid-template-columns: 22px 8px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 9px;
  background: linear-gradient(100deg, rgba(var(--dex-blue-rgb), 0.065), rgba(255, 255, 255, 0.9));
  font-size: 11.2px;
  line-height: 1.3;
}

.dex-build-progress p em {
  color: var(--dex-blue);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.04em;
  line-height: 1.45;
}

.dex-build-progress p i {
  width: 7px;
  height: 7px;
  margin-top: 4px;
  background: var(--dex-blue);
  box-shadow: 0 0 0 3px rgba(var(--dex-blue-rgb), 0.1);
}

.dex-build-progress p:nth-child(even) i {
  background: var(--dex-yellow);
  box-shadow: 0 0 0 3px rgba(var(--dex-yellow-rgb), 0.16);
}

@media screen and (max-width: 767px) {
  .dex-stage-console-body.is-build-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dex-stage-console-body.is-build-layout>.dex-build-terminal {
    display: none !important;
  }
}

/* Final Code-stage workspace override: retain the live typewriter content while
   presenting it in the same light DeX terminal language as Build. */
.dex-stage-console-body.is-code-layout {
  grid-template-columns: minmax(0, 0.94fr) minmax(330px, 0.86fr) !important;
  gap: 14px !important;
}

.dex-stage-console-body.is-code-layout .dex-code-output-panel {
  background: linear-gradient(145deg, #ffffff 0%, #eff6ff 100%) !important;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.2) !important;
  box-shadow: none !important;
}

.dex-stage-console-body.is-code-layout .dex-code-editor,
.dex-stage-console-body.is-code-layout .dex-code-editor pre {
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important;
}

.dex-stage-console-body.is-code-layout .dex-code-editor {
  border-color: rgba(var(--dex-blue-rgb), 0.22) !important;
}

.dex-stage-console-body.is-code-layout .dex-code-editor-top {
  background: linear-gradient(100deg, rgba(var(--dex-blue-rgb), 0.12), rgba(var(--dex-yellow-rgb), 0.2)) !important;
  border-bottom-color: rgba(var(--dex-blue-rgb), 0.17) !important;
}

.dex-stage-console-body.is-code-layout .dex-code-editor-top span:nth-child(1) {
  background: var(--dex-blue) !important;
}

.dex-stage-console-body.is-code-layout .dex-code-editor-top span:nth-child(2) {
  background: var(--dex-yellow) !important;
}

.dex-stage-console-body.is-code-layout .dex-code-editor-top span:nth-child(3) {
  background: #60a5fa !important;
}

.dex-stage-console-body.is-code-layout .dex-code-editor pre {
  color: var(--dex-blue-dark) !important;
}

@media screen and (max-width: 767px) {
  .dex-stage-console-body.is-code-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dex-stage-console-body.is-code-layout>.dex-code-output-panel {
    display: none !important;
  }
}

/* Partner value cards stay fully readable; remove the hover lift/tint effect. */
.rt-cta-v1 .dex-partner-value-map>article,
.rt-cta-v1 .dex-partner-value-map>article:hover {
  border-color: rgba(var(--dex-blue-rgb), 0.11) !important;
  background: #ffffff !important;
  box-shadow:
    0 16px 36px rgba(15, 23, 42, 0.13),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8) !important;
}

.rt-cta-v1 .dex-partner-value-map>article {
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

.rt-cta-v1 .dex-partner-value-map>article:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(var(--dex-blue-rgb), 0.34) !important;
  background: #ffffff !important;
  box-shadow:
    0 20px 40px rgba(var(--dex-blue-rgb), 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8) !important;
}

/* History closes the hero story with one readable execution archive. */
.dex-stage-console-body.is-history-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

.dex-stage-console-body.is-history-layout>.dex-stage-panel {
  height: 394px !important;
  min-height: 394px !important;
  max-height: 394px !important;
}

.dex-history-workspace {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 9px;
  height: 100%;
  min-height: 310px;
}

.dex-history-workspace>header {
  display: grid;
  padding-bottom: 4px;
}

.dex-history-workspace>header p {
  margin: 0;
  color: var(--dex-muted);
  font-size: 12px;
  line-height: 1.45;
}

.dex-history-table-head,
.dex-history-table-body article {
  display: grid;
  grid-template-columns: minmax(210px, 1.55fr) minmax(100px, 0.55fr) minmax(72px, 0.35fr) auto;
  gap: 12px;
  align-items: center;
}

.dex-history-table-head {
  padding: 5px 10px 8px;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.15);
  color: var(--dex-muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dex-history-table-body {
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  align-content: start;
  min-height: 0;
  overflow: hidden;
  gap: 0;
  border-top: 1px solid rgba(var(--dex-blue-rgb), 0.1);
}

.dex-history-table-body article {
  min-height: 0;
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  border-radius: 0;
  background: transparent;
}

.dex-history-table-body article:nth-child(n + 6) {
  display: none;
}

.dex-history-table-body article.is-pending {
  opacity: 0.3;
}

.dex-history-table-body article b {
  color: var(--dex-blue-dark);
  font-size: 12px;
  line-height: 1.3;
}

.dex-history-table-body article>span {
  color: var(--dex-muted);
  font-size: 10px;
  font-weight: 750;
}

.dex-history-table-body article em {
  justify-self: end;
  padding: 4px 6px;
  border-radius: 5px;
  color: var(--dex-blue);
  background: rgba(var(--dex-blue-rgb), 0.1);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dex-history-table-body article.is-log em {
  color: var(--dex-blue-dark);
  background: rgba(var(--dex-yellow-rgb), 0.2);
}

@media screen and (max-width: 767px) {
  .dex-stage-console-body.is-history-layout>.dex-stage-panel {
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
  }

  .dex-history-table-head {
    display: none;
  }

  .dex-history-workspace {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .dex-history-table-body article {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 7px 4px;
  }

  .dex-history-table-body {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }

  .dex-history-table-body article:nth-child(n + 6),
  .dex-history-table-body article>span:nth-of-type(2),
  .dex-history-table-body article em {
    display: none;
  }

  .dex-history-table-body article b {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dex-history-table-body article>span {
    font-size: 10px;
  }
}

/* Mobile workflow console: typewriter updates must never reflow the page. */
@media screen and (max-width: 767px) {

  .dex-delivery-surface .dex-hero-workflow-status,
  .dex-delivery-surface .dex-stage-console {
    height: 610px !important;
    min-height: 610px !important;
    max-height: 610px !important;
    overflow: hidden !important;
  }

  .dex-delivery-surface .dex-stage-console-body,
  .dex-delivery-surface .dex-stage-console-body.is-document-layout,
  .dex-delivery-surface .dex-stage-console-body.is-build-layout,
  .dex-delivery-surface .dex-stage-console-body.is-code-layout,
  .dex-delivery-surface .dex-stage-console-body.is-qa-layout,
  .dex-delivery-surface .dex-stage-console-body.is-deploy-layout,
  .dex-delivery-surface .dex-stage-console-body.is-history-layout {
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    overflow: hidden !important;
  }

  .dex-delivery-surface .dex-stage-console-body>.dex-stage-panel {
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    overflow: hidden !important;
  }

  .dex-delivery-surface .dex-stage-console-body> :not(.dex-stage-panel) {
    display: none !important;
  }
}

/* Keep the restored Services menu interactive outside the legacy Webflow dropdown runtime. */
.rt-top-nav .dex-header-mega-dropdown.w--open>.dex-header-mega-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
  z-index: 99999 !important;
}

@media screen and (max-width: 991px) {
  .rt-top-nav .rt-mobile-navbar .dex-header-mega-dropdown.w--open>.dex-header-mega-menu {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
  }
}

/* Products menu: an expansive, categorized DeX mega menu. */
.rt-top-nav .dex-header-products-dropdown {
  position: relative !important;
}

.rt-top-nav .dex-header-products-mega-menu {
  position: absolute !important;
  top: 88px !important;
  left: 50% !important;
  display: none !important;
  width: min(1440px, calc(100vw - 32px)) !important;
  min-width: min(1440px, calc(100vw - 32px)) !important;
  min-height: 440px !important;
  padding: 30px !important;
  overflow: hidden !important;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.15) !important;
  border-radius: 0 0 24px 24px !important;
  background:
    radial-gradient(circle at 10% 18%, rgba(var(--dex-yellow-rgb), 0.13), transparent 24%),
    radial-gradient(circle at 88% 8%, rgba(var(--dex-blue-rgb), 0.1), transparent 28%),
    #ffffff !important;
  box-shadow: 0 28px 62px rgba(15, 23, 42, 0.18) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-50%) translateY(10px) !important;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease !important;
  z-index: 99999 !important;
}

.rt-top-nav .dex-header-products-dropdown.w--open>.dex-header-products-mega-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

.rt-top-nav .dex-header-products-mega-wrap {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.7fr) !important;
  min-height: 378px !important;
  gap: 34px !important;
}

.rt-top-nav .dex-header-products-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr) !important;
  gap: 34px !important;
}

.rt-top-nav .dex-header-products-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 8px 0 !important;
}

.rt-top-nav .dex-header-products-column+.dex-header-products-column {
  padding-left: 34px !important;
  border-left: 1px solid rgba(var(--dex-blue-rgb), 0.13) !important;
}

.rt-top-nav .dex-header-products-column>p {
  margin: 0 0 18px !important;
  padding-bottom: 13px !important;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.18) !important;
  color: var(--dex-blue) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: 0.01em !important;
}

.rt-top-nav .dex-header-products-column>a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 55px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  color: var(--dex-text) !important;
  font-size: 18px !important;
  font-weight: 780 !important;
  line-height: 1.18 !important;
  text-decoration: none !important;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease !important;
}

.rt-top-nav .dex-header-products-column>a span {
  margin-left: 14px !important;
  color: var(--dex-blue) !important;
  font-size: 18px !important;
  opacity: 0 !important;
  transform: translateX(-5px) !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
}

.rt-top-nav .dex-header-products-column>a:hover {
  background: rgba(var(--dex-blue-rgb), 0.06) !important;
  color: var(--dex-blue) !important;
  transform: translateX(3px) !important;
}

.rt-top-nav .dex-header-products-column>a:hover span {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.rt-top-nav .dex-header-products-feature {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  min-height: 100% !important;
  padding: 34px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 86% 16%, rgba(255, 213, 42, 0.34), transparent 28%),
    linear-gradient(145deg, #052c7f 0%, #0b4cbd 56%, #1570e4 100%) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.rt-top-nav .dex-header-products-feature-icon {
  display: grid !important;
  width: 48px !important;
  height: 48px !important;
  margin-bottom: auto !important;
  place-items: center !important;
  border-radius: 14px !important;
  background: #ffffff !important;
}

.rt-top-nav .dex-header-products-feature-icon img {
  width: 31px !important;
  height: 31px !important;
}

.rt-top-nav .dex-header-products-feature p {
  margin: 24px 0 8px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.rt-top-nav .dex-header-products-feature strong {
  max-width: 290px !important;
  color: #ffffff !important;
  font-size: 27px !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
}

.rt-top-nav .dex-header-products-feature small {
  margin-top: 14px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.rt-top-nav .dex-header-products-feature>a {
  display: inline-flex !important;
  gap: 8px !important;
  margin-top: 23px !important;
  color: var(--dex-yellow) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

@media screen and (max-width: 991px) {

  .rt-top-nav .rt-mobile-navbar .dex-header-products-mega-menu,
  .rt-top-nav .rt-mobile-navbar .dex-header-products-dropdown.w--open>.dex-header-products-mega-menu {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin-top: 8px !important;
    padding: 18px !important;
    transform: none !important;
  }

  .rt-top-nav .dex-header-products-mega-wrap {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    gap: 20px !important;
  }

  .rt-top-nav .dex-header-products-content {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .rt-top-nav .dex-header-products-column,
  .rt-top-nav .dex-header-products-column+.dex-header-products-column {
    padding: 0 !important;
    border-left: 0 !important;
  }

  .rt-top-nav .dex-header-products-column>a {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  .rt-top-nav .dex-header-products-feature {
    min-height: 260px !important;
    padding: 25px !important;
  }
}

/* Use one viewport-anchored canvas for every desktop header mega menu. */
@media screen and (min-width: 992px) {

  .rt-top-nav .dex-header-products-mega-menu,
  .rt-top-nav .dex-header-mega-menu,
  .rt-top-nav .dex-header-dex-menu {
    position: fixed !important;
    top: 96px !important;
    left: 0 !important;
    right: auto !important;
    display: block !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    min-height: min(500px, calc(100vh - 96px)) !important;
    max-height: calc(100vh - 96px) !important;
    margin: 0 !important;
    padding: 34px max(32px, calc((100vw - 1440px) / 2)) !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 8% 18%, rgba(var(--dex-yellow-rgb), 0.12), transparent 24%),
      radial-gradient(circle at 90% 12%, rgba(var(--dex-blue-rgb), 0.1), transparent 28%),
      #ffffff !important;
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.16) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    transition: opacity 180ms ease, visibility 180ms ease !important;
    z-index: 99999 !important;
  }

  .rt-top-nav .dex-header-products-dropdown.w--open>.dex-header-products-mega-menu,
  .rt-top-nav .dex-header-mega-dropdown.w--open>.dex-header-mega-menu,
  .rt-top-nav .dex-header-dex-dropdown.w--open>.dex-header-dex-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .rt-top-nav .dex-header-products-mega-wrap,
  .rt-top-nav .dex-header-mega-wrap,
  .rt-top-nav .dex-header-dex-panel {
    width: 100% !important;
    max-width: 1440px !important;
    min-height: 410px !important;
    margin: 0 auto !important;
  }

  .rt-top-nav .dex-header-products-mega-wrap {
    grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.7fr) !important;
  }

  /* The DeX menu has legacy button-relative positioning; override it explicitly. */
  .rt-top-nav .dex-header-dex-dropdown>.dex-header-dex-menu {
    position: fixed !important;
    top: 96px !important;
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 34px max(32px, calc((100vw - 1440px) / 2)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  .rt-top-nav .dex-header-mega-wrap {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .rt-top-nav .dex-header-dex-panel {
    grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr) !important;
    gap: 28px !important;
  }
}

/* Service markers use the same blue-and-gold depth as the DeX hero visuals. */
.rt-top-nav .dex-header-mega-menu .dex-header-menu-icon {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 230, 111, 0.94) 0 10%, rgba(255, 203, 38, 0.55) 24%, transparent 49%),
    linear-gradient(145deg, #082f86 0%, #0b55d0 58%, #1677ed 100%) !important;
  box-shadow: 0 8px 16px rgba(11, 80, 191, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.rt-top-nav .dex-header-mega-menu .rt-pages-menu-link-wrap:hover .dex-header-menu-icon {
  color: #ffffff !important;
  background:
    radial-gradient(circle at 28% 22%, #fff2ad 0 11%, rgba(255, 213, 42, 0.78) 27%, transparent 52%),
    linear-gradient(145deg, #06358f 0%, #1265e4 100%) !important;
  box-shadow: 0 11px 22px rgba(11, 80, 191, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

/* Match the hero's raised blue tiles: warm glow, glossy face, and a soft cast shadow. */
@media screen and (min-width: 992px) {
  .rt-top-nav .dex-header-mega-menu .rt-pages-menu-link-wrap {
    min-height: 60px !important;
    padding: 8px 10px !important;
  }

  .rt-top-nav .dex-header-mega-menu .dex-header-menu-icon {
    position: relative !important;
    isolation: isolate !important;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    border-radius: 11px !important;
    background:
      radial-gradient(circle at 26% 22%, #fff2a3 0 8%, #ffd632 17%, rgba(255, 194, 19, 0.4) 28%, transparent 45%),
      linear-gradient(145deg, #3d72ff 0%, #0f55d7 47%, #06338d 100%) !important;
    box-shadow:
      0 4px 0 #0b3e9d,
      0 10px 16px rgba(20, 69, 173, 0.26),
      inset 0 2px 3px rgba(255, 255, 255, 0.58),
      inset 0 -6px 10px rgba(3, 29, 98, 0.2) !important;
    transform: rotate(-2deg) !important;
  }

  .rt-top-nav .dex-header-mega-menu .dex-header-menu-icon::after {
    position: absolute;
    z-index: 0;
    top: 3px;
    right: 4px;
    width: 52%;
    height: 27%;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.58), transparent);
    content: "";
    filter: blur(1px);
    pointer-events: none;
    transform: rotate(18deg);
  }

  .rt-top-nav .dex-header-mega-menu .dex-header-menu-icon svg {
    position: relative !important;
    z-index: 1 !important;
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2.15 !important;
    filter: drop-shadow(0 2px 2px rgba(3, 30, 98, 0.3)) !important;
  }

  .rt-top-nav .dex-header-mega-menu .rt-nav-menu-link.rt-padding-off {
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  .rt-top-nav .dex-header-mega-menu .rt-pages-menu-link-wrap:hover .dex-header-menu-icon {
    transform: translateY(-2px) rotate(-2deg) !important;
  }

  .rt-top-nav .dex-header-mega-menu .rt-pages-menu-link-wrap:nth-child(even) .dex-header-menu-icon {
    color: #10234c !important;
    border-color: rgba(255, 255, 255, 0.78) !important;
    background:
      radial-gradient(circle at 27% 21%, #fff9cf 0 9%, rgba(255, 237, 139, 0.76) 20%, transparent 43%),
      linear-gradient(145deg, #ffe36c 0%, #ffc21c 48%, #e39a00 100%) !important;
    box-shadow:
      0 4px 0 #be7800,
      0 10px 16px rgba(205, 144, 0, 0.26),
      inset 0 2px 3px rgba(255, 255, 255, 0.7),
      inset 0 -6px 10px rgba(170, 101, 0, 0.16) !important;
  }

  .rt-top-nav .dex-header-mega-menu .rt-pages-menu-link-wrap:nth-child(even):hover .dex-header-menu-icon {
    color: #10234c !important;
    background:
      radial-gradient(circle at 27% 21%, #fffce0 0 10%, rgba(255, 237, 139, 0.82) 22%, transparent 45%),
      linear-gradient(145deg, #ffe97f 0%, #ffca28 50%, #eea400 100%) !important;
    box-shadow:
      0 4px 0 #be7800,
      0 12px 20px rgba(205, 144, 0, 0.31),
      inset 0 2px 3px rgba(255, 255, 255, 0.74),
      inset 0 -6px 10px rgba(170, 101, 0, 0.16) !important;
  }
}

/* Carry the compact hero-tile language into the DEX dropdown links. */
.rt-top-nav .dex-header-dex-link>span {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  background:
    radial-gradient(circle at 26% 22%, #fff2a3 0 8%, #ffd632 17%, rgba(255, 194, 19, 0.4) 28%, transparent 45%),
    linear-gradient(145deg, #3d72ff 0%, #0f55d7 47%, #06338d 100%) !important;
  box-shadow:
    0 4px 0 #0b3e9d,
    0 10px 16px rgba(20, 69, 173, 0.26),
    inset 0 2px 3px rgba(255, 255, 255, 0.58),
    inset 0 -6px 10px rgba(3, 29, 98, 0.2) !important;
  transform: rotate(-2deg) !important;
}

.rt-top-nav .dex-header-dex-link>span::after {
  position: absolute;
  z-index: 0;
  top: 3px;
  right: 4px;
  width: 52%;
  height: 27%;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.58), transparent);
  content: "";
  pointer-events: none;
  transform: rotate(18deg);
}

.rt-top-nav .dex-header-dex-link>span svg {
  position: relative !important;
  z-index: 1 !important;
  filter: drop-shadow(0 2px 2px rgba(3, 30, 98, 0.3)) !important;
}

.rt-top-nav .dex-header-dex-link:nth-child(even)>span,
.rt-top-nav .dex-header-dex-link:nth-child(even):hover>span {
  color: #10234c !important;
  border-color: rgba(255, 255, 255, 0.78) !important;
  background:
    radial-gradient(circle at 27% 21%, #fff9cf 0 9%, rgba(255, 237, 139, 0.76) 20%, transparent 43%),
    linear-gradient(145deg, #ffe36c 0%, #ffc21c 48%, #e39a00 100%) !important;
  box-shadow:
    0 4px 0 #be7800,
    0 10px 16px rgba(205, 144, 0, 0.26),
    inset 0 2px 3px rgba(255, 255, 255, 0.7),
    inset 0 -6px 10px rgba(170, 101, 0, 0.16) !important;
}

.rt-top-nav .dex-header-dex-link:hover>span {
  color: #ffffff !important;
  transform: translateY(-2px) rotate(-2deg) !important;
}

/* Resources uses three explanatory cards so the full-width menu feels intentional. */
@media screen and (min-width: 992px) {
  .rt-top-nav .dex-header-resources-mega .dex-header-menu-grid.is-single-column {
    grid-template-columns: 1fr !important;
  }

  .rt-top-nav .dex-header-resources-mega .rt-pages-menu-list-wrap {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  .rt-top-nav .dex-header-resources-mega .rt-pages-menu-link-wrap {
    align-items: flex-start !important;
    min-height: 188px !important;
    padding: 24px 20px !important;
    border: 1px solid rgba(var(--dex-blue-rgb), 0.12) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.74) !important;
  }

  .rt-top-nav .dex-header-resources-mega .rt-pages-menu-link-wrap:hover {
    border-color: rgba(var(--dex-blue-rgb), 0.28) !important;
    background: rgba(var(--dex-blue-rgb), 0.045) !important;
  }

  .rt-top-nav .dex-header-resources-mega .rt-pages-menu-content {
    align-items: flex-start !important;
  }

  .rt-top-nav .dex-header-resources-mega .rt-nav-menu-link.rt-padding-off {
    font-size: 19px !important;
  }

  .rt-top-nav .dex-header-resource-description {
    display: block !important;
    margin-top: 8px !important;
    color: var(--dex-text-secondary) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
  }
}

/* Service menu tiles mirror the hero cards: blue uses a white light reflection, not yellow. */
.rt-top-nav .dex-header-service-link {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 18px !important;
  gap: 13px !important;
  align-items: center !important;
  min-height: 68px !important;
  padding: 8px 10px !important;
}

/* Override the generic Products link's space-between flex layout. */
.rt-top-nav .dex-header-products-column>a.dex-header-service-link {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 18px !important;
  justify-content: initial !important;
  text-align: left !important;
}

.rt-top-nav .dex-header-service-link strong {
  color: var(--dex-text) !important;
  font-size: 17px !important;
  font-weight: 780 !important;
  line-height: 1.18 !important;
}

.rt-top-nav .dex-header-service-link>i {
  color: var(--dex-blue) !important;
  font-size: 18px !important;
  font-style: normal !important;
  opacity: 0 !important;
  transform: translateX(-5px) !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
}

.rt-top-nav .dex-header-service-link:hover>i {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.rt-top-nav .dex-header-service-icon,
.rt-top-nav .dex-header-dex-link>span {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  overflow: hidden !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 27% 18%, rgba(255, 255, 255, 0.8) 0 7%, rgba(255, 255, 255, 0.34) 20%, transparent 44%),
    linear-gradient(145deg, #3d72ff 0%, #0f55d7 48%, #06338d 100%) !important;
  box-shadow:
    0 4px 0 #0b3e9d,
    0 10px 16px rgba(20, 69, 173, 0.26),
    inset 0 2px 3px rgba(255, 255, 255, 0.58),
    inset 0 -6px 10px rgba(3, 29, 98, 0.2) !important;
  transform: rotate(-2deg) !important;
}

/* Product-menu link transitions must not hide the service icons. */
.rt-top-nav .dex-header-products-column>a .dex-header-service-icon {
  margin-left: 0 !important;
  opacity: 1 !important;
  transform: rotate(-2deg) !important;
  color: #ffffff !important;
}

.rt-top-nav .dex-header-products-column>a .dex-header-service-icon svg {
  color: #ffffff !important;
  opacity: 1 !important;
}

.dex-header-menu-glyph {
  position: relative;
  z-index: 1;
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--dex-menu-icon) center / contain no-repeat;
  mask: var(--dex-menu-icon) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(3, 30, 98, 0.22));
}

/* The Figma sandbox asset uses a padded 56px canvas; compensate for its internal whitespace. */
.dex-header-menu-glyph.is-sandbox-access {
  width: 36px;
  height: 36px;
}

.rt-top-nav .dex-header-service-icon::after,
.rt-top-nav .dex-header-dex-link>span::after {
  position: absolute;
  z-index: 0;
  top: 3px;
  right: 4px;
  width: 52%;
  height: 27%;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), transparent);
  content: "";
  pointer-events: none;
  transform: rotate(18deg);
}

.rt-top-nav .dex-header-service-icon svg,
.rt-top-nav .dex-header-dex-link>span svg {
  position: relative !important;
  z-index: 1 !important;
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 2px 2px rgba(3, 30, 98, 0.3)) !important;
}

.rt-top-nav .dex-header-service-link.is-yellow .dex-header-service-icon,
.rt-top-nav .dex-header-dex-link:nth-child(even)>span,
.rt-top-nav .dex-header-dex-link:nth-child(even):hover>span {
  color: #10234c !important;
  border-color: rgba(255, 255, 255, 0.78) !important;
  background:
    radial-gradient(circle at 27% 21%, #fff9cf 0 9%, rgba(255, 237, 139, 0.76) 20%, transparent 43%),
    linear-gradient(145deg, #ffe36c 0%, #ffc21c 48%, #e39a00 100%) !important;
  box-shadow:
    0 4px 0 #be7800,
    0 10px 16px rgba(205, 144, 0, 0.26),
    inset 0 2px 3px rgba(255, 255, 255, 0.7),
    inset 0 -6px 10px rgba(170, 101, 0, 0.16) !important;
}

.rt-top-nav .dex-header-products-column>a.dex-header-service-link.is-yellow .dex-header-service-icon,
.rt-top-nav .dex-header-products-column>a.dex-header-service-link.is-yellow .dex-header-service-icon svg {
  color: #10234c !important;
}

/* Give the DEX and Resources feature cards the same airy proportions as Products and Services. */
@media screen and (min-width: 992px) {
  .rt-top-nav .dex-header-dex-panel {
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.7fr) !important;
    gap: 34px !important;
    min-height: 378px !important;
  }

  .rt-top-nav .dex-header-dex-feature {
    display: flex !important;
    min-height: 378px !important;
    padding: 34px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
  }

  .rt-top-nav .dex-header-dex-feature .dex-header-products-feature-icon {
    margin-bottom: auto !important;
  }

  .rt-top-nav .dex-header-dex-feature strong {
    max-width: 310px !important;
  }

  .rt-top-nav .dex-header-dex-feature p {
    max-width: 340px !important;
  }

  .rt-top-nav .dex-header-dex-links {
    padding: 12px 10px 12px 0 !important;
  }
}

/* Products menu follows the approved featured-DeX card and grouped product-link layout. */
.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-products-mega-wrap {
  grid-template-columns: minmax(300px, 0.54fr) minmax(0, 1.46fr) !important;
  min-height: 550px !important;
}

.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-products-content {
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: 22px !important;
}

.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-products-column,
.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-products-column+.dex-header-products-column {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
}

.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-products-column>p {
  grid-column: 1 / -1 !important;
  margin: 0 0 2px !important;
  padding: 0 0 10px !important;
  color: var(--dex-blue) !important;
  font-size: 13px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  border-bottom: 0 !important;
}

.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-product-link {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 18px !important;
  gap: 15px !important;
  align-items: center !important;
  min-height: 82px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(11, 80, 191, 0.1) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: var(--dex-text) !important;
  text-align: left !important;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: 0 3px 14px rgba(11, 80, 191, 0.045) !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-product-link:hover {
  border-color: rgba(var(--dex-blue-rgb), 0.2) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(var(--dex-blue-rgb), 0.035)) !important;
  box-shadow: 0 8px 20px rgba(11, 80, 191, 0.09) !important;
  transform: translateY(-1px) !important;
}

.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-product-link .dex-header-menu-icon {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  border-radius: 11px !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.94) 0 8%, rgba(255, 255, 255, 0.48) 22%, transparent 46%),
    linear-gradient(145deg, #3d72ff 0%, #0f55d7 47%, #06338d 100%) !important;
  box-shadow: 0 4px 0 #0b3e9d, 0 10px 16px rgba(20, 69, 173, 0.26), inset 0 2px 3px rgba(255, 255, 255, 0.58), inset 0 -6px 10px rgba(3, 29, 98, 0.2) !important;
  opacity: 1 !important;
  transform: rotate(-2deg) !important;
}

.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-product-link:nth-of-type(odd) .dex-header-menu-icon {
  color: #ffffff !important;
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.94) 0 8%, rgba(255, 255, 255, 0.48) 22%, transparent 46%),
    linear-gradient(145deg, #3d72ff 0%, #0f55d7 47%, #06338d 100%) !important;
  box-shadow: 0 4px 0 #0b3e9d, 0 10px 16px rgba(20, 69, 173, 0.26), inset 0 2px 3px rgba(255, 255, 255, 0.58), inset 0 -6px 10px rgba(3, 29, 98, 0.2) !important;
}

.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-product-link .dex-header-menu-icon.is-gold {
  color: #10234c !important;
  background:
    radial-gradient(circle at 27% 21%, #fff9cf 0 9%, rgba(255, 237, 139, 0.76) 20%, transparent 43%),
    linear-gradient(145deg, #ffe36c 0%, #ffc21c 48%, #e39a00 100%) !important;
  box-shadow: 0 4px 0 #be7800, 0 10px 16px rgba(205, 144, 0, 0.26), inset 0 2px 3px rgba(255, 255, 255, 0.7), inset 0 -6px 10px rgba(170, 101, 0, 0.16) !important;
}

/* Keep the DeX card purposeful: content begins near the icon and the CTA anchors the base. */
.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-products-feature {
  justify-content: flex-start !important;
}

.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-products-feature-icon {
  margin-bottom: 0 !important;
}

.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-products-feature p {
  margin-top: 54px !important;
}

.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-products-feature>a {
  margin-top: auto !important;
}

.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-product-copy {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  color: var(--dex-text) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-product-copy strong {
  color: var(--dex-text) !important;
  font-size: 14px !important;
  font-weight: 820 !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-product-copy small {
  color: rgba(16, 35, 76, 0.68) !important;
  font-size: 11px !important;
  font-weight: 580 !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-product-link>i {
  color: var(--dex-blue) !important;
  font-size: 18px !important;
  font-style: normal !important;
  opacity: 0.72 !important;
}

/* Services use the approved two-column delivery map with a feature card on the right. */
.rt-top-nav .dex-header-services-dropdown .dex-header-products-mega-wrap {
  grid-template-columns: minmax(0, 1.62fr) minmax(300px, 0.56fr) !important;
  min-height: 590px !important;
}

.rt-top-nav .dex-header-services-dropdown .dex-header-products-content {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 34px !important;
  align-content: start !important;
}

.rt-top-nav .dex-header-services-dropdown .dex-header-products-column,
.rt-top-nav .dex-header-services-dropdown .dex-header-products-column+.dex-header-products-column {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
}

.rt-top-nav .dex-header-services-dropdown .dex-header-products-column>p {
  margin: 0 0 2px !important;
  padding: 0 0 10px !important;
  border: 0 !important;
  color: var(--dex-blue) !important;
  font-size: 13px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

.rt-top-nav .dex-header-services-dropdown .dex-header-service-link,
.rt-top-nav .dex-header-services-dropdown .dex-header-products-column>a.dex-header-service-link {
  grid-template-columns: 44px minmax(0, 1fr) 18px !important;
  gap: 15px !important;
  min-height: 82px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(11, 80, 191, 0.1) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 3px 14px rgba(11, 80, 191, 0.045) !important;
  opacity: 1 !important;
  transform: none !important;
}

.rt-top-nav .dex-header-services-dropdown .dex-header-service-link:hover {
  border-color: rgba(var(--dex-blue-rgb), 0.2) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(var(--dex-blue-rgb), 0.035)) !important;
  box-shadow: 0 8px 20px rgba(11, 80, 191, 0.09) !important;
  transform: translateY(-1px) !important;
}

.rt-top-nav .dex-header-services-dropdown .dex-header-service-copy {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  opacity: 1 !important;
  transform: none !important;
}

.rt-top-nav .dex-header-services-dropdown .dex-header-service-link strong {
  font-size: 14px !important;
  font-weight: 820 !important;
}

.rt-top-nav .dex-header-services-dropdown .dex-header-service-copy small {
  color: rgba(16, 35, 76, 0.68) !important;
  font-size: 11px !important;
  font-weight: 580 !important;
  line-height: 1.35 !important;
}

.rt-top-nav .dex-header-services-dropdown .dex-header-service-link>i {
  opacity: 0.72 !important;
  transform: none !important;
}

.rt-top-nav .dex-header-services-dropdown .dex-header-services-feature {
  justify-content: flex-start !important;
}

.rt-top-nav .dex-header-services-dropdown .dex-header-services-feature .dex-header-products-feature-icon {
  margin-bottom: 0 !important;
}

.rt-top-nav .dex-header-services-dropdown .dex-header-services-feature p {
  margin-top: 54px !important;
}

.rt-top-nav .dex-header-services-dropdown .dex-header-services-feature>a {
  margin-top: auto !important;
}

/* Resources follows the DeX feature-card plus five full-width resource rows reference. */
.rt-top-nav .dex-header-resources-dropdown .dex-header-dex-panel {
  grid-template-columns: minmax(300px, 0.54fr) minmax(0, 1.46fr) !important;
  gap: 34px !important;
  min-height: 590px !important;
}

.rt-top-nav .dex-header-resources-dropdown .dex-header-dex-feature {
  display: flex !important;
  min-height: 100% !important;
  justify-content: flex-start !important;
  padding: 34px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 86% 16%, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(145deg, #052c7f 0%, #0b4cbd 56%, #1570e4 100%) !important;
}

.rt-top-nav .dex-header-resources-dropdown .dex-header-dex-feature .dex-header-products-feature-icon {
  margin-bottom: 0 !important;
}

.rt-top-nav .dex-header-resources-dropdown .dex-header-dex-feature strong {
  max-width: 270px !important;
  margin-top: 54px !important;
  font-size: 34px !important;
}

.rt-top-nav .dex-header-resources-dropdown .dex-header-dex-feature p {
  max-width: 280px !important;
  font-size: 14px !important;
}

.rt-top-nav .dex-header-resources-dropdown .dex-header-dex-feature a {
  min-height: 0 !important;
  margin-top: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--dex-yellow) !important;
  background: transparent !important;
  font-size: 15px !important;
}

.rt-top-nav .dex-header-resources-dropdown .dex-header-dex-links {
  align-content: start !important;
  gap: 12px !important;
  padding: 0 !important;
}

.rt-top-nav .dex-header-resources-dropdown .dex-header-dex-link {
  grid-template-columns: 44px minmax(0, 1fr) 18px !important;
  gap: 15px !important;
  min-height: 82px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(11, 80, 191, 0.1) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 3px 14px rgba(11, 80, 191, 0.045) !important;
  transform: none !important;
}

.rt-top-nav .dex-header-resources-dropdown .dex-header-dex-link:hover {
  border-color: rgba(var(--dex-blue-rgb), 0.2) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(var(--dex-blue-rgb), 0.035)) !important;
  box-shadow: 0 8px 20px rgba(11, 80, 191, 0.09) !important;
  transform: translateY(-1px) !important;
}

.rt-top-nav .dex-header-resources-dropdown .dex-header-dex-link strong {
  color: var(--dex-text) !important;
  font-size: 14px !important;
  font-weight: 820 !important;
}

.rt-top-nav .dex-header-resources-dropdown .dex-header-dex-link small {
  color: rgba(16, 35, 76, 0.68) !important;
  font-size: 11px !important;
  font-weight: 580 !important;
  line-height: 1.35 !important;
}

.rt-top-nav .dex-header-resources-dropdown .dex-header-dex-link>i {
  color: var(--dex-blue) !important;
  font-size: 18px !important;
  font-style: normal !important;
  opacity: 0.72 !important;
  transform: none !important;
}

.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-products-feature strong {
  font-size: 38px !important;
  line-height: 1 !important;
}

/* Shared desktop polish: keep each approved menu map, but present it as one calm mega-menu canvas. */
@media screen and (min-width: 992px) {

  .rt-top-nav .rt-mobile-navbar,
  .rt-top-nav .rt-mobile-navbar .dex-header-dex-menu,
  .rt-top-nav .rt-mobile-navbar .dex-header-products-mega-menu,
  .rt-top-nav .rt-mobile-navbar .dex-header-mega-menu {
    display: none !important;
  }

  /* The fixed shell only positions the menu; the rounded canvas below is the visible dropdown. */
  .rt-top-nav .dex-header-products-mega-menu,
  .rt-top-nav .dex-header-mega-menu,
  .rt-top-nav .dex-header-dex-menu {
    padding-top: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  .rt-top-nav .dex-header-dex-dropdown>.dex-header-dex-menu {
    padding-top: 0 !important;
  }

  .rt-top-nav .dex-header-products-mega-wrap,
  .rt-top-nav .dex-header-mega-wrap,
  .rt-top-nav .dex-header-dex-panel {
    pointer-events: none !important;
  }

  .rt-top-nav .dex-header-products-dropdown.w--open>.dex-header-products-mega-menu .dex-header-products-mega-wrap,
  .rt-top-nav .dex-header-mega-dropdown.w--open>.dex-header-mega-menu .dex-header-mega-wrap,
  .rt-top-nav .dex-header-dex-dropdown.w--open>.dex-header-dex-menu .dex-header-dex-panel {
    pointer-events: auto !important;
  }

  .rt-top-nav .dex-header-products-dropdown .dex-header-products-mega-wrap,
  .rt-top-nav .dex-header-resources-dropdown .dex-header-dex-panel {
    padding: 28px !important;
    border: 1px solid rgba(11, 80, 191, 0.12) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 22px 52px rgba(12, 43, 110, 0.12) !important;
  }

  /* Resources is anchored to the stable header wrapper, not the viewport or trigger button. */
  .rt-top-nav .rt-navbar-v1-menu-desktop .dex-header-resources-dropdown {
    position: static !important;
  }

  .rt-top-nav .rt-navbar-v1-menu-desktop .dex-header-resources-dropdown>.dex-header-dex-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    width: min(1440px, calc(100vw - 64px)) !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: translateX(-50%) !important;
  }

  /* Resources is a light, refined canvas around its six rows rather than a heavy box. */
  .rt-top-nav .rt-navbar-v1-menu-desktop .dex-header-resources-dropdown .dex-header-dex-panel {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 22px !important;
    border: 1px solid rgba(11, 80, 191, 0.07) !important;
    border-radius: 32px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(248, 251, 255, 0.94)) !important;
    box-shadow: 0 14px 34px rgba(12, 43, 110, 0.08) !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .rt-top-nav .rt-navbar-v1-menu-desktop .dex-header-resources-dropdown .dex-header-dex-feature {
    border-radius: 22px !important;
  }

  .rt-top-nav .dex-header-products-dropdown .dex-header-products-feature,
  .rt-top-nav .dex-header-services-dropdown .dex-header-services-feature,
  .rt-top-nav .dex-header-resources-dropdown .dex-header-dex-feature {
    border-radius: 14px !important;
    background:
      radial-gradient(circle at 86% 12%, rgba(255, 255, 255, 0.2), transparent 29%),
      linear-gradient(135deg, #082c7f 0%, #0c52c8 58%, #2884ed 100%) !important;
  }

  .rt-top-nav .dex-header-products-dropdown .dex-header-products-feature p,
  .rt-top-nav .dex-header-services-dropdown .dex-header-services-feature p,
  .rt-top-nav .dex-header-resources-dropdown .dex-header-dex-feature p {
    margin-top: 20px !important;
  }

  .rt-top-nav .dex-header-products-dropdown .dex-header-products-feature>a,
  .rt-top-nav .dex-header-services-dropdown .dex-header-services-feature>a,
  .rt-top-nav .dex-header-resources-dropdown .dex-header-dex-feature>a {
    min-height: 0 !important;
    padding: 14px 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 6px !important;
    color: #10234c !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(2, 28, 91, 0.18) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  .rt-top-nav .dex-header-products-dropdown .dex-header-products-feature>a:hover,
  .rt-top-nav .dex-header-services-dropdown .dex-header-services-feature>a:hover,
  .rt-top-nav .dex-header-resources-dropdown .dex-header-dex-feature>a:hover {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.16) !important;
  }

  .rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-product-link,
  .rt-top-nav .dex-header-services-dropdown .dex-header-service-link,
  .rt-top-nav .dex-header-services-dropdown .dex-header-products-column>a.dex-header-service-link,
  .rt-top-nav .dex-header-resources-dropdown .dex-header-dex-link {
    min-height: 72px !important;
    padding: 10px 4px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(11, 80, 191, 0.14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-product-link:hover,
  .rt-top-nav .dex-header-services-dropdown .dex-header-service-link:hover,
  .rt-top-nav .dex-header-resources-dropdown .dex-header-dex-link:hover {
    border-bottom-color: rgba(11, 80, 191, 0.42) !important;
    background: linear-gradient(90deg, rgba(15, 85, 215, 0.045), transparent 72%) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .rt-top-nav .dex-header-services-dropdown .dex-header-products-column+.dex-header-products-column {
    padding-left: 28px !important;
    border-left: 1px solid rgba(11, 80, 191, 0.14) !important;
  }

  .rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-products-column>p,
  .rt-top-nav .dex-header-services-dropdown .dex-header-products-column>p {
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(11, 80, 191, 0.14) !important;
  }

  /* The feature-card space now reinforces the menu with concise, useful outcomes. */
  .rt-top-nav .dex-header-feature-points {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 22px 0 0 !important;
    padding: 16px 0 0 !important;
    list-style: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
  }

  .rt-top-nav .dex-header-feature-points li {
    display: flex !important;
    gap: 8px !important;
    align-items: flex-start !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 12px !important;
    font-weight: 680 !important;
    line-height: 1.35 !important;
  }

  .rt-top-nav .dex-header-feature-points li::before {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
    border-radius: 50% !important;
    color: #0c4fc3 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    content: "✓" !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 15px !important;
    text-align: center !important;
  }
}

@media screen and (max-width: 991px) {
  .rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-products-mega-wrap {
    min-height: 0 !important;
  }

  .rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-products-column,
  .rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-products-column+.dex-header-products-column {
    grid-template-columns: 1fr !important;
  }

  .rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-product-link {
    min-height: 76px !important;
  }

  .rt-top-nav .dex-header-services-dropdown .dex-header-products-mega-wrap,
  .rt-top-nav .dex-header-services-dropdown .dex-header-products-content {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .rt-top-nav .dex-header-resources-dropdown .dex-header-dex-panel {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
}

/* Mobile navigation: compact overlay inspired by the approved mobile wireframe. */
html.dex-mobile-nav-locked,
html.dex-mobile-nav-locked body {
  overflow: hidden !important;
}

.rt-top-nav .dex-mobile-menu-trigger {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .rt-top-nav .rt-navbar-wrapper {
    min-height: 76px !important;
  }

  .rt-top-nav .rt-navbar-logo-wrap {
    position: relative !important;
    z-index: 100102 !important;
  }

  .rt-top-nav .dex-header-product-brand {
    right: 64px !important;
    z-index: 100102 !important;
  }

  .rt-top-nav .dex-mobile-menu-trigger {
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    z-index: 100102 !important;
    display: inline-grid !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    place-content: center !important;
    gap: 5px !important;
    border: 1px solid rgba(var(--dex-blue-rgb), 0.18) !important;
    border-radius: 12px !important;
    color: var(--dex-blue-dark) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 9px 20px rgba(12, 43, 110, 0.12) !important;
    cursor: pointer !important;
    transform: translateY(-50%) !important;
  }

  .rt-top-nav .dex-mobile-menu-trigger>span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    transition: transform 180ms ease, opacity 180ms ease !important;
  }

  .rt-top-nav.dex-mobile-nav-open .dex-mobile-menu-trigger>span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  .rt-top-nav.dex-mobile-nav-open .dex-mobile-menu-trigger>span:nth-child(2) {
    opacity: 0 !important;
  }

  .rt-top-nav.dex-mobile-nav-open .dex-mobile-menu-trigger>span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  .rt-top-nav .rt-mobile-navbar {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100100 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 98px 22px 30px !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 6% 0%, rgba(var(--dex-yellow-rgb), 0.15), transparent 22%),
      linear-gradient(155deg, #052b7c 0%, #0a4cbc 55%, #176fe0 100%) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-mobile-menu-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 0 26px !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  .rt-top-nav .dex-mobile-menu-close {
    display: none !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-dropdown {
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  .rt-top-nav .rt-mobile-navbar .rt-navbar-dropdown-toggle,
  .rt-top-nav .rt-mobile-navbar .dex-header-access-link,
  .rt-top-nav .rt-mobile-navbar .dex-header-connect-link {
    width: 100% !important;
    min-height: 56px !important;
    padding: 0 2px !important;
    justify-content: space-between !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 22px !important;
    font-weight: 780 !important;
  }

  .rt-top-nav .rt-mobile-navbar .rt-navbar-dropdown-toggle img {
    filter: brightness(0) invert(1) !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-products-mega-menu,
  .rt-top-nav .rt-mobile-navbar .dex-header-products-dropdown.w--open>.dex-header-products-mega-menu {
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-products-dropdown.w--open>.dex-header-products-mega-menu {
    display: block !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-products-mega-wrap,
  .rt-top-nav .rt-mobile-navbar .dex-header-products-content,
  .rt-top-nav .rt-mobile-navbar .dex-header-resources-mega-wrap {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-products-feature,
  .rt-top-nav .rt-mobile-navbar .dex-header-dex-feature {
    display: none !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-products-column {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-products-column>p {
    margin: 7px 0 5px !important;
    padding: 0 !important;
    border: 0 !important;
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-product-link,
  .rt-top-nav .rt-mobile-navbar .dex-header-service-link,
  .rt-top-nav .rt-mobile-navbar .dex-header-dex-link {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 42px !important;
    padding: 8px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-product-link>.dex-header-menu-icon,
  .rt-top-nav .rt-mobile-navbar .dex-header-service-icon,
  .rt-top-nav .rt-mobile-navbar .dex-header-dex-link>span {
    display: none !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-product-copy,
  .rt-top-nav .rt-mobile-navbar .dex-header-service-copy,
  .rt-top-nav .rt-mobile-navbar .dex-header-dex-link>div {
    grid-column: 1 !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-product-copy strong,
  .rt-top-nav .rt-mobile-navbar .dex-header-service-copy strong,
  .rt-top-nav .rt-mobile-navbar .dex-header-dex-link strong {
    color: rgba(255, 255, 255, 0.93) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-product-copy small,
  .rt-top-nav .rt-mobile-navbar .dex-header-service-copy small,
  .rt-top-nav .rt-mobile-navbar .dex-header-dex-link small {
    display: none !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-product-link>i,
  .rt-top-nav .rt-mobile-navbar .dex-header-service-link>i,
  .rt-top-nav .rt-mobile-navbar .dex-header-dex-link>i {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 18px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-header-connect-link {
    margin-top: 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
}

/* Shared burger navigation for the full site. */
.rt-top-nav .dex-mobile-menu-trigger {
  position: absolute !important;
  top: 50% !important;
  z-index: 100102 !important;
  display: inline-grid !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  place-content: center !important;
  gap: 5px !important;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.18) !important;
  border-radius: 12px !important;
  color: var(--dex-blue-dark) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 9px 20px rgba(12, 43, 110, 0.12) !important;
  cursor: pointer !important;
  transform: translateY(-50%) !important;
}

.rt-top-nav .dex-mobile-menu-trigger>span {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transition: transform 180ms ease, opacity 180ms ease !important;
}

.rt-top-nav.dex-mobile-nav-open .dex-mobile-menu-trigger>span:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
}

.rt-top-nav.dex-mobile-nav-open .dex-mobile-menu-trigger>span:nth-child(2) {
  opacity: 0 !important;
}

.rt-top-nav.dex-mobile-nav-open .dex-mobile-menu-trigger>span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
}

.rt-top-nav .rt-mobile-navbar {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100100 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 124px 28px 52px !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #f4f7ff !important;
  background-image:
    radial-gradient(circle, rgba(var(--dex-blue-rgb), 0.2) 1.2px, transparent 1.6px),
    radial-gradient(circle, rgba(var(--dex-yellow-rgb), 0.2) 1.2px, transparent 1.6px),
    radial-gradient(circle at 15% 5%, rgba(var(--dex-blue-rgb), 0.13), transparent 28%),
    radial-gradient(circle at 86% 20%, rgba(var(--dex-yellow-rgb), 0.16), transparent 25%) !important;
  background-position: 0 0, 14px 14px, center, center !important;
  background-size: 28px 28px, 28px 28px, auto, auto !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.rt-top-nav .rt-mobile-navbar .dex-site-menu {
  width: min(100%, 760px) !important;
  margin: 0 auto !important;
  padding: clamp(22px, 3vw, 34px) !important;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.14) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 26px 65px rgba(12, 43, 110, 0.14) !important;
}

.rt-top-nav .dex-site-menu-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  margin-bottom: 28px !important;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.18) !important;
}

.rt-top-nav .dex-site-menu-tabs button {
  min-height: 50px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  color: rgba(16, 35, 76, 0.57) !important;
  background: transparent !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.rt-top-nav .dex-site-menu-tabs button.is-active {
  border-bottom-color: var(--dex-blue) !important;
  color: var(--dex-blue-dark) !important;
}

.rt-top-nav .dex-site-menu-panel[hidden] {
  display: none !important;
}

.rt-top-nav .dex-site-menu-group {
  margin-bottom: 10px !important;
}

.rt-top-nav .dex-site-menu-group-toggle {
  display: flex !important;
  width: 100% !important;
  min-height: 58px !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 18px !important;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.18) !important;
  border-radius: 14px !important;
  color: var(--dex-text) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  font-size: 22px !important;
  font-weight: 820 !important;
  cursor: pointer !important;
}

.rt-top-nav .dex-site-menu-group-toggle i {
  color: var(--dex-blue) !important;
  font-size: 24px !important;
  font-style: normal !important;
  line-height: 1 !important;
}

.rt-top-nav .dex-site-menu-group.is-open .dex-site-menu-group-toggle i {
  transform: rotate(45deg) !important;
}

.rt-top-nav .dex-site-menu-group-links {
  display: none !important;
  padding: 10px 12px 8px !important;
}

.rt-top-nav .dex-site-menu-group.is-open .dex-site-menu-group-links {
  display: grid !important;
}

.rt-top-nav .dex-site-menu-group-links a,
.rt-top-nav .dex-site-menu-resource-links a,
.rt-top-nav .dex-site-menu-direct-links a {
  display: flex !important;
  min-height: 48px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 7px 0 !important;
  border: 0 !important;
  color: var(--dex-text) !important;
  background: transparent !important;
  font-size: 18px !important;
  font-weight: 680 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

.rt-top-nav .dex-site-menu-group-links a:hover,
.rt-top-nav .dex-site-menu-resource-links a:hover,
.rt-top-nav .dex-site-menu-direct-links a:hover {
  color: var(--dex-blue) !important;
}

.rt-top-nav .dex-site-menu-group-links i,
.rt-top-nav .dex-site-menu-resource-links i,
.rt-top-nav .dex-site-menu-direct-links i {
  color: var(--dex-blue) !important;
  font-size: 21px !important;
  font-style: normal !important;
}

.rt-top-nav .dex-site-menu-eyebrow {
  margin: 0 0 10px !important;
  color: var(--dex-blue) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

.rt-top-nav .dex-site-menu-resource-links {
  display: grid !important;
  padding: 4px 12px 16px !important;
}

.rt-top-nav .dex-site-menu-direct-links {
  display: grid !important;
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(var(--dex-blue-rgb), 0.18) !important;
}

@media screen and (min-width: 992px) {
  .rt-top-nav .dex-header-product-brand {
    right: 82px !important;
  }

  .rt-top-nav .dex-mobile-menu-trigger {
    right: 28px !important;
  }

  .rt-top-nav .rt-navbar-logo-wrap {
    position: relative !important;
    z-index: 100102 !important;
  }
}

@media screen and (max-width: 991px) {
  .rt-top-nav .dex-mobile-menu-trigger {
    right: 16px !important;
  }

  .rt-top-nav .rt-mobile-navbar {
    padding: 98px 20px 32px !important;
  }

  .rt-top-nav .rt-mobile-navbar .dex-site-menu {
    padding: 22px !important;
    border-radius: 20px !important;
  }

  .rt-top-nav .dex-site-menu-tabs button {
    min-height: 45px !important;
    padding: 0 4px !important;
    font-size: 15px !important;
  }

  .rt-top-nav .dex-site-menu-group-toggle {
    min-height: 52px !important;
    padding: 0 15px !important;
    font-size: 19px !important;
  }

  .rt-top-nav .dex-site-menu-group-links a,
  .rt-top-nav .dex-site-menu-resource-links a,
  .rt-top-nav .dex-site-menu-direct-links a {
    min-height: 43px !important;
    font-size: 16px !important;
  }
}

/* The landing page does not use global-shell.js, so its menu state lives here too. */
.rt-top-nav .rt-mobile-navbar {
  display: none !important;
}

.rt-top-nav.dex-mobile-nav-open .rt-mobile-navbar {
  display: flex !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
}

@media screen and (min-width: 992px) {

  .rt-top-nav,
  .rt-top-nav .rt-nav {
    min-height: 96px !important;
    overflow: visible !important;
  }

  .rt-top-nav .rt-nav>.rt-container-xl,
  .rt-top-nav .rt-navbar-wrapper {
    min-height: 96px !important;
  }

  .rt-top-nav .rt-navbar-logo-wrap {
    position: absolute !important;
    top: 50% !important;
    left: 28px !important;
    transform: translateY(-50%) !important;
  }

  .rt-top-nav .rt-navbar-logo .dex-header-logo-full {
    width: 180px !important;
    max-height: 50px !important;
  }
}

/* Keep the full-site menu outside the sticky header's stacking context. */
.rt-top-nav {
  z-index: 100102 !important;
}

body>.dex-site-navigation-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100100 !important;
  display: none !important;
  width: 100vw !important;
  min-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 124px 28px 52px !important;
  overflow-y: auto !important;
  background-color: #f4f7ff !important;
  background-image:
    radial-gradient(circle, rgba(var(--dex-blue-rgb), 0.2) 1.2px, transparent 1.6px),
    radial-gradient(circle, rgba(var(--dex-yellow-rgb), 0.2) 1.2px, transparent 1.6px),
    radial-gradient(circle at 15% 5%, rgba(var(--dex-blue-rgb), 0.13), transparent 28%),
    radial-gradient(circle at 86% 20%, rgba(var(--dex-yellow-rgb), 0.16), transparent 25%) !important;
  background-position: 0 0, 14px 14px, center, center !important;
  background-size: 28px 28px, 28px 28px, auto, auto !important;
}

html.dex-mobile-nav-locked body>.dex-site-navigation-overlay {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

body>.dex-site-navigation-overlay .dex-site-menu {
  width: min(100%, 760px) !important;
  margin: 0 auto !important;
  padding: clamp(22px, 3vw, 34px) !important;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.14) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 26px 65px rgba(12, 43, 110, 0.14) !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  margin-bottom: 28px !important;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.18) !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-tabs button {
  min-height: 50px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  color: rgba(16, 35, 76, 0.57) !important;
  background: transparent !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-tabs button.is-active {
  border-bottom-color: var(--dex-blue) !important;
  color: var(--dex-blue-dark) !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-panel[hidden],
body>.dex-site-navigation-overlay .dex-site-menu-group-links {
  display: none !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-group.is-open .dex-site-menu-group-links {
  display: grid !important;
  padding: 10px 12px 8px !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-group {
  margin-bottom: 10px !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-group-toggle {
  display: flex !important;
  width: 100% !important;
  min-height: 58px !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 18px !important;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.18) !important;
  border-radius: 14px !important;
  color: var(--dex-text) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  font-size: 22px !important;
  font-weight: 820 !important;
  cursor: pointer !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-group-toggle i {
  color: var(--dex-blue) !important;
  font-size: 24px !important;
  font-style: normal !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-group.is-open .dex-site-menu-group-toggle i {
  transform: rotate(45deg) !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-group-links a,
body>.dex-site-navigation-overlay .dex-site-menu-resource-links a,
body>.dex-site-navigation-overlay .dex-site-menu-direct-links a {
  display: flex !important;
  min-height: 48px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 7px 0 !important;
  color: var(--dex-text) !important;
  font-size: 18px !important;
  font-weight: 680 !important;
  text-decoration: none !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-group-links i,
body>.dex-site-navigation-overlay .dex-site-menu-resource-links i,
body>.dex-site-navigation-overlay .dex-site-menu-direct-links i {
  color: var(--dex-blue) !important;
  font-size: 21px !important;
  font-style: normal !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-eyebrow {
  margin: 0 0 10px !important;
  color: var(--dex-blue) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-resource-links {
  display: grid !important;
  padding: 4px 12px 16px !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-direct-links {
  display: grid !important;
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(var(--dex-blue-rgb), 0.18) !important;
}

@media screen and (max-width: 991px) {
  body>.dex-site-navigation-overlay {
    padding: 98px 20px 32px !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu {
    padding: 22px !important;
    border-radius: 20px !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-tabs button {
    min-height: 45px !important;
    padding: 0 4px !important;
    font-size: 15px !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-group-toggle {
    min-height: 52px !important;
    padding: 0 15px !important;
    font-size: 19px !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-group-links a,
  body>.dex-site-navigation-overlay .dex-site-menu-resource-links a,
  body>.dex-site-navigation-overlay .dex-site-menu-direct-links a {
    min-height: 43px !important;
    font-size: 16px !important;
  }
}

/* Final navigation canvas: blue What We Do and light Who We Are panels. */
body>.dex-site-navigation-overlay {
  z-index: 100300 !important;
  padding: 0 !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-layout {
  position: relative !important;
  width: 100vw !important;
  min-height: 100vh !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-overlay-top {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  height: 96px !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 34px !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-overlay-top a {
  display: inline-flex !important;
  align-items: center !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-overlay-top img {
  display: block !important;
  width: 180px !important;
  height: auto !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-overlay-close {
  position: relative !important;
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.2) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  cursor: pointer !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-overlay-close span {
  position: absolute !important;
  width: 19px !important;
  height: 2px !important;
  border-radius: 99px !important;
  background: var(--dex-blue-dark) !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-overlay-close span:first-child {
  transform: rotate(45deg) !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-overlay-close span:last-child {
  transform: rotate(-45deg) !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-layout>.dex-site-menu {
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 148px clamp(34px, 5.4vw, 92px) 58px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-what {
  color: #ffffff !important;
  background-color: #07338f !important;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.2) 1.15px, transparent 1.55px),
    radial-gradient(circle, rgba(var(--dex-yellow-rgb), 0.3) 1.15px, transparent 1.55px),
    radial-gradient(circle at 80% 18%, rgba(86, 153, 255, 0.62), transparent 29%),
    linear-gradient(145deg, #052574 0%, #0844b4 58%, #146fe0 100%) !important;
  background-position: 0 0, 14px 14px, center, center !important;
  background-size: 28px 28px, 28px 28px, auto, auto !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-who {
  color: var(--dex-text) !important;
  background:
    radial-gradient(circle, rgba(var(--dex-blue-rgb), 0.2) 1.2px, transparent 1.6px),
    radial-gradient(circle, rgba(var(--dex-yellow-rgb), 0.2) 1.2px, transparent 1.6px),
    linear-gradient(135deg, #ffffff, #f4f8ff) !important;
  background-position: 0 0, 14px 14px, center !important;
  background-size: 28px 28px, 28px 28px, auto !important;
}

body>.dex-site-navigation-overlay .dex-site-menu h2 {
  margin: 0 0 28px !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  font-weight: 850 !important;
  letter-spacing: -0.045em !important;
  line-height: 1 !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-what h2 {
  color: #ffffff !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-who h2 {
  color: var(--dex-blue-dark) !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-what .dex-site-menu-group-toggle {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-what .dex-site-menu-group-toggle i,
body>.dex-site-navigation-overlay .dex-site-menu-what .dex-site-menu-group-links i,
body>.dex-site-navigation-overlay .dex-site-menu-what .dex-site-menu-direct-links i {
  color: var(--dex-yellow) !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-what .dex-site-menu-group-links a,
body>.dex-site-navigation-overlay .dex-site-menu-what .dex-site-menu-direct-links a {
  color: rgba(255, 255, 255, 0.94) !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-what .dex-site-menu-direct-links {
  border-top-color: rgba(255, 255, 255, 0.24) !important;
}

@media screen and (max-width: 991px) {
  body>.dex-site-navigation-overlay .dex-site-menu-layout {
    grid-template-columns: 1fr !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-overlay-top {
    height: 76px !important;
    padding: 0 18px !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-overlay-top img {
    width: 148px !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-layout>.dex-site-menu {
    min-height: auto !important;
    padding: 108px 28px 38px !important;
  }
}

/* Mobile header and tabbed menu: one navigation section at a time. */
@media screen and (min-width: 992px) {
  body>.dex-site-navigation-overlay .dex-site-menu-tabs {
    display: none !important;
  }

  .rt-top-nav .dex-mobile-menu-trigger {
    display: inline-grid !important;
  }
}

@media screen and (max-width: 991px) {
  .rt-top-nav .w-nav-button {
    display: none !important;
  }

  .rt-top-nav .rt-navbar-wrapper {
    min-height: 76px !important;
    padding-right: 112px !important;
  }

  .rt-top-nav .rt-navbar-logo-wrap {
    min-width: 0 !important;
    max-width: calc(100vw - 206px) !important;
  }

  .rt-top-nav .rt-navbar-logo .dex-header-logo-full {
    width: min(154px, 100%) !important;
    height: auto !important;
  }

  .rt-top-nav .dex-header-product-brand {
    right: 62px !important;
    width: 36px !important;
    height: 36px !important;
  }

  .rt-top-nav .dex-mobile-menu-trigger {
    right: 12px !important;
    display: inline-grid !important;
    width: 40px !important;
    height: 40px !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-layout {
    position: relative !important;
    display: block !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-overlay-top {
    position: absolute !important;
    height: 76px !important;
    padding: 0 18px !important;
    background: rgba(5, 39, 116, 0.98) !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-overlay-top img {
    width: 146px !important;
    max-height: 40px !important;
    object-fit: contain !important;
    filter: none !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-overlay-close {
    width: 40px !important;
    height: 40px !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-overlay-close span {
    background: #ffffff !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-tabs {
    position: absolute !important;
    top: 76px !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 4 !important;
    display: grid !important;
    height: 62px !important;
    grid-template-columns: 1fr 1fr !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 0 !important;
    background: #07338f !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-tabs button {
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    color: rgba(255, 255, 255, 0.68) !important;
    background: transparent !important;
    font-size: clamp(14px, 4.1vw, 17px) !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-tabs button.is-active {
    border-bottom-color: var(--dex-yellow) !important;
    color: #ffffff !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-layout>.dex-site-menu.dex-site-menu-panel {
    display: none !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 166px 22px 34px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-layout>.dex-site-menu.dex-site-menu-panel.is-active {
    display: block !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu h2 {
    margin-bottom: 22px !important;
    font-size: clamp(28px, 9vw, 38px) !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-group-toggle {
    min-height: 50px !important;
    padding: 0 14px !important;
    font-size: 18px !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-group-links a,
  body>.dex-site-navigation-overlay .dex-site-menu-resource-links a,
  body>.dex-site-navigation-overlay .dex-site-menu-direct-links a {
    min-height: 44px !important;
    font-size: 16px !important;
  }
}

@media screen and (max-width: 359px) {
  .rt-top-nav .rt-navbar-logo .dex-header-logo-full {
    width: 126px !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-layout>.dex-site-menu.dex-site-menu-panel {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }
}


/* Prevent legacy menu surfaces from leaking into the full-canvas split layout. */
body>.dex-site-navigation-overlay .dex-site-menu-layout {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-layout>.dex-site-menu {
  min-width: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-layout>.dex-site-menu.dex-site-menu-what {
  background-color: #07338f !important;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.2) 1.15px, transparent 1.55px),
    radial-gradient(circle, rgba(var(--dex-yellow-rgb), 0.3) 1.15px, transparent 1.55px),
    radial-gradient(circle at 80% 18%, rgba(86, 153, 255, 0.62), transparent 29%),
    linear-gradient(145deg, #052574 0%, #0844b4 58%, #146fe0 100%) !important;
  background-position: 0 0, 14px 14px, center, center !important;
  background-size: 28px 28px, 28px 28px, auto, auto !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-layout>.dex-site-menu.dex-site-menu-who {
  background-color: #f7faff !important;
  background-image:
    radial-gradient(circle, rgba(var(--dex-blue-rgb), 0.2) 1.2px, transparent 1.6px),
    radial-gradient(circle, rgba(var(--dex-yellow-rgb), 0.2) 1.2px, transparent 1.6px),
    linear-gradient(135deg, #ffffff, #f4f8ff) !important;
  background-position: 0 0, 14px 14px, center !important;
  background-size: 28px 28px, 28px 28px, auto !important;
}

@media screen and (max-width: 991px) {
  body>.dex-site-navigation-overlay .dex-site-menu-layout {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-layout>.dex-site-menu {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Calm full-viewport finish: navigation needs quieter surfaces than the hero. */
html.dex-mobile-nav-locked,
html.dex-mobile-nav-locked body {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body>.dex-site-navigation-overlay {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  max-height: none !important;
  overflow: hidden !important;
  background: #f7faff !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-layout {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  background: #f7faff !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-layout>.dex-site-menu.dex-site-menu-what {
  background:
    radial-gradient(circle at 80% 16%, rgba(96, 157, 255, 0.42), transparent 28%),
    linear-gradient(145deg, #052574 0%, #0844b4 58%, #146fe0 100%) !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-layout>.dex-site-menu.dex-site-menu-who {
  background: linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%) !important;
}

/* Full-page DeX navigation: partner-blue lead panel beside the hero-style light panel. */
body>.dex-site-navigation-overlay {
  align-items: center !important;
  justify-content: center !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-layout {
  display: grid !important;
  width: min(1420px, calc(100vw - 80px)) !important;
  min-height: min(690px, calc(100vh - 170px)) !important;
  grid-template-columns: minmax(340px, 0.84fr) minmax(0, 1.16fr) !important;
  overflow: hidden !important;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.16) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle, rgba(var(--dex-blue-rgb), 0.16) 1.15px, transparent 1.55px),
    radial-gradient(circle, rgba(var(--dex-yellow-rgb), 0.16) 1.15px, transparent 1.55px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.95)) !important;
  background-position: 0 0, 14px 14px, center !important;
  background-size: 28px 28px, 28px 28px, auto !important;
  box-shadow: 0 30px 80px rgba(12, 43, 110, 0.18) !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-spotlight {
  display: flex !important;
  min-height: 100% !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: clamp(34px, 5vw, 68px) !important;
  overflow: hidden !important;
  color: #ffffff !important;
  background-color: #07338f !important;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.2) 1.15px, transparent 1.55px),
    radial-gradient(circle, rgba(var(--dex-yellow-rgb), 0.3) 1.15px, transparent 1.55px),
    radial-gradient(circle at 80% 18%, rgba(86, 153, 255, 0.62), transparent 29%),
    radial-gradient(circle at 28% 86%, rgba(var(--dex-yellow-rgb), 0.2), transparent 31%),
    linear-gradient(145deg, #052574 0%, #0844b4 58%, #146fe0 100%) !important;
  background-position: 0 0, 14px 14px, center, center, center !important;
  background-size: 28px 28px, 28px 28px, auto, auto, auto !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-spotlight img {
  display: block !important;
  width: min(205px, 100%) !important;
  height: auto !important;
  filter: brightness(0) invert(1) !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-spotlight p {
  margin: 0 0 12px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-spotlight strong {
  display: block !important;
  max-width: 400px !important;
  color: #ffffff !important;
  font-size: clamp(34px, 3.5vw, 58px) !important;
  font-weight: 850 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.02 !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-spotlight small {
  display: block !important;
  max-width: 390px !important;
  margin-top: 22px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 16px !important;
  font-weight: 570 !important;
  line-height: 1.55 !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-layout .dex-site-menu {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: clamp(34px, 5vw, 66px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media screen and (max-width: 991px) {
  body>.dex-site-navigation-overlay {
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-layout {
    width: 100% !important;
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    border-radius: 22px !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-spotlight {
    min-height: 220px !important;
    padding: 28px !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-spotlight img {
    width: 150px !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-spotlight strong {
    font-size: 32px !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-spotlight small {
    display: none !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-layout .dex-site-menu {
    padding: 24px !important;
  }
}

/* Must remain last: legacy burger rules above use a constrained canvas width. */
body>.dex-site-navigation-overlay {
  padding: 0 !important;
  overflow: hidden !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-layout {
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  flex: 0 0 100vw !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%) !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-layout>.dex-site-menu.dex-site-menu-what {
  background:
    radial-gradient(circle at 80% 16%, rgba(96, 157, 255, 0.42), transparent 28%),
    linear-gradient(145deg, #052574 0%, #0844b4 58%, #146fe0 100%) !important;
}

body>.dex-site-navigation-overlay .dex-site-menu-layout>.dex-site-menu.dex-site-menu-who {
  background: linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%) !important;
}

@media screen and (max-width: 991px) {
  body>.dex-site-navigation-overlay .dex-site-menu-layout {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    flex-basis: 100vw !important;
  }
}

/* Must remain last: mobile tabs replace the legacy side-by-side canvas. */
@media screen and (max-width: 991px) {
  body>.dex-site-navigation-overlay .dex-site-menu-layout {
    display: block !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-layout>.dex-site-menu.dex-site-menu-panel {
    display: none !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 166px 22px 34px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body>.dex-site-navigation-overlay .dex-site-menu-layout>.dex-site-menu.dex-site-menu-panel.is-active {
    display: block !important;
  }
}

@media screen and (max-width: 359px) {
  body>.dex-site-navigation-overlay .dex-site-menu-layout>.dex-site-menu.dex-site-menu-panel {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }
}

/* Keep Colakin as the smaller secondary wordmark to the right of the navigation. */
@media screen and (min-width: 992px) {
  .rt-top-nav .dex-header-product-brand {
    right: 82px !important;
    width: 104px !important;
    height: 52px !important;
  }

  .rt-top-nav .dex-header-product-brand img {
    width: auto !important;
    height: auto !important;
    max-width: 96px !important;
    max-height: 28px !important;
    content: url("/assets/colakin-wordmark.png") !important;
  }
}

@media screen and (max-width: 991px) {
  .rt-top-nav .dex-header-product-brand {
    right: 62px !important;
    width: 68px !important;
    height: 36px !important;
  }

  .rt-top-nav .dex-header-product-brand img {
    width: 64px !important;
    height: auto !important;
    max-width: 64px !important;
    max-height: 22px !important;
    content: url("/assets/colakin-wordmark.png") !important;
  }
}

@media screen and (max-width: 359px) {
  .rt-top-nav .dex-header-product-brand {
    width: 60px !important;
  }

  .rt-top-nav .dex-header-product-brand img {
    width: 58px !important;
    height: auto !important;
    max-width: 58px !important;
    max-height: 20px !important;
  }
}

/* Keep every desktop navigation bubble the same size. */
@media screen and (min-width: 992px) {
  .rt-top-nav .rt-navbar-v1-menu-desktop>.dex-header-dropdown {
    flex: 0 0 124px !important;
    width: 124px !important;
    max-width: 124px !important;
  }

  .rt-top-nav .rt-navbar-v1-menu-desktop>.dex-header-dropdown>.rt-navbar-dropdown-toggle,
  .rt-top-nav .rt-navbar-v1-menu-desktop>.dex-header-connect-link {
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
    height: 42px !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
    box-sizing: border-box !important;
  }
}

/* Keep the shared site header locked on regular public pages. */
body:has(> .rt-top-nav):not(.dex-docs-double-header) {
  padding-top: 96px !important;
}

body>.rt-top-nav {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
}

@media screen and (max-width: 991px) {
  body:has(> .rt-top-nav):not(.dex-docs-double-header) {
    padding-top: 86px !important;
  }
}

/* The homepage header is 96px on desktop and 76px below the desktop breakpoint. */
html.dex-home-page body {
  padding-top: 96px !important;
}

@media screen and (max-width: 991px) {
  html.dex-home-page body {
    padding-top: 76px !important;
  }
}



/* The delivery-system kicker reads more cleanly without a duplicate DeX mark. */
.dex-delivery-heading-logo {
  display: none !important;
}

/* Mobile landing hero polish: keep both brands compact and keep the badge floating. */
@media screen and (max-width: 767px) {
  .rt-top-nav .dex-header-product-brand {
    display: inline-flex !important;
  }

  .rt-hero-v1 {
    padding-top: clamp(48px, 14vw, 58px) !important;
  }

  .rt-hero-v1-heading-main {
    transform: translateY(0) !important;
  }

  .dex-agentic-ai-marker {
    position: absolute;
    top: 145px;
    right: -8px;
    min-height: 30px;
    margin: 0;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 10px;
    animation: dex-agentic-marker-float 4.5s ease-in-out infinite;
  }

  .dex-project-workspace .dex-project-flow-card>span::after {
    display: none;
  }

  .dex-delivery-system-section .dex-workflow-dynamic-desc {
    box-sizing: border-box;
    height: 84px !important;
    min-height: 84px !important;
  }

  .dex-business-outcomes-section .dex-outcome-panel {
    align-items: start !important;
  }

  .dex-business-outcomes-section .dex-outcome-copy {
    width: 100%;
    align-self: start !important;
  }
}

@media screen and (max-width: 359px) {
  .dex-delivery-system-section .dex-workflow-dynamic-desc {
    height: 102px !important;
    min-height: 102px !important;
  }
}

/*
 * Keep shared navigation typography independent from page-level font rules.
 * Inter Tight at 500/600 is the original Webflow header type scale.
 */
.rt-top-nav,
.rt-top-nav *,
body>.dex-site-navigation-overlay,
body>.dex-site-navigation-overlay * {
  font-family: "Inter Tight", sans-serif !important;
}

.rt-top-nav .rt-menu-text,
.rt-top-nav .dex-header-access-link,
.rt-top-nav .dex-header-connect-link {
  font-weight: 500 !important;
}

.rt-top-nav .dex-header-product-copy strong,
.rt-top-nav .dex-header-service-copy strong,
.rt-top-nav .dex-header-dex-link strong,
.rt-top-nav .dex-header-products-column>a {
  font-weight: 600 !important;
}

.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-product-copy strong,
.rt-top-nav .dex-header-services-dropdown .dex-header-service-link strong,
.rt-top-nav .dex-header-resources-dropdown .dex-header-dex-link strong {
  font-weight: 600 !important;
}

.rt-top-nav .dex-header-product-copy small,
.rt-top-nav .dex-header-service-copy small,
.rt-top-nav .dex-header-dex-link small {
  font-weight: 500 !important;
}

.rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-product-copy small,
.rt-top-nav .dex-header-services-dropdown .dex-header-service-copy small,
.rt-top-nav .dex-header-resources-dropdown .dex-header-dex-link small {
  font-weight: 500 !important;
}

.rt-top-nav .dex-site-menu-group-toggle,
body>.dex-site-navigation-overlay .dex-site-menu-group-toggle {
  font-weight: 600 !important;
}

/*
 * Hero delivery workflow icons exported from the DeX Figma artwork.
 * Masks preserve the original glyph geometry while inheriting each blue/yellow
 * stage tile's accessible foreground color.
 */
.dex-project-workspace .dex-workflow-icon {
  display: block;
  width: 27px;
  height: 27px;
  color: inherit;
  background: currentColor;
  -webkit-mask-image: var(--dex-workflow-icon);
  mask-image: var(--dex-workflow-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: drop-shadow(0 4px 5px rgba(15, 23, 42, 0.18));
}

.dex-project-workspace .dex-stage-console-head .dex-workflow-icon {
  width: 26px;
  height: 26px;
}

/* ==========================================================================
   UNIFIED HERO SECTION SYSTEM (Materials, Success Stories, Blogs, DeX Access)
   Matches index.html container paddings, background image blend & typography
   ========================================================================== */

.unified-hero-section {
  position: relative !important;
  padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 40px) clamp(56px, 7vw, 84px) !important;
  background-color: #ffffff !important;
  background-image:
    radial-gradient(circle at 14% 18%, rgba(37, 99, 235, 0.12), transparent 36%),
    radial-gradient(circle at 86% 82%, rgba(251, 191, 36, 0.15), transparent 32%),
    radial-gradient(circle, rgba(37, 99, 235, 0.16) 1.2px, transparent 1.6px),
    radial-gradient(circle, rgba(251, 191, 36, 0.18) 1.2px, transparent 1.6px),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 60%, #f1f5f9 100%) !important;
  background-position: center, center, 0 0, 14px 14px, center !important;
  background-size: auto, auto, 28px 28px, 28px 28px, auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  font-family: 'Poppins', sans-serif !important;
}

/* Faded DeX watermark background graphic */
.unified-hero-section::before {
  content: "" !important;
  position: absolute !important;
  top: 80px !important;
  right: 4% !important;
  left: auto !important;
  z-index: 0 !important;
  width: clamp(220px, 28vw, 320px) !important;
  aspect-ratio: 419 / 454 !important;
  background: url("/assets/dex-icon-blue.svg") center / contain no-repeat !important;
  opacity: 0.08 !important;
  pointer-events: none !important;
}

.unified-hero-inner {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1800px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  padding: 0 8% !important;
}

/* 1. Breadcrumbs (Center Aligned) */
.unified-hero-breadcrumb {
  width: 100% !important;
  margin-bottom: 24px !important;
  display: flex !important;
  justify-content: flex-start !important;
}

.unified-breadcrumb-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  flex-wrap: wrap !important;
}

.unified-breadcrumb-link {
  color: #475569 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: color 0.2s ease !important;
}

.unified-breadcrumb-link:hover {
  color: #2563eb !important;
}

.unified-breadcrumb-separator {
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
}

.unified-breadcrumb-current {
  color: #2563eb !important;
  font-weight: 600 !important;
}

/* 2. Two Words Small Title (Clean Tagline - No Blinkers / No Blue BG) */
.unified-hero-tagline {
  display: inline-block !important;
  color: #2563eb !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 24px !important;
}

/* 3. Page Header (More than 3 words, line broken into 2 lines) */
.unified-hero-title {
  font-size: clamp(38px, 5vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #0f172a !important;
  margin-bottom: 24px !important;
  letter-spacing: -1px !important;
  text-align: center !important;
}

.unified-hero-title .gradient-text {
  -webkit-text-fill-color: transparent !important;
  background-image: linear-gradient(135deg, #2563eb 0%, #fbbf24 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* 4. 4-Lined Page Description */
.unified-hero-inner p,
.unified-hero-description {
  font-size: 19px !important;
  color: #334155 !important;
  line-height: 1.8 !important;
  margin: 0 auto 36px !important;
  max-width: 900px !important;
  font-weight: 400 !important;
  text-align: center !important;
  text-wrap: balance !important;
}

/* ============================================================
   Agents in Action — DeX themed workspace transformation
   ============================================================ */
.rt-ai-agents-v1 .dex-action-section {
  position: relative;
  z-index: 2;
}

.rt-ai-agents-v1 .dex-action-section .dex-engine-heading {
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.rt-ai-agents-v1 .dex-action-section .dex-engine-heading h2 {
  font-size: clamp(42px, 5vw, 66px);
}

.rt-ai-agents-v1 .dex-action-section .dex-engine-heading p {
  max-width: 850px;
}

.dex-action-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dex-action-state-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dex-action-state-button,
.dex-action-play-button,
.dex-action-stage-inspector button {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.dex-action-state-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 11px;
  color: rgba(255, 255, 255, 0.84);
  background: rgba(7, 24, 78, 0.24);
  font-size: 13px;
  font-weight: 800;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.dex-action-state-button span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: #1e3a8a;
  background: rgba(255, 255, 255, 0.9);
  font-size: 10px;
}

.dex-action-state-button:hover,
.dex-action-state-button:focus-visible {
  color: #ffffff;
  border-color: rgba(251, 191, 36, 0.7);
  background: rgba(30, 64, 175, 0.58);
  outline: none;
  transform: translateY(-1px);
}

.dex-action-state-button[aria-pressed="true"] {
  color: #0f2f78;
  border-color: rgba(251, 191, 36, 0.95);
  background: linear-gradient(135deg, #ffffff 0%, #fff7d6 100%);
  box-shadow: 0 10px 24px rgba(7, 24, 78, 0.2), inset 0 -3px 0 #fbbf24;
}

.dex-action-state-button[aria-pressed="true"] span {
  color: #ffffff;
  background: linear-gradient(145deg, #3b82f6, #1e40af);
}

.dex-action-play-button {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border: 1px solid #fbbf24;
  border-radius: 11px;
  color: #172554;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  box-shadow: 0 8px 22px rgba(7, 24, 78, 0.22);
  font-size: 13px;
  font-weight: 900;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.dex-action-play-button:hover,
.dex-action-play-button:focus-visible {
  outline: none;
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(7, 24, 78, 0.28);
}

.dex-action-play-button.is-playing {
  color: #ffffff;
  border-color: #93c5fd;
  background: linear-gradient(145deg, #3b82f6, #1e40af);
}

.dex-action-play-icon {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}

.dex-action-play-button.is-playing .dex-action-play-icon {
  width: 10px;
  height: 10px;
  border: 0;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65% 100%);
}

.dex-action-workspace {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 24px;
  background:
    linear-gradient(rgba(37, 99, 235, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.04) 1px, transparent 1px),
    linear-gradient(145deg, #ffffff 0%, #f4f8ff 62%, #ffffff 100%);
  background-size: 40px 40px, 40px 40px, auto;
  box-shadow: 0 30px 75px rgba(7, 24, 78, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dex-action-workspace::after {
  content: "";
  position: absolute;
  top: -160px;
  right: -130px;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
}

.dex-action-workspace-topline {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 28px;
  border-bottom: 1px solid rgba(37, 99, 235, 0.12);
  background: rgba(255, 255, 255, 0.72);
}

.dex-action-workspace-state {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #1e3a8a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.dex-action-console-title {
  position: relative;
  display: grid;
  gap: 2px;
  padding-left: 22px;
}

.dex-action-console-title::before {
  content: "";
  position: absolute;
  top: 29px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 7px rgba(37, 99, 235, 0.1);
}

.dex-action-console-title small {
  color: #64748b;
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1.15;
  text-transform: uppercase;
}

.dex-action-console-title strong {
  color: #1e3a8a;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.dex-action-console-title .dex-action-workspace-state {
  gap: 0;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.dex-action-console-title .dex-action-workspace-state::before {
  display: none;
}

.dex-action-workspace.state-assisted .dex-action-console-title::before {
  background: #2563eb;
  box-shadow: 0 0 0 7px rgba(37, 99, 235, 0.12);
}

.dex-action-workspace.state-assisted .dex-action-console-title strong {
  color: #1e40af;
}

.dex-action-workspace.state-agentic .dex-action-console-title::before {
  background: #22c55e;
  box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.13);
}

.dex-action-workspace.state-agentic .dex-action-console-title strong {
  color: #1d4ed8;
}

.dex-action-workspace-state::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.1);
}

.state-assisted .dex-action-workspace-state::before {
  background: #f59e0b;
  box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.16);
}

.state-agentic .dex-action-workspace-state::before {
  background: #22c55e;
  box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.13);
}

.dex-action-workspace-total {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.dex-action-workspace-total:empty {
  display: none;
}

.dex-action-svg-scroll {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: rgba(37, 99, 235, 0.45) rgba(37, 99, 235, 0.08);
  scrollbar-width: thin;
}

.dex-action-svg-scroll:focus-visible {
  outline: 3px solid rgba(251, 191, 36, 0.8);
  outline-offset: -3px;
}

.dex-action-workspace-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 410px;
  font-family: "Inter Tight", sans-serif;
}

.dex-action-floor {
  fill: rgba(239, 246, 255, 0.62);
}

.dex-action-era-fill {
  pointer-events: none;
}

.dex-action-era-fill-assisted {
  fill: url("#dex-action-assisted-field-gradient");
  opacity: 0.94;
}

.dex-action-era-fill-agentic {
  fill: url("#dex-action-agentic-field-gradient");
  opacity: 1;
}

.dex-action-arc,
.dex-action-base,
.dex-action-floor-grid path,
.dex-action-route {
  fill: none;
  stroke-linecap: round;
}

.dex-action-arc {
  stroke: rgba(37, 99, 235, 0.44);
  stroke-width: 4;
}

.dex-action-clock-ticks {
  display: none;
}

.dex-action-base {
  stroke: #1e40af;
  stroke-width: 2;
}

.dex-action-floor-grid path {
  stroke: rgba(37, 99, 235, 0.12);
  stroke-width: 1;
  stroke-dasharray: 4 8;
}

.dex-action-route {
  stroke: rgba(37, 99, 235, 0.45);
  stroke-width: 2;
  stroke-dasharray: 8 8;
  transition: stroke 220ms ease, stroke-width 220ms ease, stroke-dasharray 220ms ease;
}

.state-assisted .dex-action-route {
  stroke: rgba(217, 119, 6, 0.68);
  stroke-dasharray: 15 5;
}

.state-agentic .dex-action-route {
  stroke: url("#dex-action-arc-gradient");
  stroke-width: 5;
  stroke-dasharray: none;
}

.dex-action-zone {
  fill: rgba(255, 255, 255, 0.96);
  stroke: rgba(37, 99, 235, 0.34);
  stroke-width: 1.5;
  filter: drop-shadow(0 12px 16px rgba(30, 64, 175, 0.1));
  transition: fill 250ms ease, stroke 250ms ease, stroke-width 250ms ease;
}

.state-assisted .dex-action-zone {
  fill: #fffaf0;
  stroke: rgba(245, 158, 11, 0.68);
  stroke-width: 2;
}

.state-agentic .dex-action-zone {
  fill: #eef5ff;
  stroke: #2563eb;
  stroke-width: 2.5;
}

.dex-action-zone-label,
.dex-action-zone-count {
  text-anchor: middle;
}

.dex-action-zone-label {
  fill: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

.dex-action-zone-count {
  fill: #475569;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.dex-action-worker-head {
  fill: #bfdbfe;
  stroke: #1e40af;
  stroke-width: 1;
}

.dex-action-worker-desk {
  fill: #eff6ff;
  stroke: #3b82f6;
  stroke-width: 1;
}

.state-assisted .dex-action-worker-head {
  fill: #fde68a;
  stroke: #b45309;
}

.state-assisted .dex-action-worker-desk {
  fill: #fffbeb;
  stroke: #d97706;
}

.dex-action-tool-core {
  fill: #ffffff;
  stroke: #d97706;
  stroke-width: 2;
  filter: drop-shadow(0 6px 10px rgba(217, 119, 6, 0.24));
}

.dex-action-tool-mark {
  fill: none;
  stroke: #d97706;
  stroke-width: 2;
  stroke-linecap: round;
}

.dex-action-agent-orbit {
  fill: none;
  stroke: #f59e0b;
  stroke-width: 2;
  stroke-dasharray: 4 5;
  transform-box: fill-box;
  transform-origin: center;
  animation: dex-action-orbit 7s linear infinite;
}

.dex-action-agent-core {
  fill: #1e40af;
  stroke: #60a5fa;
  stroke-width: 2;
  filter: drop-shadow(0 0 12px rgba(37, 99, 235, 0.5));
}

.dex-action-agent-mark {
  fill: none;
  stroke: #fbbf24;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-action-zone-group {
  animation: dex-action-zone-in 440ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dex-action-zone-group:nth-child(2) {
  animation-delay: 45ms;
}

.dex-action-zone-group:nth-child(3) {
  animation-delay: 90ms;
}

.dex-action-zone-group:nth-child(4) {
  animation-delay: 135ms;
}

.dex-action-zone-group:nth-child(5) {
  animation-delay: 180ms;
}

.dex-action-sweep-progress {
  fill: none;
  stroke: url("#dex-action-arc-gradient");
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: url("#dex-action-glow");
}

.dex-action-sweep-beam {
  fill: url("#dex-action-beam-gradient");
}

.dex-action-sweep-line {
  fill: none;
  stroke: #fbbf24;
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.7));
}

.dex-action-sweep-tip-glow {
  fill: rgba(251, 191, 36, 0.22);
  transform-box: fill-box;
  transform-origin: center;
  animation: dex-action-tip-pulse 1.2s ease-in-out infinite;
}

.dex-action-sweep-tip {
  fill: #fbbf24;
  stroke: #ffffff;
  stroke-width: 4;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.9));
}

.dex-action-workspace.is-resetting .dex-action-sweep-hand {
  opacity: 0;
}

.dex-action-hub-ring {
  fill: #ffffff;
  stroke: #60a5fa;
  stroke-width: 7;
  filter: drop-shadow(0 8px 12px rgba(30, 64, 175, 0.22));
}

.dex-action-hub {
  fill: #1e40af;
}

.dex-action-hub-mark {
  fill: none;
  stroke: #fbbf24;
  stroke-width: 2;
  stroke-linecap: round;
}

.dex-action-outcome {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 86px;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin: 0 18px 18px;
  padding: 15px 20px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 28px rgba(30, 64, 175, 0.1);
}

.dex-action-outcome-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 7px rgba(37, 99, 235, 0.1);
}

.state-assisted .dex-action-outcome-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 7px rgba(245, 158, 11, 0.12);
}

.state-agentic .dex-action-outcome-dot {
  background: #22c55e;
  box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.12);
}

.dex-action-outcome strong {
  display: block;
  margin-bottom: 4px;
  color: #0f172a;
  font-size: 17px;
  font-weight: 900;
}

.dex-action-outcome p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

.dex-action-outcome small {
  padding: 6px 9px;
  border: 1px solid rgba(37, 99, 235, 0.24);
  border-radius: 8px;
  color: #1e40af;
  background: #eff6ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.state-assisted .dex-action-outcome small {
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.3);
  background: #fffbeb;
}

.state-agentic .dex-action-outcome small {
  color: #166534;
  border-color: rgba(34, 197, 94, 0.28);
  background: #f0fdf4;
}

.dex-action-stage-inspector {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.dex-action-stage-inspector button {
  min-height: 46px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(7, 24, 78, 0.22);
  font-size: 12px;
  font-weight: 800;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.dex-action-stage-inspector button:hover,
.dex-action-stage-inspector button:focus-visible {
  color: #ffffff;
  border-color: rgba(251, 191, 36, 0.65);
  outline: none;
}

.dex-action-stage-inspector button[aria-pressed="true"] {
  color: #172554;
  border-color: #fbbf24;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  box-shadow: 0 10px 22px rgba(7, 24, 78, 0.18);
}

.dex-action-role-detail {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 8px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(7, 24, 78, 0.22);
}

.dex-action-role-detail strong {
  display: block;
  margin-bottom: 3px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
}

.dex-action-role-detail small {
  color: #bfdbfe;
  font-size: 11px;
  font-weight: 700;
}

.dex-action-role-detail p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
  text-align: right;
}

.dex-scroll-reveal .dex-action-toolbar,
.dex-scroll-reveal .dex-action-workspace,
.dex-scroll-reveal .dex-action-stage-inspector,
.dex-scroll-reveal .dex-action-role-detail {
  opacity: 0;
  transform: translateY(28px) scale(0.99);
  transition: opacity 560ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-scroll-reveal.is-in-view .dex-action-toolbar,
.dex-scroll-reveal.is-in-view .dex-action-workspace,
.dex-scroll-reveal.is-in-view .dex-action-stage-inspector,
.dex-scroll-reveal.is-in-view .dex-action-role-detail {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.dex-scroll-reveal.is-in-view .dex-action-toolbar {
  transition-delay: 90ms;
}

.dex-scroll-reveal.is-in-view .dex-action-workspace {
  transition-delay: 170ms;
}

.dex-scroll-reveal.is-in-view .dex-action-stage-inspector {
  transition-delay: 250ms;
}

.dex-scroll-reveal.is-in-view .dex-action-role-detail {
  transition-delay: 300ms;
}

@keyframes dex-action-zone-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dex-action-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dex-action-tip-pulse {

  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.8);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.18);
  }
}

@media screen and (max-width: 991px) {
  .dex-action-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .dex-action-play-button {
    width: 100%;
  }

  .dex-action-state-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dex-action-state-button {
    justify-content: center;
    padding: 0 10px;
  }

  .dex-action-workspace-svg {
    min-width: 900px;
  }
}

@media screen and (max-width: 767px) {
  .rt-ai-agents-v1 .dex-action-section .dex-engine-heading h2 {
    font-size: clamp(36px, 10.5vw, 44px);
  }

  .dex-action-toolbar {
    padding: 8px;
    border-radius: 14px;
  }

  .dex-action-state-group {
    grid-template-columns: 1fr;
  }

  .dex-action-state-button {
    min-height: 42px;
    justify-content: flex-start;
  }

  .dex-action-workspace {
    border-radius: 18px;
  }

  .dex-action-workspace-topline {
    min-height: 74px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 12px 16px;
  }

  .dex-action-workspace-total {
    padding-left: 18px;
    font-size: 11px;
    text-align: left;
  }

  .dex-action-workspace-svg {
    min-width: 780px;
    min-height: 0;
  }

  .dex-action-outcome {
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 13px;
    margin: 0 10px 10px;
    padding: 14px;
  }

  .dex-action-outcome small {
    grid-column: 2;
    justify-self: start;
  }

  .dex-action-stage-inspector {
    gap: 5px;
  }

  .dex-action-stage-inspector button {
    min-width: 0;
    min-height: 42px;
    padding: 6px 2px;
    font-size: 10px;
  }

  .dex-action-role-detail {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .dex-action-role-detail p {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {

  .dex-action-agent-orbit,
  .dex-action-sweep-tip-glow,
  .dex-action-zone-group {
    animation: none !important;
  }

  .dex-action-state-button,
  .dex-action-play-button,
  .dex-action-stage-inspector button,
  .dex-scroll-reveal .dex-action-toolbar,
  .dex-scroll-reveal .dex-action-workspace,
  .dex-scroll-reveal .dex-action-stage-inspector,
  .dex-scroll-reveal .dex-action-role-detail {
    transition: none !important;
  }
}

/* Agents in Action refinement: open clusters instead of boxed work areas. */
.dex-action-stage-shadow {
  fill: rgba(30, 64, 175, 0.13);
  filter: blur(5px);
}

.dex-action-stage-platform {
  fill: rgba(219, 234, 254, 0.88);
  stroke: rgba(37, 99, 235, 0.32);
  stroke-width: 1.5;
}

.dex-action-zone-assisted .dex-action-stage-shadow {
  fill: rgba(217, 119, 6, 0.16);
}

.dex-action-zone-assisted .dex-action-stage-platform {
  fill: rgba(254, 243, 199, 0.92);
  stroke: rgba(217, 119, 6, 0.45);
}

.dex-action-zone-agentic .dex-action-stage-shadow {
  fill: rgba(37, 99, 235, 0.24);
}

.dex-action-zone-agentic .dex-action-stage-platform {
  fill: rgba(191, 219, 254, 0.94);
  stroke: #2563eb;
  stroke-width: 2;
}

.dex-action-zone-label,
.dex-action-zone-count {
  paint-order: stroke fill;
  stroke: rgba(255, 255, 255, 0.94);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.dex-action-zone-count {
  stroke-width: 4px;
}

.dex-action-person {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: dex-action-person-arrive 520ms cubic-bezier(0.22, 1, 0.36, 1) var(--dex-person-delay) both;
}

.dex-action-person-head,
.dex-action-person-body {
  stroke-width: 1.2;
}

.dex-action-person-head {
  fill: #dbeafe;
  stroke: #1d4ed8;
}

.dex-action-person-body {
  fill: #93c5fd;
  stroke: #1d4ed8;
}

.dex-action-person-limbs {
  fill: none;
  stroke: #1e3a8a;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.dex-action-person-tone-2 .dex-action-person-head {
  fill: #fef3c7;
  stroke: #b45309;
}

.dex-action-person-tone-2 .dex-action-person-body {
  fill: #fcd34d;
  stroke: #b45309;
}

.dex-action-person-tone-3 .dex-action-person-head {
  fill: #e0e7ff;
  stroke: #4338ca;
}

.dex-action-person-tone-3 .dex-action-person-body {
  fill: #a5b4fc;
  stroke: #4338ca;
}

.dex-action-person-tone-4 .dex-action-person-head {
  fill: #dcfce7;
  stroke: #15803d;
}

.dex-action-person-tone-4 .dex-action-person-body {
  fill: #86efac;
  stroke: #15803d;
}

.dex-action-person-tone-5 .dex-action-person-head {
  fill: #ffe4e6;
  stroke: #be123c;
}

.dex-action-person-tone-5 .dex-action-person-body {
  fill: #fda4af;
  stroke: #be123c;
}

.dex-action-person.is-assisted {
  animation:
    dex-action-person-arrive 520ms cubic-bezier(0.22, 1, 0.36, 1) var(--dex-person-delay) both,
    dex-action-assisted-float 3.2s ease-in-out calc(600ms + var(--dex-person-delay)) infinite;
}

.dex-action-person.is-assisted .dex-action-person-head {
  fill: #fef3c7;
  stroke: #b45309;
}

.dex-action-person.is-assisted .dex-action-person-body {
  fill: #fcd34d;
  stroke: #b45309;
}

.dex-action-person.is-assisted .dex-action-person-limbs {
  stroke: #92400e;
}

.dex-action-tool {
  transform-box: fill-box;
  transform-origin: center;
  animation: dex-action-tool-pop 580ms cubic-bezier(0.22, 1, 0.36, 1) 160ms both;
}

.dex-action-tool-core {
  animation: dex-action-tool-glow 2.8s ease-in-out 800ms infinite;
}

.dex-action-agent {
  transform-box: fill-box;
  transform-origin: center;
  animation:
    dex-action-agent-arrive 650ms cubic-bezier(0.16, 1, 0.3, 1) both,
    dex-action-agent-float 3.6s ease-in-out 700ms infinite;
}

.dex-action-sweep-beam {
  opacity: 0.92;
}

.dex-action-sweep-line {
  stroke-width: 2.5;
}

.dex-action-sweep-trail circle {
  fill: #fbbf24;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.85));
}

.dex-action-sweep-trail circle:nth-child(2) {
  fill: #fde68a;
}

.dex-action-sweep-trail circle:nth-child(3) {
  fill: #93c5fd;
}

.dex-action-sweep-trail circle:nth-child(4) {
  fill: #60a5fa;
}

.dex-action-workspace.is-sweeping .dex-action-floor {
  animation: dex-action-floor-breathe 3s ease-in-out both;
}

@keyframes dex-action-person-arrive {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.72);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dex-action-assisted-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes dex-action-tool-pop {
  from {
    opacity: 0;
    transform: scale(0.45) rotate(-12deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes dex-action-tool-glow {

  0%,
  100% {
    filter: drop-shadow(0 5px 8px rgba(217, 119, 6, 0.2));
  }

  50% {
    filter: drop-shadow(0 8px 16px rgba(217, 119, 6, 0.48));
  }
}

@keyframes dex-action-agent-arrive {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.48);
  }

  70% {
    opacity: 1;
    transform: translateY(-3px) scale(1.08);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dex-action-agent-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes dex-action-floor-breathe {

  0%,
  100% {
    fill: rgba(239, 246, 255, 0.62);
  }

  50% {
    fill: rgba(219, 234, 254, 0.72);
  }
}

@media (prefers-reduced-motion: reduce) {

  .dex-action-person,
  .dex-action-person.is-assisted,
  .dex-action-tool,
  .dex-action-tool-core,
  .dex-action-agent,
  .dex-action-workspace.is-sweeping .dex-action-floor {
    animation: none !important;
  }
}

/* Agents in Action: professional people and inline role labels. */
.dex-action-person-shadow {
  fill: rgba(15, 23, 42, 0.14);
  filter: blur(1px);
}

.dex-action-person-head {
  fill: #e9b995;
  stroke: #8a4f32;
  stroke-width: 1;
}

.dex-action-person-hair {
  fill: #26344d;
}

.dex-action-person-neck {
  fill: #e9b995;
}

.dex-action-person-jacket {
  fill: #1e3a8a;
  stroke: #172554;
  stroke-width: 1.15;
  stroke-linejoin: round;
}

.dex-action-person-shirt {
  fill: #ffffff;
  stroke: rgba(30, 58, 138, 0.45);
  stroke-width: 0.65;
}

.dex-action-person-limbs {
  fill: none;
  stroke: #172554;
  stroke-width: 2.15;
  stroke-linecap: round;
}

.dex-action-person-tone-2 .dex-action-person-jacket,
.dex-action-person-tone-3 .dex-action-person-jacket,
.dex-action-person-tone-4 .dex-action-person-jacket,
.dex-action-person-tone-5 .dex-action-person-jacket {
  fill: #1e3a8a;
  stroke: #172554;
}

.dex-action-person-tone-2 .dex-action-person-hair {
  fill: #4b2e24;
}

.dex-action-person-tone-3 .dex-action-person-hair {
  fill: #171717;
}

.dex-action-person-tone-4 .dex-action-person-hair {
  fill: #6b4423;
}

.dex-action-person-tone-5 .dex-action-person-hair {
  fill: #374151;
}

.dex-action-person.is-assisted .dex-action-person-head {
  fill: #e9b995;
  stroke: #8a4f32;
}

.dex-action-person.is-assisted .dex-action-person-jacket {
  fill: #1e3a8a;
  stroke: #172554;
}

.dex-action-person.is-assisted .dex-action-person-limbs {
  stroke: #172554;
}

.dex-action-stage-name rect {
  fill: rgba(255, 255, 255, 0.94);
  stroke: rgba(37, 99, 235, 0.25);
  stroke-width: 1;
  filter: drop-shadow(0 3px 7px rgba(30, 64, 175, 0.12));
}

.dex-action-stage-name text {
  fill: #172554;
  stroke: none;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-anchor: middle;
}

.dex-action-zone-assisted .dex-action-stage-name rect {
  fill: rgba(255, 251, 235, 0.96);
  stroke: rgba(217, 119, 6, 0.34);
}

.dex-action-zone-agentic .dex-action-stage-name rect {
  fill: rgba(239, 246, 255, 0.97);
  stroke: rgba(37, 99, 235, 0.4);
}

.dex-action-role-tag rect {
  fill: rgba(255, 255, 255, 0.96);
  stroke: rgba(37, 99, 235, 0.36);
  stroke-width: 1;
  filter: drop-shadow(0 3px 5px rgba(30, 64, 175, 0.1));
}

.dex-action-role-tag text {
  fill: #1e3a8a;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-anchor: middle;
}

.dex-action-zone-assisted .dex-action-role-tag rect {
  fill: rgba(255, 251, 235, 0.98);
  stroke: rgba(217, 119, 6, 0.46);
}

.dex-action-zone-assisted .dex-action-role-tag text {
  fill: #92400e;
}

.dex-action-zone-agentic .dex-action-role-tag rect {
  fill: #1e40af;
  stroke: #fbbf24;
}

.dex-action-zone-agentic .dex-action-role-tag text {
  fill: #ffffff;
}

.dex-action-role-tags {
  animation: dex-action-role-tags-in 480ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}

@keyframes dex-action-role-tags-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dex-action-role-tags {
    animation: none !important;
  }
}

/* Agents in Action: past-to-future clock and working team tables. */
.dex-action-clock-ticks {
  fill: none;
  stroke: rgba(30, 64, 175, 0.46);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 0.7 7.63;
}

.dex-action-time-labels rect {
  fill: rgba(255, 255, 255, 0.96);
  stroke: rgba(37, 99, 235, 0.28);
  stroke-width: 1;
  filter: drop-shadow(0 3px 7px rgba(30, 64, 175, 0.12));
}

.dex-action-time-labels text {
  fill: #1e3a8a;
  stroke: none;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-anchor: middle;
}

.dex-action-team-workspace {
  opacity: 0.95;
  animation: dex-action-workspace-settle 520ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
}

.dex-action-team-desk {
  fill: rgba(255, 255, 255, 0.96);
  stroke: rgba(30, 64, 175, 0.48);
  stroke-width: 1.4;
  filter: drop-shadow(0 5px 7px rgba(30, 64, 175, 0.12));
}

.dex-action-team-desk-legs {
  fill: none;
  stroke: rgba(30, 58, 138, 0.6);
  stroke-width: 2;
  stroke-linecap: round;
}

.dex-action-team-screens rect {
  fill: #dbeafe;
  stroke: #1e3a8a;
  stroke-width: 1;
}

.dex-action-team-screens path {
  fill: none;
  stroke: #1e3a8a;
  stroke-width: 1;
  stroke-linecap: round;
}

.dex-action-zone-assisted .dex-action-team-desk {
  fill: rgba(255, 251, 235, 0.98);
  stroke: rgba(217, 119, 6, 0.5);
}

.dex-action-zone-assisted .dex-action-team-desk-legs {
  stroke: rgba(146, 64, 14, 0.56);
}

.dex-action-workspace.is-sweeping .dex-action-clock-ticks {
  animation: dex-action-clock-pulse 5.6s ease-in-out both;
}

@keyframes dex-action-workspace-settle {
  from {
    opacity: 0;
    transform: translateY(7px) scale(0.94);
  }

  to {
    opacity: 0.95;
    transform: translateY(0) scale(1);
  }
}

@keyframes dex-action-clock-pulse {

  0%,
  100% {
    stroke: rgba(30, 64, 175, 0.46);
  }

  50% {
    stroke: rgba(245, 158, 11, 0.82);
  }
}

@media (prefers-reduced-motion: reduce) {

  .dex-action-team-workspace,
  .dex-action-workspace.is-sweeping .dex-action-clock-ticks {
    animation: none !important;
  }
}

/* Agents in Action: interactive, state-specific activity. */
.dex-action-time-label {
  cursor: pointer;
  outline: none;
}

.dex-action-interaction-hint {
  flex: 1 1 auto;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-align: center;
}

.dex-action-time-label rect {
  transition: fill 180ms ease, stroke 180ms ease, stroke-width 180ms ease, filter 180ms ease;
}

.dex-action-time-label:hover rect,
.dex-action-time-label:focus-visible rect {
  fill: #ffffff;
  stroke: #f59e0b;
  stroke-width: 1.8;
  filter: drop-shadow(0 5px 10px rgba(245, 158, 11, 0.24));
}

.dex-action-time-label.is-active rect {
  fill: #1e3a8a;
  stroke: #fbbf24;
  stroke-width: 1.6;
}

.dex-action-time-label.is-active text {
  fill: #ffffff;
}

.dex-action-zone-group {
  cursor: pointer;
  outline: none;
  transition: opacity 180ms ease, filter 220ms ease;
}

.dex-action-zone-group:hover,
.dex-action-zone-group:focus-visible,
.dex-action-zone-group.is-active {
  filter: drop-shadow(0 9px 12px rgba(30, 64, 175, 0.18));
}

.dex-action-zone-group.is-active .dex-action-stage-platform {
  stroke: #f59e0b;
  stroke-width: 2.2;
}

.dex-action-zone-group.is-active .dex-action-stage-shadow {
  fill: rgba(245, 158, 11, 0.24);
}

.dex-action-zone-group.is-active .dex-action-stage-name rect {
  stroke: #f59e0b;
  stroke-width: 1.7;
  filter: drop-shadow(0 5px 9px rgba(245, 158, 11, 0.22));
}

.dex-action-zone-group.is-active .dex-action-role-tag rect {
  stroke: rgba(245, 158, 11, 0.78);
}

.dex-action-flow-packets {
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.state-traditional .dex-action-flow-traditional,
.state-assisted .dex-action-flow-assisted,
.state-agentic .dex-action-flow-agentic {
  opacity: 1;
}

.dex-action-handoff {
  filter: drop-shadow(0 3px 5px rgba(30, 58, 138, 0.28));
}

.dex-action-handoff-mail rect,
.dex-action-handoff-document rect {
  fill: #ffffff;
  stroke: #1e3a8a;
  stroke-width: 1.3;
}

.dex-action-handoff-mail path,
.dex-action-handoff-document path,
.dex-action-handoff-data path {
  fill: none;
  stroke: #1e3a8a;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dex-action-handoff-document rect {
  fill: #eff6ff;
}

.dex-action-handoff-data circle {
  fill: #dbeafe;
  stroke: #1e3a8a;
  stroke-width: 1.2;
}

.state-assisted.is-sweeping .dex-action-flow-traditional {
  opacity: 0.82;
}

.dex-action-flow-assisted circle {
  fill: #f59e0b;
  stroke: #ffffff;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 7px rgba(245, 158, 11, 0.72));
}

.dex-action-flow-agentic circle {
  fill: #fbbf24;
  stroke: #1e3a8a;
  stroke-width: 1.4;
  filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.75));
}

.state-traditional .dex-action-team-screens rect {
  animation: dex-action-screen-live 2.2s ease-in-out infinite;
}

.state-traditional .dex-action-person-jacket {
  animation: dex-action-work-cycle 2.8s ease-in-out infinite;
}

.state-agentic .dex-action-zone-group.is-active .dex-action-agent-orbit {
  stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.62));
}

@keyframes dex-action-screen-live {

  0%,
  100% {
    fill: #dbeafe;
  }

  50% {
    fill: #fef3c7;
  }
}

@keyframes dex-action-work-cycle {

  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dex-action-flow-packets {
    display: none !important;
  }

  .state-traditional .dex-action-team-screens rect,
  .state-traditional .dex-action-person-jacket {
    animation: none !important;
  }
}

@media (max-width: 991px) {
  .dex-action-interaction-hint {
    display: none;
  }
}

/* Agents in Action: clearer time scale, copilot hubs, and agent inputs. */
.dex-action-workspace-svg {
  min-height: 470px;
}

.dex-action-time-label rect {
  stroke-width: 1.4;
  filter: drop-shadow(0 7px 12px rgba(30, 64, 175, 0.14));
}

.dex-action-time-labels .dex-action-time-title {
  fill: #172554;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.dex-action-time-labels .dex-action-time-subtitle {
  fill: #64748b;
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: 0.09em;
}

.dex-action-time-label.is-active .dex-action-time-title,
.dex-action-time-label.is-active .dex-action-time-subtitle {
  fill: #ffffff;
}

.dex-action-sweep-beam {
  fill: transparent;
  opacity: 0;
}

.dex-action-sweep-line {
  stroke-width: 1.6;
  opacity: 0.76;
}

.dex-action-sweep-tip-glow {
  opacity: 0.28;
}

.dex-action-sweep-trail {
  opacity: 0.65;
}

.dex-action-hub-pin {
  fill: #fbbf24;
  stroke: #ffffff;
  stroke-width: 0.8;
}

.dex-action-tool-orbit {
  fill: rgba(255, 251, 235, 0.42);
  stroke: rgba(245, 158, 11, 0.66);
  stroke-width: 1.4;
  stroke-dasharray: 3 5;
  transform-box: fill-box;
  transform-origin: center;
  animation: dex-action-ai-orbit 8s linear infinite;
}

.dex-action-tool-shell {
  fill: #ffffff;
  stroke: #d97706;
  stroke-width: 1.7;
  filter: drop-shadow(0 7px 12px rgba(217, 119, 6, 0.24));
}

.dex-action-tool-core {
  fill: #1e3a8a;
  stroke: #fbbf24;
  stroke-width: 1.5;
}

.dex-action-tool-links path {
  fill: none;
  stroke: #d97706;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.dex-action-tool-links circle {
  fill: #fbbf24;
  stroke: #ffffff;
  stroke-width: 1;
  animation: dex-action-ai-node 1.8s ease-in-out infinite alternate;
}

.dex-action-tool-ai,
.dex-action-tool-caption {
  stroke: none;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  text-anchor: middle;
}

.dex-action-tool-ai {
  fill: #ffffff;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.02em;
}

.dex-action-tool-caption {
  fill: #92400e;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.dex-action-agent-shell {
  fill: #eff6ff;
  stroke: #2563eb;
  stroke-width: 1.8;
  filter: drop-shadow(0 8px 13px rgba(30, 64, 175, 0.24));
}

.dex-action-agent-core {
  fill: #1e3a8a;
  stroke: #fbbf24;
  stroke-width: 1.5;
}

.dex-action-agent-network path {
  fill: none;
  stroke: #bfdbfe;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.dex-action-agent-network circle {
  fill: #fbbf24;
  stroke: #ffffff;
  stroke-width: 0.8;
}

.dex-action-agent-logo {
  pointer-events: none;
  filter: drop-shadow(0 4px 7px rgba(30, 64, 175, 0.32));
}

.state-agentic .dex-action-zone-group.is-active .dex-action-agent-shell {
  stroke: #f59e0b;
  stroke-width: 2.4;
}

@keyframes dex-action-ai-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dex-action-ai-node {
  from {
    opacity: 0.55;
    transform: scale(0.82);
    transform-origin: center;
  }

  to {
    opacity: 1;
    transform: scale(1.18);
    transform-origin: center;
  }
}

@media (prefers-reduced-motion: reduce) {

  .dex-action-tool-orbit,
  .dex-action-tool-links circle {
    animation: none !important;
  }
}

@media screen and (max-width: 767px) {
  .dex-action-workspace-svg {
    min-height: 0;
  }
}

/* Agents in Action: the clock hand changes one stage at a time. */
.dex-action-sweep-hand {
  transition: opacity 160ms ease;
}

/* High-contrast AI-assisted content over the DeX-blue swept field. */
.dex-action-zone-assisted .dex-action-person.is-assisted .dex-action-person-jacket {
  fill: #ffffff;
  stroke: #172554;
  stroke-width: 1.35;
}

.dex-action-zone-assisted .dex-action-person.is-assisted .dex-action-person-shirt {
  fill: #fbbf24;
  stroke: #92400e;
}

.dex-action-zone-assisted .dex-action-person.is-assisted .dex-action-person-limbs {
  stroke: #ffffff;
  stroke-width: 2.35;
}

.dex-action-zone-assisted .dex-action-person-shadow {
  fill: rgba(7, 24, 78, 0.34);
}

.dex-action-zone-assisted .dex-action-stage-name rect,
.dex-action-zone-assisted .dex-action-role-tag rect,
.dex-action-zone-assisted .dex-action-team-desk {
  fill: #ffffff;
  stroke: #fbbf24;
  stroke-width: 1.35px;
  filter: drop-shadow(0 3px 6px rgba(7, 24, 78, 0.3));
}

.dex-action-zone-assisted .dex-action-stage-name text,
.dex-action-zone-assisted .dex-action-role-tag text {
  fill: #102a63;
  stroke: none;
  font-weight: 900;
}

.dex-action-zone-assisted .dex-action-stage-name text {
  font-size: 13.5px;
}

.dex-action-zone-assisted .dex-action-role-tag text {
  font-size: 9.5px;
}

.dex-action-zone-assisted .dex-action-zone-count {
  fill: #102a63;
  stroke: none;
  font-size: 10.5px;
}

.dex-action-count-badge rect {
  fill: rgba(255, 255, 255, 0.96);
  stroke: rgba(37, 99, 235, 0.42);
  stroke-width: 1.1px;
  filter: drop-shadow(0 3px 5px rgba(7, 24, 78, 0.2));
}

.dex-action-zone-assisted .dex-action-count-badge rect {
  fill: #ffffff;
  stroke: #fbbf24;
  stroke-width: 1.35px;
}

.dex-action-zone-agentic .dex-action-count-badge rect {
  fill: #ffffff;
  stroke: #60a5fa;
}

.dex-action-zone-assisted .dex-action-tool-caption {
  fill: #ffffff;
  stroke: #102a63;
  stroke-width: 2.4px;
  paint-order: stroke fill;
  font-size: 8px;
  letter-spacing: 0.1em;
}

.dex-action-zone-assisted .dex-action-tool-ai {
  fill: #ffffff;
  stroke: #102a63;
  stroke-width: 1.2px;
  paint-order: stroke fill;
}

/* Desktop scroll story: the workspace stays visible while scrolling scrubs time. */
@media screen and (min-width: 1051px) and (prefers-reduced-motion: no-preference) {
  html.dex-home-page:has(.dex-action-scroll-story) {
    overflow-x: clip !important;
    overflow-y: auto !important;
  }

  html.dex-home-page:has(.dex-action-scroll-story) body {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  .rt-ai-agents-v1.dex-action-scroll-story {
    height: 320vh !important;
    min-height: 2200px;
    overflow: visible !important;
  }

  .rt-ai-agents-v1.dex-action-scroll-story .dex-action-section {
    min-height: 100%;
  }

  .rt-ai-agents-v1.dex-action-scroll-story .rt-container {
    width: calc(100% - clamp(32px, 4vw, 72px));
    max-width: 1600px;
  }

  .rt-ai-agents-v1.dex-action-scroll-story .dex-action-workspace {
    position: sticky;
    top: 112px;
  }

  .rt-ai-agents-v1.dex-action-scroll-story .dex-action-workspace-svg {
    height: clamp(380px, calc(100vh - 300px), 570px);
    min-height: 0;
  }
}

/* Agents in Action: align the console surface with the site's DeX workspaces. */
.dex-action-workspace {
  border-color: rgba(191, 219, 254, 0.78);
  border-radius: 28px;
  box-shadow:
    0 26px 64px rgba(7, 24, 78, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.dex-action-workspace-topline {
  border-bottom-color: rgba(96, 165, 250, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.94));
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.75);
}

.dex-action-svg-scroll {
  width: auto;
  margin: 0 12px;
  border: 1px solid rgba(147, 197, 253, 0.3);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: rgba(248, 251, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -18px 36px rgba(219, 234, 254, 0.16);
}

.dex-action-svg-scroll:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.88);
  outline-offset: -2px;
  box-shadow:
    inset 0 0 0 3px rgba(219, 234, 254, 0.7),
    inset 0 -18px 36px rgba(219, 234, 254, 0.16);
}

.dex-action-outcome {
  margin: 0 12px 12px;
  border-color: rgba(147, 197, 253, 0.34);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.94), rgba(255, 255, 255, 0.98) 66%);
  box-shadow:
    0 8px 22px rgba(30, 64, 175, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.dex-action-outcome small {
  border-radius: 999px;
}

/* Agents in Action: a dedicated readable layout for phone and tablet screens. */
.dex-action-mobile-reader {
  display: none;
}

@media screen and (max-width: 991px) {
  .dex-action-svg-scroll {
    display: none;
  }

  .dex-action-mobile-reader {
    position: relative;
    z-index: 2;
    display: block;
    padding: 16px;
  }

  .dex-action-mobile-era-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
    padding: 5px;
    border: 1px solid rgba(147, 197, 253, 0.38);
    border-radius: 16px;
    background: rgba(239, 246, 255, 0.88);
  }

  .dex-action-mobile-era-tabs button {
    appearance: none;
    display: grid;
    min-width: 0;
    min-height: 56px;
    align-content: center;
    gap: 2px;
    padding: 8px 5px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #475569;
    background: transparent;
    font: inherit;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  }

  .dex-action-mobile-era-tabs button span {
    color: inherit;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .dex-action-mobile-era-tabs button small {
    overflow: hidden;
    font-size: 10px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dex-action-mobile-era-tabs button:hover,
  .dex-action-mobile-era-tabs button:focus-visible {
    color: #1e3a8a;
    border-color: rgba(37, 99, 235, 0.42);
    background: #ffffff;
    outline: none;
  }

  .dex-action-mobile-era-tabs button:focus-visible {
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.42);
  }

  .dex-action-mobile-era-tabs button[aria-pressed="true"] {
    color: #ffffff;
    border-color: #1d4ed8;
    background: linear-gradient(145deg, #3b82f6, #1e40af);
    box-shadow: 0 8px 18px rgba(30, 64, 175, 0.24), inset 0 -3px 0 #fbbf24;
    transform: translateY(-1px);
  }

  .dex-action-mobile-era-tabs button[aria-pressed="true"] small {
    color: rgba(255, 255, 255, 0.82);
  }

  .dex-action-mobile-stage-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .dex-action-mobile-stage:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .dex-action-mobile-stage {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(147, 197, 253, 0.48);
    border-radius: 16px;
    background: linear-gradient(145deg, #ffffff, #f4f8ff);
    box-shadow: 0 9px 22px rgba(30, 64, 175, 0.09);
  }

  .dex-action-mobile-stage::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -42px;
    width: 110px;
    height: 110px;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 50%;
    pointer-events: none;
  }

  .dex-action-mobile-stage-heading {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
  }

  .dex-action-mobile-stage-number {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(145deg, #3b82f6, #1e40af);
    font-size: 11px;
    font-weight: 900;
  }

  .dex-action-mobile-stage-heading small {
    display: block;
    margin-bottom: 2px;
    color: #64748b;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .dex-action-mobile-stage-heading h3 {
    margin: 0;
    color: #102a63;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  .dex-action-mobile-stage-visual {
    display: grid;
    min-width: 58px;
    min-height: 50px;
    place-items: center;
    align-content: center;
    padding: 5px 8px;
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 13px;
    color: #1e3a8a;
    background: #eff6ff;
    line-height: 1;
  }

  .dex-action-mobile-stage-visual strong {
    font-size: 20px;
    font-weight: 950;
  }

  .dex-action-mobile-stage-visual span {
    margin-top: 2px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .dex-action-mobile-stage-visual b {
    margin-top: 3px;
    padding: 3px 5px;
    border-radius: 999px;
    color: #172554;
    background: #fbbf24;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: 0.05em;
  }

  .dex-action-mobile-stage-visual img {
    display: block;
    width: 35px;
    height: 38px;
    object-fit: contain;
  }

  .dex-action-mobile-role-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
  }

  .dex-action-mobile-role-list span {
    padding: 6px 8px;
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 999px;
    color: #334155;
    background: rgba(255, 255, 255, 0.92);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.25;
  }

  .dex-action-mobile-stage-assisted {
    border-color: rgba(251, 191, 36, 0.72);
    background: linear-gradient(145deg, #123fa4, #2563eb);
    box-shadow: 0 11px 24px rgba(30, 64, 175, 0.22);
  }

  .dex-action-mobile-stage-assisted::after {
    border-color: rgba(255, 255, 255, 0.18);
  }

  .dex-action-mobile-stage-assisted .dex-action-mobile-stage-number {
    color: #172554;
    background: #fbbf24;
  }

  .dex-action-mobile-stage-assisted .dex-action-mobile-stage-heading small,
  .dex-action-mobile-stage-assisted .dex-action-mobile-stage-heading h3 {
    color: #ffffff;
  }

  .dex-action-mobile-stage-assisted .dex-action-mobile-stage-visual {
    color: #ffffff;
    border-color: rgba(251, 191, 36, 0.72);
    background: rgba(7, 24, 78, 0.28);
  }

  .dex-action-mobile-stage-assisted .dex-action-mobile-role-list span {
    color: #102a63;
    border-color: #fbbf24;
    background: #ffffff;
  }

  .dex-action-mobile-stage-agentic .dex-action-mobile-stage-visual {
    border-color: rgba(251, 191, 36, 0.72);
    background: #ffffff;
    box-shadow: 0 5px 14px rgba(30, 64, 175, 0.14);
  }
}

@media screen and (max-width: 767px) {
  .dex-action-mobile-reader {
    padding: 12px;
  }

  .dex-action-mobile-stage-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .dex-action-mobile-stage:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .dex-action-mobile-stage {
    padding: 14px;
  }

  .dex-action-mobile-stage-heading {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 9px;
  }

  .dex-action-mobile-stage-number {
    width: 32px;
    height: 32px;
  }

  .dex-action-mobile-stage-heading h3 {
    font-size: 17px;
  }

  .dex-action-mobile-role-list span {
    font-size: 10.5px;
  }

  .dex-action-outcome {
    margin-top: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dex-action-mobile-era-tabs button {
    transition: none !important;
  }
}

/* Agents in Action mobile direction: portrait clock arc, landscape stage rows. */
@media screen and (max-width: 991px) {
  .dex-action-mobile-portrait-story {
    position: relative;
    min-width: 0;
  }

  .dex-action-mobile-arc {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    width: 82px;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .dex-action-mobile-arc-track,
  .dex-action-mobile-arc-progress,
  .dex-action-mobile-arc-connectors path {
    fill: none;
    vector-effect: non-scaling-stroke;
  }

  .dex-action-mobile-arc-track {
    stroke: rgba(96, 165, 250, 0.34);
    stroke-width: 4;
    stroke-linecap: round;
  }

  .dex-action-mobile-arc-progress {
    stroke: #fbbf24;
    stroke-width: 6;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.62));
  }

  .dex-action-mobile-arc-connectors path {
    stroke: rgba(37, 99, 235, 0.34);
    stroke-width: 1.5;
    stroke-dasharray: 3 4;
  }

  .dex-action-mobile-arc-nodes circle {
    fill: #ffffff;
    stroke: #2563eb;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 3px 5px rgba(30, 64, 175, 0.2));
  }

  .dex-action-mobile-arc-tip {
    fill: #fbbf24;
    stroke: #ffffff;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.86));
  }

  .state-assisted .dex-action-mobile-arc-track {
    stroke: rgba(255, 255, 255, 0.34);
  }

  .state-agentic .dex-action-mobile-arc-progress {
    stroke: #2563eb;
    filter: drop-shadow(0 0 7px rgba(37, 99, 235, 0.55));
  }

  .state-agentic .dex-action-mobile-arc-tip {
    fill: #2563eb;
  }

  .dex-action-mobile-stage-list {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-left: 58px;
  }

  .dex-action-mobile-stage,
  .dex-action-mobile-stage:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .dex-action-mobile-stage {
    min-height: 112px;
  }

  .dex-action-mobile-reader.is-mobile-arc-active .dex-action-mobile-stage {
    animation: dex-action-mobile-stage-sweep-in 440ms cubic-bezier(0.22, 1, 0.36, 1) var(--dex-mobile-stage-delay) both;
  }

  .dex-action-mobile-stage::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 50%;
    left: -8px;
    width: 14px;
    height: 2px;
    background: rgba(37, 99, 235, 0.42);
    transform: translateY(-50%);
  }

  .dex-action-mobile-stage-assisted::before {
    background: #fbbf24;
  }

  .dex-action-mobile-stage-agentic::before {
    background: #2563eb;
  }

  @keyframes dex-action-mobile-stage-sweep-in {
    from {
      opacity: 0;
      transform: translateX(-16px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

@media screen and (min-width: 560px) and (max-width: 991px) {
  .dex-action-mobile-stage {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
  }

  .dex-action-mobile-role-list {
    margin-top: 0;
  }
}

@media screen and (max-width: 559px) {
  .dex-action-mobile-arc {
    width: 70px;
  }

  .dex-action-mobile-stage-list {
    gap: 10px;
    padding-left: 48px;
  }

  .dex-action-mobile-stage {
    min-height: 116px;
    padding: 13px 12px;
  }

  .dex-action-mobile-stage-heading {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 7px;
  }

  .dex-action-mobile-stage-number {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 10px;
  }

  .dex-action-mobile-stage-heading h3 {
    font-size: 16px;
  }

  .dex-action-mobile-stage-visual {
    min-width: 50px;
    min-height: 46px;
    padding-inline: 6px;
  }

  .dex-action-mobile-role-list {
    gap: 5px;
    margin-top: 11px;
  }

  .dex-action-mobile-role-list span {
    padding: 5px 7px;
    font-size: 10.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dex-action-mobile-stage {
    animation: none !important;
  }

  .dex-action-mobile-arc-progress,
  .dex-action-mobile-arc-tip {
    filter: none !important;
  }
}

/* Agents in Action mobile final: original workspace components on a 270deg-to-90deg arc. */
@media screen and (max-width: 991px) {
  .dex-action-mobile-svg-scroll {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    height: clamp(460px, 62vh, 570px);
    border: 1px solid rgba(147, 197, 253, 0.34);
    border-radius: 16px;
    background:
      linear-gradient(rgba(37, 99, 235, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(37, 99, 235, 0.035) 1px, transparent 1px),
      rgba(248, 251, 255, 0.78);
    background-size: 32px 32px;
    scrollbar-color: rgba(37, 99, 235, 0.54) rgba(219, 234, 254, 0.54);
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scroll-padding-block: 44%;
    scroll-snap-type: none;
    overscroll-behavior: contain;
  }

  .dex-action-mobile-svg-scroll:focus-visible {
    border-color: #fbbf24;
    outline: 3px solid rgba(251, 191, 36, 0.34);
    outline-offset: 2px;
  }

  .dex-action-mobile-svg-canvas {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    aspect-ratio: 420 / 1600;
  }

  .dex-action-mobile-workspace-svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    font-family: "Inter Tight", Inter, sans-serif;
  }

  .dex-action-mobile-floor {
    fill: rgba(239, 246, 255, 0.66);
    stroke: none;
    transition: fill 220ms ease;
  }

  .state-assisted .dex-action-mobile-floor {
    fill: #1649b8;
  }

  .state-agentic .dex-action-mobile-floor {
    fill: rgba(247, 250, 255, 0.96);
  }

  .dex-action-mobile-workspace-svg .dex-action-mobile-arc-track {
    fill: none;
    stroke: rgba(37, 99, 235, 0.34);
    stroke-width: 5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  .dex-action-mobile-workspace-svg .dex-action-mobile-arc-progress {
    fill: none;
    stroke: #fbbf24;
    stroke-width: 7;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 7px rgba(251, 191, 36, 0.72));
  }

  .state-agentic .dex-action-mobile-workspace-svg .dex-action-mobile-arc-progress {
    stroke: #2563eb;
    filter: drop-shadow(0 0 7px rgba(37, 99, 235, 0.58));
  }

  .dex-action-mobile-workspace-svg .dex-action-mobile-arc-nodes circle {
    fill: #ffffff;
    stroke: #2563eb;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 3px 6px rgba(30, 64, 175, 0.24));
  }

  .dex-action-mobile-workspace-svg .dex-action-mobile-arc-tip {
    fill: #fbbf24;
    stroke: #ffffff;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 9px rgba(251, 191, 36, 0.9));
  }

  .state-agentic .dex-action-mobile-workspace-svg .dex-action-mobile-arc-tip {
    fill: #2563eb;
  }

  .dex-action-mobile-component {
    transform-box: fill-box;
    transform-origin: center;
  }

  .dex-action-mobile-component .dex-action-stage-name text {
    font-size: 15px;
  }

  .dex-action-mobile-component .dex-action-zone-count {
    font-size: 11px;
  }

  .dex-action-mobile-role-tags .dex-action-role-tag text {
    font-size: 11px;
  }

  .dex-action-mobile-role-tags .dex-action-role-tag rect {
    stroke-width: 1.3;
  }

  .dex-action-mobile-component.is-active {
    filter: drop-shadow(0 11px 14px rgba(30, 64, 175, 0.2));
  }

  .dex-action-mobile-snap-track {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .dex-action-mobile-snap-track span {
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px;
    scroll-snap-align: center;
  }

  .dex-action-mobile-scroll-cue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 10px 0 0;
    color: #1e3a8a;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .dex-action-mobile-scroll-cue span {
    width: 6px;
    height: 6px;
    border-right: 2px solid #f59e0b;
    border-bottom: 2px solid #f59e0b;
    transform: rotate(45deg) translateY(-2px);
  }
}

@media screen and (max-width: 479px) {
  .dex-action-mobile-reader {
    padding-inline: 10px;
  }

  .dex-action-mobile-svg-scroll {
    height: clamp(450px, 60vh, 520px);
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dex-action-mobile-svg-scroll {
    scroll-behavior: auto;
  }

  .dex-action-mobile-floor {
    transition: none !important;
  }
}

/* Mobile scroll story: one complete frame, then page-scroll era transitions. */
@media screen and (max-width: 991px) {
  .dex-action-mobile-svg-scroll {
    overflow: hidden;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    scrollbar-width: none;
    scroll-behavior: auto;
    overscroll-behavior: auto;
  }

  .dex-action-mobile-svg-canvas {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 420 / 760;
  }

  .dex-action-mobile-workspace-svg .dex-action-mobile-era-fill {
    pointer-events: none;
  }

  .dex-action-mobile-workspace-svg .dex-action-mobile-era-fill-assisted {
    fill: #1649b8;
  }

  .dex-action-mobile-workspace-svg .dex-action-mobile-era-fill-agentic {
    fill: #f8fbff;
  }

  .dex-action-mobile-component .dex-action-stage-name text {
    font-size: 16px;
  }

  .dex-action-mobile-role-tags .dex-action-role-tag text {
    font-size: 12.5px;
  }
}

@media screen and (max-width: 991px) and (prefers-reduced-motion: no-preference) {
  html.dex-home-page:has(.dex-action-mobile-scroll-story) {
    overflow-x: clip !important;
    overflow-y: auto !important;
  }

  html.dex-home-page:has(.dex-action-mobile-scroll-story) body {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  .rt-ai-agents-v1.dex-action-mobile-scroll-story {
    height: 360vh !important;
    min-height: 2500px;
    overflow: visible !important;
  }

  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-section {
    min-height: 100%;
  }

  .rt-ai-agents-v1.dex-action-mobile-scroll-story .rt-container {
    width: calc(100% - 20px);
  }

  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-workspace {
    position: sticky;
    top: 86px;
  }

  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-workspace-topline,
  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-mobile-era-tabs {
    display: none;
  }

  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-mobile-reader {
    padding: 7px 9px 3px;
  }

  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-mobile-floor {
    fill: rgba(239, 246, 255, 0.66);
  }

  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-outcome {
    min-height: 72px;
    margin: 2px 9px 9px;
    padding: 11px 13px;
  }

  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-outcome strong {
    font-size: 15px;
  }

  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-outcome p {
    font-size: 11.5px;
    line-height: 1.35;
  }
}

.dex-action-mobile-panel-roles {
  display: none;
}

@media screen and (max-width: 991px) {
  .dex-action-mobile-panel-roles {
    display: grid;
    grid-column: 1 / -1;
    gap: 6px;
    padding-top: 9px;
    border-top: 1px solid rgba(147, 197, 253, 0.34);
  }

  .dex-action-mobile-panel-role-heading {
    color: #1e3a8a;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .dex-action-mobile-panel-role-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .dex-action-mobile-panel-role-list span {
    padding: 4px 7px;
    border: 1px solid rgba(37, 99, 235, 0.24);
    border-radius: 999px;
    color: #1e3a8a;
    background: #ffffff;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1.15;
  }

  .state-assisted .dex-action-mobile-panel-role-list span {
    color: #102a63;
    border-color: rgba(251, 191, 36, 0.76);
  }

  .state-agentic .dex-action-mobile-panel-role-list span {
    color: #ffffff;
    border-color: #fbbf24;
    background: #1e40af;
  }
}

@media screen and (max-width: 991px) and (prefers-reduced-motion: no-preference) {
  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-outcome {
    grid-template-columns: 14px minmax(0, 1fr) auto;
    gap: 9px 11px;
  }

  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-outcome p {
    display: none;
  }

  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-outcome small {
    grid-column: auto;
    align-self: center;
  }

  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-mobile-component,
  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-mobile-component .dex-action-zone-group,
  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-mobile-component .dex-action-person,
  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-mobile-component .dex-action-team-workspace,
  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-mobile-component .dex-action-tool,
  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-mobile-component .dex-action-tool-core,
  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-mobile-component .dex-action-agent {
    animation: none !important;
  }

  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-mobile-component {
    opacity: 1;
    transition: opacity 240ms ease, filter 240ms ease;
  }

  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-mobile-component.is-mobile-stage-entering,
  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-mobile-component.is-mobile-stage-leaving {
    opacity: 0;
    pointer-events: none;
  }
}

@media screen and (max-width: 991px) and (prefers-reduced-motion: no-preference) {
  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-mobile-svg-canvas {
    max-width: 360px;
  }
}

@media screen and (max-width: 374px) and (prefers-reduced-motion: no-preference) {
  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-mobile-svg-canvas {
    max-width: 287px;
  }
}

/* Mobile Agents in Action: use a true clock hand, never a growing filled sector. */
@media screen and (max-width: 991px) {
  .dex-action-mobile-sweep-hand {
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
  }

  .dex-action-workspace.is-sweeping .dex-action-mobile-sweep-hand {
    opacity: 1;
  }

  .dex-action-mobile-sweep-beam {
    fill: rgba(251, 191, 36, 0.18);
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.38));
  }

  .dex-action-mobile-sweep-line {
    fill: none;
    stroke: #fbbf24;
    stroke-width: 3;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.72));
  }

  .state-agentic .dex-action-mobile-sweep-beam {
    fill: rgba(37, 99, 235, 0.14);
    filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.34));
  }

  .state-agentic .dex-action-mobile-sweep-line {
    stroke: #2563eb;
    filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.62));
  }

  .dex-action-mobile-component .dex-action-mobile-protected-label rect,
  .dex-action-mobile-component .dex-action-count-badge rect {
    fill: #ffffff;
  }

  .dex-action-mobile-component .dex-action-mobile-protected-label text,
  .dex-action-mobile-component .dex-action-count-badge text {
    paint-order: stroke fill;
    stroke: #ffffff;
    stroke-width: 2px;
    stroke-linejoin: round;
  }

  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-workspace.state-assisted:not(.is-sweeping) .dex-action-mobile-floor,
  .rt-ai-agents-v1.dex-action-mobile-scroll-story .dex-action-workspace.state-agentic.is-sweeping .dex-action-mobile-floor {
    fill: #1649b8;
  }
}

/* ============================================================
   Delivery evolution posters — Past / Present / Future
   ============================================================ */
.rt-ai-agents-v1:has(.dex-era-section) {
  position: relative;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(82px, 8vw, 124px) 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 8% 20%, rgba(96, 165, 250, 0.38), transparent 28%),
    radial-gradient(circle at 88% 76%, rgba(251, 191, 36, 0.2), transparent 31%),
    linear-gradient(145deg, #123a95 0%, #1e40af 48%, #173783 100%) !important;
}

.rt-ai-agents-v1:has(.dex-era-section)::before {
  opacity: 0.78;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.11) 1px, transparent 1.4px),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
  background-size: 30px 30px, 90px 90px, 90px 90px !important;
}

.rt-ai-agents-v1:has(.dex-era-section)::after {
  top: auto;
  right: -180px;
  bottom: -230px;
  width: 620px;
  height: 620px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
}

.dex-era-background-mark {
  position: absolute;
  top: 46px;
  right: clamp(-90px, -5vw, -36px);
  width: clamp(240px, 28vw, 470px);
  opacity: 0.055;
  transform: rotate(10deg);
  pointer-events: none;
}

.dex-era-background-mark img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

.dex-era-section {
  position: relative;
  z-index: 2;
  width: min(100% - clamp(32px, 5vw, 80px), 1580px) !important;
  max-width: 1580px !important;
}

.dex-era-heading {
  max-width: 900px;
  margin: 0 auto clamp(34px, 4vw, 56px);
  text-align: center;
}

.rt-ai-agents-v1 .dex-era-heading .rt-sub-text {
  color: #bfdbfe !important;
}

.rt-ai-agents-v1 .dex-era-heading h2 {
  margin: 0;
  color: #ffffff !important;
  font-family: "Inter Tight", "Manrope", sans-serif;
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.rt-ai-agents-v1 .dex-era-heading h2 .rt-heading-gradient {
  background-image: linear-gradient(90deg, #ffffff 0%, #fde68a 42%, #fbbf24 100%) !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rt-ai-agents-v1 .dex-era-heading p {
  max-width: 760px;
  margin: 22px auto 0;
  color: rgba(239, 246, 255, 0.78) !important;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.65;
}

.dex-era-gallery {
  display: flex;
  width: 100%;
  gap: clamp(14px, 1.7vw, 26px);
  align-items: stretch;
}

.dex-era-card {
  position: relative;
  display: flex;
  overflow: hidden;
  min-width: 0;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 28px;
  background: #f8fafc;
  box-shadow:
    0 28px 70px rgba(4, 15, 55, 0.28),
    0 0 0 1px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  will-change: flex-grow, transform;
  transition:
    flex-grow 760ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 520ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 520ms ease;
}

.dex-era-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 3;
  height: 7px;
  background: var(--era-accent, #2563eb);
  pointer-events: none;
}

.dex-era-card::after {
  content: "";
  position: absolute;
  top: -130px;
  right: -120px;
  width: 300px;
  height: 300px;
  border: 1px solid color-mix(in srgb, var(--era-accent, #2563eb) 18%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 34px color-mix(in srgb, var(--era-accent, #2563eb) 4%, transparent),
    0 0 0 70px color-mix(in srgb, var(--era-accent, #2563eb) 3%, transparent);
  pointer-events: none;
}

.dex-era-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 34px 84px rgba(4, 15, 55, 0.34),
    0 0 0 1px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.dex-era-card.is-expanded {
  flex-grow: 2.35;
  transform: translateY(-8px);
}

.dex-era-card.is-muted {
  flex-grow: 0.62;
  opacity: 0.9;
}

.dex-era-past {
  --era-accent: #60a5fa;
  --era-accent-dark: #1e40af;
  --era-soft: #dbeafe;
  background: linear-gradient(160deg, #ffffff 0%, #edf5ff 100%);
}

.dex-era-present {
  --era-accent: #2563eb;
  --era-accent-dark: #1e40af;
  --era-soft: #dbeafe;
  background: linear-gradient(160deg, #ffffff 0%, #eff6ff 100%);
}

.dex-era-future {
  --era-accent: #f5b914;
  --era-accent-dark: #1e40af;
  --era-soft: #fef3c7;
  background: linear-gradient(160deg, #ffffff 0%, #fffbea 100%);
}

.dex-era-poster {
  appearance: none;
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  min-height: 710px;
  width: 100%;
  flex: 1 1 auto;
  grid-template-rows: auto auto auto auto auto auto minmax(300px, 1fr) auto;
  align-content: stretch;
  padding: clamp(24px, 2.2vw, 36px);
  border: 0;
  color: #0f172a;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dex-era-poster:focus-visible {
  border-radius: 26px;
  outline: 4px solid #fbbf24;
  outline-offset: -6px;
}

.dex-era-poster-index,
.dex-era-poster-era,
.dex-era-poster-rule,
.dex-era-metric-block,
.dex-era-poster-title,
.dex-era-poster-statement,
.dex-era-system-map,
.dex-era-poster-footer {
  position: relative;
  z-index: 2;
}

.dex-era-poster-index {
  justify-self: end;
  color: var(--era-accent-dark);
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.dex-era-poster-era {
  margin-top: -12px;
  color: var(--era-accent-dark);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dex-era-poster-rule {
  width: 100%;
  height: 1px;
  margin: 14px 0 20px;
  background: linear-gradient(90deg, var(--era-accent), color-mix(in srgb, var(--era-accent) 10%, transparent));
}

.dex-era-metric-block {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}

.dex-era-metric-block strong {
  color: var(--era-accent-dark);
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(70px, 7vw, 112px);
  font-weight: 600;
  letter-spacing: -0.075em;
  line-height: 0.78;
}

.dex-era-metric-block small {
  max-width: 92px;
  padding-bottom: 7px;
  color: #475569;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.dex-era-poster-title {
  color: #0f172a;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(25px, 2.4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.dex-era-poster-statement {
  max-width: 390px;
  margin-top: 12px;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

.dex-era-system-map {
  position: relative;
  display: grid;
  align-self: stretch;
  gap: 9px;
  margin-top: 26px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--era-accent) 20%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(color-mix(in srgb, var(--era-accent) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--era-accent) 4%, transparent) 1px, transparent 1px),
    rgba(255, 255, 255, 0.7);
  background-size: 20px 20px;
  box-shadow: inset 0 1px 0 #ffffff;
}

.dex-era-system-map::before {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 34px;
  left: 30px;
  width: 2px;
  background: linear-gradient(var(--era-accent), color-mix(in srgb, var(--era-accent) 22%, transparent));
}

.dex-era-stage {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  grid-template-columns: 30px minmax(72px, 1fr) minmax(74px, auto);
  gap: 10px;
  align-items: center;
  padding: 7px 9px 7px 0;
  border: 1px solid color-mix(in srgb, var(--era-accent) 12%, transparent);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.045);
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.dex-era-card.is-expanded .dex-era-stage:hover {
  border-color: color-mix(in srgb, var(--era-accent) 44%, transparent);
  transform: translateX(3px);
  box-shadow: 0 9px 20px rgba(15, 23, 42, 0.08);
}

.dex-era-stage-marker {
  display: grid;
  width: 25px;
  height: 25px;
  margin-left: -1px;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  background: var(--era-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--era-accent) 20%, transparent);
}

.dex-era-stage-marker span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.dex-era-stage-main {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.dex-era-stage-main strong {
  overflow: hidden;
  color: #172554;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dex-era-stage-main small {
  display: none;
  overflow: hidden;
  color: #64748b;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dex-era-card.is-expanded .dex-era-stage-main small {
  display: block;
}

.dex-era-stage-resources {
  display: flex;
  min-width: 0;
  max-width: 132px;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
  justify-content: flex-end;
}

.dex-era-person {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 13px;
  flex: 0 0 10px;
}

.dex-era-person::before {
  content: "";
  position: absolute;
  top: 0;
  left: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--person-color, var(--era-accent));
}

.dex-era-person::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 0;
  left: 1px;
  height: 7px;
  border-radius: 5px 5px 2px 2px;
  background: var(--person-color, var(--era-accent));
}

.dex-era-past .dex-era-person-1 {
  --person-color: #1e40af;
}

.dex-era-past .dex-era-person-2 {
  --person-color: #2563eb;
}

.dex-era-past .dex-era-person-3 {
  --person-color: #60a5fa;
}

.dex-era-past .dex-era-person-4 {
  --person-color: #3b82f6;
}

.dex-era-present .dex-era-person-1 {
  --person-color: #1e40af;
}

.dex-era-present .dex-era-person-2 {
  --person-color: #2563eb;
}

.dex-era-present .dex-era-person-3 {
  --person-color: #60a5fa;
}

.dex-era-present .dex-era-person-4 {
  --person-color: #1d4ed8;
}

.dex-era-present .dex-era-stage-resources::after {
  content: "AI";
  display: grid;
  width: 22px;
  height: 18px;
  place-items: center;
  border: 1px solid #f5b914;
  border-radius: 5px;
  color: #172554;
  background: #fef3c7;
  font-size: 7px;
  font-weight: 950;
}

.dex-era-agent {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid #fbbf24;
  border-radius: 9px;
  background: linear-gradient(145deg, #ffffff, #eff6ff);
  box-shadow: 0 5px 12px rgba(30, 64, 175, 0.14);
}

.dex-era-agent img {
  display: block;
  width: 21px;
  height: 21px;
  object-fit: contain;
}

.dex-era-poster-footer {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--era-accent) 20%, transparent);
  color: #475569;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.dex-era-open-label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--era-accent-dark);
}

.dex-era-open-label i {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--era-accent);
  transition: transform 260ms ease;
}

.dex-era-open-label i::before,
.dex-era-open-label i::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 7px;
  width: 11px;
  height: 1.5px;
  border-radius: 2px;
  background: #ffffff;
}

.dex-era-open-label i::after {
  transform: rotate(90deg);
}

.dex-era-card.is-expanded .dex-era-open-label i {
  transform: rotate(45deg);
}

.dex-era-details {
  position: relative;
  z-index: 2;
  display: grid;
  overflow: hidden;
  max-height: 0;
  grid-template-columns: minmax(220px, 1.3fr) minmax(240px, 1fr);
  gap: 20px;
  align-items: center;
  padding: 0 clamp(24px, 2.2vw, 36px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    max-height 700ms cubic-bezier(0.16, 1, 0.3, 1),
    padding-bottom 700ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 360ms ease,
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 700ms;
}

.dex-era-card.is-expanded .dex-era-details {
  max-height: 340px;
  padding-bottom: 34px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    max-height 760ms cubic-bezier(0.16, 1, 0.3, 1),
    padding-bottom 760ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 440ms ease 150ms,
    transform 680ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear;
}

.dex-era-poster>* {
  transition: opacity 220ms ease;
}

.dex-era-card.is-layout-shifting .dex-era-poster>*,
.dex-era-card.is-layout-shifting .dex-era-details {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
  transition-duration: 140ms;
}

.dex-era-details-intro {
  display: grid;
  gap: 10px;
}

.dex-era-details-intro>small {
  color: var(--era-accent-dark);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.dex-era-details p {
  margin: 0;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}

.dex-era-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.dex-era-signals span {
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--era-accent) 30%, transparent);
  border-radius: 999px;
  color: var(--era-accent-dark);
  background: color-mix(in srgb, var(--era-soft) 62%, #ffffff);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dex-era-detail-grid {
  display: grid;
  gap: 8px;
  margin: 0;
}

.dex-era-detail-grid>div {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--era-accent) 20%, transparent);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.76);
}

.dex-era-detail-grid dt {
  color: #64748b;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dex-era-detail-grid dd {
  margin: 0;
  color: #172554;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.dex-era-card.is-expanded .dex-era-poster {
  min-height: 710px;
  grid-template-columns: minmax(200px, 0.72fr) minmax(330px, 1.28fr);
  grid-template-rows: auto auto auto auto 1fr auto;
  column-gap: clamp(28px, 3vw, 48px);
}

.dex-era-card.is-expanded .dex-era-poster-index {
  grid-column: 2;
  grid-row: 1;
}

.dex-era-card.is-expanded .dex-era-poster-era {
  grid-column: 1;
  grid-row: 1;
  margin-top: 0;
}

.dex-era-card.is-expanded .dex-era-poster-rule {
  grid-column: 1 / -1;
  grid-row: 2;
}

.dex-era-card.is-expanded .dex-era-metric-block {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
}

.dex-era-card.is-expanded .dex-era-poster-title {
  grid-column: 1;
  grid-row: 4;
}

.dex-era-card.is-expanded .dex-era-poster-statement {
  grid-column: 1;
  grid-row: 5;
}

.dex-era-card.is-expanded .dex-era-system-map {
  grid-column: 2;
  grid-row: 3 / 6;
  min-height: 410px;
  margin-top: 0;
  padding: 20px;
}

.dex-era-card.is-expanded .dex-era-stage {
  grid-template-columns: 32px minmax(150px, 1fr) minmax(120px, auto);
  gap: 12px;
  padding-top: 11px;
  padding-bottom: 11px;
}

.dex-era-card.is-expanded .dex-era-stage-main {
  gap: 3px;
}

.dex-era-card.is-expanded .dex-era-stage-main strong {
  font-size: 14px;
  line-height: 1.15;
}

.dex-era-card.is-expanded .dex-era-stage-main small {
  overflow: visible;
  color: #475569;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}

.dex-era-card.is-expanded .dex-era-stage-resources {
  align-self: center;
}

.dex-era-card.is-expanded .dex-era-poster-footer {
  grid-column: 1 / -1;
  grid-row: 6;
}

.dex-era-card.is-muted .dex-era-poster {
  grid-template-rows: auto auto auto auto 1fr auto;
  padding-right: 18px;
  padding-left: 18px;
}

.dex-era-card.is-muted .dex-era-poster-index,
.dex-era-card.is-muted .dex-era-poster-statement,
.dex-era-card.is-muted .dex-era-system-map,
.dex-era-card.is-muted .dex-era-poster-footer>span:first-child,
.dex-era-card.is-muted .dex-era-metric-block small {
  display: none;
}

.dex-era-card.is-muted .dex-era-poster-era {
  margin-top: 0;
  text-align: center;
}

.dex-era-card.is-muted .dex-era-metric-block {
  align-self: start;
  justify-content: center;
  margin-top: 20px;
}

.dex-era-card.is-muted .dex-era-metric-block strong {
  font-size: clamp(48px, 5vw, 76px);
}

.dex-era-card.is-muted .dex-era-poster-title {
  align-self: center;
  font-size: clamp(19px, 1.7vw, 26px);
  text-align: center;
}

.dex-era-card.is-muted .dex-era-poster-footer {
  justify-content: center;
}

@media screen and (min-width: 901px) {
  .dex-era-gallery {
    height: 712px;
  }

  .dex-era-card,
  .dex-era-card.is-expanded,
  .dex-era-card.is-muted {
    height: 712px;
    min-height: 712px;
    max-height: 712px;
  }

  .dex-era-poster,
  .dex-era-card.is-expanded .dex-era-poster {
    height: 100%;
    min-height: 0;
  }

  .dex-era-card.is-expanded .dex-era-details {
    position: absolute;
    top: 382px;
    bottom: auto;
    left: clamp(24px, 2.2vw, 36px);
    width: clamp(210px, 29%, 260px);
    max-height: 248px;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 0;
  }

  .dex-era-details-intro {
    gap: 0;
  }

  .dex-era-details-intro>small {
    padding-bottom: 9px;
    border-bottom: 1px solid color-mix(in srgb, var(--era-accent) 22%, transparent);
    font-size: 10px;
    line-height: 1.25;
  }

  .dex-era-details-intro p,
  .dex-era-details-intro .dex-era-signals {
    display: none;
  }

  .dex-era-detail-grid {
    gap: 0;
  }

  .dex-era-detail-grid>div {
    gap: 3px;
    padding: 9px 0;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--era-accent) 16%, transparent);
    border-radius: 0;
    background: transparent;
  }

  .dex-era-detail-grid dt {
    font-size: 9px;
    line-height: 1.2;
  }

  .dex-era-detail-grid dd {
    font-size: 11.5px;
    line-height: 1.3;
  }

  .dex-era-card.is-expanded .dex-era-poster-statement {
    font-size: 15px;
    line-height: 1.55;
  }

  .dex-era-card.is-expanded .dex-era-poster-footer {
    font-size: 11px;
  }
}

@media screen and (max-width: 1180px) {
  .dex-era-section {
    width: min(100% - 30px, 1100px) !important;
  }

  .dex-era-gallery {
    gap: 14px;
  }

  .dex-era-card.is-expanded {
    flex-grow: 2.7;
  }

  .dex-era-card.is-muted {
    flex-grow: 0.48;
  }

  .dex-era-card.is-expanded .dex-era-poster {
    min-height: 680px;
    grid-template-columns: minmax(180px, 0.68fr) minmax(290px, 1.32fr);
    column-gap: 24px;
    padding: 28px;
  }

  .dex-era-poster {
    min-height: 680px;
    padding: 24px;
  }

  .dex-era-poster-statement {
    font-size: 13px;
  }

  .dex-era-details {
    padding-right: 28px;
    padding-left: 28px;
  }

}

@media screen and (min-width: 901px) and (max-width: 1180px) {
  .dex-era-gallery {
    height: 680px;
  }

  .dex-era-card,
  .dex-era-card.is-expanded,
  .dex-era-card.is-muted {
    height: 680px;
    min-height: 680px;
    max-height: 680px;
  }

  .dex-era-card.is-expanded .dex-era-details {
    top: 352px;
    width: 190px;
    max-height: 244px;
    padding-right: 0;
    padding-left: 0;
  }

  .dex-era-card.is-expanded .dex-era-stage {
    grid-template-columns: 32px minmax(120px, 1fr) minmax(88px, auto);
    gap: 9px;
  }

  .dex-era-card.is-expanded .dex-era-stage-main small {
    font-size: 9.75px;
    line-height: 1.3;
  }
}

@media screen and (max-width: 900px) {
  .rt-ai-agents-v1:has(.dex-era-section) {
    padding: 76px 0 !important;
  }

  .dex-era-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dex-era-card,
  .dex-era-card.is-expanded,
  .dex-era-card.is-muted {
    min-width: 0;
    transform: none;
  }

  .dex-era-gallery.has-expanded-card .dex-era-card.is-expanded {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .dex-era-gallery.has-expanded-card .dex-era-card.is-muted {
    grid-row: 2;
  }

  .dex-era-poster {
    min-height: 610px;
    padding: 20px;
  }

  .dex-era-card.is-expanded .dex-era-poster {
    min-height: 590px;
    grid-template-columns: minmax(190px, 0.72fr) minmax(310px, 1.28fr);
  }

  .dex-era-card.is-muted .dex-era-poster {
    min-height: 180px;
    grid-template-rows: auto auto auto auto;
  }

  .dex-era-card.is-expanded .dex-era-details {
    max-height: 520px;
    padding-bottom: 28px;
  }

  .dex-era-card.is-muted .dex-era-poster-rule {
    margin-bottom: 6px;
  }

  .dex-era-card.is-muted .dex-era-metric-block {
    margin-top: 4px;
  }

  .dex-era-card.is-muted .dex-era-poster-title,
  .dex-era-card.is-muted .dex-era-poster-footer {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .rt-ai-agents-v1:has(.dex-era-section) {
    padding: 64px 0 !important;
  }

  .dex-era-section {
    width: min(100% - 24px, 560px) !important;
  }

  .dex-era-heading {
    margin-bottom: 30px;
  }

  .rt-ai-agents-v1 .dex-era-heading h2 {
    font-size: clamp(39px, 12vw, 54px);
  }

  .rt-ai-agents-v1 .dex-era-heading p {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.55;
  }

  .dex-era-gallery,
  .dex-era-gallery.has-expanded-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .dex-era-gallery.has-expanded-card .dex-era-card.is-expanded,
  .dex-era-gallery.has-expanded-card .dex-era-card.is-muted {
    grid-column: auto;
    grid-row: auto;
  }

  .dex-era-card {
    border-radius: 22px;
  }

  .dex-era-poster,
  .dex-era-card.is-muted .dex-era-poster {
    min-height: 500px;
    grid-template-rows: auto auto auto auto auto auto minmax(185px, 1fr) auto;
    padding: 22px;
  }

  .dex-era-card.is-muted .dex-era-poster-index,
  .dex-era-card.is-muted .dex-era-poster-statement,
  .dex-era-card.is-muted .dex-era-system-map,
  .dex-era-card.is-muted .dex-era-poster-footer>span:first-child,
  .dex-era-card.is-muted .dex-era-metric-block small,
  .dex-era-card.is-muted .dex-era-poster-title,
  .dex-era-card.is-muted .dex-era-poster-footer {
    display: initial;
  }

  .dex-era-card.is-muted .dex-era-poster-index {
    display: block;
  }

  .dex-era-card.is-muted .dex-era-system-map {
    display: grid;
  }

  .dex-era-card.is-muted .dex-era-poster-footer {
    display: flex;
  }

  .dex-era-card.is-muted .dex-era-poster-footer>span:first-child {
    display: inline;
  }

  .dex-era-card.is-muted .dex-era-metric-block small {
    display: block;
  }

  .dex-era-card.is-muted .dex-era-poster-era {
    margin-top: -12px;
    text-align: left;
  }

  .dex-era-card.is-muted .dex-era-metric-block {
    align-self: auto;
    justify-content: flex-start;
    margin-top: 0;
  }

  .dex-era-card.is-muted .dex-era-metric-block strong,
  .dex-era-metric-block strong {
    font-size: clamp(68px, 22vw, 96px);
  }

  .dex-era-card.is-muted .dex-era-poster-title {
    align-self: auto;
    font-size: 28px;
    text-align: left;
  }

  .dex-era-card.is-expanded .dex-era-poster {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto auto auto;
    gap: 0;
    padding: 22px;
  }

  .dex-era-card.is-expanded .dex-era-poster-index,
  .dex-era-card.is-expanded .dex-era-poster-era,
  .dex-era-card.is-expanded .dex-era-poster-rule,
  .dex-era-card.is-expanded .dex-era-metric-block,
  .dex-era-card.is-expanded .dex-era-poster-title,
  .dex-era-card.is-expanded .dex-era-poster-statement,
  .dex-era-card.is-expanded .dex-era-system-map,
  .dex-era-card.is-expanded .dex-era-poster-footer {
    grid-column: 1;
    grid-row: auto;
  }

  .dex-era-card.is-expanded .dex-era-poster-index {
    grid-row: 1;
  }

  .dex-era-card.is-expanded .dex-era-poster-era {
    grid-row: 2;
    margin-top: -12px;
  }

  .dex-era-card.is-expanded .dex-era-poster-rule {
    grid-row: 3;
  }

  .dex-era-card.is-expanded .dex-era-metric-block {
    grid-row: 4;
  }

  .dex-era-card.is-expanded .dex-era-poster-title {
    grid-row: 5;
  }

  .dex-era-card.is-expanded .dex-era-poster-statement {
    grid-row: 6;
  }

  .dex-era-card.is-expanded .dex-era-system-map {
    grid-row: 7;
    min-height: 300px;
    margin-top: 24px;
    padding: 14px;
  }

  .dex-era-card.is-expanded .dex-era-poster-footer {
    grid-row: 8;
  }

  .dex-era-card.is-expanded .dex-era-stage {
    grid-template-columns: 30px minmax(90px, 1fr) minmax(84px, auto);
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .dex-era-card.is-expanded .dex-era-stage-main strong {
    font-size: 13px;
  }

  .dex-era-card.is-expanded .dex-era-stage-main small {
    font-size: 10.5px;
    line-height: 1.35;
  }

  .dex-era-details {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 22px;
  }

  .dex-era-card.is-expanded .dex-era-details {
    max-height: 520px;
    padding-bottom: 28px;
  }

  .dex-era-signals {
    justify-content: flex-start;
  }

}

@media (prefers-reduced-motion: reduce) {

  .dex-era-card,
  .dex-era-stage,
  .dex-era-open-label i,
  .dex-era-details {
    animation: none !important;
    transition: none !important;
  }
}

/* Fix for Materials Preview Summary Card Stretching */
@media (min-width: 1025px) {
  .preview-content-wrapper.two-column-layout {
    align-items: flex-start !important;
  }

  .preview-left {
    height: 550px !important;
  }
}

/* GDPR Inline Overlay Window (confined to right column) */
#gdpr-side-panel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #ffffff !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  z-index: 50 !important;
  overflow-y: auto !important;

  /* Transition */
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(0.98) !important;
  transition: all 0.3s ease-out !important;
  right: auto !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

#gdpr-side-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    url('/assets/dex-icon-yellow-lines.svg'),
    radial-gradient(circle, rgba(15, 23, 42, 0.1) 1.5px, transparent 1.5px) !important;
  background-position: center, 0 0 !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 60%, 24px 24px !important;
  opacity: 0.12 !important;
  /* Gentle opacity for watermark and dots */
  pointer-events: none !important;
  z-index: 0 !important;
}

#gdpr-side-panel.open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
}

/* Header */
.gdpr-panel-header {
  width: 100% !important;
  padding: 24px 32px !important;
  background: transparent !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
  position: relative !important;
  z-index: 1 !important;
}

.header-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.gdpr-icon {
  color: #2563eb !important;
  /* Blue Brand Accent */
  width: 24px !important;
  height: 24px !important;
}

.gdpr-panel-header h3 {
  color: #0f172a !important;
  /* Dark Navy */
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  margin: 0 !important;
}

.btn-close-gdpr {
  background: rgba(15, 23, 42, 0.05) !important;
  color: #64748b !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.btn-close-gdpr:hover {
  background: #fbbf24 !important;
  /* Yellow Hover */
  color: #0f172a !important;
}

/* Body */
.gdpr-panel-body {
  width: 100% !important;
  padding: 24px 32px 40px 32px !important;
  color: #334155 !important;
  /* Slate Gray for legibility */
  font-size: 1rem !important;
  line-height: 1.6 !important;
  position: relative !important;
  z-index: 1 !important;
}

.gdpr-panel-body h4 {
  color: #0f172a !important;
  /* Dark Navy Heading */
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  margin-top: 24px !important;
  margin-bottom: 12px !important;
}

.gdpr-panel-body p {
  margin-bottom: 6px !important;
}

.gdpr-panel-body a {
  color: #2563eb !important;
  /* Blue Links */
  text-decoration: underline !important;
  font-weight: 500 !important;
}

.gdpr-panel-body a:hover {
  color: #fbbf24 !important;
  /* Yellow on hover */
}

/* ============================================================
   MOBILE RESPONSIVENESS FOR UNIFIED HERO SECTION
   Ensures single-width rendering, no horizontal scrolling,
   and readable font sizes on mobile devices.
   ============================================================ */
@media (max-width: 768px) {

  /* Ensure the body does not allow horizontal scrolling */
  html,
  body {
    overflow-x: hidden !important;
  }

  /* Fix 100vw horizontal scroll issue on mobile */
  .unified-hero-section {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 40px 16px 50px !important;
  }

  /* Reduce title font size for mobile */
  .unified-hero-title {
    font-size: clamp(28px, 7vw, 36px) !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
  }

  /* Reduce description font size for mobile */
  .unified-hero-inner p,
  .unified-hero-description {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
    text-wrap: normal !important;
    /* Prevent balance from creating weird breaks on narrow screens */
  }

  /* Reduce tagline font size */
  .unified-hero-tagline {
    font-size: 11px !important;
    margin-bottom: 6px !important;
    letter-spacing: 1px !important;
  }

  /* Hide the watermark background graphic on mobile to avoid overflow and clutter */
  .unified-hero-section::before {
    display: none !important;
  }
}


/* ============================================================
   GLOBAL MOBILE RESPONSIVENESS (ALL 40 PAGES)
   Fixes paragraph alignment, card sizing/visibility, and
   excessive scrolling by converting all multi-column layouts
   to a clean, single-width mobile stack.
   ============================================================ */
@media (max-width: 768px) {

  /* 1. Fix unaligned paragraphs (change justify to left-aligned for readability) */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .blog-card-description,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .section-subtitle {
    text-align: left !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    text-wrap: normal !important;
  }

  /* 2. Fix cards not being visible (override hardcoded widths/heights) */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .blog-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rich-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .intervention-step-item,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .dex-solution-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3. Fix poster/image aspect ratio in cards */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .blog-card-image {
    height: auto !important;
    aspect-ratio: 3/2 !important;
    /* Matches the 1200x800 SVGs perfectly */
  }

  /* 4. Force all flex grid containers to stack in a single column */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .spotlight-container,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .dex-capabilities-grid,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .dex-solutions-grid,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .flex-row-desktop {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* 5. Reduce excessive scrolling (shrink huge section paddings) */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sec-light,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sec-dark,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body section,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .spotlight-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 6. Scale down massive section headers */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .section-title {
    font-size: clamp(26px, 6vw, 32px) !important;
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
    text-align: left !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .section-category-badge {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}


/* ============================================================
   DEEP MOBILE RESPONSIVENESS (SUCCESS STORIES & GRIDS)
   Forces all side-by-side elements, solution cards, and nav
   buttons to stack vertically and resize properly on mobile.
   ============================================================ */
@media (max-width: 768px) {

  /* 1. Force all solution cards and grids to stack and take full width */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-prose-wrap,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .carousel-solutions-container,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .editorial-paragraph-wrapper,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .challenge-editorial-layout,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-container,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-navigation,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .nav-links-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2. Fix specific cards that are cut off (Solution Cards, Feature Cards, Relevant Stories) */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-card-item,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .dex-feature-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .process-step,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .value-prop-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-button-v1-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3. Reduce paddings inside cards for mobile to save space */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-card-item,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .dex-feature-card {
    padding: 20px 16px !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* 4. Fix overlapping navigation buttons at the bottom */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap a.rt-button-v1-main {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* 5. Scale down text globally inside cards to fit smaller screens perfectly */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-prose-content h3,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-card h3,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .dex-feature-card h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-prose-content p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-card p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .dex-feature-card p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .editorial-paragraph-wrapper p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }

  /* Make sure large graphics scale down */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body img,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body svg {
    max-width: 100% !important;
    height: auto !important;
  }
}


/* ============================================================
   ULTRA-AGGRESSIVE MOBILE OVERRIDES
   Fixes inline-styled flex containers (like the bottom nav buttons),
   forces long button text to wrap, crushes massive fonts universally,
   and restricts card sizes/paddings on mobile devices.
   ============================================================ */
@media (max-width: 768px) {

  /* 1. (Removed inline flex container :has override that broke side-by-side buttons) */
  /* 2. Fix the buttons themselves so long text is visible and wraps */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-button-v1-main {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-button-v1,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-button-text {
    white-space: normal !important;
    /* Allow wrapping */
    word-wrap: break-word !important;
    font-size: 13px !important;
    /* Smaller font for mobile buttons */
    line-height: 1.4 !important;
    height: auto !important;
    padding: 12px 16px !important;
    text-align: center !important;
  }

  /* 3. Universally crush massive typography across the entire page */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body h1,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .unified-hero-title {
    font-size: clamp(26px, 7vw, 32px) !important;
    line-height: 1.2 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body h2,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .section-title {
    font-size: clamp(22px, 6vw, 26px) !important;
    line-height: 1.25 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body h3 {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.3 !important;
  }

  /* Standardize all readable paragraph/list text */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body li,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .editorial-paragraph-wrapper p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-prose-content p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .blog-card-description {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* 4. Crush excessive inline paddings inside cards and containers */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-card-item,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container section {
    padding: 4px !important;
    margin: 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container .section-header {
    margin-bottom: 8px !important;
    padding: 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .dex-feature-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .process-step,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rich-card {
    padding: 16px !important;
    /* Force small padding on mobile */
    min-height: auto !important;
    height: auto !important;
    margin-bottom: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 5. Force all images to obey parent width */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body img,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body svg {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    /* Ensures the image doesn't get stretched and cut off */
  }

  /* Reduce massive inline padding in the client logo wrapper */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .about-client-logo-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px !important;
    box-sizing: border-box !important;
  }
}


/* ============================================================
   ULTIMATE MOBILE ALIGNMENT & SIZING OVERRIDES
   Directly addresses client feedback for centered headers,
   justified paragraphs (even margins), micro-fonts for cards/buttons,
   and bulletproof button-stacking.
   ============================================================ */
@media (max-width: 768px) {

  /* 1. Force all headers and badges to perfectly center */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .section-category-badge {
    margin-left: auto !important;
    margin-right: auto !important;
    display: table !important;
    /* Forces shrink-to-fit while centering */
    text-align: center !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .section-title,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .section-subtitle,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .unified-hero-title,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .unified-hero-tagline {
    text-align: center !important;
  }

  /* 2. Re-enable JUSTIFY (even margins) for paragraphs as requested */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .editorial-paragraph-wrapper p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-prose-content p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .blog-card-description,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .unified-hero-description {
    text-align: justify !important;
    text-justify: inter-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    text-wrap: normal !important;
  }

  /* 3. Extremely small font sizes for cards */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-card-item p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .blog-card p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rich-card p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-card p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .dex-feature-card p {
    font-size: 11.5px !important;
    line-height: 1.5 !important;
  }

  /* Extremely small font sizes for breadcrumbs */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .unified-breadcrumb-list,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .unified-breadcrumb-link {
    font-size: 10.5px !important;
    gap: 3px !important;
  }

  /* 4. Fix Client Logo being too big */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .about-client-logo-wrapper {
    width: 100% !important;
    max-width: 160px !important;
    /* Shrink logo container drastically */
    padding: 8px 12px !important;
    /* Override massive inline padding */
    margin: 16px auto !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .about-client-logo-wrapper img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 5. Removed aggressive Button Stacking that broke the nav wrap */
  /* (Deleted flex-direction: column rule to allow side-by-side) */
  /* The outer margin container */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body div[style*="margin-top: 60px"][style*="padding-top: 40px"] {
    margin-top: 20px !important;
    padding-top: 20px !important;
  }

  /* 6. Button text forced wrap and micro-sizing */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-button-v1-main {
    width: auto !important;
    /* Dynamic width based on text */
    max-width: 100% !important;
    display: inline-flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-button-v1 {
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px !important;
    min-height: 40px !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-button-text {
    white-space: pre-wrap !important;
    /* Absolutely force wrapping */
    word-break: break-word !important;
    /* Prevent text overflow */
    font-size: 14px !important;
    /* Slightly smaller for mobile */
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin: auto !important;
  }
}


/* ============================================================
   OMNI-BUTTON MOBILE OVERRIDE
   Catches ALL buttons globally and forces them to be small,
   wrap their text (no more hidden labels!), and stack perfectly.
   ============================================================ */
@media (max-width: 768px) {

  /* Target EVERY element with 'btn' or 'button' in its class */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body a[class*="btn"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body a[class*="button"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body div[class*="btn"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body div[class*="button"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap a,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-container a {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    /* More reasonable height */
    padding: 10px 14px !important;
    /* Tighter padding */
    margin-bottom: 8px !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    /* CRITICAL: Fix hidden labels */
    overflow: visible !important;
    display: flex !important;
    flex-wrap: wrap !important;
    /* Allow wrapping inside the button */
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Target all button text/labels */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body [class*="button-text"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body [class*="btn-text"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-button-text {
    white-space: normal !important;
    /* MUST BE normal to allow full text wrapping */
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow: visible !important;
    /* Never hide text */
    text-overflow: clip !important;
    font-size: 14px !important;
    /* Beautiful readable button text */
    font-weight: 600 !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    width: auto !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* ============================================================
   ABSOLUTE MAXIMUM SPECIFICITY MOBILE OVERRIDES
   Destroys all previous rules to strictly enforce tiny buttons
   and perfectly justified text formatting across all containers.
   ============================================================ */
@media (max-width: 768px) {

  /* 1. COMPLETELY crush the giant button heights and widths */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body main section div a.rt-button-v1-main.hero-btn-sm {
    width: auto !important;
    max-width: 90vw !important;
    /* Cannot exceed screen width */
    height: auto !important;
    /* Allow growth */
    min-height: 44px !important;
    margin: 5px auto 10px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    padding: 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body main section div a.rt-button-v1-main.hero-btn-sm .rt-button-v1 {
    height: 100% !important;
    width: auto !important;
    padding: 5px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Force the button text to be tiny and wrap */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body main section div a.rt-button-v1-main.hero-btn-sm .rt-button-text,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body main section div a.rt-button-v1-main .rt-button-text {
    font-size: 14px !important;
    /* Much larger and readable */
    font-weight: 600 !important;
    white-space: pre-wrap !important;
    /* Forces wrap */
    word-wrap: break-word !important;
    word-break: break-word !important;
    text-align: center !important;
    line-height: 1.4 !important;
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* 2. FORCE text to be evenly distributed between margins (JUSTIFY) */
  /* Target all text blocks deeply */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container div,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .editorial-paragraph-wrapper p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-prose-content p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-prose-content div {
    text-align: justify !important;
    text-justify: inter-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
  }

  /* Re-center the headers so they aren't justified */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container h1,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container h2,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container h3,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .section-title,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .section-category-badge {
    text-align: center !important;
  }
}


/* ============================================================
   REMOVE EXTRA UNWANTED DECORATIVE SPACE ON MOBILE
   Hides large background blobs, decorative SVGs, animated shapes
   that create massive empty gaps on mobile screens.
   ============================================================ */
@media (max-width: 768px) {

  /* 1. Hide all large decorative background shapes/blobs */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body [class*="blob"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body [class*="shape"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body [class*="decor"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body [class*="float"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body [class*="orb"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body [class*="bg-shape"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body [class*="hero-graphic"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body [class*="hero-visual"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body [class*="hero-image"] {
    display: none !important;
  }

  /* 2. Hide the specific large chatbot/product visual blob in hero sections */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-visual,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .dex-hero-visual,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .hero-product-visual,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .hero-product-mockup,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .hero-graphic,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .hero-art,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .hero-illustration {
    display: none !important;
  }

  /* 3. Crush all excessively large margins and paddings */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap {
    margin-top: 12px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body [style*="margin-top: 60px"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body [style*="margin-top:60px"] {
    margin-top: 16px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body [style*="padding-top: 40px"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body [style*="padding-top:40px"] {
    padding-top: 16px !important;
  }

  /* 4. Crush min-height on hero sections that force blank space */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .unified-hero-section,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .subpage-hero,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body section[class*="hero"] {
    min-height: unset !important;
    height: auto !important;
  }

  /* 5. Remove decorative pseudo-elements that add visual height */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .unified-hero-section::before,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body section::before,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body section::after,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sec-dark::before,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sec-dark::after {
    display: none !important;
    content: none !important;
  }

  /* 6. Collapse any inline-padded containers that add blank space */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body div[style*="min-height"] {
    min-height: auto !important;
    height: auto !important;
  }
}


/* ============================================================
   MOBILE: Justify unified-hero-description evenly
   ============================================================ */
@media (max-width: 768px) {

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .unified-hero-description,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .unified-hero-inner p {
    text-align: justify !important;
    text-justify: inter-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    text-wrap: normal !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}


/* ============================================================
   NAV BUTTONS (PREV/NEXT) DYNAMIC STYLING
   ============================================================ */
/* When placed inside a dark/blue section, invert the colors */





@media (max-width: 768px) {

  /* Ensure the nav buttons stay on a single line on mobile */
  .story-nav-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    /* Revert back to center as user requested */
    gap: 8px !important;
  }

  .story-nav-wrap a.rt-button-v1-main {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
  }

  .story-nav-wrap .rt-button-v1 {
    padding: 14px 10px !important;
    width: 100% !important;
    height: 100% !important;
    justify-content: center !important;
  }

  .story-nav-wrap .rt-button-text {
    font-size: 11px !important;
    /* Force small font so it fits on 1-2 lines natively */
    white-space: pre-wrap !important;
    word-break: break-word !important;
    text-align: center !important;
    line-height: 1.2 !important;
    width: 100% !important;
    display: block !important;
  }
}




/* CSS-ONLY MOBILE NAV TEXT REPLACEMENT (SPAN TOGGLE) */
.mobile-nav-text {
  display: none !important;
}

.desktop-nav-text {
  display: inline !important;
}

@media (max-width: 768px) {
  .mobile-nav-text {
    display: inline !important;
  }

  .desktop-nav-text {
    display: none !important;
  }
}


/* CSS-ONLY MOBILE PARAGRAPH SPLITTING */
.mobile-br {
  display: none !important;
}

@media (max-width: 768px) {
  .mobile-br {
    display: block !important;
    height: 1.25em !important;
    /* Creates vertical space exactly like a new paragraph */
    width: 100% !important;
  }
}





/* ============================================================
   MOBILE CARD COMPACT MODE (VERTICAL STACK)
   User requested absolutely no horizontal scroll, and everything
   must fit vertically in a single screen via extreme padding reduction.
   ============================================================ */
@media (max-width: 768px) {

  /* Fix subtitle so it doesn't get justified by the global p tag */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .section-subtitle {
    text-align: center !important;
    text-justify: auto !important;
    hyphens: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
  }

  /* Extreme padding reduction for all cards */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-card-item,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-item,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .intervention-step-item,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-card {
    padding: 10px 8px !important;
    margin-bottom: 8px !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* Reduce gap in grid/flex containers */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-prose-wrap,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-wrap,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .intervention-timeline-wrap,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .pillars-flat-grid,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container div[style*="display: grid"] {
    gap: 8px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .challenge-highlights-grid {
    gap: 16px !important;
    /* Restored a healthy gap so boxes do not collapse into each other */
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .challenge-highlight-box {
    padding: 0 0 0 6px !important;
    /* Extremely tight left padding for the border */
    margin: 0 !important;
    min-height: auto !important;
    height: auto !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .challenge-highlight-box h4 {
    margin: 0 0 1px 0 !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.1 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .challenge-highlight-box p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    display: block !important;
    height: auto !important;
  }

  /* Reduce font sizes inside cards to compress height */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-card-item h3,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-number,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .business-impact-card h4,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-info h3 {
    font-size: 14px !important;
    margin-bottom: 4px !important;
    text-align: center !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-card-item p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-desc,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .business-impact-card p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-info p {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-align: center !important;
  }
}


/* ============================================================
   ULTRA-DENSE MOBILE GRID (NO SCROLLING)
   Forces 8 cards into a single screen vertically by using a
   2-column grid and hiding all descriptions/images.
   ============================================================ */
@media (max-width: 768px) {

  /* 1. Disable infinite marquee animation and enforce grid */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .carousel-track-wrapper,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .carousel-solutions-container {
    animation: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100% !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  /* Hide duplicated marquee items */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card:nth-child(n+9) {
    display: none !important;
  }

  /* 2. Enforce 2-column grid on all other card wrappers */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-prose-wrap,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-wrap,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .intervention-timeline-wrap,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .pillars-flat-grid,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container div[style*="display: grid"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 4px 0 !important;
  }

  /* If there are exactly 3 cards, squeeze them horizontally into a single 3-column row instead of a pyramid */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .pillars-flat-grid:has(> *:nth-child(3):last-child),
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-wrap:has(> *:nth-child(3):last-child),
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-prose-wrap:has(> *:nth-child(3):last-child),
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container div[style*="display: grid"]:has(> *:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .pillars-flat-grid:has(> *:nth-child(3):last-child)>*,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-wrap:has(> *:nth-child(3):last-child)>*,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-prose-wrap:has(> *:nth-child(3):last-child)>*,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container div[style*="display: grid"]:has(> *:nth-child(3):last-child)>* {
    grid-column: span 1 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* 3. Ultra compress the cards */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-card-item,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-item,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .intervention-step-item,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .business-impact-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card {
    padding: 6px 4px !important;
    margin: 0 !important;
    min-height: 40px !important;
    height: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    text-align: center !important;
    border-radius: 4px !important;
  }

  /* 4. Hide all paragraphs inside cards to save vertical space */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-card-item p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-desc,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-info p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .intervention-step-content p {
    display: none !important;
  }

  /* Hide icons/images to save space */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-card>div[style*="min-width"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card .card-accent-line {
    display: none !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-card .relevant-story-info {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* 5. Shrink headers drastically */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-card-item h3,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-info h3,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card h3,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-number,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .intervention-step-num {
    font-size: 11px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: pre-wrap !important;
  }
}








/* ============================================================
   CUSTOM MULTI-COLUMN MOBILE GRID LAYOUT
   ============================================================ */
@media (max-width: 768px) {

  /* 1. 8-Cards (Carousel): Force 2 columns (4 on left, 4 on right), equal heights */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .carousel-solutions-container {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .carousel-track-wrapper {
    animation: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100% !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
    align-items: stretch !important;
    /* Force equal heights */
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card:nth-child(n+9) {
    display: none !important;
    /* Hide duplicates */
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card {
    padding: 8px 6px !important;
    margin: 0 !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    border-radius: 6px !important;
  }

  /* Guarantee identical sizing with min-height, but allow natural text flow so no ellipsis (...) appear */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card h3 {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    min-height: 31px !important;
    /* Forces 2-line height minimum */
    height: auto !important;
    /* Allows expansion if needed to avoid hiding text */
    margin: 0 0 4px 0 !important;
    text-align: center !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card p {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    min-height: 150px !important;
    /* Forces 10-line height minimum */
    height: auto !important;
    /* Allows expansion if needed to avoid hiding text */
    margin: 0 !important;
    text-align: justify !important;
    hyphens: auto !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card .card-accent-line {
    display: none !important;
  }

  /* 2. Business Impact: Force 3 columns side-by-side to fit in one screen */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 8px 0 !important;
    align-items: stretch !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-item {
    padding: 6px 4px !important;
    margin: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 6px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-number {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-desc {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* 3. Other cards: Single column for Our Solution */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-prose-wrap,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .intervention-timeline-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 4px 0 !important;
  }

  /* Relevant Stories: Force 3 columns side-by-side */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container div[style*="display: grid"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 8px 0 !important;
    align-items: stretch !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-card-item,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .intervention-step-item,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-card {
    padding: 12px 10px !important;
    height: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 6px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-card-item h3,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-info h3,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .intervention-step-num {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    text-overflow: clip !important;
    height: auto !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-card-item p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-info p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .intervention-step-content p {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    text-overflow: clip !important;
    height: auto !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-prose-num {
    display: none !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-card>div[style*="min-width"] {
    display: none !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-card .relevant-story-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-card .relevant-story-info h3,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-card .relevant-story-info p {
    text-align: center !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-action {
    display: flex !important;
    justify-content: center !important;
    margin-top: 8px !important;
  }

  /* 4. Fix "Explore Solutions" hero button padding */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap .rt-button-v1 {
    padding: 10px 24px !important;
  }

  /* =======================================================
     PRODUCTS & SERVICES MOBILE OVERRIDES
     ======================================================= */

  /* Products & Services: Spotlight Container (Blog Cards) */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .spotlight-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 8px 0 !important;
    align-items: stretch !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .spotlight-container .blog-card {
    padding: 8px 4px !important;
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .spotlight-container .blog-card-title {
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    -webkit-line-clamp: unset !important;
    margin: 6px 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .spotlight-container .blog-card-description {
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    -webkit-line-clamp: 4 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 4px 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .spotlight-container .blog-category {
    font-size: 9px !important;
    margin-bottom: 4px !important;
    display: block !important;
  }

  /* Products/Apparel eCommerce: Premium Links Grid */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .premium-links-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 8px 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .premium-links-grid .premium-link-card {
    padding: 8px 4px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .premium-links-grid .plc-icon-box {
    transform: scale(0.7) !important;
    margin: 0 0 4px 0 !important;
    width: 30px !important;
    height: 30px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .premium-links-grid .plc-title {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 4px 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .premium-links-grid .plc-subtitle {
    font-size: 9px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .premium-links-grid .plc-arrow {
    display: none !important;
    /* Hide Explore Now text to save space on mobile */
  }

  /* Individual Products: Premium Grid 4 */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .premium-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 12px 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .premium-grid-4>div,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .premium-grid-4>img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 10px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* Mobile delivery phases: the in-card Phase labels already provide sequence context. */
@media screen and (max-width: 767px) {

  .dex-delivery-system-section .dex-delivery-phase-marker,
  .dex-delivery-system-section .dex-delivery-phase-card::before {
    display: none !important;
  }

  .dex-delivery-system-section .dex-delivery-phase-card {
    padding-left: 0 !important;
  }
}

/* Mobile workflow: swap the lower agent row and description panel in a fixed stage. */
@media screen and (max-width: 575px) {
  .dex-delivery-system-section .dex-workflow-board {
    --dex-mobile-workflow-swap-distance: 101px;
  }

  .dex-delivery-system-section .dex-delivery-workflow-track {
    row-gap: 12px !important;
  }

  .dex-delivery-system-section .dex-workflow-desc-connector {
    height: 16px !important;
  }

  .dex-delivery-system-section .dex-delivery-workflow-step[data-workflow-row="bottom"],
  .dex-delivery-system-section .dex-workflow-dynamic-desc {
    position: relative;
    transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform;
  }

  .dex-delivery-system-section .dex-delivery-workflow-step[data-workflow-row="bottom"] {
    z-index: 1;
  }

  .dex-delivery-system-section .dex-workflow-dynamic-desc {
    z-index: 2;
  }

  .dex-delivery-system-section .dex-workflow-board[data-active-row="top"] .dex-delivery-workflow-step[data-workflow-row="bottom"] {
    transform: translateY(var(--dex-mobile-workflow-swap-distance)) !important;
  }

  .dex-delivery-system-section .dex-workflow-board[data-active-row="top"] .dex-workflow-dynamic-desc {
    transform: translateY(calc(-1 * var(--dex-mobile-workflow-swap-distance))) !important;
  }
}

@media screen and (max-width: 359px) {
  .dex-delivery-system-section .dex-workflow-board {
    --dex-mobile-workflow-swap-distance: 119px;
  }
}

@media screen and (max-width: 575px) and (prefers-reduced-motion: reduce) {

  .dex-delivery-system-section .dex-delivery-workflow-step[data-workflow-row="bottom"],
  .dex-delivery-system-section .dex-workflow-dynamic-desc {
    transition: none !important;
  }
}

/* Mobile hero: tighten the header-to-title rhythm and prioritize the primary CTA. */
@media screen and (max-width: 767px) {
  .rt-hero-v1 {
    padding-top: 24px !important;
  }

  .rt-hero-v1 .rt-hero-v1-button-wrap {
    gap: 0 !important;
    margin-top: 14px !important;
  }

  .rt-hero-v1 .rt-hero-v1-button-wrap .dex-hero-secondary-action {
    display: none !important;
  }

  .rt-hero-v1 .dex-project-workspace-shell {
    margin-top: -18px !important;
  }

  .dex-hero-workflow-top {
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
    text-align: left !important;
  }

  .dex-hero-workflow-logo {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }

  .dex-hero-workflow-logo img {
    width: 38px !important;
    height: 38px !important;
  }

  .dex-hero-workflow-top>div {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .dex-hero-workflow-top>div>span {
    margin-bottom: 3px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  .dex-hero-workflow-top strong {
    max-width: none !important;
    font-size: clamp(17px, 5vw, 20px) !important;
    line-height: 1.08 !important;
  }
}


/* =======================================================
   MORE MOBILE FIXES (Buttons, Diagram, Carousel)
   ======================================================= */
@media (max-width: 768px) {

  /* 1. Hero Buttons Single Line */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap .rt-button-v1 {
    width: auto !important;
    flex: 1 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap .rt-button-text {
    font-size: 13px !important;
    /* Slightly smaller to fit 2 side-by-side */
    white-space: nowrap !important;
  }

  /* 2. Challenge Highlight Box */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .challenge-highlight-box p {
    line-height: 1.2 !important;
    font-size: 13px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3. Carousel Card Bottom Space & Padding */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card {
    padding: 8px 6px !important;
    margin-bottom: 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 4. Capabilities & Automation Auto Grids */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .auto-grid-card {
    padding: 12px 10px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .dex-capabilities-grid {
    gap: 12px !important;
  }

  /* 5. CSS Diagram Wrapper */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .css-diagram-wrapper {
    transform: scale(0.55) !important;
    transform-origin: top center !important;
    margin-bottom: -180px !important;
    /* Remove dead space created by scaling down */
  }
}


/* =======================================================
   ULTIMATE MOBILE BUG FIXES (Buttons, Padding, Height)
   ======================================================= */
@media (max-width: 768px) {

  /* 1. Hero Buttons side-by-side fix */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* The critical fix: target the 'a' tag! */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap a.rt-button-v1-main {
    width: 50% !important;
    /* Force 50% width */
    min-width: 0 !important;
    flex: 1 1 50% !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap .rt-button-v1 {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    /* Tighter padding */
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap .rt-button-text {
    font-size: 11px !important;
    white-space: normal !important;
    /* allow wrap if needed */
    line-height: 1.1 !important;
  }

  /* 2. Challenge Highlight Box p tag extremely small */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .challenge-highlight-box p {
    font-size: 9px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .challenge-highlight-box {
    padding: 0 0 0 4px !important;
    margin: 4px 0 !important;
  }

  /* 3. Carousel Card p tag spacing */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card p {
    font-size: 10px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card {
    padding: 4px !important;
    margin-bottom: 0 !important;
  }

  /* 4. Story Container extreme compression */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container {
    padding: 0 4px !important;
    margin: 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container section,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body section.sec-dark,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body section.sec-light {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* 5. Force all generic cards to single screen size */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .blog-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .premium-link-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .auto-grid-card {
    padding: 6px 4px !important;
    margin: 0 !important;
  }
}


/* =======================================================
   URGENT MOBILE BUG FIXES (Buttons, Diagram Padding, Client Card)
   ======================================================= */
@media (max-width: 768px) {

  /* 1. Hero Buttons side-by-side fix */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap a.rt-button-v1-main {
    width: calc(50% - 4px) !important;
    max-width: 50% !important;
    flex: 0 0 calc(50% - 4px) !important;
    display: inline-flex !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap .rt-button-v1 {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 6px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap .rt-button-text {
    font-size: 10px !important;
    /* Smaller to guarantee fit */
    white-space: normal !important;
    line-height: 1.1 !important;
  }

  /* 2. Challenge Highlight Box p tag extremely small */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .challenge-highlight-box p {
    font-size: 10px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .challenge-highlight-box {
    padding: 2px 0 2px 4px !important;
    margin: 2px 0 !important;
  }

  /* 3. Carousel Card p/b tag extra space */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card b,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card strong {
    font-size: 9px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card {
    padding-bottom: 2px !important;
    /* Eliminate bottom space completely */
    margin-bottom: 0 !important;
  }

  /* 4. CSS Diagram Wrapper (Remove extra space) */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .css-diagram-wrapper {
    transform: scale(0.5) !important;
    transform-origin: top center !important;
    margin-top: -40px !important;
    margin-bottom: -240px !important;
    /* Force removal of all extra space below it */
    padding: 0 !important;
  }

  /* 5. Custom Client Card (Make content visible) */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .custom-client-card {
    padding: 10px 4px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    min-height: 100px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .custom-client-card h3 {
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
    word-break: normal !important;
    margin: 4px 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .custom-client-card p {
    font-size: 9px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
    word-break: normal !important;
    margin: 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .custom-client-card .client-number-badge {
    width: 24px !important;
    height: 24px !important;
    margin: 0 auto 4px auto !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .custom-client-card .client-number-badge span {
    font-size: 12px !important;
  }
}


/* =======================================================
   V2 ULTIMATE MOBILE BUG FIXES (Final Adjustments)
   ======================================================= */
@media (max-width: 768px) {

  /* 1. Hero Buttons side-by-side fix (ONLY if there is more than 1 button) */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap a.rt-button-v1-main:only-child {
    /* If there is ONLY ONE button */
    width: auto !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    padding: 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap a.rt-button-v1-main:not(:only-child) {
    /* If there are TWO buttons */
    width: calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
    flex: 0 0 calc(50% - 4px) !important;
    display: inline-flex !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap .rt-button-v1 {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 6px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap .rt-button-text {
    font-size: 11px !important;
    white-space: normal !important;
    line-height: 1.1 !important;
    word-break: normal !important;
  }

  /* 2. CSS Diagram Wrapper (Remove extra space and scale) */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .css-diagram-wrapper {
    zoom: 0.55 !important;
    transform: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* 3. Custom Client Card (Make content visible and Center the 4th card) */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .custom-client-card {
    padding: 8px 4px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    min-height: auto !important;
    height: 100% !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .custom-client-card h3,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .custom-client-card p {
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
    word-break: normal !important;
    margin: 4px 0 !important;
  }

  /* Center the 4th card if it's the last child in a 3-column grid */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container div[style*="display: grid"]:has(> .custom-client-card:nth-child(4):last-child)>.custom-client-card:nth-child(4) {
    grid-column: 2;
  }

  /* 4. Sol Carousel Card & Auto Grid Card (Eliminate empty bottom space) */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .auto-grid-card {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 6px !important;
  }

  /* 5. Story Container (Bottom padding) */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container section {
    padding-bottom: 15px !important;
    margin-bottom: 0 !important;
  }

  /* Guarantee normal text for buttons */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-button-text {
    word-break: normal !important;
    white-space: normal !important;
  }
}


/* =======================================================
   V3 ULTIMATE MOBILE BUG FIXES (Nuke Extra Space)
   ======================================================= */
@media (max-width: 768px) {

  /* 1. Nuke ALL spacing inside challenge-highlight-box */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .challenge-highlight-box h4 {
    margin: 0 !important;
    margin-bottom: 2px !important;
    /* tiny margin only */
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .challenge-highlight-box p {
    margin: 0 !important;
    margin-bottom: 2px !important;
    /* tiny margin only */
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .challenge-highlight-box p:last-child {
    margin-bottom: 0 !important;
  }

  /* 2. Nuke ALL spacing inside sol-carousel-card */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card h3 {
    margin: 0 !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card p {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Force the flex/grid item to NOT stretch vertically to fill empty space */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-container,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-container>div {
    align-items: flex-start !important;
    /* Prevents stretch */
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card {
    height: max-content !important;
    min-height: max-content !important;
    max-height: max-content !important;
    display: block !important;
    /* Disable internal flex stretching if any */
  }

  /* 3. Just to be absolutely sure, wipe out any p tag margins inside generic cards */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .auto-grid-card p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .auto-grid-card h3,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .auto-grid-card h4 {
    margin-bottom: 2px !important;
    padding-bottom: 0 !important;
  }
}


/* =======================================================
   V4 ULTIMATE MOBILE BUG FIXES (Restore Button White-Space)
   ======================================================= */
@media (max-width: 768px) {

  /* Restore nowrap for button text so they don't awkwardly wrap */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-button-text {
    white-space: nowrap !important;
  }

  /* Hero Buttons should be nowrap unless absolutely squeezed */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap .rt-button-text {
    white-space: nowrap !important;
    font-size: 11px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap .rt-button-v1 {
    padding: 8px 10px !important;
    /* Slightly more padding so it looks like a real button */
  }
}


/* =======================================================
   V5 ULTIMATE MOBILE BUG FIXES (Carousel Flex Stretch)
   ======================================================= */
@media (max-width: 768px) {

  /* Prevent flex items from stretching to the tallest item's height */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .carousel-track-wrapper {
    align-items: stretch !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .carousel-solutions-container {
    align-items: stretch !important;
  }

  /* Guarantee the card itself does not have extra height */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    align-self: stretch !important;
    /* Restore flex stretching */
    padding-bottom: 8px !important;
    /* Extremely tight bottom padding */
    padding-top: 8px !important;
  }
}


/* =======================================================
   V6 GLOBAL DESKTOP & MOBILE FIXES (Prevent Empty Space)
   ======================================================= */
/* Prevent flex/grid items from stretching vertically GLOBALLY */
html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .carousel-track-wrapper,
html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .carousel-solutions-container {
  align-items: stretch !important;
}

/* Guarantee the cards themselves do not stretch globally on desktop or mobile */
html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card {
  height: auto !important;
  min-height: 100% !important;
  /* Allow stretch */
  max-height: none !important;
  align-self: stretch !important;
  /* Restore stretching in flex/grid to match heights */
}

/* Guarantee auto-grid-card doesn't stretch and leave empty space */
html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .auto-grid-card {
  align-self: stretch !important;
  height: auto !important;
  min-height: 100% !important;
}


/* =======================================================
   V7 MOBILE INVISIBLE CARDS FIX (Products & Services)
   ======================================================= */
@media (max-width: 991px) {

  /* Fix AOS scroll bug where elements stay invisible if off-screen */
  html body [data-aos],
  html body .blog-card[data-aos] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* Force all spotlight containers to stack properly vertically on mobile */
  html body .spotlight-container,
  html body .spotlight-section-wrapper>div {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    overflow: visible !important;
  }
}


/* =======================================================
   V8 ULTIMATE MOBILE & TABLET LAYOUT FIX
   ======================================================= */
/* Target tablet AND mobile so there is zero horizontal side-by-side */
@media (max-width: 991px) {

  /* Force vertical stacking */
  html body .spotlight-container,
  html body .spotlight-section-wrapper>div {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    overflow: visible !important;
    gap: 16px !important;
    /* Remove extra gap spacing */
    margin-bottom: 30px !important;
    /* Reduce bottom margin */
  }

  /* Make the cards small and compact */
  html body .blog-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 8px !important;
    /* Tighter corners */
  }

  /* Shrink the image to make the overall card smaller */
  html body .blog-card-image {
    height: 140px !important;
    /* Much smaller image */
  }

  html body .blog-image-real {
    height: 140px !important;
  }

  /* Remove extra padding inside the card */
  html body .blog-card-content {
    padding: 16px !important;
    /* Tighter padding */
  }

  html body .blog-card-meta {
    margin-bottom: 8px !important;
  }

  html body .blog-card-title {
    font-size: 1.1rem !important;
    /* Slightly smaller text */
    margin-bottom: 8px !important;
    min-height: auto !important;
  }

  html body .blog-card-description {
    font-size: 0.8rem !important;
    margin-bottom: 12px !important;
  }

  html body .rt-button-v1-main {
    margin-top: 0 !important;
  }
}


/* =======================================================
   V12 FIX FOR INVESTMENT MATERIALS GRID ON MOBILE
   ======================================================= */
@media (max-width: 991px) {

  /* Prevent the global story-container grid rule from breaking Investment Materials */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container div[style*="display: grid"][style*="minmax(260px, 1fr)"] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 16px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container div[style*="display: grid"][style*="minmax(260px, 1fr)"]>div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Make the content inside Investment Materials cards compact on mobile */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container div[style*="display: grid"][style*="minmax(260px, 1fr)"]>div>div:nth-child(2) {
    padding: 16px !important;
  }

  /* Make image fully visible and smaller */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container div[style*="display: grid"][style*="minmax(260px, 1fr)"]>div>div:nth-child(1) {
    height: auto !important;
    /* Let it scale */
    min-height: 120px !important;
    padding: 8px !important;
    background: #f8fbff !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container div[style*="display: grid"][style*="minmax(260px, 1fr)"]>div>div:nth-child(1) img {
    height: 140px !important;
    object-fit: contain !important;
    /* Full visibility, no cropping */
    border-radius: 8px !important;
  }

  /* Remove extra vertical space from list items */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-container div[style*="display: grid"][style*="minmax(260px, 1fr)"] ul li {
    height: auto !important;
    min-height: 24px !important;
    margin-bottom: 6px !important;
    padding-bottom: 2px !important;
  }
}

/* =======================================================
   V13 MOBILE FIXES: feature-icon-wrapper, dark-card,
   big images, business-payment spacing & client cards
   ======================================================= */
@media (max-width: 767px) {

  /* ─── 1. feature-icon-wrapper dark-card: one-per-row, compact ─── */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .feature-icon-wrapper.dark-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 16px 12px !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ─── 2. The grid that wraps feature-icon-wrapper → single column ─── */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body div[style*="display: grid"][style*="minmax(220px"]:has(> .feature-icon-wrapper),
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .premium-grid-4:has(> .feature-icon-wrapper.dark-card) {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 12px 0 !important;
  }

  /* ─── 3. Images inside feature-icon-wrapper: cap & show fully ─── */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .feature-icon-wrapper.dark-card img {
    height: 80px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    margin-bottom: 12px !important;
  }

  /* ─── 4. All oversized inline-height SVG/img in product pages ─── */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body section img[style*="height: 130px"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body section img[style*="height: 140px"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body section img[style*="height: 150px"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body section img[style*="height: 160px"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body section img[style*="height: 180px"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body section img[style*="height: 200px"] {
    height: 80px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  /* ─── 5. business-payment: custom-client-card – proper sizing ─── */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .custom-client-card {
    padding: 20px 16px !important;
    width: 100% !important;
    min-height: unset !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .custom-client-card h3 {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin: 8px 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .custom-client-card p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .custom-client-card .client-number-badge {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    margin: 0 auto 12px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .custom-client-card .client-number-badge span {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  /* Grid wrapping client cards → single column on mobile */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body div[style*="display: grid"][style*="minmax(260px"]:has(> .custom-client-card) {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 16px !important;
  }

  /* ─── 6. Remove excessive section padding on mobile ─── */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body section.sec-light[style*="padding: 60px"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body section.sec-dark[style*="padding: 60px"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body section[style*="padding: 60px 20px"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body section[style*="padding: 80px"],
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body section[style*="padding: 100px"] {
    padding: 24px 12px !important;
  }
}

/* Section 2 mobile comparison: keep all eras side by side and open one reader below. */
.dex-era-mobile-reader {
  display: none;
}

@media screen and (max-width: 767px) {
  .rt-ai-agents-v1:has(.dex-era-section) {
    padding: 60px 0 68px !important;
  }

  .dex-era-section {
    width: min(100% - 20px, 560px) !important;
  }

  .rt-ai-agents-v1 .dex-era-heading h2 {
    font-size: clamp(36px, 10.6vw, 48px);
  }

  .dex-era-gallery,
  .dex-era-gallery.has-expanded-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }

  .dex-era-card,
  .dex-era-card.is-expanded,
  .dex-era-card.is-muted {
    min-width: 0;
    height: auto;
    min-height: 0;
    border-radius: 16px;
    opacity: 1;
    transform: none;
    box-shadow: 0 14px 34px rgba(4, 15, 55, 0.22);
  }

  .dex-era-card::before {
    height: 5px;
  }

  .dex-era-card::after {
    top: -70px;
    right: -78px;
    width: 150px;
    height: 150px;
  }

  .dex-era-card.is-expanded {
    border-color: var(--era-accent);
    box-shadow:
      0 16px 38px rgba(4, 15, 55, 0.28),
      0 0 0 2px var(--era-accent);
  }

  .dex-era-card.is-expanded::before {
    height: 7px;
  }

  .dex-era-poster,
  .dex-era-card.is-expanded .dex-era-poster,
  .dex-era-card.is-muted .dex-era-poster {
    display: grid;
    min-height: 250px;
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(92px, 1fr) auto;
    gap: 0;
    padding: 14px 9px 11px;
  }

  .dex-era-poster-index,
  .dex-era-card.is-expanded .dex-era-poster-index,
  .dex-era-card.is-muted .dex-era-poster-index {
    display: block;
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    font-size: 8px;
  }

  .dex-era-poster-era,
  .dex-era-card.is-expanded .dex-era-poster-era,
  .dex-era-card.is-muted .dex-era-poster-era {
    display: block;
    grid-column: 1;
    grid-row: 2;
    margin-top: -7px;
    font-size: clamp(8px, 2.4vw, 10px);
    letter-spacing: 0.1em;
    text-align: left;
  }

  .dex-era-poster-rule {
    display: none;
  }

  .dex-era-metric-block,
  .dex-era-card.is-expanded .dex-era-metric-block,
  .dex-era-card.is-muted .dex-era-metric-block {
    display: flex;
    grid-column: 1;
    grid-row: 3;
    align-self: auto;
    justify-content: flex-start;
    margin: 10px 0 6px;
  }

  .dex-era-card.is-muted .dex-era-metric-block strong,
  .dex-era-metric-block strong {
    font-size: clamp(34px, 10.5vw, 46px);
    line-height: 0.82;
  }

  .dex-era-metric-block small,
  .dex-era-card.is-muted .dex-era-metric-block small {
    display: none;
  }

  .dex-era-poster-title,
  .dex-era-card.is-expanded .dex-era-poster-title,
  .dex-era-card.is-muted .dex-era-poster-title {
    display: block;
    grid-column: 1;
    grid-row: 4;
    align-self: auto;
    min-height: 29px;
    font-size: clamp(12px, 3.25vw, 15px);
    line-height: 1.05;
    text-align: left;
  }

  .dex-era-poster-statement {
    display: none !important;
  }

  .dex-era-system-map,
  .dex-era-card.is-expanded .dex-era-system-map,
  .dex-era-card.is-muted .dex-era-system-map {
    display: grid;
    grid-column: 1;
    grid-row: 5;
    min-height: 0;
    gap: 3px;
    align-self: stretch;
    margin-top: 9px;
    padding: 6px;
    border-radius: 10px;
  }

  .dex-era-system-map::before {
    top: 14px;
    bottom: 14px;
    left: 13px;
    width: 1px;
  }

  .dex-era-system-map .dex-era-stage {
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 4px;
    min-height: 15px;
    padding: 2px 3px 2px 0;
    border: 0;
    border-radius: 5px;
    box-shadow: none;
  }

  .dex-era-system-map .dex-era-stage-marker {
    width: 12px;
    height: 12px;
    border-width: 1px;
    box-shadow: none;
  }

  .dex-era-system-map .dex-era-stage-marker span,
  .dex-era-system-map .dex-era-stage-main small,
  .dex-era-system-map .dex-era-stage-resources {
    display: none !important;
  }

  .dex-era-system-map .dex-era-stage-main strong {
    display: block;
    overflow: visible;
    font-size: clamp(7px, 2.15vw, 9px) !important;
    line-height: 1 !important;
    text-overflow: clip;
    white-space: normal;
  }

  .dex-era-poster-footer,
  .dex-era-card.is-expanded .dex-era-poster-footer,
  .dex-era-card.is-muted .dex-era-poster-footer {
    display: flex;
    grid-column: 1;
    grid-row: 6;
    justify-content: center;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 0;
  }

  .dex-era-poster-footer>span:first-child {
    display: none !important;
  }

  .dex-era-open-label i {
    width: 22px;
    height: 22px;
  }

  .dex-era-open-label i::before,
  .dex-era-open-label i::after {
    top: 10px;
    left: 6px;
    width: 10px;
  }

  .dex-era-details,
  .dex-era-card.is-expanded .dex-era-details {
    display: none;
  }

  .dex-era-mobile-reader {
    display: grid;
    grid-column: 1 / -1;
    min-width: 0;
  }

  .dex-era-mobile-panel {
    display: none;
    min-width: 0;
    margin-top: 4px;
    padding: 22px 18px;
    border: 1px solid color-mix(in srgb, var(--era-accent) 38%, transparent);
    border-radius: 18px;
    background: linear-gradient(155deg, #ffffff 0%, color-mix(in srgb, var(--era-soft) 48%, #ffffff) 100%);
    box-shadow: 0 18px 42px rgba(4, 15, 55, 0.24);
  }

  .dex-era-mobile-panel[aria-hidden="false"] {
    display: grid;
    gap: 16px;
    animation: dex-era-mobile-reader-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .dex-era-mobile-panel-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: end;
  }

  .dex-era-mobile-panel-heading span {
    grid-column: 1 / -1;
    color: var(--era-accent-dark);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .dex-era-mobile-panel-heading strong {
    color: #0f172a;
    font-family: "Inter Tight", sans-serif;
    font-size: clamp(24px, 7vw, 30px);
    letter-spacing: -0.035em;
    line-height: 1;
  }

  .dex-era-mobile-panel-heading small {
    max-width: 86px;
    color: var(--era-accent-dark);
    font-size: 9px;
    font-weight: 850;
    line-height: 1.25;
    text-align: right;
    text-transform: uppercase;
  }

  .dex-era-mobile-panel>p {
    margin: 0;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
  }

  .dex-era-mobile-stage-map {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--era-accent) 20%, transparent);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
  }

  .dex-era-mobile-stage-map .dex-era-stage {
    grid-template-columns: 26px minmax(0, 1fr) minmax(52px, auto);
    gap: 8px;
    padding: 7px 7px 7px 0;
  }

  .dex-era-mobile-stage-map .dex-era-stage-main strong {
    overflow: visible;
    font-size: 11px;
    text-overflow: clip;
    white-space: normal;
  }

  .dex-era-mobile-stage-map .dex-era-stage-main small {
    display: block;
    overflow: visible;
    font-size: 9px;
    line-height: 1.3;
    text-overflow: clip;
    white-space: normal;
  }

  .dex-era-mobile-stage-map .dex-era-stage-resources {
    max-width: 68px;
  }

  .dex-era-mobile-panel .dex-era-signals {
    justify-content: flex-start;
  }

  @keyframes dex-era-mobile-reader-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media screen and (max-width: 374px) {

  .dex-era-gallery,
  .dex-era-gallery.has-expanded-card {
    gap: 6px;
  }

  .dex-era-poster,
  .dex-era-card.is-expanded .dex-era-poster,
  .dex-era-card.is-muted .dex-era-poster {
    min-height: 242px;
    padding-right: 7px;
    padding-left: 7px;
  }
}

@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .dex-era-mobile-panel[aria-hidden="false"] {
    animation: none;
  }
}

/* Match the workflow dialogue to the currently highlighted yellow agent. */
.dex-delivery-system-section .dex-workflow-dynamic-desc {
  border-color: rgba(var(--dex-yellow-rgb), 0.72) !important;
  color: var(--dex-blue-dark) !important;
  background:
    linear-gradient(135deg, rgba(var(--dex-yellow-rgb), 0.42), rgba(var(--dex-yellow-rgb), 0.18)),
    #fffef7 !important;
  box-shadow:
    0 12px 30px rgba(var(--dex-yellow-rgb), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.dex-delivery-system-section .dex-workflow-dynamic-desc i {
  background: var(--dex-yellow) !important;
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.72),
    0 0 0 8px rgba(var(--dex-yellow-rgb), 0.22) !important;
}

.dex-delivery-system-section .dex-workflow-dynamic-desc-text {
  color: var(--dex-blue-dark) !important;
}


/* -------------------------------------------
   MOBILE FIXES FOR SUCCESS STORIES
   ------------------------------------------- */
.solution-card-item {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

@media (max-width: 768px) {
  .sol-carousel-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 0 24px 0 !important;
    border-radius: 0 !important;
  }

  .sol-carousel-card .card-accent-line {
    display: none !important;
  }

  .sol-carousel-card h3 {
    text-align: left !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
  }

  .sol-carousel-card p {
    text-align: left !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  /* Ensure the button text is perfectly vertically centered */
  .story-nav-wrap .rt-button-v1 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 48px !important;
  }
}




/* -------------------------------------------
   SUCCESS STORIES V4 LAYOUT FIXES
   ------------------------------------------- */

/* Remove any black/dark card background BEHIND the buttons */
.story-nav-wrap {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.story-nav-wrap a.rt-button-v1-main {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Equalize heights for business impact cards */
.impact-editorial-layout {
  align-items: stretch !important;
}

.business-impact-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 100% !important;
}

/* Fix bottom spacing inside nav buttons completely - ONLY keep padding on the blue .rt-button-v1 */
.story-nav-wrap .rt-button-v1 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 10px !important;
  /* The actual blue padding */
}

.story-nav-wrap .rt-button-text {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 768px) {

  /* Force ALL carousel wrappers to exactly 1 column on mobile */
  .carousel-solutions-container,
  .sol-carousel-container,
  .carousel-track-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 20px !important;
  }

  .sol-carousel-card {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    padding: 0 0 24px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 0 !important;
  }

  .carousel-track-wrapper {
    animation: none !important;
    transform: none !important;
    overflow: visible !important;
  }
}


/* -------------------------------------------
   SUCCESS STORIES V6 - RESTORE WHITE BUTTONS
   ------------------------------------------- */

/* Restore the white button design for dark sections */
.sec-dark .story-nav-wrap .rt-button-v1 {
  background-color: #ffffff !important;
  border: 2px solid transparent !important;
}

.sec-dark .story-nav-wrap .rt-button-text {
  color: #1e40af !important;
}

.sec-dark .story-nav-wrap .rt-button-v1:hover {
  background-color: #fbbf24 !important;
}

.sec-dark .story-nav-wrap .rt-button-v1:hover .rt-button-text {
  color: #ffffff !important;
}


/* -------------------------------------------
   SUCCESS STORIES V7 - MAX SPECIFICITY LAYOUT FIXES
   ------------------------------------------- */
@media (max-width: 768px) {

  /* 1. business-impact-card: 2 in a row, 3rd centered */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-wrap:has(> *:nth-child(3):last-child) {
    grid-template-columns: repeat(2, 1fr) !important;
    display: grid !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-wrap:has(> *:nth-child(3):last-child)>*:nth-child(3) {
    grid-column: 1 / -1 !important;
    width: 50% !important;
    justify-self: center !important;
    margin: 0 auto !important;
  }

  /* 2. sol-carousel-card: exactly 1 in a row (flex column) */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .carousel-track-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    animation: none !important;
    transform: none !important;
  }

  /* 3. story-nav-wrap button inner spacing and height reduction */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap .rt-button-v1 {
    padding: 4px 8px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap .rt-button-text {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
  }

  /* Global button inside margin space remove */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-button-v1-main {
    min-height: 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-button-v1 {
    min-height: 0 !important;
  }
}


/* -------------------------------------------
   SUCCESS STORIES V8 - HERO BUTTON, P TAG GAP, NAV BUTTON HEIGHTS
   ------------------------------------------- */
@media (max-width: 768px) {

  /* 1. Fix massive Explore Solutions button on mobile */
  html body .rt-hero-v1-button-wrap .rt-button-v1-main .rt-button-v1,
  html body .rt-hero-v1-button-wrap a.rt-button-v1-main:only-child .rt-button-v1 {
    height: auto !important;
    min-height: 38px !important;
    padding: 6px 12px !important;
    width: auto !important;
    max-width: max-content !important;
    margin: 0 auto !important;
  }

  html body .rt-hero-v1-button-wrap .rt-button-v1-main .rt-button-text {
    font-size: 13px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 2. Reduce excessive bottom margin on sol-carousel-card paragraphs */
  html body .sol-carousel-card p {
    margin-bottom: 6px !important;
  }

  html body .sol-carousel-card p:last-child {
    margin-bottom: 0 !important;
  }

  /* 3. Force equal heights on the two story-nav-wrap buttons */
  html body .story-nav-wrap {
    align-items: stretch !important;
  }

  html body .story-nav-wrap a.rt-button-v1-main {
    height: auto !important;
    display: flex !important;
  }

  html body .story-nav-wrap .rt-button-v1 {
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
  }
}


/* -------------------------------------------
   SUCCESS STORIES V9 - PILLARS GRID & P GAP
   ------------------------------------------- */
@media (max-width: 768px) {

  /* 1. pillars-flat-grid: 2 in a row, 3rd centered */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .pillars-flat-grid:has(> *:nth-child(3):last-child) {
    grid-template-columns: repeat(2, 1fr) !important;
    display: grid !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .pillars-flat-grid:has(> *:nth-child(3):last-child)>*:nth-child(3) {
    grid-column: 1 / -1 !important;
    width: 50% !important;
    justify-self: center !important;
    margin: 0 auto !important;
  }

  /* 2. MAX SPECIFICITY: Reduce excessive bottom margin on sol-carousel-card paragraphs */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card p {
    margin-bottom: 6px !important;
    margin-top: 6px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card p:first-of-type {
    margin-top: 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card p:last-of-type {
    margin-bottom: 0 !important;
  }
}


/* -------------------------------------------
   SUCCESS STORIES V10 - MAX SPECIFICITY NAV HEIGHTS & H3 CENTER
   ------------------------------------------- */
@media (max-width: 768px) {

  /* 1. Center solution-card-item h3 */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-card-item h3 {
    text-align: center !important;
  }

  /* 2. MAX SPECIFICITY: Force equal heights on the two story-nav-wrap buttons */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap {
    align-items: stretch !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap a.rt-button-v1-main {
    height: auto !important;
    display: flex !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap .rt-button-v1 {
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
  }
}


/* -------------------------------------------
   SUCCESS STORIES V11 - ABSOLUTE OVERRIDES
   ------------------------------------------- */
@media (max-width: 768px) {

  /* Center solution h3 */
  html body .solution-card-item h3,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-card-item h3 {
    text-align: center !important;
    width: 100% !important;
  }

  /* ERADICATE sol-carousel-card p gap */
  html body .sol-carousel-card p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card p {
    margin-bottom: 4px !important;
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 0 !important;
  }

  /* Force NAV buttons to EXACTLY match height */
  html body .story-nav-wrap,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap {
    align-items: stretch !important;
    display: flex !important;
    flex-direction: row !important;
  }

  html body .story-nav-wrap a.rt-button-v1-main,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap a.rt-button-v1-main {
    flex: 1 1 50% !important;
    display: flex !important;
    height: auto !important;
    align-items: stretch !important;
  }

  html body .story-nav-wrap .rt-button-v1,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap .rt-button-v1 {
    flex: 1 !important;
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }
}


/* -------------------------------------------
   SUCCESS STORIES V12 - MISSING BLUE BACKGROUND FIX
   ------------------------------------------- */
@media (max-width: 768px) {

  /* 1. Guarantee Explore Solutions button has a blue background */
  html body .rt-hero-v1-button-wrap .rt-button-v1,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap .rt-button-v1 {
    background-color: #2563eb !important;
    border-radius: 12px !important;
  }

  html body .rt-hero-v1-button-wrap .rt-button-v1-main:hover .rt-button-v1,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap .rt-button-v1-main:hover .rt-button-v1 {
    background-color: #fbbf24 !important;
  }

  /* 2. Guarantee story-nav-wrap buttons have a blue background in light sections */
  html body .story-nav-wrap .rt-button-v1,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap .rt-button-v1 {
    background-color: #2563eb !important;
    border-radius: 12px !important;
  }

  html body .story-nav-wrap a.rt-button-v1-main:hover .rt-button-v1,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap a.rt-button-v1-main:hover .rt-button-v1 {
    background-color: #fbbf24 !important;
  }
}

/* Guarantee for DESKTOP as well just in case */
html body .rt-hero-v1-button-wrap .rt-button-v1 {
  background-color: #2563eb !important;
  border-radius: 12px !important;
}

html body .story-nav-wrap .rt-button-v1 {
  background-color: #2563eb !important;
  border-radius: 12px !important;
}

html body .story-nav-wrap a.rt-button-v1-main {
  background-color: transparent !important;
}

html body .rt-hero-v1-button-wrap a.rt-button-v1-main {
  background-color: transparent !important;
}


/* -------------------------------------------
   SUCCESS STORIES V13 - SEC-DARK BUTTONS FIX
   ------------------------------------------- */
/* Override V12 to restore white buttons with blue text in dark sections */
html body .sec-dark .story-nav-wrap .rt-button-v1,
html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sec-dark .story-nav-wrap .rt-button-v1 {
  background-color: #ffffff !important;
  border: 2px solid transparent !important;
}

html body .sec-dark .story-nav-wrap .rt-button-text,
html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sec-dark .story-nav-wrap .rt-button-text {
  color: #1e40af !important;
}

/* Hover state for dark sections */
html body .sec-dark .story-nav-wrap a.rt-button-v1-main:hover .rt-button-v1,
html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sec-dark .story-nav-wrap a.rt-button-v1-main:hover .rt-button-v1 {
  background-color: #fbbf24 !important;
}

html body .sec-dark .story-nav-wrap a.rt-button-v1-main:hover .rt-button-text,
html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sec-dark .story-nav-wrap a.rt-button-v1-main:hover .rt-button-text {
  color: #ffffff !important;
}

/* -------------------------------------------
   AI & ML MOBILE OVERRIDES V14 (MAX SPECIFICITY)
   ------------------------------------------- */
@media (max-width: 768px) {

  /* 1. section-subtitle ::after spacing fix */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .section-subtitle {
    position: relative !important;
    padding-bottom: 24px !important;
    margin-bottom: 20px !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .section-subtitle::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80px !important;
    height: 4px !important;
    background: linear-gradient(90deg, #2563eb, #fbbf24) !important;
    border-radius: 4px !important;
  }

  /* 2. capability-card h3 small & compact heading for mobile */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .capability-card h3,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .capability-card .cap-title,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .cap-title {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
    font-weight: 700 !important;
    word-break: break-word !important;
    hyphens: auto !important;
    text-transform: uppercase !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .capability-card p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .capability-card .cap-desc,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .cap-desc {
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  /* 3. industry-card-custom 2-column compact grid */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .industry-card-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .industry-card-custom {
    padding: 10px 8px !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    align-items: center !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .industry-card-custom h3,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .industry-card-custom .ind-title,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .ind-title {
    font-size: 11px !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .industry-card-custom p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .industry-card-custom .ind-desc,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .ind-desc {
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  /* 4. sol-carousel-card 2-column tech stack compact grid (OVERRIDE 1-column flex rule!) */
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .carousel-solutions-container .carousel-track-wrapper,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .carousel-track-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    animation: none !important;
    transform: none !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card {
    padding: 8px 12px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card img {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }

  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card h3 {
    font-size: 11px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }
}

/* -------------------------------------------
   SOFTWARE DEVELOPMENT STAGE VISUAL SVG FIXES
   ------------------------------------------- */
html body .sd-stage-visual,
html body .sd-stage-visual svg,
html body .sd-reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

html body .sd-draw {
  stroke-dashoffset: 0 !important;
  transition: stroke-dashoffset 1s ease !important;
}

html body .sd-fill {
  opacity: 1 !important;
  visibility: visible !important;
}

html body .sd-flow,
html body .sd-path {
  stroke-dasharray: 8 4;
  animation: sdFlow 2s linear infinite;
}

/* -------------------------------------------
   MATERIALS DETAILED PAGE MOBILE FIXES
   ------------------------------------------- */
@media (max-width: 768px) {
  html body .preview-main-container {
    padding-top: 80px !important;
    margin-top: 20px !important;
  }

  html body #inline-lead-form-container {
    padding: 30px 16px !important;
  }
}

html body #inline-lead-form-container {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

html body #inline-download-form,
html body #inline-thank-you {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Added for sol-carousel-card mobile view fix in success stories */
@media screen and (max-width: 767px) {

  .sol-carousel-card,
  html body .sol-carousel-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    background-color: #f8fafc !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .carousel-track-wrapper,
  .sol-carousel-track,
  .auto-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
}

/* V2 OVERRIDE for sol-carousel-card mobile view fix in success stories */
@media screen and (max-width: 767px) {

  html body .carousel-track-wrapper,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .carousel-solutions-container .carousel-track-wrapper,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .carousel-track-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
    /* compact spacing */
  }

  html body .sol-carousel-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    background-color: #f8fafc !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }
}

/* V3 OVERRIDE to hide the second p tag in sol-carousel-card on mobile */
@media screen and (max-width: 767px) {

  html body .sol-carousel-card p:not(:first-of-type),
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card p:not(:first-of-type) {
    display: none !important;
  }
}

/* ========================================= */
/* HOVER & MOBILE NAV BUTTON FIXES */
/* ========================================= */

/* Guarantee hover states globally for story nav only */
html body .story-nav-wrap a.rt-button-v1-main:hover,
html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap a.rt-button-v1-main:hover,
html body .rt-hero-v1-button-wrap a.rt-button-v1-main:hover,
html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap a.rt-button-v1-main:hover {
  transform: none !important;
  box-shadow: none !important;
}

html body .story-nav-wrap a.rt-button-v1-main:hover .rt-button-v1,
html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap a.rt-button-v1-main:hover .rt-button-v1 {
  background-color: #fbbf24 !important;
  border-color: #fbbf24 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Explore Solutions (Hero) Button - Yellow Hover */
html body .rt-hero-v1-button-wrap a.rt-button-v1-main:hover .rt-button-v1,
html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap a.rt-button-v1-main:hover .rt-button-v1 {
  background-color: #fbbf24 !important;
  /* Yellow background */
  border-color: #fbbf24 !important;
  /* Yellow border */
  color: #ffffff !important;
  box-shadow: none !important;
  /* No shadow */
  transform: none !important;
  /* No pop-out movement */
}

html body .rt-hero-v1-button-wrap a.rt-button-v1-main:hover .rt-button-text,
html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .rt-hero-v1-button-wrap a.rt-button-v1-main:hover .rt-button-text {
  color: #ffffff !important;
}

html body .story-nav-wrap a.rt-button-v1-main:hover .rt-button-text,
html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap a.rt-button-v1-main:hover .rt-button-text {
  color: #ffffff !important;
}

/* Mobile specific styling for story-nav-wrap */

html body .story-nav-wrap,
html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap {
  gap: 8px !important;
  justify-content: space-between !important;
}


/* ========================================= */
/* MOBILE CAROUSEL CARD SIZE & 2-LINE CLAMP  */
/* ========================================= */
@media screen and (max-width: 767px) {

  html body .sol-carousel-card h3,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card h3 {
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }

  html body .sol-carousel-card p:first-of-type,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card p:first-of-type {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 0 !important;
  }
}

/* OVERRIDE MOBILE NAV BUTTON SIZE FIX */
@media (max-width: 768px) {

  html body .story-nav-wrap,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap {
    justify-content: space-between !important;
    gap: 8px !important;
  }

  /* Max Specificity to crush any remaining stretch rules */
  html body .story-nav-wrap.story-nav-wrap a.rt-button-v1-main.rt-button-v1-main,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap.story-nav-wrap a.rt-button-v1-main.rt-button-v1-main {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    width: 95px !important;
    /* VERY SMALL IDENTICAL WIDTH */
    max-width: 95px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 32px !important;
    /* VERY SMALL HEIGHT */
    display: inline-flex !important;
  }

  html body .story-nav-wrap.story-nav-wrap a.rt-button-v1-main.rt-button-v1-main .rt-button-v1,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap.story-nav-wrap a.rt-button-v1-main.rt-button-v1-main .rt-button-v1 {
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  html body .story-nav-wrap.story-nav-wrap a.rt-button-v1-main.rt-button-v1-main .rt-button-text,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap.story-nav-wrap a.rt-button-v1-main.rt-button-v1-main .rt-button-text {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    /* CRUSHED line-height */
  }

  /* Guarantee desktop text is hidden on mobile and mobile text is shown */
  html body .story-nav-wrap span.desktop-nav-text,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap span.desktop-nav-text {
    display: none !important;
  }

  html body .story-nav-wrap span.mobile-nav-text,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .story-nav-wrap span.mobile-nav-text {
    display: inline !important;
  }
}

/* ========================================= */
@media screen and (max-width: 768px) {

  /* Hide challenge highlights grid on mobile */
  html body .challenge-highlights-grid,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .challenge-highlights-grid {
    display: none !important;
  }

  /* Make embedded impact item elements display on a single line */
  html body .embedded-impact-item,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
  }

  html body .embedded-impact-number,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-number {
    margin-bottom: 0 !important;
    flex: 0 0 auto !important;
  }

  html body .embedded-impact-desc,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .embedded-impact-desc {
    flex: 1 1 auto !important;
  }

  /* 1. solution-card-item: Only heading is enough */
  html body .solution-card-item p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-card-item p,
  html body .solution-card-item ul,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-card-item ul {
    display: none !important;
  }

  html body .solution-card-item h3,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .solution-card-item h3 {
    margin-bottom: 0 !important;
  }

  /* 2. business-impact-card: Only heading, pretty design */
  html body .business-impact-card p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .business-impact-card p {
    display: none !important;
  }

  html body .business-impact-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .business-impact-card {
    padding: 16px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: #ffffff !important;
    min-height: 0 !important;
  }

  html body .business-impact-card h4,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .business-impact-card h4 {
    margin-bottom: 0 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  html body .sec-dark .business-impact-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sec-dark .business-impact-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  /* 3. Space above section-category-badge (except hero) */
  html body main section:not(.rt-hero-v1) .section-category-badge,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body main section:not(.rt-hero-v1) .section-category-badge {
    margin-top: 40px !important;
  }

  /* 4. Space above dex-contact-inner dex-form-workspace-card */
  html body .w-layout-blockcontainer.rt-container.w-container.dex-contact-inner.dex-form-workspace-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .w-layout-blockcontainer.rt-container.w-container.dex-contact-inner.dex-form-workspace-card {
    margin-top: 40px !important;
  }

  /* 5. editorial-paragraph-wrapper: Only first paragraph */
  html body .editorial-paragraph-wrapper p:not(:first-of-type),
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .editorial-paragraph-wrapper p:not(:first-of-type) {
    display: none !important;
  }

  /* 6. sol-carousel-card: Pretty design, 3-line clamp, larger heading */
  html body .sol-carousel-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card {
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    padding: 20px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  html body .sec-dark .sol-carousel-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sec-dark .sol-carousel-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  html body .sol-carousel-card h3,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card h3 {
    font-size: 18px !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  html body .sol-carousel-card p:first-of-type,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card p:first-of-type {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    /* Forces roughly 30 words */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

/* <--- Added missing closing brace for @media screen and (max-width: 768px) */

/* ========================================= */
/* EXACT WORD COUNT TRUNCATION HANDLING      */
/* ========================================= */

.dex-text-desktop {
  display: inline;
}

.dex-text-mobile {
  display: none;
}

@media (max-width: 768px) {

  html body .dex-text-desktop,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .dex-text-desktop {
    display: none !important;
  }

  html body .dex-text-mobile,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .dex-text-mobile {
    display: inline !important;
  }

  /* Hide paragraph content inside relevant-story-info on mobile */
  html body .relevant-story-info p,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .relevant-story-info p {
    display: none !important;
  }

  /* Hide text that follows <span class="mobile-br"></span> */
  html body .hide-on-mobile,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .hide-on-mobile {
    display: none !important;
  }

  /* Reduce padding and enforce auto height to remove unwanted bottom space on mobile */
  html body .sol-carousel-card,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card {
    padding: 16px 20px 16px 20px !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: flex-start !important;
  }

  html body .sol-carousel-card p:first-of-type,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card p:first-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    /* Overrides the 150px global min-height */
    height: auto !important;
  }

}

/* ========================================= */
/* GLOBAL OVERRIDE: NO ELLIPSIS & FORMATTING */
/* ========================================= */

/* Hide all secondary paragraphs globally so only the exact word-count paragraph shows */
html body .sol-carousel-card p:not(:first-of-type),
html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card p:not(:first-of-type) {
  display: none !important;
}

/* Ensure headings wrap naturally */
html body .sol-carousel-card h3,
html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card h3 {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
}

/* Ensure paragraph wraps naturally and applies justified text with hyphens */
html body .sol-carousel-card p:first-of-type,
html:not(.dex-home-page):not([data-dex-docs-header="true"]) body .sol-carousel-card p:first-of-type {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  text-align: justify !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  margin-bottom: 0 !important;
}

/* Desktop hero fold: reveal a useful portion of the delivery console on load. */
@media screen and (min-width: 992px) {
  html.dex-home-page .rt-hero-v1-heading-main {
    gap: 30px !important;
    transform: translateY(-220px) !important;
  }

  html.dex-home-page .dex-project-workspace-shell {
    margin-top: -6px !important;
  }

  html.dex-home-page .rt-hero-v1-heading-wrap .dex-hero-badge {
    margin-bottom: 12px !important;
  }

  html.dex-home-page .dex-hero-intro-copy {
    margin-top: 12px !important;
  }

  html.dex-home-page .rt-hero-v1-button-wrap {
    margin-top: 18px !important;
  }

  html.dex-home-page .dex-hero-workflow-visual {
    padding-top: 22px !important;
  }

  html.dex-home-page .dex-hero-workflow-top {
    gap: 14px !important;
    margin-bottom: 18px !important;
  }

  html.dex-home-page .dex-hero-workflow-logo,
  html.dex-home-page .dex-hero-workflow-logo img {
    width: 54px !important;
    height: 54px !important;
  }

  html.dex-home-page .dex-hero-workflow-top strong {
    font-size: clamp(29px, 2.55vw, 40px) !important;
    line-height: 1.05 !important;
  }

  html.dex-home-page .dex-delivery-surface .dex-project-flow {
    padding: 18px 20px 0 !important;
  }

  html.dex-home-page .dex-delivery-surface .dex-project-flow-row {
    gap: 10px !important;
  }

  html.dex-home-page .dex-delivery-surface .dex-project-flow-card {
    min-height: 132px !important;
    gap: 5px !important;
    padding: 12px 9px 10px !important;
  }

  html.dex-home-page .dex-delivery-surface .dex-project-flow-card>span {
    width: 56px !important;
    height: 56px !important;
  }

  html.dex-home-page .dex-delivery-surface .dex-hero-workflow-status {
    padding: 12px 26px 26px !important;
  }

  html.dex-home-page .dex-agentic-ai-marker {
    top: 145px !important;
    right: -20px !important;
  }
}

/* Homepage header seam: preserve normal scrolling while hiding the paint edge. */
html.dex-home-page {
  overscroll-behavior-y: none !important;
}

html.dex-home-page body {
  overscroll-behavior-y: auto !important;
}

html.dex-home-page body>.rt-top-nav {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

html.dex-home-page body>.rt-top-nav::after {
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 3px;
  background: inherit;
  content: "";
  pointer-events: none;
}

/* Section 2 shared canvas: compact era comparison with one readable detail surface. */
.dex-era-selector-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.dex-era-gallery:has(.dex-era-canvas-reader),
.dex-era-gallery.has-expanded-card:has(.dex-era-canvas-reader) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: auto;
  gap: 16px;
}

.dex-era-selector-rail,
.dex-era-canvas-reader {
  grid-column: 1 / -1;
  min-width: 0;
}

.dex-era-selector-rail .dex-era-card,
.dex-era-selector-rail .dex-era-card.is-expanded,
.dex-era-selector-rail .dex-era-card.is-muted {
  width: auto;
  min-width: 0;
  height: 218px;
  min-height: 218px;
  max-height: 218px;
  flex: none;
  opacity: 1;
  transform: none;
  border-color: rgba(255, 255, 255, 0.42);
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(4, 15, 55, 0.18);
  transition:
    height 680ms cubic-bezier(0.16, 1, 0.3, 1),
    min-height 680ms cubic-bezier(0.16, 1, 0.3, 1),
    max-height 680ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 360ms ease,
    box-shadow 520ms ease;
}

.dex-era-selector-rail .dex-era-card.is-expanded {
  border-color: var(--era-accent);
  box-shadow:
    0 20px 46px rgba(4, 15, 55, 0.26),
    0 0 0 2px var(--era-accent);
}

.dex-era-selector-rail .dex-era-poster,
.dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster,
.dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto auto 1fr auto;
  gap: 0 12px;
  padding: 20px 22px 16px;
  transition:
    padding 680ms cubic-bezier(0.16, 1, 0.3, 1),
    grid-template-rows 680ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dex-era-selector-rail .dex-era-poster-index,
.dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster-index,
.dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-index {
  display: block;
  grid-column: 2;
  grid-row: 1;
  font-size: 9px;
}

.dex-era-selector-rail .dex-era-poster-era,
.dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster-era,
.dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-era {
  display: block;
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 11px;
  text-align: left;
}

.dex-era-selector-rail .dex-era-poster-rule {
  display: block;
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 12px 0 10px;
}

.dex-era-selector-rail .dex-era-metric-block,
.dex-era-selector-rail .dex-era-card.is-expanded .dex-era-metric-block,
.dex-era-selector-rail .dex-era-card.is-muted .dex-era-metric-block {
  display: flex;
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  justify-content: flex-start;
  margin: 0 0 4px;
}

.dex-era-selector-rail .dex-era-metric-block strong,
.dex-era-selector-rail .dex-era-card.is-muted .dex-era-metric-block strong {
  font-size: clamp(42px, 4vw, 58px);
}

.dex-era-selector-rail .dex-era-metric-block small,
.dex-era-selector-rail .dex-era-card.is-muted .dex-era-metric-block small {
  display: block;
  max-width: 82px;
  font-size: 8px;
}

.dex-era-selector-rail .dex-era-poster-title,
.dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster-title,
.dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-title {
  display: block;
  grid-column: 1 / -1;
  grid-row: 4;
  align-self: auto;
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1;
  text-align: left;
}

.dex-era-selector-rail .dex-era-poster-statement,
.dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster-statement,
.dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-statement {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height 460ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 220ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dex-era-card-insights {
  display: none;
}

.dex-era-workflow-story {
  display: none;
  min-width: 0;
}

.dex-era-workflow-kicker {
  color: var(--era-accent-dark);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.dex-era-workflow-steps {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.dex-era-workflow-step {
  display: grid;
  min-width: 0;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--era-accent) 28%, transparent);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.74);
}

.dex-era-workflow-number {
  display: grid;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  place-items: center;
  color: #ffffff;
  background: var(--era-accent);
  font-size: 8px;
  font-weight: 900;
}

.dex-era-workflow-step>span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.dex-era-workflow-step strong {
  color: #0b1220;
  font-size: 13px;
  line-height: 1.1;
}

.dex-era-workflow-step small {
  color: #111827;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
}

.dex-era-workflow-problem {
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--era-accent) 44%, transparent);
  border-left: 4px solid var(--era-accent);
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--era-soft) 82%, #ffffff);
}

.dex-era-workflow-problem small {
  color: var(--era-accent-dark);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.dex-era-workflow-difficulties {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dex-era-workflow-difficulties strong {
  display: inline-flex;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--era-accent) 45%, transparent);
  border-radius: 999px;
  color: #071120;
  background: #ffffff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1.1;
  text-transform: uppercase;
}

.dex-era-workflow-caption {
  display: block;
  align-self: end;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--era-accent) 24%, transparent);
  color: #111827;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.45;
}

.dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-system-map {
  max-height: 0;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.985);
}

.dex-era-selector-rail .dex-era-system-map {
  transition:
    max-height 620ms cubic-bezier(0.16, 1, 0.3, 1),
    min-height 620ms cubic-bezier(0.16, 1, 0.3, 1),
    margin 620ms cubic-bezier(0.16, 1, 0.3, 1),
    padding 620ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 300ms ease,
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 620ms;
}

.dex-era-selector-rail .dex-era-poster-footer,
.dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster-footer,
.dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-footer {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 6;
  align-self: end;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 9px;
}

.dex-era-selector-rail .dex-era-card.is-expanded .dex-era-open-label i::after {
  transform: rotate(0deg);
}

.dex-era-canvas-reader {
  display: grid;
  min-width: 0;
}

.dex-era-canvas {
  position: relative;
  display: none;
  min-width: 0;
  grid-template-columns: minmax(250px, 0.72fr) minmax(420px, 1.28fr);
  gap: clamp(24px, 3vw, 44px);
  padding: clamp(26px, 3vw, 42px);
  border: 1px solid color-mix(in srgb, var(--era-accent) 35%, rgba(255, 255, 255, 0.72));
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 2%, color-mix(in srgb, var(--era-soft) 72%, transparent) 0, transparent 32%),
    linear-gradient(145deg, #ffffff 0%, color-mix(in srgb, var(--era-soft) 44%, #ffffff) 100%);
  box-shadow: 0 24px 58px rgba(4, 15, 55, 0.2);
}

.dex-era-canvas-close {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: 18px;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--era-accent) 36%, transparent);
  border-radius: 50%;
  place-items: center;
  color: var(--era-accent-dark);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 20px rgba(4, 15, 55, 0.12);
  cursor: pointer;
  transition: transform 260ms ease, background-color 260ms ease, box-shadow 260ms ease;
}

.dex-era-canvas-close:hover,
.dex-era-canvas-close:focus-visible {
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(4, 15, 55, 0.2);
  transform: rotate(90deg);
}

.dex-era-canvas-close span,
.dex-era-canvas-close span::after {
  display: block;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.dex-era-canvas-close span {
  transform: rotate(45deg);
}

.dex-era-canvas-close span::after {
  transform: rotate(90deg);
}

.dex-era-canvas[aria-hidden="false"] {
  display: grid;
  animation: dex-era-canvas-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
  cursor: pointer;
}

.dex-era-canvas-summary {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.dex-era-canvas-era {
  color: var(--era-accent-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dex-era-canvas-metric {
  display: flex;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
  color: var(--era-accent-dark);
}

.dex-era-canvas-metric strong {
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(62px, 6.8vw, 96px);
  letter-spacing: -0.07em;
  line-height: 0.78;
}

.dex-era-canvas-metric small {
  max-width: 86px;
  padding-bottom: 3px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

.dex-era-canvas-summary h3 {
  margin: 15px 0 10px;
  color: #0f172a;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(30px, 3.1vw, 46px);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.dex-era-canvas-summary>p {
  margin: 0;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}

.dex-era-canvas-summary .dex-era-signals {
  justify-content: flex-start;
  margin: 15px 0;
}

.dex-era-canvas-summary .dex-era-detail-grid {
  margin-top: 0;
}

.dex-era-canvas-summary .dex-era-detail-grid>div {
  background: rgba(255, 255, 255, 0.72);
}

.dex-era-canvas-map {
  display: grid;
  min-width: 0;
  gap: 10px;
  align-content: start;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--era-accent) 20%, transparent);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.64);
}

.dex-era-canvas-map-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 0 2px 6px;
}

.dex-era-canvas-map-heading span {
  color: var(--era-accent-dark);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dex-era-canvas-map-heading strong {
  color: #172554;
  font-size: 11px;
}

.dex-era-canvas-map .dex-era-stage {
  grid-template-columns: 32px minmax(150px, 1fr) minmax(96px, auto);
  gap: 10px;
  padding: 11px 10px 11px 0;
}

.dex-era-canvas-map .dex-era-stage-main strong {
  overflow: visible;
  font-size: 13px;
  text-overflow: clip;
  white-space: normal;
}

.dex-era-canvas-map .dex-era-stage-main small {
  display: block;
  overflow: visible;
  font-size: 9.5px;
  line-height: 1.3;
  text-overflow: clip;
  white-space: normal;
}

.dex-era-canvas-map>.dex-era-workflow-story {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto 1fr auto auto;
  gap: 12px;
}

.dex-era-canvas-map .dex-era-workflow-steps {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
}

.dex-era-canvas-map .dex-era-workflow-step {
  padding: 13px 14px;
}

.dex-era-canvas-map .dex-era-workflow-step strong {
  font-size: 13px;
}

.dex-era-canvas-map .dex-era-workflow-step small {
  font-size: 9.5px;
}

.dex-era-canvas-map .dex-era-workflow-problem {
  padding: 14px 16px;
}

.dex-era-canvas-map .dex-era-workflow-problem strong {
  font-size: 11px;
}

@keyframes dex-era-canvas-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (min-width: 768px) {

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-expanded,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-muted {
    height: 712px;
    min-height: 712px;
    max-height: 712px;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-poster,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto auto minmax(300px, 1fr) auto;
    padding: clamp(24px, 2.3vw, 34px);
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-metric-block,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-expanded .dex-era-metric-block,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-muted .dex-era-metric-block {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 8px 0 5px;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-metric-block strong,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-muted .dex-era-metric-block strong {
    font-size: clamp(64px, 6vw, 92px);
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-poster-title,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster-title,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-title {
    grid-column: 1 / -1;
    grid-row: 4;
    font-size: clamp(24px, 2.4vw, 34px);
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-poster-statement,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster-statement,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-statement {
    display: block;
    max-height: 64px;
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
    opacity: 1;
    transform: translateY(0);
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-system-map {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 6;
    min-height: 300px;
    max-height: 420px;
    align-self: stretch;
    margin-top: 20px;
    padding: 14px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-workflow-story {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 6;
    min-height: 300px;
    grid-template-rows: auto 1fr auto auto;
    gap: 10px;
    align-content: start;
    margin-top: 20px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--era-accent) 20%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--era-soft) 26%, rgba(255, 255, 255, 0.72));
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-workflow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-workflow-step {
    padding: 8px;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-workflow-step small {
    display: block;
    font-size: 9.5px;
    line-height: 1.3;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-future .dex-era-system-map {
    grid-template-rows: repeat(8, minmax(0, 1fr));
    gap: 5px;
    overflow: hidden;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-future .dex-era-system-map .dex-era-stage {
    min-height: 0;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-future .dex-era-stage-marker {
    width: 24px;
    height: 24px;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-future .dex-era-stage-main strong {
    font-size: 10.5px;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-future .dex-era-agent,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-future .dex-era-agent img {
    width: 25px;
    height: 25px;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-system-map .dex-era-stage {
    grid-template-columns: 28px minmax(0, 1fr) minmax(54px, auto);
    gap: 7px;
    padding: 8px 6px 8px 0;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-system-map .dex-era-stage-main strong {
    overflow: visible;
    font-size: 12px;
    text-overflow: clip;
    white-space: normal;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-system-map .dex-era-stage-main small {
    display: none;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-poster-footer,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster-footer,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-footer {
    grid-row: 7;
  }
}

/* Expanded desktop composition: active era on the left, two alternatives stacked on the right. */
@media screen and (min-width: 901px) {
  .dex-era-gallery:has(.dex-era-canvas-reader) {
    transition:
      grid-template-columns 760ms cubic-bezier(0.16, 1, 0.3, 1),
      gap 620ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .dex-era-gallery.has-expanded-card:has(.dex-era-canvas-reader) {
    grid-template-columns: minmax(310px, 0.78fr) minmax(0, 1.72fr);
    grid-template-rows: 700px;
    gap: 16px;
    align-items: stretch;
  }

  .dex-era-gallery.has-expanded-card .dex-era-canvas-reader {
    grid-column: 2;
    grid-row: 1;
    height: 100%;
  }

  .dex-era-gallery.has-expanded-card .dex-era-canvas,
  .dex-era-gallery.has-expanded-card .dex-era-canvas[aria-hidden="false"] {
    height: 100%;
    min-height: 700px;
    grid-template-columns: minmax(240px, 0.72fr) minmax(390px, 1.28fr);
    gap: clamp(20px, 2vw, 34px);
  }

  .dex-era-gallery.has-expanded-card .dex-era-selector-rail {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    height: 700px;
    min-height: 700px;
    flex-direction: column;
    gap: 16px;
  }

  .dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-card,
  .dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-card.is-muted {
    width: 100%;
    height: calc((100% - 16px) / 2);
    min-height: 0;
    max-height: none;
    flex: 0 0 calc((100% - 16px) / 2);
    opacity: 1;
    transform: translateX(0) scale(1);
    overflow: hidden;
    transition:
      flex-basis 720ms cubic-bezier(0.16, 1, 0.3, 1),
      min-height 720ms cubic-bezier(0.16, 1, 0.3, 1),
      max-height 720ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 320ms ease 160ms,
      transform 680ms cubic-bezier(0.16, 1, 0.3, 1),
      border-color 360ms ease,
      box-shadow 520ms ease;
  }

  .dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-card.is-expanded {
    display: none;
  }

  .dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster {
    display: grid;
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto auto 1fr auto;
    padding: 22px 24px 18px;
  }

  .dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-index {
    display: block;
    grid-column: 2;
    grid-row: 1;
  }

  .dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-era {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    text-align: left;
  }

  .dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-rule {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 14px 0 12px;
  }

  .dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-card.is-muted .dex-era-metric-block {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: start;
    justify-content: flex-start;
    margin: 0 0 8px;
  }

  .dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-card.is-muted .dex-era-metric-block strong {
    font-size: clamp(48px, 4.4vw, 68px);
  }

  .dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-card.is-muted .dex-era-metric-block small {
    display: block;
  }

  .dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-title {
    display: block;
    grid-column: 1 / -1;
    grid-row: 4;
    align-self: start;
    font-size: clamp(22px, 2vw, 29px);
    line-height: 1;
    text-align: left;
  }

  .dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-statement {
    display: block;
    grid-column: 1 / -1;
    grid-row: 5;
    align-self: start;
    max-height: 64px;
    margin-top: 10px;
    opacity: 1;
    transform: none;
    font-size: 12px;
    line-height: 1.45;
  }

  .dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-card.is-muted .dex-era-card-insights {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 6;
    gap: 5px;
    align-self: start;
    margin-top: 8px;
  }

  .dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-card.is-muted .dex-era-card-insights>span {
    display: flex;
    gap: 7px;
    align-items: center;
    color: #334155;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.035em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-card.is-muted .dex-era-card-insights>span::before {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--era-accent);
    content: "";
  }

  .dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-footer {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 7;
    align-self: end;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
  }
}

@media screen and (max-width: 900px) {
  .dex-era-selector-rail {
    gap: 10px;
  }

  .dex-era-selector-rail .dex-era-poster,
  .dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster,
  .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster {
    padding: 17px 15px 14px;
  }

  .dex-era-canvas {
    grid-template-columns: minmax(0, 1fr);
  }

  .dex-era-canvas-summary .dex-era-detail-grid {
    margin-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .dex-era-selector-rail {
    gap: 7px;
  }

  .dex-era-selector-rail .dex-era-system-map {
    display: none;
  }

  .dex-era-selector-rail .dex-era-card,
  .dex-era-selector-rail .dex-era-card.is-expanded,
  .dex-era-selector-rail .dex-era-card.is-muted {
    height: 184px;
    min-height: 184px;
    max-height: 184px;
    border-radius: 15px;
  }

  .dex-era-selector-rail .dex-era-poster,
  .dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster,
  .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    padding: 12px 8px 10px;
  }

  .dex-era-selector-rail .dex-era-poster-index {
    display: none;
  }

  .dex-era-selector-rail .dex-era-poster-era,
  .dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster-era,
  .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-era {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(8px, 2.3vw, 10px);
  }

  .dex-era-selector-rail .dex-era-poster-rule {
    grid-row: 2;
    margin: 8px 0;
  }

  .dex-era-selector-rail .dex-era-metric-block,
  .dex-era-selector-rail .dex-era-card.is-expanded .dex-era-metric-block,
  .dex-era-selector-rail .dex-era-card.is-muted .dex-era-metric-block {
    grid-row: 3;
    margin: 0 0 6px;
  }

  .dex-era-selector-rail .dex-era-metric-block strong,
  .dex-era-selector-rail .dex-era-card.is-muted .dex-era-metric-block strong {
    font-size: clamp(34px, 10.2vw, 46px);
  }

  .dex-era-selector-rail .dex-era-metric-block small {
    display: none;
  }

  .dex-era-selector-rail .dex-era-poster-title,
  .dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster-title,
  .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-title {
    grid-row: 4;
    font-size: clamp(12px, 3.2vw, 15px);
    line-height: 1.05;
  }

  .dex-era-selector-rail .dex-era-poster-footer,
  .dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster-footer,
  .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-footer {
    grid-row: 5;
    justify-content: center;
    padding-top: 7px;
  }

  .dex-era-selector-rail .dex-era-poster-footer>span:first-child {
    display: none !important;
  }

  .dex-era-canvas {
    gap: 22px;
    padding: 20px 15px;
    border-radius: 20px;
  }

  .dex-era-canvas-summary h3 {
    font-size: clamp(28px, 8vw, 36px);
  }

  .dex-era-canvas-map {
    padding: 11px;
    border-radius: 15px;
  }

  .dex-era-canvas-map .dex-era-stage {
    grid-template-columns: 26px minmax(0, 1fr) minmax(50px, auto);
    gap: 7px;
    padding: 8px 6px 8px 0;
  }

  .dex-era-canvas-map .dex-era-stage-main strong {
    font-size: 11px;
  }

  .dex-era-canvas-map .dex-era-stage-main small {
    font-size: 8.5px;
  }

  .dex-era-canvas-map .dex-era-stage-resources {
    max-width: 66px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dex-era-canvas[aria-hidden="false"] {
    animation: none;
  }
}

/* Section 2 readability: reserve accent colours for structure and keep body copy dark. */
.dex-era-section .dex-era-poster-statement,
.dex-era-section .dex-era-canvas-summary>p,
.dex-era-section .dex-era-stage-main small,
.dex-era-section .dex-era-detail-grid dt,
.dex-era-section .dex-era-detail-grid dd,
.dex-era-section .dex-era-metric-block small,
.dex-era-section .dex-era-canvas-metric small,
.dex-era-section .dex-era-card-insights>span {
  color: #111827;
}

.dex-era-section .dex-era-canvas-summary>p {
  order: 2;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--era-accent) 22%, transparent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}

@media screen and (min-width: 768px) {

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-past .dex-era-poster-statement,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-present .dex-era-poster-statement,
  .dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-past.is-muted .dex-era-poster-statement,
  .dex-era-gallery.has-expanded-card .dex-era-selector-rail .dex-era-present.is-muted .dex-era-poster-statement {
    display: none;
  }
}

.dex-era-section .dex-era-detail-grid dd {
  font-size: 12px;
}

.dex-era-section .dex-era-stage-main small {
  font-weight: 700;
}

/* Section 2 final legibility pass for normal viewing distance. */
.dex-era-section .dex-era-workflow-kicker {
  font-size: 10.5px;
}

.dex-era-section .dex-era-workflow-step strong {
  font-size: 14px;
}

.dex-era-section .dex-era-workflow-step small {
  color: #080d17;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.38;
}

@media screen and (min-width: 768px) {
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-workflow-step small {
    color: #080d17;
    font-size: 10.5px;
    font-weight: 750;
    line-height: 1.35;
  }
}

.dex-era-section .dex-era-workflow-problem small {
  color: #080d17;
  font-size: 9.5px;
}

.dex-era-section .dex-era-workflow-difficulties strong {
  color: #080d17;
  font-size: 10.5px;
  padding: 8px 10px;
}

.dex-era-section .dex-era-workflow-caption {
  color: #080d17;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.45;
}

.dex-era-section .dex-era-canvas-map .dex-era-stage-main strong {
  font-size: 14px;
}

.dex-era-section .dex-era-canvas-map .dex-era-stage-main small {
  color: #080d17;
  font-size: 10.75px;
  font-weight: 750;
  line-height: 1.35;
}

.dex-era-section .dex-era-canvas-summary .dex-era-detail-grid {
  gap: 7px;
}

.dex-era-section .dex-era-canvas-summary .dex-era-detail-grid>div {
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--era-accent) 30%, transparent);
  border-left: 3px solid var(--era-accent);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
}

.dex-era-section .dex-era-canvas-summary .dex-era-detail-grid dt {
  color: #111827;
  font-size: 9.5px;
  font-weight: 900;
}

.dex-era-section .dex-era-canvas-summary .dex-era-detail-grid dd {
  color: #080d17;
  font-size: 12.5px;
  font-weight: 850;
  line-height: 1.35;
}

.dex-era-section .dex-era-canvas-summary>p {
  border-top-width: 2px;
}

.dex-era-mobile-focus {
  display: none;
}

@media screen and (max-width: 767px) {
  body.dex-era-mobile-sheet-open {
    overflow: hidden;
  }

  .dex-era-gallery:has(.dex-era-canvas-reader) .dex-era-canvas-reader {
    display: none;
  }

  .dex-era-gallery.has-expanded-card:has(.dex-era-canvas-reader) .dex-era-canvas-reader {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    grid-column: auto;
    min-width: 0;
    height: 100dvh;
    padding: 0 9px max(9px, env(safe-area-inset-bottom));
    align-items: end;
    background: rgba(3, 12, 42, 0.76);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }

  .dex-era-gallery.has-expanded-card .dex-era-canvas[aria-hidden="false"] {
    display: block;
    width: 100%;
    height: min(78dvh, 680px);
    min-height: 0;
    max-height: 78dvh;
    padding: 14px;
    overflow: hidden;
    border-radius: 24px 24px 18px 18px;
    cursor: pointer;
    animation: dex-era-mobile-sheet-in 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .dex-era-canvas[aria-hidden="false"]>.dex-era-canvas-summary,
  .dex-era-canvas[aria-hidden="false"]>.dex-era-canvas-map {
    display: none;
  }

  .dex-era-canvas[aria-hidden="false"]>.dex-era-mobile-focus {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    gap: 10px;
  }

  .dex-era-canvas-close {
    top: 13px;
    right: 13px;
    width: 32px;
    height: 32px;
  }

  .dex-era-mobile-switcher {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-right: 40px;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--era-accent) 24%, transparent);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
  }

  .dex-era-mobile-switcher button {
    min-width: 0;
    padding: 8px 5px;
    border: 0;
    border-radius: 8px;
    color: #111827;
    background: transparent;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .dex-era-mobile-switcher button[aria-pressed="true"] {
    color: #ffffff;
    background: var(--era-accent);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--era-accent) 30%, transparent);
  }

  .dex-era-mobile-focus-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 12px;
    align-items: end;
    padding: 0 3px;
  }

  .dex-era-mobile-focus-heading>span {
    grid-column: 1 / -1;
    color: var(--era-accent-dark);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .dex-era-mobile-focus-heading>div {
    display: flex;
    gap: 7px;
    align-items: end;
    color: var(--era-accent-dark);
  }

  .dex-era-mobile-focus-heading>div strong {
    font-family: "Inter Tight", sans-serif;
    font-size: clamp(46px, 15vw, 62px);
    letter-spacing: -0.07em;
    line-height: 0.82;
  }

  .dex-era-mobile-focus-heading>div small {
    max-width: 74px;
    padding-bottom: 2px;
    color: #111827;
    font-size: 8px;
    font-weight: 850;
    line-height: 1.15;
    text-transform: uppercase;
  }

  .dex-era-mobile-focus-heading h3 {
    grid-column: 1;
    margin: 0;
    color: #0b1220;
    font-family: "Inter Tight", sans-serif;
    font-size: clamp(25px, 7vw, 32px);
    letter-spacing: -0.04em;
    line-height: 0.98;
    text-align: left;
  }

  .dex-era-mobile-workflow-grid,
  .dex-era-mobile-agent-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 7px;
  }

  .dex-era-mobile-agent-grid {
    flex: 1 1 auto;
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .dex-era-mobile-workflow-grid>span,
  .dex-era-mobile-agent-grid>span {
    display: flex;
    min-width: 0;
    min-height: 60px;
    gap: 7px;
    align-items: center;
    padding: 9px;
    border: 1px solid color-mix(in srgb, var(--era-accent) 28%, transparent);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.78);
  }

  .dex-era-mobile-workflow-grid>span {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
  }

  .dex-era-mobile-workflow-grid>span i {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .dex-era-mobile-workflow-grid>span strong,
  .dex-era-mobile-workflow-grid>span small {
    grid-column: 2;
  }

  .dex-era-mobile-workflow-grid>span small {
    color: #111827;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.25;
  }

  .dex-era-mobile-workflow-grid i,
  .dex-era-mobile-agent-grid i {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    place-items: center;
    color: #ffffff;
    background: var(--era-accent);
    font-size: 7px;
    font-style: normal;
    font-weight: 900;
  }

  .dex-era-mobile-workflow-grid strong,
  .dex-era-mobile-agent-grid strong {
    overflow-wrap: anywhere;
    color: #0b1220;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.15;
  }

  .dex-era-mobile-difficulties,
  .dex-era-mobile-takeaway {
    display: grid;
    gap: 7px;
    padding: 10px 11px;
    border: 1px solid color-mix(in srgb, var(--era-accent) 38%, transparent);
    border-left: 4px solid var(--era-accent);
    border-radius: 0 11px 11px 0;
    background: color-mix(in srgb, var(--era-soft) 82%, #ffffff);
  }

  .dex-era-mobile-difficulties>small,
  .dex-era-mobile-takeaway>small {
    color: #111827;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .dex-era-mobile-difficulties>div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .dex-era-mobile-difficulties strong {
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--era-accent) 40%, transparent);
    border-radius: 999px;
    color: #080d17;
    background: #ffffff;
    font-size: 8.5px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
  }

  .dex-era-mobile-takeaway {
    margin-top: 0;
  }

  .dex-era-mobile-takeaway strong {
    color: #080d17;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
  }

  .dex-era-mobile-collapse {
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-radius: 11px;
    color: #ffffff;
    background: var(--era-accent);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: auto;
  }

  @keyframes dex-era-mobile-sheet-in {
    from {
      opacity: 0;
      transform: translateY(28px) scale(0.985);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

/* Section 2 mobile: keep era details inside the section instead of a bottom sheet. */
@media screen and (max-width: 767px) {
  .rt-ai-agents-v1:has(.dex-era-gallery.has-expanded-card) {
    position: relative;
    z-index: auto;
  }

  .dex-era-gallery.has-expanded-card:has(.dex-era-canvas-reader) .dex-era-canvas-reader {
    position: static;
    z-index: auto;
    inset: auto;
    display: grid;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    height: auto;
    margin-top: 2px;
    padding: 0;
    align-items: stretch;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .dex-era-gallery.has-expanded-card .dex-era-canvas[aria-hidden="false"] {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 15px;
    overflow: visible;
    border-radius: 22px;
    cursor: pointer;
    animation: dex-era-mobile-inline-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .dex-era-canvas[aria-hidden="false"]>.dex-era-mobile-focus {
    display: flex;
    height: auto;
    min-height: 0;
    flex-direction: column;
    gap: 10px;
  }

  .dex-era-mobile-agent-grid {
    flex: none;
    grid-template-rows: none;
    grid-auto-rows: 1fr;
  }

  /* Panels are height-matched across eras; the closing block takes up the slack. */
  .dex-era-canvas[aria-hidden="false"]>.dex-era-mobile-focus>.dex-era-mobile-takeaway {
    flex: 1 1 auto;
  }

  .dex-era-mobile-collapse {
    margin-top: 2px;
  }

  @keyframes dex-era-mobile-inline-in {
    from {
      opacity: 0;
      transform: translateY(-10px) scale(0.99);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

/* Section 2 mobile closed state: richer era previews; open state: detail only. */
@media screen and (max-width: 767px) {
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-expanded,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-muted {
    height: 258px;
    width: 100%;
    min-height: 258px;
    max-height: 258px;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    border-radius: 17px;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card::before,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card::after {
    box-sizing: border-box;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-poster,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 13px 9px 11px;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-metric-block,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-expanded .dex-era-metric-block,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-muted .dex-era-metric-block {
    display: flex;
    grid-row: 3;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 7px;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-metric-block small,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-muted .dex-era-metric-block small {
    display: block;
    max-width: 100%;
    margin-top: 1px;
    font-size: 7px;
    line-height: 1.12;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-poster-title,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster-title,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-title {
    grid-row: 4;
    font-size: clamp(13px, 3.45vw, 16px);
    line-height: 1.02;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-poster-statement,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster-statement,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-statement {
    display: -webkit-box !important;
    max-height: 48px;
    grid-column: 1;
    grid-row: 5;
    align-self: start;
    margin-top: 8px;
    overflow: hidden;
    color: #111827;
    font-size: 8.5px;
    font-weight: 750;
    line-height: 1.28;
    opacity: 1;
    transform: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-poster-footer,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-expanded .dex-era-poster-footer,
  .dex-era-gallery:not(.has-expanded-card) .dex-era-selector-rail .dex-era-card.is-muted .dex-era-poster-footer {
    grid-row: 6;
  }

  .dex-era-gallery.has-expanded-card .dex-era-selector-rail {
    display: none;
  }

  .dex-era-gallery.has-expanded-card:has(.dex-era-canvas-reader) {
    gap: 0;
  }

  .dex-era-gallery.has-expanded-card:has(.dex-era-canvas-reader) .dex-era-canvas-reader {
    margin-top: 0;
  }
}

/* ============================================================
   SUCCESS STORY - FINAL COMMON RESPONSIVE OVERRIDE
   Keep this at the VERY END of custom-theme.css
   ============================================================ */


/* ------------------------------------------------------------
   SOLUTION CARD TYPOGRAPHY - ALL DEVICES
   ------------------------------------------------------------ */

html body .solution-card-item h3,
html body .solution-card-item .solution-prose-content h3 {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

html body .solution-card-item p,
html body .solution-card-item .solution-prose-content p {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media screen and (max-width: 768px) {

  /* ========================================
       DELIVERED SOLUTIONS
       8 cards = 2 columns x 4 rows
       ======================================== */

  html body #delivered-solutions .carousel-solutions-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  html body #delivered-solutions .carousel-track-wrapper {
    display: grid !important;

    /* TWO CARDS PER ROW */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 12px !important;
    width: 100% !important;

    animation: none !important;
    transform: none !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: stretch !important;
  }


  /* Each Delivered Solution card */
  html body #delivered-solutions .sol-carousel-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    flex: none !important;

    margin: 0 !important;
    padding: 12px !important;

    height: 100% !important;
    align-self: stretch !important;

    box-sizing: border-box !important;
  }


  /* Desktop carousel has duplicated cards.
       Mobile should show ONLY the first 8 unique cards. */
  html body #delivered-solutions .carousel-track-wrapper .sol-carousel-card:nth-child(n+9) {
    display: none !important;
  }


  /* Compact heading for two-column mobile cards */
  html body #delivered-solutions .sol-carousel-card h3 {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;

    margin: 0 0 6px !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }


  /* Compact description */
  html body #delivered-solutions .sol-carousel-card p:first-of-type {
    display: block !important;

    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;

    margin: 0 !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }


  /* Do not show duplicate/secondary long description */
  html body #delivered-solutions .sol-carousel-card p:not(:first-of-type) {
    display: none !important;
  }


  /* ========================================
       OUR SOLUTION CARDS
       Fix heavy/bold typography
       ======================================== */

  html body .solution-card-item h3,
  html body .solution-card-item .solution-prose-content h3 {
    font-size: 14px !important;

    /* 700 was making it too bold */
    font-weight: 500 !important;

    line-height: 1.4 !important;
    margin-bottom: 6px !important;

    text-align: center !important;

    height: auto !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }


  html body .solution-card-item p,
  html body .solution-card-item .solution-prose-content p {
    /* Your current common CSS hides this */
    display: block !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    height: auto !important;
    overflow: visible !important;

    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;

    margin: 0 !important;

    text-align: center !important;
  }
}

/* ============================================================
   SUCCESS STORY - FINAL PROFESSIONAL MOBILE DESIGN
   IMPORTANT: KEEP THIS AT THE VERY END OF custom-theme.css
   ============================================================ */

@media screen and (max-width: 768px) {

  /* ==========================================================
     COMMON MOBILE
     ========================================================== */

  html body {
    --ss-blue: #2563eb;
    --ss-dark-blue: #1e40af;
    --ss-yellow: #fbbf24;
    --ss-text: #0f172a;
    --ss-muted: #475569;
    --ss-radius: 16px;
  }

  html body .story-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html body .section-header {
    margin-bottom: 24px !important;
  }

  html body .section-title {
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
    text-wrap: balance !important;
  }

  html body .section-category-badge {
    padding: 6px 14px !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
    border-radius: 50px !important;
  }


  /* ==========================================================
     1. DELIVERED SOLUTIONS
     EXACTLY 2 CARDS PER ROW = 4 ROWS FOR 8 CARDS
     ========================================================== */

  html body #delivered-solutions .carousel-solutions-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;

    padding: 0 !important;
    margin: 0 !important;

    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  html body #delivered-solutions .carousel-track-wrapper {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 12px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    animation: none !important;
    transform: none !important;

    overflow: visible !important;
    align-items: stretch !important;
  }


  /* Hide duplicated desktop carousel cards */
  html body #delivered-solutions .sol-carousel-card:nth-child(n+9),

  html body #delivered-solutions .esol-carousel-card:nth-child(n+9),

  html body #delivered-solutions .dex-mobile-clone {

    display: none !important;
  }


  /* ==========================================================
     DELIVERED SOLUTION CARD DESIGN
     ========================================================== */

  html body #delivered-solutions .sol-carousel-card,
  html body #delivered-solutions .esol-carousel-card {

    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 100% !important;
    min-height: 205px !important;

    flex: none !important;

    padding: 14px !important;
    margin: 0 !important;

    overflow: hidden !important;

    border:
      1px solid rgba(37, 99, 235, 0.14) !important;

    border-radius: 16px !important;

    background:
      radial-gradient(circle at 100% 0%,
        rgba(251, 191, 36, .12),
        transparent 35%),
      linear-gradient(145deg,
        #ffffff 0%,
        #f8fbff 100%) !important;

    box-shadow:
      0 10px 24px rgba(15, 23, 42, .08),
      inset 0 1px 0 rgba(255, 255, 255, .8) !important;

    transition:
      transform .2s ease,
      box-shadow .2s ease,
      border-color .2s ease !important;
  }


  /* top gradient line */
  html body #delivered-solutions .sol-carousel-card::before,

  html body #delivered-solutions .esol-carousel-card::before {

    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 3px !important;

    background:
      linear-gradient(90deg,
        #2563eb,
        #60a5fa,
        #fbbf24) !important;
  }


  /* decorative glow */
  html body #delivered-solutions .sol-carousel-card::after,

  html body #delivered-solutions .esol-carousel-card::after {

    content: "" !important;

    position: absolute !important;

    width: 90px !important;
    height: 90px !important;

    right: -45px !important;
    bottom: -45px !important;

    border-radius: 50% !important;

    background:
      radial-gradient(circle,
        rgba(37, 99, 235, .10),
        transparent 70%) !important;

    pointer-events: none !important;
  }


  html body #delivered-solutions .sol-carousel-card:active,

  html body #delivered-solutions .esol-carousel-card:active {

    transform:
      translateY(-3px) scale(.985) !important;

    border-color:
      rgba(37, 99, 235, .34) !important;

    box-shadow:
      0 15px 30px rgba(37, 99, 235, .14),
      0 4px 10px rgba(251, 191, 36, .10) !important;
  }


  /* small accent line */

  html body #delivered-solutions .card-accent-line {

    display: block !important;

    width: 35px !important;
    height: 3px !important;

    margin:
      2px 0 10px !important;

    border-radius:
      50px !important;

    background:
      linear-gradient(90deg,
        #2563eb,
        #fbbf24) !important;
  }


  /* ==========================================================
     DELIVERED SOLUTION TITLE
     JS WILL FORCE EXACTLY 3 LINES
     ========================================================== */

  html body #delivered-solutions .sol-carousel-card h3,

  html body #delivered-solutions .esol-carousel-card h3 {

    display: block !important;

    width: 100% !important;

    min-height:
      calc(3 * 1.35em) !important;

    height: auto !important;

    margin:
      0 0 8px !important;

    padding: 0 !important;

    font-size:
      12.5px !important;

    font-weight:
      600 !important;

    line-height:
      1.35 !important;

    color:
      #0f172a !important;

    text-align:
      left !important;

    letter-spacing:
      -0.01em !important;

    white-space:
      normal !important;

    overflow:
      visible !important;

    text-overflow:
      clip !important;

    -webkit-line-clamp:
      unset !important;

    -webkit-box-orient:
      initial !important;
  }


  /* JS generated 3 lines */

  html body #delivered-solutions h3.dex-exact-three-lines {

    display: grid !important;

    grid-template-rows:
      repeat(3, auto) !important;

    row-gap:
      0 !important;

    min-height:
      calc(3 * 1.35em) !important;
  }


  html body #delivered-solutions h3.dex-exact-three-lines .dex-title-line {

    display:
      block !important;

    width:
      100% !important;

    white-space:
      nowrap !important;

    overflow:
      visible !important;

    text-overflow:
      clip !important;
  }


  /* description */

  html body #delivered-solutions .sol-carousel-card p:first-of-type,

  html body #delivered-solutions .esol-carousel-card p:first-of-type {

    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size:
      10.5px !important;

    font-weight:
      400 !important;

    line-height:
      1.48 !important;

    color:
      #475569 !important;

    text-align:
      left !important;

    white-space:
      normal !important;

    overflow:
      visible !important;

    text-overflow:
      clip !important;

    -webkit-line-clamp:
      unset !important;

    hyphens:
      none !important;
  }


  /* Hide second long repeated paragraph */

  html body #delivered-solutions .sol-carousel-card p:not(:first-of-type),

  html body #delivered-solutions .esol-carousel-card p:not(:first-of-type) {

    display:
      none !important;
  }


  /* ==========================================================
     2. OUR SOLUTION
     PROFESSIONAL 2 COLUMN MOBILE CARDS
     ========================================================== */

  html body .solution-prose-wrap,
  html body .intervention-timeline-wrap {

    display:
      grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap:
      12px !important;

    width:
      100% !important;

    margin-top:
      18px !important;
  }


  html body .solution-card-item,
  html body .intervention-step-item {

    position:
      relative !important;

    overflow:
      hidden !important;

    isolation:
      isolate !important;

    width:
      100% !important;

    min-width:
      0 !important;

    min-height:
      175px !important;

    height:
      100% !important;

    padding:
      16px 12px 14px !important;

    margin:
      0 !important;

    gap:
      8px !important;

    border:
      1px solid rgba(255, 255, 255, .17) !important;

    border-radius:
      16px !important;

    background:
      radial-gradient(circle at 92% 5%,
        rgba(251, 191, 36, .18),
        transparent 32%),
      linear-gradient(145deg,
        rgba(37, 99, 235, .30),
        rgba(11, 38, 65, .42)) !important;

    box-shadow:
      0 12px 28px rgba(7, 22, 48, .18),
      inset 0 1px 0 rgba(255, 255, 255, .10) !important;

    backdrop-filter:
      blur(8px) !important;

    -webkit-backdrop-filter:
      blur(8px) !important;

    transition:
      transform .2s ease,
      box-shadow .2s ease,
      border-color .2s ease !important;
  }


  /* top blue/yellow line */

  html body .solution-card-item::before,
  html body .intervention-step-item::before {

    content: "" !important;

    position:
      absolute !important;

    left:
      0 !important;

    top:
      0 !important;

    width:
      100% !important;

    height:
      3px !important;

    background:
      linear-gradient(90deg,
        #2563eb,
        #60a5fa,
        #fbbf24) !important;
  }


  html body .solution-card-item:active,
  html body .intervention-step-item:active {

    transform:
      translateY(-3px) scale(.975) !important;

    border-color:
      rgba(251, 191, 36, .55) !important;

    box-shadow:
      0 16px 32px rgba(7, 22, 48, .25) !important;
  }


  /* Number */

  html body .solution-card-item .solution-prose-num,

  html body .intervention-step-num {

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    width:
      38px !important;

    height:
      38px !important;

    min-width:
      38px !important;

    margin:
      0 auto 3px !important;

    border-radius:
      12px !important;

    background:
      linear-gradient(145deg,
        #fde68a,
        #fbbf24) !important;

    color:
      #172554 !important;

    font-size:
      14px !important;

    font-weight:
      700 !important;

    box-shadow:
      0 7px 18px rgba(251, 191, 36, .25) !important;
  }


  html body .solution-card-item .solution-prose-content {

    width:
      100% !important;

    text-align:
      center !important;

    align-items:
      center !important;
  }


  /* Solution heading - not overly bold */

  html body .solution-card-item h3,

  html body .solution-card-item .solution-prose-content h3,

  html body .intervention-step-item h3 {

    display:
      block !important;

    width:
      100% !important;

    height:
      auto !important;

    min-height:
      2.7em !important;

    margin:
      0 0 5px !important;

    font-size:
      13.5px !important;

    font-weight:
      600 !important;

    line-height:
      1.35 !important;

    color:
      #ffffff !important;

    text-align:
      center !important;

    overflow:
      visible !important;

    -webkit-line-clamp:
      unset !important;
  }


  /* Restore solution description */

  html body .solution-card-item p,

  html body .solution-card-item .solution-prose-content p,

  html body .intervention-step-item p {

    display:
      block !important;

    width:
      100% !important;

    height:
      auto !important;

    margin:
      0 !important;

    font-size:
      11px !important;

    font-weight:
      400 !important;

    line-height:
      1.45 !important;

    color:
      rgba(255, 255, 255, .82) !important;

    text-align:
      center !important;

    overflow:
      visible !important;

    -webkit-line-clamp:
      unset !important;
  }


  /* ==========================================================
     3. CHALLENGE
     ========================================================== */

  html body .challenge-highlights-grid {

    display:
      grid !important;

    grid-template-columns:
      1fr !important;

    gap:
      10px !important;

    margin-top:
      18px !important;
  }


  html body .challenge-highlight-box {

    padding:
      15px 16px !important;

    border:
      1px solid rgba(37, 99, 235, .12) !important;

    border-left:
      3px solid #2563eb !important;

    border-radius:
      0 14px 14px 0 !important;

    background:
      linear-gradient(135deg,
        rgba(37, 99, 235, .06),
        #ffffff) !important;

    box-shadow:
      0 8px 20px rgba(15, 23, 42, .06) !important;

    transition:
      transform .2s ease,
      box-shadow .2s ease !important;
  }


  html body .challenge-highlight-box:active {

    transform:
      scale(.985) !important;

    box-shadow:
      0 13px 26px rgba(37, 99, 235, .12) !important;
  }


  /* ==========================================================
     4. BUSINESS IMPACT
     ========================================================== */

  html body .pillars-flat-grid,

  html body .embedded-impact-grid,

  html body .embedded-impact-wrap {

    display:
      grid !important;

    grid-template-columns:
      1fr !important;

    gap:
      10px !important;

    margin-top:
      18px !important;
  }


  html body .business-impact-card {

    position:
      relative !important;

    display:
      block !important;

    min-height:
      80px !important;

    padding:
      15px 16px 15px 28px !important;

    border:
      1px solid rgba(255, 255, 255, .15) !important;

    border-radius:
      15px !important;

    background:
      linear-gradient(135deg,
        rgba(255, 255, 255, .09),
        rgba(255, 255, 255, .035)) !important;

    box-shadow:
      0 10px 24px rgba(7, 22, 48, .14) !important;

    overflow:
      hidden !important;
  }


  html body .business-impact-card::before {

    content:
      "" !important;

    position:
      absolute !important;

    top:
      15px !important;

    bottom:
      15px !important;

    left:
      12px !important;

    width:
      5px !important;

    border-radius:
      50px !important;

    background:
      linear-gradient(#fbbf24,
        #f59e0b) !important;
  }


  html body .business-impact-card h4 {

    margin:
      0 0 4px !important;

    font-size:
      14px !important;

    font-weight:
      600 !important;

    color:
      #fbbf24 !important;

    text-align:
      left !important;
  }


  html body .business-impact-card p {

    display:
      block !important;

    margin:
      0 !important;

    font-size:
      11.5px !important;

    font-weight:
      400 !important;

    line-height:
      1.4 !important;

    color:
      rgba(255, 255, 255, .82) !important;

    text-align:
      left !important;
  }


  /* ==========================================================
     SCROLL REVEAL ANIMATION
     ========================================================== */

  html body .dex-mobile-reveal {

    opacity:
      0;

    transform:
      translateY(15px) scale(.985);

    transition:
      opacity .5s cubic-bezier(.22, 1, .36, 1),
      transform .5s cubic-bezier(.22, 1, .36, 1) !important;
  }


  html body .dex-mobile-reveal.dex-in-view {

    opacity:
      1;

    transform:
      translateY(0) scale(1);
  }

}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

  .dex-mobile-reveal {

    opacity:
      1 !important;

    transform:
      none !important;

    transition:
      none !important;
  }
}

/* ============================================================
   FINAL TWO-LINE HEADING SYSTEM
   Desktop + Mobile
   Line 1 = normal
   Line 2 = gradient
   No ellipsis / no hidden words
   ============================================================ */

html body .section-title.dex-two-line-heading,
html body .unified-hero-title.dex-two-line-heading {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;

  justify-items: center !important;
  align-items: center !important;

  width: 100% !important;
  max-width: 100% !important;

  margin-left: auto !important;
  margin-right: auto !important;

  text-align: center !important;

  overflow: visible !important;

  row-gap: 5px !important;
}


/* ============================================================
   EACH HEADING LINE
   ============================================================ */

html body .dex-two-line-heading>.dex-heading-line {
  display: block !important;

  width: max-content !important;
  max-width: none !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding: 0 !important;

  white-space: nowrap !important;

  overflow: visible !important;

  text-overflow: clip !important;

  word-break: normal !important;

  overflow-wrap: normal !important;

  hyphens: none !important;

  -webkit-hyphens: none !important;

  line-height: 1.12 !important;
}


/* ============================================================
   LINE 1 - NORMAL TEXT
   ============================================================ */

html body .dex-two-line-heading>.dex-heading-normal-line {

  background: none !important;

  background-image: none !important;

  -webkit-background-clip: initial !important;

  background-clip: initial !important;

  -webkit-text-fill-color: currentColor !important;

  color: inherit !important;

  font-weight: 800 !important;
}


/* ============================================================
   LINE 2 - GRADIENT
   Keep existing gradient classes
   ============================================================ */

html body .dex-two-line-heading>.dex-heading-gradient-line {

  display: block !important;

  font-weight: 800 !important;

  white-space: nowrap !important;

  overflow: visible !important;

  text-overflow: clip !important;
}


/* ============================================================
   DESKTOP HEADING SIZE
   ============================================================ */

@media screen and (min-width: 769px) {

  html body .section-title.dex-two-line-heading {

    font-size:
      clamp(36px, 4vw, 52px) !important;

    line-height: 1.1 !important;

    row-gap: 6px !important;
  }


  html body .unified-hero-title.dex-two-line-heading {

    font-size:
      clamp(38px, 4vw, 54px) !important;

    line-height: 1.08 !important;

    row-gap: 7px !important;
  }
}


/* ============================================================
   MOBILE
   EXACTLY TWO LINES
   ============================================================ */

@media screen and (max-width: 768px) {

  html body .section-title.dex-two-line-heading {

    width: 100% !important;

    font-size:
      clamp(25px, 7.4vw, 32px) !important;

    line-height: 1.12 !important;

    row-gap: 3px !important;

    margin-bottom: 14px !important;
  }


  html body .unified-hero-title.dex-two-line-heading {

    width: 100% !important;

    font-size:
      clamp(27px, 7.7vw, 34px) !important;

    line-height: 1.1 !important;

    row-gap: 4px !important;
  }


  html body .dex-two-line-heading>.dex-heading-line {

    line-height: 1.15 !important;

    letter-spacing: -0.025em !important;
  }


  html body .dex-two-line-heading>.dex-heading-normal-line {

    font-weight: 750 !important;
  }


  html body .dex-two-line-heading>.dex-heading-gradient-line {

    font-weight: 800 !important;
  }
}

/* ============================================================
   SUCCESS STORY - REDUCE MOBILE SECTION TOP SPACING
   ============================================================ */

@media screen and (max-width: 768px) {

  /* Reduce section top/bottom spacing */
  html body main .sec-light,
  html body main .sec-dark {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }


  /* Reduce space above section badge */
  html body main section:not(.rt-hero-v1) .section-category-badge,
  html:not(.dex-home-page):not([data-dex-docs-header="true"]) body main section:not(.rt-hero-v1) .section-category-badge {

    margin-top: 20px !important;
  }


  /* Keep controlled spacing below badge */
  html body main section:not(.rt-hero-v1) .section-category-badge {
    margin-bottom: 12px !important;
  }


  /* Reduce header bottom gap too */
  html body .section-header {
    margin-bottom: 20px !important;
  }
}

@media (max-width: 767px) {

  /* Never hide real content for animation */
  #result .ind-result-chain b,
  #workflow-model .ind-model-card,
  .industry-benefit,
  .ind-principle-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* Restore previously hidden content */
  .industry-pattern,
  #healthcare .ind-health-govern,
  .ind-model-card p,
  .ind-principle-card p {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
  }

  /* Hide all contents of story-container on mobile except story-nav-wrap */
  html body .story-container:has(.story-nav-wrap) > *:not(.story-nav-wrap) {
    display: none !important;
  }

  /* Hide nav-spacer so buttons split 50/50 exactly */
  html body .story-nav-wrap .nav-spacer {
    display: none !important;
  }
}

/* --- Why choose DeX: two-column stage panel -------------------------------
   The slide artwork bakes the heading, description and pills into its left
   third. From 768px up that third is cropped away and the copy column is real
   HTML instead, so the description can be replaced per stage. Kept at the end
   of the file so the earlier .dex-choose-stage-controls and .dex-choose-stage-
   visual rules cannot win over these overrides. */
@media screen and (min-width: 768px) {
  .dex-choose-dashboard-section.dex-choose-stage-only {
    display: grid;
    grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.32fr);
    gap: clamp(20px, 2.4vw, 40px);
    align-items: center;
    padding: clamp(26px, 2.6vw, 44px) clamp(22px, 2.6vw, 46px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: clamp(26px, 3.4vw, 54px);
    background:
      radial-gradient(circle at 16% 18%, rgba(var(--dex-blue-rgb), 0.32), transparent 30%),
      radial-gradient(circle at 88% 12%, rgba(var(--dex-yellow-rgb), 0.18), transparent 24%),
      linear-gradient(135deg, #0f235c, var(--dex-blue-dark) 48%, var(--dex-blue));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
  }

  .dex-choose-stage-column {
    display: flex;
    grid-column: 1;
    grid-row: 1 / span 2;
    flex-direction: column;
    gap: clamp(18px, 1.8vw, 28px);
    min-width: 0;
  }

  .dex-choose-mobile-copy {
    display: block;
    color: var(--dex-white);
  }

  .dex-choose-mobile-eyebrow {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  /* Deliberately secondary to the stage caption, which is the live content. */
  .dex-choose-mobile-copy h2 {
    max-width: 380px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(22px, 1.72vw, 30px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.14;
  }

  .dex-choose-stage-caption {
    padding-left: clamp(14px, 1.1vw, 20px);
    border-left: 2px solid rgba(255, 255, 255, 0.28);
  }

  .dex-choose-mobile-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
  }

  .dex-choose-mobile-benefit {
    display: grid;
    min-width: 0;
    min-height: 78px;
    padding: 12px 8px;
    gap: 8px;
    align-content: center;
    justify-items: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    text-align: center;
  }

  .dex-choose-mobile-benefit strong {
    color: var(--dex-white);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
  }

  .dex-choose-mobile-benefit>span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    color: #173a91;
    background: rgba(255, 255, 255, 0.94);
  }

  .dex-choose-mobile-benefit svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Crop the artwork to its dashboard, hiding the baked copy column. */
  .dex-choose-mobile-visual-shell {
    position: relative;
    display: block;
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
  }

  .dex-choose-stage-visual {
    aspect-ratio: 1344 / 786;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    /* The crop cuts through the app shell, so the exposed edge is faded into
       the panel instead of ending on a hard vertical line. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 100%);
  }

  .dex-choose-stage-image {
    width: calc(100% * 1944 / 1344);
    transform: translateX(-30.8642%);
  }

  /* Over the artwork rather than in its own row, which left a dead band. */
  .dex-choose-stage-controls {
    position: absolute;
    bottom: clamp(8px, 0.9vw, 16px);
    left: 50%;
    grid-column: auto;
    grid-row: auto;
    margin: 0;
    transform: translateX(-50%);
  }
}

/* Between the phone layout and full desktop the two columns squeeze the
   artwork past readability, so the panel stacks instead. */
@media screen and (min-width: 768px) and (max-width: 1100px) {
  .dex-choose-dashboard-section.dex-choose-stage-only {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 28px);
  }

  .dex-choose-stage-column {
    grid-column: 1;
    grid-row: 1;
    max-width: 640px;
  }

  .dex-choose-mobile-visual-shell {
    grid-column: 1;
    grid-row: 2;
  }

  .dex-choose-mobile-copy h2 {
    max-width: 520px;
  }

  .dex-choose-mobile-benefits {
    max-width: 520px;
  }
}

/* Full desktop: the artwork covers the section end to end, as it did before the
   copy column was pulled out of it. The baked left third is masked by a scrim
   built from the artwork's own gradient (sampled #0F235C -> #1A347C), and the
   real copy sits on top of that. */
@media screen and (min-width: 1101px) {
  .dex-choose-dashboard-section.dex-choose-stage-only {
    display: block;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: clamp(24px, 2.6vw, 40px);
    background: linear-gradient(135deg, #0f235c, var(--dex-blue-dark) 48%, var(--dex-blue));
  }

  .dex-choose-dashboard-section.dex-choose-stage-only::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    /* Wide enough to cover the baked copy (ends at ~27% of the artwork), and
       clear before the floating callout cards begin at ~35%. */
    width: 35%;
    height: auto;
    border-radius: 0;
    background: linear-gradient(
      to right,
      #0f235c 0%,
      #12276a 60%,
      #17307a 88%,
      rgba(26, 52, 124, 0) 100%
    );
    filter: none;
    pointer-events: none;
  }

  .dex-choose-mobile-visual-shell {
    position: static;
    display: block;
    grid-column: auto;
    grid-row: auto;
  }

  .dex-choose-stage-visual {
    width: 100%;
    aspect-ratio: 1944 / 786;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .dex-choose-stage-image {
    width: 100%;
    transform: none;
  }

  .dex-choose-stage-column {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: clamp(30px, 3.6vw, 72px);
    grid-column: auto;
    grid-row: auto;
    width: min(31%, 440px);
    gap: clamp(16px, 1.5vw, 26px);
    transform: translateY(-50%);
  }

  .dex-choose-stage-controls {
    z-index: 4;
    bottom: clamp(12px, 1.3vw, 24px);
  }
}

/* Phone: full-bleed panel, even spacing, and the dashboard fitted to the frame.
   At this width the artwork reads as an overview only, so detail is on demand:
   press and hold magnifies it and dragging moves the magnified view. */
@media screen and (max-width: 767px) {
  .rt-choose-us-v1 .rt-container {
    padding-right: 0;
    padding-left: 0;
  }

  .dex-choose-dashboard-section.dex-choose-stage-only {
    margin: 0;
    padding: 26px 18px 22px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .dex-choose-stage-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /* The copy block carried a 22px bottom padding from the old layout, which
     opened a 44px hole between the heading and the stage title. */
  .dex-choose-mobile-copy {
    padding: 0;
  }

  .dex-choose-mobile-eyebrow {
    margin-bottom: 8px;
  }

  .dex-choose-stage-caption,
  .dex-choose-mobile-benefits {
    margin: 0;
  }

  .dex-choose-mobile-visual-shell {
    margin-top: 18px;
  }

  .dex-choose-stage-visual {
    display: none;
  }

  .dex-choose-mobile-static-frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1344 / 786;
    overflow: hidden;
    border-radius: 14px;
    background: #132e75;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
    cursor: zoom-in;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .dex-choose-mobile-static-image {
    position: static;
    display: block;
    width: calc(100% * 1944 / 1344);
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
    transform: translateX(-30.8642%) scale(1);
    transform-origin: 50% 50%;
    transition: transform 260ms ease;
    pointer-events: none;
  }

  .dex-choose-mobile-static-frame.is-zoomed {
    cursor: grabbing;
    touch-action: none;
  }

  .dex-choose-mobile-static-frame.is-zoomed .dex-choose-mobile-static-image {
    transform: translateX(-30.8642%) scale(2.9);
    transition: transform 180ms ease;
  }

  .dex-choose-mobile-reader-tools {
    display: flex;
    margin-top: 10px;
  }

  .dex-choose-mobile-reader-tools button {
    display: none;
  }

  .dex-choose-stage-controls {
    position: static;
    display: flex;
    margin: 14px auto 0;
    transform: none;
  }
}

/* --- Why choose DeX: stage chips ------------------------------------------
   The eight dots said nothing about where you are and were a poor tap target.
   Chips name each stage instead, so the control doubles as the pipeline it is
   describing. Same pattern on desktop and phone. */
.dex-choose-stage-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.dex-choose-stage-tabs::-webkit-scrollbar {
  display: none;
}

.dex-choose-stage-tabs button {
  width: auto;
  height: auto;
  flex: 0 0 auto;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(9, 26, 74, 0.42);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.86);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.dex-choose-stage-tabs button:hover,
.dex-choose-stage-tabs button:focus-visible {
  width: auto;
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(9, 26, 74, 0.62);
  color: var(--dex-white);
}

.dex-choose-stage-tabs button[aria-selected="true"] {
  width: auto;
  border-color: transparent;
  background: var(--dex-white);
  color: #0b1220;
  transform: none;
}

.dex-choose-stage-progress {
  width: clamp(120px, 16vw, 200px);
}

@media screen and (min-width: 768px) {
  .dex-choose-stage-controls {
    width: min(92%, 760px);
  }
}

@media screen and (max-width: 767px) {
  .dex-choose-stage-controls {
    width: 100%;
    align-items: stretch;
    gap: 10px;
  }

  .dex-choose-stage-progress {
    width: 96px;
    align-self: center;
  }

  /* Full-bleed row: chips run to the panel edges and scroll under the thumb. */
  .dex-choose-stage-tabs {
    justify-content: flex-start;
    margin: 0 -18px;
    padding: 2px 18px;
    scroll-padding: 0 18px;
  }

  .dex-choose-stage-tabs button {
    padding: 7px 14px;
    font-size: 11.5px;
  }
}

/* Wide: the artwork bleeds edge to edge and its callouts occupy the lower
   middle, so the chips live in the clear scrim under the copy column rather
   than on top of the dashboard. */
@media screen and (min-width: 1101px) {
  .dex-choose-stage-controls {
    left: 3.7%;
    bottom: clamp(18px, 3vw, 46px);
    width: min(31%, 440px);
    align-items: flex-start;
    gap: 10px;
    transform: none;
  }

  .dex-choose-stage-progress {
    width: 120px;
  }

  .dex-choose-stage-tabs {
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow: visible;
  }
}

/* Mid widths stack, so the chips sit under the artwork rather than over it. */
@media screen and (min-width: 768px) and (max-width: 1100px) {
  .dex-choose-stage-controls {
    position: static;
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    margin: 14px auto 0;
    align-items: center;
    transform: none;
  }

  .dex-choose-stage-tabs {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
  }
}

/* The progress bar reads as the timer for the next slide, so it spans the chip
   row rather than sitting as a short orphaned line, and its duration matches
   the 3s rotation interval in site-config.js. */
.dex-choose-stage-progress {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.dex-choose-stage-progress i.is-running {
  animation-duration: 3000ms;
}

@media screen and (min-width: 1101px) {
  .dex-choose-stage-progress {
    width: min(100%, 300px);
  }
}

@media screen and (max-width: 767px) {
  .dex-choose-stage-progress {
    width: 100%;
    max-width: none;
    align-self: stretch;
  }
}

/* --- Hero stage cards on phones -------------------------------------------
   The cards are only ~73px wide, so left-aligned contents left the icon and
   label hard against the corner with dead space beside them. Centre them, and
   bring the absolutely positioned step number along so it stays on the icon's
   shoulder rather than drifting to the card's edge. Kept at the end of the
   file so the earlier .dex-project-flow-card rules cannot win. */
@media screen and (max-width: 767px) {
  .dex-project-flow-card {
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
  }

  .dex-project-flow-card>div {
    width: 100%;
    text-align: center;
  }

  /* A 36px mark in a 73px card read as small; this fills the panel without
     crowding the label. */
  .dex-delivery-surface .dex-project-flow-card>span,
  .dex-project-flow-card>span {
    width: 42px !important;
    height: 42px !important;
  }

  /* The earlier rule pins this to the card corner with !important. */
  .dex-delivery-surface .dex-project-flow-card small,
  .dex-project-flow-card small {
    left: calc(50% - 20px) !important;
  }
}

/* --- Blueprint switcher on phones -----------------------------------------
   The switcher listed each blueprint as a full-width card, so the active one
   plus the console filled the screen and the rest sat far below. The five
   blueprints become a compact tab grid above the console — same card language
   as the rest of the site — so switching and reading happen on one screen.
   Kept at the end of the file: the earlier mobile-stack rules use !important. */
@media screen and (max-width: 767px) {
  .dex-doc-mobile-stack {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 12px 10px 12px;
  }

  .dex-doc-mobile-stack .dex-doc-switcher-head {
    grid-column: 1 / -1;
    margin-bottom: 2px;
  }

  .dex-doc-mobile-stack .dex-doc-switch,
  .dex-doc-mobile-stack .dex-doc-switch.is-active,
  .dex-doc-mobile-stack .dex-doc-switch:not(.is-active) {
    order: 1 !important;
    display: flex !important;
    min-height: 0 !important;
    /* The desktop list dims inactive rows to 0.52; at tab size that reads as
       disabled, so every tab stays legible and state is carried by fill. */
    opacity: 1 !important;
    padding: 7px 3px 6px !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(var(--dex-blue-rgb), 0.16) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 6px 16px rgba(26, 51, 102, 0.06) !important;
    text-align: center !important;
  }

  .dex-doc-mobile-stack .dex-doc-switch.is-active {
    border-color: transparent !important;
    background: var(--dex-blue) !important;
    box-shadow: 0 10px 22px rgba(var(--dex-blue-rgb), 0.28) !important;
  }

  .dex-doc-mobile-stack .dex-doc-switch-icon {
    width: 26px !important;
    height: 26px !important;
    flex: none !important;
    border-radius: 8px !important;
  }

  .dex-doc-mobile-stack .dex-doc-switch.is-active .dex-doc-switch-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--dex-white) !important;
  }

  .dex-doc-mobile-stack .dex-doc-switch.is-active .dex-doc-switch-icon svg {
    stroke: var(--dex-white) !important;
  }

  .dex-doc-mobile-stack .dex-doc-switch-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* The full document name already heads the console below. */
  .dex-doc-mobile-stack .dex-doc-switch h3 {
    display: none !important;
  }

  .dex-doc-mobile-stack .dex-doc-switch small {
    color: var(--dex-blue-dark) !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
  }

  .dex-doc-mobile-stack .dex-doc-switch.is-active small {
    color: var(--dex-white) !important;
  }

  .dex-doc-mobile-stack .dex-doc-console-stage {
    grid-column: 1 / -1;
    order: 2;
    margin-top: 4px;
  }

  .dex-doc-mobile-stack .dex-doc-console {
    border-top-color: rgba(var(--dex-blue-rgb), 0.13) !important;
    border-radius: 16px !important;
  }
}

/* ============================================================
   CORE CAPABILITIES — readability pass + mobile notification list
   Appended at the end of the file so it wins over the earlier
   repeated responsive overrides for this section.
   ============================================================ */

/* Poppins across the whole capabilities block, desktop and mobile. */
.dex-delivery-system-section .dex-core-capabilities,
.dex-delivery-system-section .dex-capabilities-header .dex-section-label,
.dex-delivery-system-section .dex-capabilities-header .dex-section-heading,
.dex-delivery-system-section .ctitle,
.dex-delivery-system-section .cpara {
  font-family: "Poppins", "Inter Tight", sans-serif !important;
}

.dex-delivery-system-section .dex-capabilities-header .dex-section-heading {
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* Desktop / tablet paragraph: no justified text, no auto-hyphenation.
   Justification plus hyphens was breaking words mid-line
   ("man-aged", "back-end", "ap-provals") and hurting readability. */
.dex-delivery-system-section .cpara {
  max-width: 236px !important;
  margin: 12px auto 0 !important;
  color: #4b5563 !important;
  font-size: clamp(11.5px, 0.92vw, 12.5px) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-align-last: auto !important;
  text-wrap: pretty !important;
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  /* Four lines at the current measure — keeps every column the same height. */
  min-height: 6em !important;
}

.dex-delivery-system-section .ctitle {
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

/* ---------- Mobile: LinkedIn-style notification list ---------- */
@media screen and (max-width: 767px) {
  .dex-delivery-system-section .dex-core-capabilities {
    padding: 26px 14px 20px !important;
  }

  .dex-delivery-system-section .dex-capabilities-timeline-line {
    display: none !important;
  }

  /* One column, rows separated by hairlines instead of a card grid. */
  .dex-delivery-system-section .dex-capabilities-timeline-nodes {
    display: block !important;
    overflow: hidden !important;
    border: 1px solid rgba(var(--dex-blue-rgb), 0.12) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(8, 18, 46, 0.06) !important;
  }

  .dex-delivery-system-section .dex-capabilities-timeline-nodes .cc {
    display: grid !important;
    grid-template-areas:
      "icon title"
      "icon para" !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    justify-items: stretch !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    padding: 14px 14px 15px !important;
    border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.1) !important;
    text-align: left !important;
    opacity: 1 !important;
    transform: none !important;
    transition: background-color 200ms ease !important;
  }

  .dex-delivery-system-section .dex-capabilities-timeline-nodes .cc:last-child {
    border-bottom: 0 !important;
  }

  /* Unread-row tint for the active item, same idea as the LinkedIn tab. */
  .dex-delivery-system-section .dex-capabilities-timeline-nodes .cc.is-active {
    background: rgba(var(--dex-blue-rgb), 0.05) !important;
    transform: none !important;
  }

  .dex-delivery-system-section .dex-capabilities-timeline-nodes .cc .cicon-wrapper {
    grid-area: icon !important;
    margin-top: 1px !important;
  }

  .dex-delivery-system-section .dex-capabilities-timeline-nodes .cc .cicon-tile {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    transform: none !important;
  }

  .dex-delivery-system-section .dex-capabilities-timeline-nodes .cc.is-active .cicon-tile {
    transform: none !important;
  }

  .dex-delivery-system-section .dex-capabilities-timeline-nodes .cc .cicon-svg svg {
    width: 21px !important;
    height: 21px !important;
  }

  /* The stacked dot and the in-card divider only make sense on the timeline. */
  .dex-delivery-system-section .dex-capabilities-timeline-nodes .cc .cicon-dot,
  .dex-delivery-system-section .dex-capabilities-timeline-nodes .cc .cdivider {
    display: none !important;
  }

  .dex-delivery-system-section .dex-capabilities-timeline-nodes .cc .ctitle {
    display: block !important;
    grid-area: title !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    color: #111827 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  .dex-delivery-system-section .dex-capabilities-timeline-nodes .cc .cpara {
    grid-area: para !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    color: #4b5563 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: left !important;
    text-align-last: auto !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
  }

  /* Rows fade in as a list rather than as scattered grid cells. */
  .dex-scroll-reveal .dex-capabilities-timeline-nodes .cc {
    opacity: 0;
    transform: translateY(10px);
  }

  .dex-scroll-reveal.is-in-view .dex-capabilities-timeline-nodes .cc {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Between 768px and 1199px the six-across timeline squeezes each column to
   ~133px, which is too narrow to read and makes the line counts diverge.
   Use three columns across that range instead. */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .dex-delivery-system-section .dex-capabilities-timeline-line {
    display: none !important;
  }

  .dex-delivery-system-section .cpara {
    font-size: 12.5px !important;
  }
}

/* Small tablets: two columns keep the measure wide enough to read. */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .dex-delivery-system-section .dex-capabilities-timeline-nodes {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 30px 24px !important;
  }

  .dex-delivery-system-section .cpara {
    max-width: 250px !important;
    min-height: 4.5em !important;
  }
}

/* Large tablets / small laptops: three columns. */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .dex-delivery-system-section .dex-capabilities-timeline-nodes {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 30px 20px !important;
  }

  .dex-delivery-system-section .cpara {
    max-width: 262px !important;
    min-height: 4.5em !important;
  }
}

/* ------------------------------------------------------------
   Core Capabilities header — align with the hero title system
   (.unified-hero-tagline / .unified-hero-title / .gradient-text)
   so this block stops reading as a generic sub-heading.
   ------------------------------------------------------------ */
/* Eyebrow mirrors the hero badge (.rt-sub-text.dex-hero-badge):
   Inter Tight 12px / 900 / 0.09em, #1e40af. */
.dex-delivery-system-section .dex-capabilities-header .dex-section-label {
  display: block !important;
  margin: 0 auto 12px !important;
  color: #1e40af !important;
  font-family: "Inter Tight", sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.09em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

/* Title mirrors the hero H1: Inter Tight at weight 500 (not Poppins 800),
   pure black, -0.017em tracking, 1.09 leading. */
.dex-delivery-system-section .dex-capabilities-header .dex-section-heading {
  max-width: 820px !important;
  margin: 0 auto !important;
  color: #000000 !important;
  font-family: "Inter Tight", sans-serif !important;
  font-size: clamp(30px, 3.6vw, 46px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.017em !important;
  line-height: 1.09 !important;
  text-align: center !important;
  text-wrap: balance !important;
}

/* Exactly the hero accent gradient (.dex-hero-title-accent). */
.dex-delivery-system-section .dex-capabilities-header .dex-heading-accent {
  background-image: linear-gradient(100deg, var(--dex-blue-dark) 0%, var(--dex-blue) 58%, #d89b00 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #2563eb !important;
}

@media screen and (max-width: 767px) {
  .dex-delivery-system-section .dex-capabilities-header .dex-section-label {
    margin-bottom: 10px !important;
    font-size: 11.5px !important;
  }

  .dex-delivery-system-section .dex-capabilities-header .dex-section-heading {
    max-width: 100% !important;
    font-size: clamp(26px, 7.4vw, 34px) !important;
    line-height: 1.12 !important;
  }
}

/* ------------------------------------------------------------
   Hero workflow: drop the small blue connector marker that sat
   in the gap after each stage card.
   Base rule: .dex-project-flow-card:not(:last-child)::after
   (custom-theme.css ~3760, resized ~7065) — a white pill with a
   45deg blue stripe. Disabled here rather than deleted so the
   original rule stays available if it is wanted back.
   ------------------------------------------------------------ */
.dex-project-flow-card:not(:last-child)::after {
  display: none !important;
  content: none !important;
}

/* Homepage partner program: real partner profiles replace the six benefit cards. */
.rt-cta-v1 .dex-partner-profiles-section {
  width: 100%;
}

.rt-cta-v1 .dex-partner-profiles-heading {
  max-width: 820px;
  margin: 0 auto clamp(24px, 3vw, 36px);
  text-align: center;
}

.rt-cta-v1 .dex-partner-profiles-heading small {
  display: block;
  color: #93c5fd;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rt-cta-v1 .dex-partner-profiles-heading h3 {
  margin: 12px 0 0;
  color: #ffffff;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.12;
  text-wrap: balance;
}

.rt-cta-v1 .dex-partner-profiles-heading h3 span {
  color: #fbbf24;
}

.rt-cta-v1 .dex-partner-profiles-heading p {
  max-width: 700px;
  margin: 14px auto 0;
  color: rgba(210, 228, 255, 0.82);
  font-size: 15px;
  line-height: 1.6;
}

.rt-cta-v1 .dex-partner-profiles-heading>a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.rt-cta-v1 .dex-partner-profiles-heading>a:hover {
  color: #fbbf24;
}

.rt-cta-v1 .dex-partner-profiles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 22px);
}

.rt-cta-v1 .dex-partner-profile-card {
  position: relative;
  display: flex;
  min-height: 360px;
  flex-direction: column;
  padding: clamp(24px, 2.5vw, 32px);
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 20px;
  color: var(--dex-text);
  background:
    radial-gradient(circle at 100% 0, rgba(var(--dex-blue-rgb), 0.08), transparent 34%),
    #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.rt-cta-v1 .dex-partner-profile-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--dex-blue), #60a5fa 72%, #fbbf24);
  content: "";
}

.rt-cta-v1 .dex-partner-profile-card:nth-child(2)::before {
  background: linear-gradient(90deg, #fbbf24, var(--dex-blue));
}

.rt-cta-v1 .dex-partner-profile-card:nth-child(3)::before {
  background: linear-gradient(90deg, var(--dex-blue-dark), #fbbf24);
}

.rt-cta-v1 .dex-partner-profile-card:hover {
  border-color: rgba(var(--dex-yellow-rgb), 0.48);
  color: var(--dex-text);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18);
  transform: translateY(-4px);
}

.rt-cta-v1 .dex-partner-profile-card:focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: 4px;
}

.rt-cta-v1 .dex-partner-profile-topline {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(var(--dex-blue-rgb), 0.1);
}

.rt-cta-v1 .dex-partner-profile-logo {
  display: grid;
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  place-items: center;
  padding: 9px;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(var(--dex-blue-rgb), 0.09);
}

.rt-cta-v1 .dex-partner-profile-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rt-cta-v1 .dex-partner-profile-region {
  align-self: flex-start;
  margin-top: 22px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--dex-text-muted);
  background: rgba(15, 23, 42, 0.045);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
}

.rt-cta-v1 .dex-partner-profile-card h4 {
  margin: 12px 0 0;
  color: var(--dex-text);
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.2;
}

.rt-cta-v1 .dex-partner-profile-card>p {
  margin: 12px 0 24px;
  color: var(--dex-text-secondary);
  font-size: 14px;
  line-height: 1.65;
}

.rt-cta-v1 .dex-partner-profile-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--dex-blue-rgb), 0.1);
  color: var(--dex-blue-dark);
  font-size: 13px;
  font-weight: 800;
}

.rt-cta-v1 .dex-partner-profile-card:hover .dex-partner-profile-link {
  color: var(--dex-blue);
}

@media screen and (max-width: 991px) {
  .rt-cta-v1 .dex-partner-profiles-heading {
    margin-bottom: 24px;
  }

  .rt-cta-v1 .dex-partner-profiles-heading h3 {
    font-size: clamp(27px, 8vw, 34px);
  }

  .rt-cta-v1 .dex-partner-profiles-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rt-cta-v1 .dex-partner-profile-card {
    min-height: 0;
    padding: 22px;
    border-radius: 16px;
  }

  .rt-cta-v1 .dex-partner-profile-card h4 {
    margin-top: 12px;
  }
}

/* About Us Dropdown Mega Menu */
.rt-top-nav .dex-header-about-dropdown .dex-header-about-content {
  grid-template-columns: minmax(0, 1fr) !important;
}

.rt-top-nav .dex-header-about-dropdown .dex-header-about-column {
  gap: 8px !important;
}

.rt-top-nav .dex-header-about-dropdown .dex-header-product-link {
  min-height: 76px !important;
}


/* ------------------------------------------------------------------
   About Us mega menu: two-card layout.

   The About dropdown carries only two items but inherited the Products
   dropdown's full-width row treatment: two 937px rows stacked at the top
   of a 492px panel, so the copy sat far left, the arrow far right, and
   most of the panel was empty.

   Recast those two as centred cards side by side. CSS only - the markup
   already provides icon / copy / arrow, and the gradient icon tiles come
   from the Products rules this dropdown also matches.

   Specificity note: the Products rules are written as
     .rt-top-nav .dex-header-products-dropdown:not(.dex-header-services-dropdown) .dex-header-products-column
   which is (0,4,0) and !important, and the About dropdown carries
   dex-header-products-dropdown as well, so it matches them all. Doubling
   up the classes here (and qualifying the link as a.) clears that;
   a plain .dex-header-about-* selector is only (0,3,0) and loses.

   Desktop only: the burger menu keeps its own list styling.
   ------------------------------------------------------------------ */
@media screen and (min-width: 992px) {
  .rt-top-nav .dex-header-products-dropdown.dex-header-about-dropdown .dex-header-products-content.dex-header-about-content {
    align-content: stretch !important;
  }

  .rt-top-nav .dex-header-products-dropdown.dex-header-about-dropdown .dex-header-products-column.dex-header-about-column {
    display: grid !important;
    height: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-items: stretch !important;
    align-content: stretch !important;
    gap: 20px !important;
  }

  /* The section label spans both cards and centres over them. */
  .rt-top-nav .dex-header-products-dropdown.dex-header-about-dropdown .dex-header-products-column.dex-header-about-column > p {
    grid-column: 1 / -1 !important;
    margin: 0 0 6px !important;
    text-align: center !important;
  }

  /* The card surface lives on the wrapper, not the anchor: the section
     links have to sit outside the main <a>, since nested anchors are
     invalid HTML. */
  .rt-top-nav .dex-header-products-dropdown.dex-header-about-dropdown .dex-header-about-card {
    display: flex !important;
    height: 100% !important;
    padding: 34px 26px 26px !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
    border: 1px solid rgba(37, 99, 235, 0.12) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, #fbfcff 0%, #f4f7ff 100%) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    text-align: center !important;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease !important;
  }

  .rt-top-nav .dex-header-products-dropdown.dex-header-about-dropdown .dex-header-about-card:hover {
    border-color: rgba(37, 99, 235, 0.34) !important;
    box-shadow: 0 12px 28px rgba(30, 64, 175, 0.13) !important;
    transform: translateY(-2px) !important;
  }

  .rt-top-nav .dex-header-products-dropdown.dex-header-about-dropdown .dex-header-about-card a.dex-header-product-link {
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    text-align: center !important;
  }

  /* The section list fills the rest of the card. */
  .rt-top-nav .dex-header-products-dropdown.dex-header-about-dropdown .dex-header-about-sections {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 0 0 !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    border-top: 1px solid rgba(37, 99, 235, 0.12) !important;
    list-style: none !important;
  }

  .rt-top-nav .dex-header-products-dropdown.dex-header-about-dropdown .dex-header-about-sections li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .rt-top-nav .dex-header-products-dropdown.dex-header-about-dropdown .dex-header-about-sections a {
    display: block !important;
    padding: 9px 12px !important;
    border-radius: 9px !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    transition: color 160ms ease, background-color 160ms ease !important;
  }

  .rt-top-nav .dex-header-products-dropdown.dex-header-about-dropdown .dex-header-about-sections a:hover {
    color: var(--dex-blue) !important;
    background: rgba(37, 99, 235, 0.07) !important;
  }

  .rt-top-nav .dex-header-products-dropdown.dex-header-about-dropdown a.dex-header-product-link > .dex-header-menu-icon {
    width: 66px !important;
    height: 66px !important;
    flex: 0 0 66px !important;
    border-radius: 18px !important;
  }

  .rt-top-nav .dex-header-products-dropdown.dex-header-about-dropdown a.dex-header-product-link > .dex-header-menu-icon svg {
    width: 30px !important;
    height: 30px !important;
  }

  .rt-top-nav .dex-header-products-dropdown.dex-header-about-dropdown a.dex-header-product-link .dex-header-product-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: center !important;
  }

  .rt-top-nav .dex-header-products-dropdown.dex-header-about-dropdown a.dex-header-product-link .dex-header-product-copy strong {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  .rt-top-nav .dex-header-products-dropdown.dex-header-about-dropdown a.dex-header-product-link .dex-header-product-copy small {
    max-width: 300px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* The arrow moves from the far right of the row to under the copy. */
  .rt-top-nav .dex-header-products-dropdown.dex-header-about-dropdown a.dex-header-product-link > i {
    position: static !important;
    margin: 2px 0 0 !important;
    transform: none !important;
  }

  .rt-top-nav .dex-header-products-dropdown.dex-header-about-dropdown a.dex-header-product-link:hover > i {
    transform: translateX(4px) !important;
  }
}

/* ==================================================================
   Comparison Venn (replaces the era gallery in .rt-ai-agents-v1)

   Runs on the section's original blue field, so the palette is
   inverted from the reference artwork: light translucent side discs
   and white copy, with the DeX core kept bright and ringed so it still
   reads as the focal point against a blue ground.

   GEOMETRY, from a 1520x900 reference:
     sides  640 wide, flush to each edge  -> 42.11%
     core   680 wide, centred             -> 44.74%
   The core covers 220px of each side disc, leaving a 420px crescent for
   the side content and a clear 220px band for the COMMON callout in
   between. Three bands, none of which overlap:
     side copy    80 - 380
     COMMON      447 - 567
     core copy   641 - 879
   Earlier passes were too tight on both counts: a 620 core over 560
   sides buried the logo chips (the core paints above the sides, so
   anything under it disappears), and a 460 core was too small to hold
   its own cards, which then burst out of the circle and collided with
   the COMMON labels.

   The overlap lenses are the true intersection: a circle the size of a
   side disc, placed inside the core, which has overflow:hidden and a
   50% radius and therefore clips it to the exact lens shape.
   ================================================================== */
.dex-venn-section {
  padding: clamp(36px, 3.8vw, 52px) 0 !important;
  background: linear-gradient(180deg, #1e40af 0%, #1c3a9e 55%, #17318a 100%) !important;
}

/* The section container caps at ~1290, which squeezed the three discs.
   This block is a diagram and benefits from the extra width. Desktop
   only: applying it at every width narrowed the stacked mobile cards. */
@media screen and (min-width: 992px) {
  .dex-venn-section .dex-venn-shell {
    width: min(100% - 48px, 1600px) !important;
    max-width: 1600px !important;
  }
}

.dex-venn-heading {
  max-width: 1160px;
  margin: 0 auto clamp(18px, 2vw, 28px);
  text-align: center;
}

.dex-venn-eyebrow {
  display: inline-block;
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  color: #bfd3ff;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(12px, 1.15vw, 16px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dex-venn-heading h2 {
  margin: 0;
  color: #fff;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.dex-venn-heading-line,
.dex-venn-heading-gradient {
  display: block;
}

.dex-venn-heading-gradient {
  padding-bottom: 0.08em;
  background: linear-gradient(90deg, #fff4cf 4%, #ffd55f 52%, #fbbf24 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dex-venn-sub {
  max-width: 860px;
  margin: clamp(16px, 1.8vw, 24px) auto 0;
  color: #cfdcff;
  font-size: clamp(15px, 1.45vw, 20px);
  font-weight: 700;
  line-height: 1.5;
}

.dex-venn {
  position: relative;
  width: 100%;
  max-width: 1520px;
  margin-inline: auto;
  aspect-ratio: 1520 / 730;
}

.dex-venn-mobile-intro { display: none; }

.dex-venn-circle {
  position: absolute;
  top: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateY(-50%);
}

.dex-venn-side {
  width: 39.5%;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.07);
}

.dex-venn-side--left { left: 0; }
.dex-venn-side--right { right: 0; }

/* Content lives in the crescent that the core does not cover. */
.dex-venn-side-inner {
  display: flex;
  width: 52%;
  height: 100%;
  padding: 11% 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.dex-venn-side--left .dex-venn-side-inner { margin-left: 12.5%; }
.dex-venn-side--right .dex-venn-side-inner { margin-left: auto; margin-right: 12.5%; }

.dex-venn-side-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.dex-venn-side-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.dex-venn-side-title {
  display: flex;
  min-height: 2.24em;
  margin: 0;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dex-venn-side-subtitle {
  display: flex;
  min-height: 2.6em;
  margin: -3px 0 0;
  align-items: center;
  justify-content: center;
  color: #b9ccf5;
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 600;
}

.dex-venn-logos,
.dex-venn-traits {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dex-venn-logos {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 6px;
}

.dex-venn-logo {
  display: flex;
  width: 100%;
  min-height: 30px;
  margin-inline: auto;
  padding: 4px 10px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(219, 234, 254, 0.92);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 5px 14px rgba(7, 24, 68, 0.2);
  color: #0f172a;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(11px, 1.05vw, 14px);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.dex-venn-logo img {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  object-fit: contain;
}

.dex-venn-logo--lovable img { width: 20px; height: 21px; flex-basis: 20px; }
.dex-venn-logo--bolt img { width: 24px; height: 24px; flex-basis: 24px; border-radius: 5px; }
.dex-venn-logo--base44 img { width: 23px; height: 23px; flex-basis: 23px; }
.dex-venn-logo--claude img { width: 21px; height: 21px; flex-basis: 21px; }
.dex-venn-logo--codex img { filter: none; }
.dex-venn-logo--cursor img { border-radius: 5px; }

.dex-venn-logo span {
  min-width: 0;
  line-height: 1;
  white-space: nowrap;
}

@media screen and (min-width: 992px) {
  .dex-venn-logos { gap: 7px; }

  .dex-venn-logo {
    min-height: 42px;
    padding: 5px 12px;
    gap: 11px;
    font-size: clamp(15px, 1.3vw, 18px);
  }

  .dex-venn-logo img {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .dex-venn-logo--lovable img { width: 26px; height: 27px; flex-basis: 26px; }
  .dex-venn-logo--bolt img { width: 30px; height: 30px; flex-basis: 30px; }
  .dex-venn-logo--base44 img { width: 29px; height: 29px; flex-basis: 29px; }
  .dex-venn-logo--claude img { width: 27px; height: 27px; flex-basis: 27px; }
}

.dex-venn-traits {
  display: flex;
  width: auto;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.dex-venn-traits li {
  position: relative;
  padding-left: 14px;
  color: #d5e1fb;
  font-size: clamp(11px, 1vw, 13.5px);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}

.dex-venn-traits li::before {
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dex-yellow);
  content: "";
}

/* ---- core ---- */
.dex-venn-core {
  left: 50%;
  z-index: 3;
  width: 44.74%;
  overflow: hidden;
  border: 0;
  background: linear-gradient(165deg, #3b7bff 0%, #2563eb 55%, #1d4ed8 100%);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.1), 0 30px 70px rgba(6, 18, 56, 0.45);
  transform: translate(-50%, -50%);
}

.dex-venn-lens {
  position: absolute;
  top: 5.88%;
  width: 88.24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.dex-venn-lens--left { left: -61.76%; }
.dex-venn-lens--right { right: -61.76%; }

/* Content sits ABOVE the circle, not inside it: the same overflow that
   makes the lenses would otherwise slice the cards off at the radius,
   and in the reference they overhang the edge anyway. */
.dex-venn-core-content {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: flex;
  width: 20.2%;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}

.dex-venn-core-inner {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.85vw, 11px);
  text-align: center;
}

/* Three columns so the wordmark is centred on the card's axis and the
   logo sits beside it without pushing it off-centre. The empty third
   column mirrors the logo's. */
.dex-venn-core-brand {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.dex-venn-core-brand img {
  width: 32px;
  height: 32px;
  grid-column: 1;
  justify-self: end;
}

.dex-venn-core-brand > div { grid-column: 2; }

.dex-venn-core-brand strong {
  display: block;
  color: #fff;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(17px, 1.8vw, 25px);
  font-weight: 800;
  line-height: 1.1;
}

.dex-venn-core-brand small {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(9px, 0.82vw, 11px);
  font-weight: 600;
}

.dex-venn-core-claim {
  margin: 0;
  color: #fff;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(12px, 1.3vw, 17px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dex-venn-core-badge,
.dex-venn-core-footer {
  width: 100%;
  margin: 0;
  padding: 8px 11px;
  border-radius: 9px;
  color: #fff;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(8.5px, 0.86vw, 11.5px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dex-venn-core-badge {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.14);
}

.dex-venn-core-footer { background: #0b1b3f; }
.dex-venn-core-footer b { color: var(--dex-yellow); }

.dex-venn-agents {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  flex-direction: column;
  gap: clamp(5px, 0.7vw, 9px);
  list-style: none;
}

.dex-venn-agent {
  display: flex;
  padding: clamp(7px, 0.9vw, 11px);
  align-items: center;
  gap: 9px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(6, 18, 56, 0.28);
  text-align: left;
}

.dex-venn-agent-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 9px;
  color: var(--dex-blue);
  background: rgba(37, 99, 235, 0.1);
}

.dex-venn-agent-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.dex-venn-agent strong {
  display: block;
  color: #0f172a;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Scoped to the copy column: the icon tile is a <span> inside the same
   li, so a bare `.dex-venn-agent span` also matched it and overrode its
   display:grid, which parked every glyph in the tile's top-left corner
   instead of centring it. */
.dex-venn-agent > div > span {
  display: block;
  color: #334155;
  font-size: clamp(9.5px, 0.88vw, 12px);
  font-weight: 600;
}

.dex-venn-agent small {
  display: block;
  color: #64748b;
  font-size: clamp(8.5px, 0.78vw, 10.5px);
  font-weight: 600;
}

/* ---- shared-ground callouts, sat over the lenses ---- */
.dex-venn-common {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: flex;
  width: 7.9%;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #fff;
  text-align: center;
  transform: translateY(-50%);
}

.dex-venn-common--left { left: 29.4%; }
.dex-venn-common--right { right: 29.4%; }

.dex-venn-common-badge {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: var(--dex-blue);
  background: #fff;
  box-shadow: 0 4px 12px rgba(6, 18, 56, 0.3);
}

.dex-venn-common-badge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.dex-venn-common strong {
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(8.5px, 0.86vw, 11.5px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dex-venn-common ul { margin: 0; padding: 0; list-style: none; }

.dex-venn-common li {
  margin-bottom: 3px;
  color: #e4ecff;
  font-size: clamp(8.5px, 0.84vw, 11.5px);
  font-weight: 600;
  line-height: 1.25;
}

/* ------------------------------------------------------------------
   Under 992px the horizontal Venn becomes a vertical Venn. The circles
   retain their relationship instead of turning into unrelated cards:
   template builders above, DeX in the centre, agentic tools below.
   ------------------------------------------------------------------ */
@media screen and (max-width: 991px) {
  .dex-venn-section {
    padding: clamp(44px, 4.5vw, 64px) 0 !important;
  }

  .dex-venn-heading {
    margin-bottom: clamp(22px, 2.5vw, 36px);
  }

  .dex-venn {
    --dex-mobile-side-top: 35px;
    --dex-mobile-core-top: clamp(245px, 61vw, 295px);
    --dex-mobile-bottom-top: clamp(455px, 113vw, 545px);
    display: block;
    width: min(100%, 430px);
    max-width: 430px;
    height: calc(var(--dex-mobile-bottom-top) + min(calc(100vw - 54px), 406px) + 14px);
    aspect-ratio: auto;
  }

  .dex-venn-mobile-intro {
    display: none;
  }

  .dex-venn-mobile-brand {
    display: flex;
    padding: 10px 18px;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(96, 165, 250, 0.45);
    border-radius: 999px;
    background: rgba(15, 45, 120, 0.34);
    box-shadow: 0 8px 24px rgba(8, 24, 70, 0.2);
  }

  .dex-venn-mobile-brand img { width: 24px; height: 24px; }

  .dex-venn-mobile-brand strong {
    font-family: "Inter Tight", sans-serif;
    font-size: 21px;
    font-weight: 800;
  }

  .dex-venn-mobile-brand span {
    padding-left: 9px;
    border-left: 1px solid rgba(255, 255, 255, 0.24);
    color: #d8e6ff;
    font-size: 12px;
    font-weight: 700;
  }

  .dex-venn-mobile-intro > p {
    margin: 0;
    padding: 7px 14px;
    border: 1px solid rgba(147, 197, 253, 0.6);
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.24);
    color: #f2f7ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .dex-venn-mobile-intro > strong {
    font-family: "Inter Tight", sans-serif;
    font-size: clamp(28px, 8vw, 36px);
    font-weight: 800;
    letter-spacing: -0.035em;
    text-transform: uppercase;
  }

  .dex-venn-circle {
    position: absolute;
    left: 50%;
    width: calc(100% - 24px);
    height: min(calc(100vw - 54px), 406px);
    aspect-ratio: 1;
    transform: none;
  }

  .dex-venn-side {
    border: 1px solid rgba(96, 165, 250, 0.72);
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.2), rgba(9, 30, 89, 0.64));
    box-shadow: inset 0 0 40px rgba(96, 165, 250, 0.08);
    transform: translateX(-50%);
  }

  .dex-venn-side--left { top: var(--dex-mobile-side-top); }
  .dex-venn-side--right { top: var(--dex-mobile-bottom-top); right: auto; }

  .dex-venn-core {
    top: var(--dex-mobile-core-top);
    z-index: 3;
    display: block;
    width: 100%;
    height: min(calc(100vw - 30px), 430px);
    border: 2px solid rgba(78, 211, 255, 0.78);
    background: linear-gradient(165deg, #3b7bff 0%, #2563eb 52%, #153b9b 100%);
    box-shadow: 0 0 0 5px rgba(71, 190, 255, 0.08), 0 24px 58px rgba(5, 18, 58, 0.42);
    transform: translateX(-50%);
  }

  .dex-venn-core-content {
    position: absolute;
    top: calc(var(--dex-mobile-core-top) + 96px);
    left: 50%;
    z-index: 5;
    width: min(calc(100% - 84px), 275px);
    transform: translateX(-50%);
  }

  .dex-venn-side-inner,
  .dex-venn-side--left .dex-venn-side-inner,
  .dex-venn-side--right .dex-venn-side-inner {
    width: 72%;
    height: auto;
    margin-inline: auto;
    gap: 6px;
  }

  .dex-venn-side--left .dex-venn-side-inner {
    margin-inline: auto;
    padding: 22px 0 48px;
    gap: 4px;
  }

  .dex-venn-side--left .dex-venn-side-icon { display: none; }

  .dex-venn-side--right .dex-venn-side-inner {
    margin-inline: auto;
    padding: 150px 0 6px;
    gap: 3px;
  }

  .dex-venn-side--right .dex-venn-side-icon { display: none; }
  .dex-venn-side--right .dex-venn-logos { gap: 2px; }
  .dex-venn-side--right .dex-venn-logo { min-height: 25px; padding-block: 1px; }
  .dex-venn-side--right .dex-venn-traits { gap: 2px; }
  .dex-venn-side--right .dex-venn-traits li { font-size: 9.5px; }

  .dex-venn-side-icon { width: 36px; height: 36px; border-radius: 50%; }
  .dex-venn-side-icon svg { width: 17px; height: 17px; }
  .dex-venn-side-title { min-height: 0; font-size: 13px; }
  .dex-venn-side-subtitle { min-height: 0; color: #d8e6ff; font-size: 10.5px; }

  .dex-venn-core-inner {
    display: grid;
    width: 100%;
    grid-template-columns: 100px minmax(0, 165px);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
  }

  .dex-venn-core-brand {
    display: flex;
    width: 100%;
    min-height: 86px;
    padding: 8px 6px;
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(191, 219, 254, 0.6);
    border-radius: 16px;
    background: rgba(15, 45, 120, 0.32);
  }

  .dex-venn-core-brand img {
    width: 30px;
    height: 30px;
    justify-self: auto;
  }

  .dex-venn-core-brand > div { display: flex; flex-direction: column; align-items: center; gap: 1px; }
  .dex-venn-core-brand strong { font-size: 17px; }
  .dex-venn-core-brand small { font-size: 7.5px; }
  .dex-venn-core-claim {
    display: block;
    margin: 0;
    grid-column: 1;
    grid-row: 2;
    font-size: 9px;
    line-height: 1.15;
  }
  .dex-venn-core-badge { display: none; }

  .dex-venn-agents {
    width: 165px;
    grid-column: 2;
    grid-row: 1 / span 2;
    gap: 4px;
  }

  .dex-venn-agent {
    min-height: 40px;
    padding: 4px 6px;
    gap: 6px;
    border: 1px solid rgba(219, 234, 254, 0.9);
    box-shadow: 0 7px 18px rgba(6, 18, 56, 0.2);
  }
  .dex-venn-agent-icon { width: 24px; height: 24px; flex-basis: 24px; border-radius: 7px; }
  .dex-venn-agent-icon svg { width: 13px; height: 13px; }
  .dex-venn-agent strong { font-size: 9px; line-height: 1.1; }
  .dex-venn-agent > div > span { color: #27364f; font-size: 7.5px; line-height: 1.1; }
  .dex-venn-agent small { display: none; }
  /* The desktop footer repeats the mobile intro and consumed the lower
     overlap. Removing it leaves the three agent cards centred in-core. */
  .dex-venn-core-footer { display: none; }

  .dex-venn-logos { width: 82%; margin-inline: auto; gap: 3px; }
  .dex-venn-logo { min-height: 28px; padding: 2px 8px; font-size: 11px; }
  .dex-venn-traits { width: auto; margin-inline: auto; align-items: flex-start; }
  .dex-venn-traits li { color: #edf4ff; font-size: 10px; white-space: normal; }

  /* Reuse the desktop lens elements as the visible top and bottom
     intersections of the vertical mobile Venn. */
  .dex-venn-lens {
    display: block;
    width: calc(100% - 24px);
    height: min(calc(100vw - 54px), 406px);
    aspect-ratio: 1;
    border: 1px solid rgba(125, 211, 252, 0.52);
    background: linear-gradient(180deg, rgba(147, 197, 253, 0.24), rgba(56, 189, 248, 0.1));
  }

  .dex-venn-lens--left {
    top: calc(var(--dex-mobile-side-top) - var(--dex-mobile-core-top));
    left: 12px;
  }

  .dex-venn-lens--right {
    top: calc(var(--dex-mobile-bottom-top) - var(--dex-mobile-core-top));
    right: auto;
    left: 12px;
  }

  .dex-venn-common {
    position: absolute;
    left: 50%;
    z-index: 6;
    width: min(64%, 250px);
    min-height: 26px;
    padding: 4px 9px;
    flex-direction: row;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(125, 211, 252, 0.75);
    border-radius: 999px;
    background: linear-gradient(90deg, #377cf1, #2563eb);
    box-shadow: 0 8px 22px rgba(7, 26, 78, 0.35);
    transform: translateX(-50%);
  }

  .dex-venn-common--left { top: calc(var(--dex-mobile-core-top) + 38px); }
  .dex-venn-common--right { top: calc(var(--dex-mobile-bottom-top) + 58px); right: auto; }
  .dex-venn-common-badge { width: 18px; height: 18px; flex: 0 0 18px; }
  .dex-venn-common-badge svg { width: 10px; height: 10px; }
  .dex-venn-common strong { font-size: 8.5px; white-space: nowrap; }
  .dex-venn-common ul { display: flex; gap: 5px; }
  .dex-venn-common li { margin: 0; font-size: 8px; white-space: nowrap; }
  .dex-venn-common li + li::before { margin-right: 5px; content: "·"; }
}

@media screen and (max-width: 420px) {
  .dex-venn-core-content { width: min(calc(100% - 84px), 275px); }
}
/* Final mobile Venn alignment: preserve three joined circles while keeping
   the DeX agent stack and both overlap summaries readable at narrow widths. */
@media screen and (max-width: 991px) {
  .dex-venn {
    --dex-mobile-circle-size: min(calc(100vw - 30px), 430px);
    --dex-mobile-core-content-offset: clamp(96px, calc(40vw - 56px), 112px);
    width: var(--dex-mobile-circle-size);
    height: calc(var(--dex-mobile-bottom-top) + var(--dex-mobile-circle-size) + 14px);
  }

  .dex-venn-circle,
  .dex-venn-core,
  .dex-venn-lens {
    width: var(--dex-mobile-circle-size);
    height: var(--dex-mobile-circle-size);
  }

  .dex-venn-core-content {
    top: calc(var(--dex-mobile-core-top) + var(--dex-mobile-core-content-offset));
    width: min(calc(100% - 32px), 328px);
  }

  .dex-venn-side-inner,
  .dex-venn-side--left .dex-venn-side-inner,
  .dex-venn-side--right .dex-venn-side-inner {
    width: 76%;
  }

  .dex-venn-side--left .dex-venn-side-inner {
    padding: 38px 0 48px;
    gap: 2px;
  }

  .dex-venn-side--right .dex-venn-side-inner {
    padding: max(143px, calc(var(--dex-mobile-core-top) + var(--dex-mobile-circle-size) - var(--dex-mobile-bottom-top) + 12px)) 0 4px;
    gap: 3px;
  }

  .dex-venn-side--right .dex-venn-logos { gap: 16px; }
  .dex-venn-side--right .dex-venn-logo { min-height: 48px; padding: 0; }
  .dex-venn-side--right .dex-venn-traits { gap: 2px; }
  .dex-venn-side--right .dex-venn-traits li { font-size: 13px; }
  .dex-venn-side-title { font-size: 17px; line-height: 1.15; }
  .dex-venn-side-subtitle { color: #f0f5ff; font-size: 14px; line-height: 1.2; }

  .dex-venn-core-inner {
    --dex-mobile-brand-column: clamp(72px, 24vw, 88px);
    position: relative;
    grid-template-columns: var(--dex-mobile-brand-column) minmax(0, 1fr);
    column-gap: clamp(8px, 2.5vw, 10px);
  }

  .dex-venn-core-brand {
    position: absolute;
    top: 24px;
    left: 0;
    width: var(--dex-mobile-brand-column);
    height: 62px;
    min-height: 0;
    padding: 0;
    grid-column: auto;
    grid-row: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .dex-venn-core-brand img { width: 62px; height: 62px; }
  .dex-venn-core-brand > div { display: none; }

  .dex-venn-core-claim {
    position: absolute;
    top: 94px;
    left: 0;
    width: var(--dex-mobile-brand-column);
    margin: 0;
    grid-column: auto;
    grid-row: auto;
    font-size: 13px;
    line-height: 1.15;
  }

  .dex-venn-agents { width: 100%; }
  .dex-venn-agent { min-height: 50px; padding: 5px 7px; gap: 7px; }
  .dex-venn-agent-icon { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; }
  .dex-venn-agent-icon svg { width: 15px; height: 15px; }
  .dex-venn-agent strong { font-size: 13.5px; line-height: 1.1; }
  .dex-venn-agent > div > span { color: #1f2d45; font-size: 12px; line-height: 1.15; }

  .dex-venn-logos {
    width: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .dex-venn-logo {
    width: 48px;
    min-height: 48px;
    padding: 0;
    flex: 0 0 48px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .dex-venn-logo img,
  .dex-venn-logo--lovable img,
  .dex-venn-logo--bolt img,
  .dex-venn-logo--base44 img,
  .dex-venn-logo--claude img {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .dex-venn-logo span { display: none; }
  .dex-venn-traits li { color: #f8faff; font-size: 13px; }

  .dex-venn-lens {
    border: 2px solid rgba(125, 211, 252, 0.72);
  }

  .dex-venn-lens--left {
    top: calc(var(--dex-mobile-side-top) - var(--dex-mobile-core-top) - 2px);
    left: -2px;
  }

  .dex-venn-lens--right {
    top: calc(var(--dex-mobile-bottom-top) - var(--dex-mobile-core-top) - 2px);
    right: auto;
    left: -2px;
  }

  .dex-venn-common {
    width: min(82%, 292px);
    min-height: 44px;
    padding: 5px 10px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-content: stretch;
    column-gap: 8px;
    row-gap: 1px;
  }

  .dex-venn-common--left {
    top: calc(var(--dex-mobile-core-top) + var(--dex-mobile-core-content-offset) - 49px);
  }

  .dex-venn-common--right {
    top: calc(var(--dex-mobile-bottom-top) + clamp(18px, calc(50vw - 142px), 66px));
    right: auto;
  }

  .dex-venn-common-badge {
    width: 24px;
    height: 24px;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .dex-venn-common-badge svg { width: 13px; height: 13px; }

  .dex-venn-common strong {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    font-size: 14px;
    line-height: 1;
  }

  .dex-venn-common ul {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    gap: 7px;
  }

  .dex-venn-common li { font-size: 11.5px; line-height: 1.15; }
  .dex-venn-common li + li::before { margin-right: 7px; }
}

@media screen and (max-width: 375px) {
  .dex-venn {
    --dex-mobile-core-content-offset: clamp(84px, calc(50vw - 96px), 92px);
  }
}

@media screen and (max-width: 359px) {
  .dex-venn {
    --dex-mobile-core-content-offset: clamp(70px, calc(20vw + 6px), 74px);
  }

  .dex-venn-side-inner,
  .dex-venn-side--left .dex-venn-side-inner,
  .dex-venn-side--right .dex-venn-side-inner { width: 86%; }
  .dex-venn-side--right .dex-venn-side-inner { padding-top: 123px; }
  .dex-venn-core-content { width: calc(100% - 20px); }

  .dex-venn-core-inner {
    --dex-mobile-brand-column: 64px;
    column-gap: 6px;
  }

  .dex-venn-core-brand { height: 62px; min-height: 0; padding: 0; }
  .dex-venn-core-brand img { width: 52px; height: 52px; }
  .dex-venn-agent { padding: 4px 6px; gap: 6px; }
  .dex-venn-agent-icon { width: 26px; height: 26px; flex-basis: 26px; }
  .dex-venn-agent strong { font-size: 12.5px; }
  .dex-venn-agent > div > span { font-size: 11.5px; }
}