/* Page-specific compatibility layer for the current index markup.
   The public marketing bundle keeps these controls under a legacy page scope. */
html[data-page-bundle="index"]:not([data-theme="light"]),
html[data-page-bundle="index"]:not([data-theme="light"]) body {
  background: #0a0a09;
}

/* The home page receives its core CSS remotely, so keep the same selection
   colors here as a local, explicit override. */
::selection {
  color: #090a0c;
  background: #d8dbe3;
  text-shadow: none;
}

::-moz-selection {
  color: #090a0c;
  background: #d8dbe3;
  text-shadow: none;
}

html[data-page-bundle="index"] .pro-download-menu {
  position: relative;
}

html[data-page-bundle="index"] .pro-shared-header {
  border-bottom: 0;
  background: #0a0a09;
}

html[data-page-bundle="index"] .pro-shared-header.pro-header-scrolled {
  background: rgba(10, 10, 9, .72) !important;
  backdrop-filter: blur(var(--pro-header-blur, 0px)) saturate(135%);
}

/* In the bright theme the header continues the page canvas instead of reading
   as a separate white bar. */
html[data-page-bundle="index"][data-theme="light"] .pro-shared-header {
  border-bottom-color: transparent !important;
  background: #e6e3db !important;
  backdrop-filter: none;
}

html[data-page-bundle="index"][data-theme="light"] .pro-shared-header.pro-header-scrolled {
  background: rgba(230, 227, 219, .74) !important;
  backdrop-filter: blur(var(--pro-header-blur, 0px)) saturate(125%);
}

html[data-page-bundle="index"] .pro-download-trigger {
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: #d2d8df;
  background: rgba(255,255,255,.035);
  font-size: 13.5px;
  font-weight: 680;
  line-height: 1;
  list-style: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

html[data-page-bundle="index"] .pro-download-trigger::-webkit-details-marker {
  display: none;
}

html[data-page-bundle="index"] .pro-download-trigger::marker {
  content: "";
}

html[data-page-bundle="index"] .pro-download-trigger:hover,
html[data-page-bundle="index"] .pro-download-menu[open] .pro-download-trigger {
  color: #fff;
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.075);
}

html[data-page-bundle="index"] .pro-download-trigger:focus-visible,
html[data-page-bundle="index"] .pro-download-panel a:focus-visible {
  outline: 2px solid rgba(158,199,255,.85);
  outline-offset: 3px;
}

html[data-page-bundle="index"] .pro-download-trigger svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-page-bundle="index"] .pro-download-label-short {
  display: none;
}

html[data-page-bundle="index"] .pro-download-chevron {
  width: 5px;
  height: 5px;
  border-right: 1.25px solid currentColor;
  border-bottom: 1.25px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
  opacity: .72;
}

html[data-page-bundle="index"] .pro-download-menu[open] .pro-download-chevron {
  transform: translateY(2px) scaleY(-1) rotate(45deg);
}

html[data-page-bundle="index"] .pro-download-panel {
  width: 226px;
  position: absolute;
  z-index: 85;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  gap: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: 11px;
  background: #1a1a1a;
  box-shadow: 0 24px 68px rgba(0,0,0,.46);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(.992);
  transform-origin: top right;
  transition:
    opacity .3s ease,
    transform .46s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .46s;
}

html[data-page-bundle="index"] .pro-download-menu:not([open]) .pro-download-panel {
  display: grid;
}

html[data-page-bundle="index"] .pro-download-menu[open] .pro-download-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

html[data-page-bundle="index"] .pro-download-panel-title {
  margin: 0;
  padding: 0 4px;
  color: #8d939a;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: none;
}

html[data-page-bundle="index"] .pro-download-panel-list {
  display: grid;
  gap: 0;
  position: relative;
  isolation: isolate;
}

html[data-page-bundle="index"] .pro-download-panel-list::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: -4px;
  left: -4px;
  height: 34px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .065);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
  transition: opacity .14s ease, transform .24s cubic-bezier(.22,1,.36,1);
}

html[data-page-bundle="index"] .pro-download-panel-list:has(> a:hover)::before,
html[data-page-bundle="index"] .pro-download-panel-list:has(> a:focus-visible)::before {
  opacity: 1;
}

html[data-page-bundle="index"] .pro-download-panel-list:has(> a:nth-child(2):hover)::before,
html[data-page-bundle="index"] .pro-download-panel-list:has(> a:nth-child(2):focus-visible)::before {
  transform: translateY(34px);
}

html[data-page-bundle="index"] .pro-download-panel a {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-inline: -4px;
  padding: 4px 9px;
  border-radius: 6px;
  color: #f0f2f4;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .2s ease;
  position: relative;
  z-index: 1;
}

html[data-page-bundle="index"] .pro-download-panel a:hover {
  color: #fff;
  background: transparent;
  transform: none;
}

html[data-page-bundle="index"] .pro-download-panel strong {
  display: block;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -.015em;
}

html[data-page-bundle="index"] .pro-download-item-arrow {
  color: #9298a1;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  transition: color .18s ease, transform .2s ease;
}

html[data-page-bundle="index"] .pro-download-panel a:hover .pro-download-item-arrow {
  color: currentColor;
  transform: none;
}

html[data-page-bundle="index"][data-theme="light"] .pro-download-trigger {
  color: #30363d;
  border-color: rgba(42,47,54,.18);
  background: rgba(42,47,54,.045);
}

html[data-page-bundle="index"][data-theme="light"] .pro-download-trigger:hover,
html[data-page-bundle="index"][data-theme="light"] .pro-download-menu[open] .pro-download-trigger {
  background: rgba(42,47,54,.09);
}

html[data-page-bundle="index"][data-theme="light"] .pro-download-panel {
  border-color: transparent;
  background: #f6f6f4;
  box-shadow: 0 24px 60px rgba(47,43,37,.16);
}

html[data-page-bundle="index"][data-theme="light"] .pro-download-panel a {
  color: #20252b;
}

html[data-page-bundle="index"][data-theme="light"] .pro-download-panel-title {
  color: #747b84;
}

html[data-page-bundle="index"][data-theme="light"] .pro-download-panel a:hover {
  color: #11151a;
  background: transparent;
}

html[data-page-bundle="index"][data-theme="light"] .pro-download-panel-list::before {
  background: rgba(42,47,54,.08);
}

@media (max-width: 1500px) {
  html[data-page-bundle="index"] .pro-global-header { gap: 18px; }
  html[data-page-bundle="index"] .pro-global-nav { gap: 20px; }
  html[data-page-bundle="index"] .pro-download-label-long { display: none; }
  html[data-page-bundle="index"] .pro-download-label-short { display: inline; }
  html[data-page-bundle="index"] .pro-download-trigger { height: 40px; padding-inline: 11px; }
}

@media (max-width: 600px) {
  html[data-page-bundle="index"] .pro-download-panel {
    width: min(270px, calc(100vw - 24px));
  }
}

/* The shared header now sits outside .shell, while the public desktop bundle
   still treats main as the old header row. Keep every card size unchanged and
   only place the launcher below the visible header. */
@media (min-width: 901px) {
  html[data-page-bundle="index"] .pro-shared-header {
    --pro-header-height: 62px;
  }

  html[data-page-bundle="index"] .pro-shared-header .pro-shared-header-inner {
    width: min(1400px, 100%) !important;
    max-width: 1400px !important;
    padding-inline: calc(clamp(18px, 3vw, 48px) + clamp(10px, 1.25vw, 20px)) !important;
    box-sizing: border-box;
    gap: clamp(16px, 2.1vw, 30px);
  }

  html[data-page-bundle="index"] .pro-shared-header .pro-global-brand {
    gap: 8px;
    font-size: 15.5px;
    font-weight: 600;
  }

  html[data-page-bundle="index"] .pro-shared-header .pro-global-brand-logo {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }

  html[data-page-bundle="index"] .pro-shared-header .pro-global-nav {
    gap: clamp(17px, 2vw, 28px);
  }

  html[data-page-bundle="index"] .pro-shared-header .pro-global-nav a {
    font-size: 13.5px;
    font-weight: 520;
  }

  html[data-page-bundle="index"] .pro-shared-header .pro-global-actions {
    gap: 7px;
  }

  html[data-page-bundle="index"] .pro-shared-header .pro-global-actions > .pro-button {
    height: 36px;
    min-height: 36px;
    padding: 8px 13px;
    font-size: 13.5px;
    font-weight: 560;
  }

  html[data-page-bundle="index"] .pro-shared-header .pro-button-primary {
    font-weight: 500;
  }

  html[data-page-bundle="index"] .pro-shared-header .pro-global-actions > .pro-icon-button,
  html[data-page-bundle="index"] .pro-shared-header .pro-global-actions > .pro-mobile-nav-trigger {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  html[data-page-bundle="index"] .pro-shared-header .pro-theme-toggle svg {
    width: 14px;
    height: 14px;
  }

  html[data-page-bundle="index"] .pro-shared-header .pro-download-trigger {
    height: 32px;
    min-height: 32px;
    padding-inline: 13px;
    font-size: 13.5px;
    font-weight: 560;
  }

  html[data-page-bundle="index"] .pro-shared-header .pro-global-actions .pro-language-auto .pro-language-trigger {
    width: 68px;
    min-width: 68px;
    height: 32px;
    padding-inline: 8px;
    font-size: 12.5px;
    font-weight: 520;
  }

  html[data-page-bundle="index"] .pro-shared-header .pro-language-trigger svg {
    width: 15px;
    height: 15px;
  }

  html[data-page-bundle="index"] .pro-shared-header .pro-language-chevron {
    width: 6px;
    height: 6px;
  }

  html[data-page-bundle="index"] .shell {
    width: min(1400px, 100%);
  }

  html[data-page-bundle="index"] .shell > main {
    align-content: start;
    padding-top: 86px;
  }
}

/* Restore the real homepage footer above the card stack. The links stay
   semantic anchors so Privacy and Terms remain keyboard- and pointer-active. */
html[data-page-bundle="index"] .shell > .site-footer {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: #7f8994;
  font-size: 14px;
  line-height: 1.2;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

/* Static publication layout repair.
   The original export left the desktop product rail as a horizontal carousel,
   which pushed ProNet, Marketplace and the utility cards outside the viewport.
   Keep the rail swipeable on phones, but expose the complete ecosystem on
   desktop where the page has enough width for the intended composition. */
@media (min-width: 761px) {
  html[data-page-bundle="index"] .launcher .product-rail {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(200px, 260px));
    gap: clamp(9px, 1.15vw, 15px);
    min-width: 0;
  }

  html[data-page-bundle="index"] .launcher .product-rail > .business { grid-column: span 6; }
  html[data-page-bundle="index"] .launcher .product-rail > .pro1,
  html[data-page-bundle="index"] .launcher .product-rail > .model-router { grid-column: span 3; }
  html[data-page-bundle="index"] .launcher .product-rail > .pronet { grid-column: span 5; }
  html[data-page-bundle="index"] .launcher .product-rail > .market { grid-column: span 7; }

  html[data-page-bundle="index"] .launcher .ecosystem-additions {
    grid-column: 1 / -1;
    margin-top: clamp(24px, 3vw, 42px);
  }

  html[data-page-bundle="index"] .launcher .utility-rail {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(9px, 1.15vw, 15px);
  }
}

html[data-page-bundle="index"] .shell > .site-footer a {
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  text-decoration: none;
  transition: color .18s ease;
}

html[data-page-bundle="index"] .shell > .site-footer a:hover,
html[data-page-bundle="index"] .shell > .site-footer a:focus-visible {
  color: #cfd5dc;
}

html[data-page-bundle="index"] .shell > .site-footer .dot {
  flex: 0 0 1px;
  width: 1px;
  height: 14px;
  border-radius: 1px;
  background: currentColor;
}

/* Keep the theme switch functional while placing it with the legal links
   instead of adding another control to the header. */
html[data-page-bundle="index"] .shell > .site-footer .pro-theme-toggle {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #cfd5dc;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .18s ease;
}

html[data-page-bundle="index"] .shell > .site-footer .pro-theme-toggle:hover,
html[data-page-bundle="index"] .shell > .site-footer .pro-theme-toggle:focus-visible {
  border-color: transparent;
  background: transparent;
  color: #f4f5f7;
  transform: translateY(-50%);
}

html[data-page-bundle="index"] .shell > .site-footer .pro-theme-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-page-bundle="index"] .shell > .site-footer .pro-theme-toggle .pro-theme-sun {
  display: block;
}

html[data-page-bundle="index"] .shell > .site-footer .pro-theme-toggle .pro-theme-moon {
  display: none;
}

html[data-page-bundle="index"][data-theme="light"] .shell > .site-footer .pro-theme-toggle {
  color: #30363d;
}

html[data-page-bundle="index"][data-theme="light"] .shell > .site-footer .pro-theme-toggle:hover,
html[data-page-bundle="index"][data-theme="light"] .shell > .site-footer .pro-theme-toggle:focus-visible {
  border-color: transparent;
  background: transparent;
  color: #171b20;
  transform: translateY(-50%);
}

html[data-page-bundle="index"][data-theme="light"] .shell > .site-footer .pro-theme-toggle .pro-theme-sun {
  display: none;
}

html[data-page-bundle="index"][data-theme="light"] .shell > .site-footer .pro-theme-toggle .pro-theme-moon {
  display: block;
}

@media (max-width: 520px) {
  html[data-page-bundle="index"] .shell > .site-footer {
    bottom: max(9px, env(safe-area-inset-bottom));
    gap: 10px;
    font-size: 13px;
  }
}

/* PromanOS Business product-led concept. The previous generated office image
   remains untouched in assets and can be restored by removing this override. */
html[data-page-bundle="index"] .launcher .business {
  --tile-position: 54% 0%;
}

html[data-page-bundle="index"] .launcher .business::after {
  background-image: image-set(url("assets/concepts/business-card/promanos-business-product-ui-v4.avif") type("image/avif"),url("assets/concepts/business-card/promanos-business-product-ui-v4.webp") type("image/webp"),url("assets/concepts/business-card/promanos-business-product-ui-v4.png") type("image/png"));
}

/* Centered-title brand artwork for PRO-1 and ProNet. */
html[data-page-bundle="index"] .launcher .pro1,
html[data-page-bundle="index"] .launcher .pronet {
  --tile-position: center;
}

html[data-page-bundle="index"] .launcher .pro1::after {
  background-image: image-set(url("assets/concepts/brand-cards/pro-1-cobalt-v1.avif") type("image/avif"),url("assets/concepts/brand-cards/pro-1-cobalt-v1.webp") type("image/webp"),url("assets/concepts/brand-cards/pro-1-cobalt-v1.png") type("image/png"));
}

html[data-page-bundle="index"] .launcher .pronet::after {
  background-image: image-set(url("assets/concepts/brand-cards/pronet-luminous-v2.avif") type("image/avif"),url("assets/concepts/brand-cards/pronet-luminous-v2.webp") type("image/webp"),url("assets/concepts/brand-cards/pronet-luminous-v2.png") type("image/png"));
}

html[data-page-bundle="index"] .launcher .pro1::before,
html[data-page-bundle="index"] .launcher .pronet::before,
html[data-page-bundle="index"] .launcher .pro1:is(:hover, :focus-within)::before,
html[data-page-bundle="index"] .launcher .pronet:is(:hover, :focus-within)::before {
  opacity: 0;
  background: none;
}

html[data-page-bundle="index"] .launcher .pro1::after,
html[data-page-bundle="index"] .launcher .pronet::after,
html[data-page-bundle="index"] .launcher .pro1:is(:hover, :focus-within)::after,
html[data-page-bundle="index"] .launcher .pronet:is(:hover, :focus-within)::after {
  opacity: 1;
  filter: none;
  transform: none;
}

/* The names are already rendered in the artwork; keep the semantic headings
   available to assistive technology without showing a duplicate title. */
html[data-page-bundle="index"] .launcher .pro1 .product-name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

html[data-page-bundle="index"] .launcher .pro1 .product-body::before {
  display: none;
  content: none;
  background: none;
  opacity: 0;
  filter: none;
}

/* Keep the lower-left Business artwork unchanged when its supporting copy appears. */
html[data-page-bundle="index"] .launcher .business .product-body::before,
html[data-page-bundle="index"] .launcher .business:hover .product-body::before,
html[data-page-bundle="index"] .launcher .business:focus-within .product-body::before {
  display: none;
  content: none;
  background: none;
  opacity: 0;
  filter: none;
}

/* Supporting copy needs a quiet reading surface, not a brighter image. */
html[data-page-bundle="index"] .launcher .major .product-body {
  isolation: isolate;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

html[data-page-bundle="index"] .launcher .major .product-body::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: auto;
  right: -24px;
  bottom: -32px;
  left: -24px;
  height: 98px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(6, 7, 10, 0), rgba(6, 7, 10, .04) 48%, rgba(6, 7, 10, .34) 100%);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 22%, rgba(0, 0, 0, .18) 44%, rgba(0, 0, 0, .66) 76%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 22%, rgba(0, 0, 0, .18) 44%, rgba(0, 0, 0, .66) 76%, #000 100%);
  transition: opacity .24s ease, -webkit-backdrop-filter .24s ease, backdrop-filter .24s ease;
}

html[data-page-bundle="index"] .launcher .major .product-body > :is(.product-name, .product-desc) {
  position: relative;
  z-index: 1;
}

@media (any-hover: hover) {
  html[data-page-bundle="index"] .launcher .major:is(:hover, :focus-within) .product-body::after {
    opacity: 1;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}

/* x.ai-inspired main-card perimeter: a quiet one-pixel neutral stroke,
   without a halo or drop shadow. */
html[data-page-bundle="index"] .launcher .card.major {
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: none;
}

@media (any-hover: hover) {
  html[data-page-bundle="index"] .launcher .card.major:not(.disabled):hover,
  html[data-page-bundle="index"] .launcher .card.major:not(.disabled):focus-within {
    border-color: rgba(255, 255, 255, .13);
    box-shadow: none;
  }
}

/* Conversation-led Chat artwork. The former orange and generated blue assets
   remain in place and can be restored by changing this one background image. */
html[data-page-bundle="index"] .launcher .utility.chat::before {
  background-image: url("assets/tile-utility-chat-conversation-v1.svg");
}

/* Terminal-led Benchmarks artwork with the same neutral outer backdrop as Chat.
   The previous generated benchmark assets remain available in assets and backup. */
html[data-page-bundle="index"] .launcher .utility.benchmarks::before {
  background-image: image-set(url("assets/concepts/benchmarks-card/promanos-benchmarks-terminal-neutral-v1.avif") type("image/avif"),url("assets/concepts/benchmarks-card/promanos-benchmarks-terminal-neutral-v1.webp") type("image/webp"),url("assets/concepts/benchmarks-card/promanos-benchmarks-terminal-neutral-v1.png") type("image/png"));
  opacity: 1;
  filter: none;
  transform: none;
}

html[data-page-bundle="index"] .launcher .utility.benchmarks::after {
  display: none;
  content: none;
  background: none;
  opacity: 0;
}

@media (any-hover: hover) {
  html[data-page-bundle="index"] .launcher .utility.benchmarks:hover::before,
  html[data-page-bundle="index"] .launcher .utility.benchmarks:focus-within::before {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* Brighter, calmer cards: keep the whole grid present and use only a small
   forward movement to identify the hovered card. */
html[data-page-bundle="index"] .launcher .card {
  opacity: 1;
  filter: none;
  box-shadow: none;
}

html[data-page-bundle="index"] .launcher .major::before {
  opacity: .58;
}

html[data-page-bundle="index"] .launcher .major::after {
  filter: saturate(1.18) contrast(1.03) brightness(1.18);
}

html[data-page-bundle="index"] .launcher .utility::before {
  opacity: .9;
  filter: saturate(1.02) contrast(1.02) brightness(1.08);
  transform: scale(1.01);
}

/* Product artwork remains fixed on hover: cards can react, but their imagery
   must not brighten, zoom, or flicker. */
html[data-page-bundle="index"] .launcher .major::after,
html[data-page-bundle="index"] .launcher .utility::before {
  transition: none !important;
}

@media (any-hover: hover) {
  html[data-page-bundle="index"] .launcher:has(.card:hover) .card:not(:hover),
  html[data-page-bundle="index"] .launcher:has(.card:focus-within) .card:not(:focus-within) {
    opacity: 1;
    filter: none;
    transform: none;
  }

  html[data-page-bundle="index"] .launcher .card:not(.disabled):hover,
  html[data-page-bundle="index"] .launcher .card:not(.disabled):focus-within {
    z-index: 3;
    opacity: 1;
    filter: none;
    transform: translateY(-2px) scale(1.006);
    border-color: transparent;
    background: #141619 !important;
    box-shadow: none;
  }

  html[data-page-bundle="index"] .launcher .major:hover::before,
  html[data-page-bundle="index"] .launcher .major:focus-within::before {
    opacity: .58;
  }

  html[data-page-bundle="index"] .launcher .major:hover::after,
  html[data-page-bundle="index"] .launcher .major:focus-within::after {
    filter: saturate(1.18) contrast(1.03) brightness(1.18) !important;
    transform: scale(1.01) !important;
  }

  html[data-page-bundle="index"] .launcher .utility:hover::before,
  html[data-page-bundle="index"] .launcher .utility:focus-within::before {
    opacity: .9 !important;
    filter: saturate(1.02) contrast(1.02) brightness(1.08) !important;
    transform: scale(1.01) !important;
  }
}

/* Keep the conversation artwork neutral and unobscured. */
html[data-page-bundle="index"] .launcher .utility.chat::before {
  opacity: 1;
  filter: none;
  transform: none;
}

html[data-page-bundle="index"] .launcher .utility.chat::after {
  display: none;
  content: none;
  background: none;
  opacity: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (any-hover: hover) {
  html[data-page-bundle="index"] .launcher .utility.chat:hover::before,
  html[data-page-bundle="index"] .launcher .utility.chat:focus-within::before {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* Large cards use the same quiet diagonal corner cue as the utility cards. */
html[data-page-bundle="index"] .launcher .major-icon {
  position: absolute;
  top: clamp(11px, 1.05vw, 16px);
  right: clamp(12px, 1.12vw, 17px);
  z-index: 4;
  display: inline-block;
  color: rgba(247, 248, 249, .82);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  opacity: .72;
  pointer-events: none;
  translate: 0 0;
  transition: opacity .2s ease, translate .2s ease;
}

html[data-page-bundle="index"] .launcher .major:is(:hover, :focus-visible, :focus-within) .major-icon {
  opacity: 1;
  translate: 2px -2px;
}

/* Keep the card corners clean without the decorative diagonal cue. */
html[data-page-bundle="index"] .launcher .major-icon {
  display: none;
}

/* Linear-inspired page entrance: the lead announcement resolves first, then
   the product cards follow in the same motion language. */
html.promanos-intro-pending[data-page-bundle="index"] .announcement-card {
  opacity: 0;
  translate: 0 26px;
  filter: blur(6px) saturate(.94);
}

html.promanos-intro-ready[data-page-bundle="index"] .announcement-card {
  opacity: 1;
  translate: 0 0;
  filter: none;
  transition:
    opacity 1.08s cubic-bezier(.22, 1, .36, 1),
    translate 1.28s cubic-bezier(.22, 1, .36, 1),
    filter 1.18s cubic-bezier(.22, 1, .36, 1);
}

html.promanos-intro-pending[data-page-bundle="index"] .announcement-card .announcement-copy {
  opacity: 0;
  translate: 0 10px;
  filter: blur(3px);
}

html.promanos-intro-ready[data-page-bundle="index"] .announcement-card .announcement-copy {
  opacity: 1;
  translate: 0 0;
  filter: none;
  transition:
    opacity .78s cubic-bezier(.22, 1, .36, 1) 260ms,
    translate .92s cubic-bezier(.22, 1, .36, 1) 260ms,
    filter .86s cubic-bezier(.22, 1, .36, 1) 260ms;
}

html.promanos-intro-pending[data-page-bundle="index"] .launcher .card {
  opacity: 0;
  translate: 0 26px;
  filter: blur(6px) saturate(.94);
}

html.promanos-intro-ready[data-page-bundle="index"] .launcher .card {
  opacity: 1;
  translate: 0 0;
  filter: none;
  transition:
    opacity 1.08s cubic-bezier(.22, 1, .36, 1) var(--promanos-intro-delay, 90ms),
    translate 1.28s cubic-bezier(.22, 1, .36, 1) var(--promanos-intro-delay, 90ms),
    filter 1.18s cubic-bezier(.22, 1, .36, 1) var(--promanos-intro-delay, 90ms),
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}

html.promanos-intro-pending[data-page-bundle="index"] .launcher .card :is(.card-top, .product-body, .utility-copy, .utility-icon) {
  opacity: 0;
  translate: 0 10px;
  filter: blur(3px);
}

html.promanos-intro-ready[data-page-bundle="index"] .launcher .card :is(.card-top, .product-body, .utility-copy, .utility-icon) {
  opacity: 1;
  translate: 0 0;
  filter: none;
  transition:
    opacity .78s cubic-bezier(.22, 1, .36, 1) calc(var(--promanos-intro-delay, 90ms) + 380ms),
    translate .92s cubic-bezier(.22, 1, .36, 1) calc(var(--promanos-intro-delay, 90ms) + 380ms),
    filter .86s cubic-bezier(.22, 1, .36, 1) calc(var(--promanos-intro-delay, 90ms) + 380ms);
}

html[data-page-bundle="index"] .launcher .business {
  --promanos-intro-delay: 260ms;
}

html[data-page-bundle="index"] .launcher .pro1 {
  --promanos-intro-delay: 380ms;
}

html[data-page-bundle="index"] .launcher .model-router {
  --promanos-intro-delay: 500ms;
}

html[data-page-bundle="index"] .launcher .pronet {
  --promanos-intro-delay: 670ms;
}

html[data-page-bundle="index"] .launcher .market {
  --promanos-intro-delay: 810ms;
}

html[data-page-bundle="index"] .launcher .utility {
  --promanos-intro-delay: 1220ms;
}

@media (prefers-reduced-motion: reduce) {
  html.promanos-intro-pending[data-page-bundle="index"] .launcher .card {
    opacity: 1;
    translate: none;
    filter: none;
  }

  html.promanos-intro-pending[data-page-bundle="index"] .announcement-card,
  html.promanos-intro-pending[data-page-bundle="index"] .announcement-card .announcement-copy {
    opacity: 1;
    translate: none;
    filter: none;
  }

  html.promanos-intro-ready[data-page-bundle="index"] .announcement-card,
  html.promanos-intro-ready[data-page-bundle="index"] .announcement-card .announcement-copy {
    transition: none;
  }

  html.promanos-intro-ready[data-page-bundle="index"] .launcher .card {
    transition: none;
  }

  html.promanos-intro-pending[data-page-bundle="index"] .launcher .card :is(.card-top, .product-body, .utility-copy, .utility-icon) {
    opacity: 1;
    translate: none;
    filter: none;
  }

  html.promanos-intro-ready[data-page-bundle="index"] .launcher .card :is(.card-top, .product-body, .utility-copy, .utility-icon) {
    transition: none;
  }
}

/* The launcher itself previously reserved only one desktop row for the
   product rail. Let the two-row composition determine its natural height so
   ProNet and Marketplace are not clipped below the first viewport. */
@media (min-width: 761px) {
  html[data-page-bundle="index"] .launcher {
    grid-template-rows: auto auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html[data-page-bundle="index"] .launcher .product-rail {
    grid-row: auto !important;
  }
}

/* Official homepage utility rail: five equal, compact cards with the same
   image-led treatment as the current PromanOS homepage. */
html[data-page-bundle="index"] .launcher .ecosystem-additions {
  min-width: 0;
  margin-top: clamp(124px, 14vw, 220px);
}

html[data-page-bundle="index"] .launcher .ecosystem-additions-heading {
  display: flex;
  margin-bottom: clamp(24px, 2.7vw, 42px);
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}

html[data-page-bundle="index"] .launcher .ecosystem-additions-heading h2 {
  margin: 0;
  color: #f0f1f3;
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 510;
  letter-spacing: -.055em;
  line-height: 1;
}

html[data-page-bundle="index"] .launcher .ecosystem-additions-heading p {
  max-width: 410px;
  margin: 0;
  color: #878f9b;
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
}

html[data-page-bundle="index"] .launcher .utility-rail {
  min-width: 0;
}

@media (min-width: 761px) {
  html[data-page-bundle="index"] .launcher .utility-rail {
    display: grid;
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(9px, 1.15vw, 15px);
  }

  html[data-page-bundle="index"] .launcher .ecosystem-additions {
    display: block;
    grid-column: 1 / -1;
    grid-row: 3;
  }

  html[data-page-bundle="index"] .launcher .utility-rail > .utility {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (max-width: 760px) {
  html[data-page-bundle="index"] .launcher .ecosystem-additions {
    margin-top: 82px;
  }

  html[data-page-bundle="index"] .launcher .ecosystem-additions-heading {
    display: block;
    margin-bottom: 22px;
  }

  html[data-page-bundle="index"] .launcher .ecosystem-additions-heading h2 {
    font-size: 30px;
  }

  html[data-page-bundle="index"] .launcher .ecosystem-additions-heading p {
    max-width: 32ch;
    margin-top: 10px;
    font-size: 13px;
    text-align: left;
  }
}

/* The secondary rail is a real final section, not a short grid row that the
   cards can overflow.  This keeps the legal footer after every card. */
@media (min-width: 901px) {
  html[data-page-bundle="index"] .launcher {
    grid-template-rows: repeat(2, clamp(200px, 14vw, 260px)) auto !important;
  }

  html[data-page-bundle="index"] .launcher .ecosystem-additions {
    padding-bottom: clamp(34px, 4vw, 62px);
  }

  html[data-page-bundle="index"] .launcher .utility-rail > .utility {
    min-height: clamp(156px, 11vw, 205px) !important;
  }

  html[data-page-bundle="index"] .launcher .product-rail {
    display: grid !important;
    grid-template-rows: repeat(2, clamp(220px, 22vw, 350px)) !important;
    overflow: visible !important;
    height: auto !important;
  }

  html[data-page-bundle="index"] .launcher .product-rail > .card {
    opacity: 1 !important;
    visibility: visible !important;
    translate: none !important;
    transform: none !important;
    filter: none !important;
  }

  html[data-page-bundle="index"] .launcher .card :is(.card-top, .product-body, .product-desc, .utility-copy, .utility-icon, .photo-card-title, .major-icon) {
    opacity: 1 !important;
    visibility: visible !important;
    translate: none !important;
    transform: none !important;
    filter: none !important;
  }

  html[data-page-bundle="index"] .launcher .ecosystem-additions,
  html[data-page-bundle="index"] .launcher .utility-rail,
  html[data-page-bundle="index"] .launcher .utility-rail > .utility {
    opacity: 1 !important;
    visibility: visible !important;
    translate: none !important;
    transform: none !important;
    filter: none !important;
  }

  html[data-page-bundle="index"] .launcher .promanos-scroll-item:not(.is-revealed) :is(.card-top, .product-body, .product-desc, .utility-copy, .utility-icon, .photo-card-title, .major-icon) {
    opacity: 1 !important;
    visibility: visible !important;
    translate: none !important;
    transform: none !important;
    filter: none !important;
  }
}

html[data-page-bundle="index"] .shell > .site-footer {
  grid-row: 2;
  align-self: end;
}

html[data-page-bundle="index"] .launcher .utility.token {
  --utility-accent: 151, 120, 255;
  --utility-image: image-set(url("assets/tile-pro-token-v5.avif") type("image/avif"),url("assets/tile-pro-token-v5.webp") type("image/webp"),url("assets/tile-pro-token-v5.png") type("image/png"));
  cursor: default;
}

html[data-page-bundle="index"] .launcher .utility.knowledge-base {
  --utility-accent: 93, 207, 255;
  --utility-image: image-set(url("assets/tile-utility-knowledge-base-v3.avif") type("image/avif"),url("assets/tile-utility-knowledge-base-v3.webp") type("image/webp"),url("assets/tile-utility-knowledge-base-v3.png") type("image/png"));
  cursor: default;
}

html[data-page-bundle="index"] .launcher .utility.partners {
  --utility-accent: 74, 160, 255;
  --utility-image: image-set(
    url("assets/tile-utility-developers-generated-v5.avif") type("image/avif"),
    url("assets/tile-utility-developers-generated-v5.webp") type("image/webp")
  );
}

html[data-page-bundle="index"] .launcher .utility.token::after {
  background: linear-gradient(90deg, rgba(3,4,7,.91) 0%, rgba(3,4,7,.58) 48%, rgba(3,4,7,.18) 100%);
}

html[data-page-bundle="index"] .launcher .utility.token:hover,
html[data-page-bundle="index"] .launcher .utility.token:hover::before,
html[data-page-bundle="index"] .launcher .utility.token:hover .utility-copy,
html[data-page-bundle="index"] .launcher .utility.knowledge-base:hover,
html[data-page-bundle="index"] .launcher .utility.knowledge-base:hover::before,
html[data-page-bundle="index"] .launcher .utility.knowledge-base:hover .utility-copy {
  transform: none;
}

/* The compact utility rail is label-first: descriptions do not need a hover
   reveal and the title must stay anchored in its resting position. */
html[data-page-bundle="index"] .launcher .utility .utility-copy,
html[data-page-bundle="index"] .launcher .utility:hover .utility-copy,
html[data-page-bundle="index"] .launcher .utility:focus-visible .utility-copy {
  transform: none !important;
}

html[data-page-bundle="index"] .launcher .utility .utility-copy p {
  display: none !important;
}

html[data-page-bundle="index"] .launcher .utility-lock {
  position: absolute;
  top: 13px;
  right: 14px;
  z-index: 4;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: rgba(235, 240, 248, .64);
  pointer-events: none;
}

html[data-page-bundle="index"] .launcher .utility-lock svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-page-bundle="index"][data-theme="light"] .launcher .utility-lock {
  color: rgba(18, 22, 29, .62);
}

/* Keep the Token availability chip aligned with its title and reuse the
   violet Model Router badge language. */
html[data-page-bundle="index"] .launcher .utility.token .utility-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 30px);
}

html[data-page-bundle="index"] .launcher .utility.token .utility-title-row h3 {
  margin: 0 !important;
  white-space: nowrap;
}

html[data-page-bundle="index"] .launcher .utility.token .utility-status {
  position: static;
  z-index: 3;
  flex: 0 0 auto;
  min-height: 16px;
  padding: 2px 5px;
  font-size: 8px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-width: 2px;
  color: #526bff;
  border-color: rgba(82, 107, 255, .92);
  background: transparent;
}

/* Header icons are outline-only: remove any inherited SVG fill and keep the
   visible geometry on the current-color stroke. */
html[data-page-bundle="index"] .pro-shared-header :is(.pro-download-trigger, .pro-theme-toggle, .pro-language-trigger) svg,
html[data-page-bundle="index"] .pro-shared-header :is(.pro-download-trigger, .pro-theme-toggle, .pro-language-trigger) svg * {
  fill: none !important;
  stroke: currentColor !important;
}

/* Match the roomy, single-surface download menu in the shared header. */
html[data-page-bundle="index"] .pro-shared-header .pro-download-panel {
  border-radius: 11px;
}

html[data-page-bundle="index"] .pro-shared-header .pro-download-panel a {
  border-radius: 6px;
}

/* Match the language dialog surface to the Download menu. */
html[data-page-bundle="index"] .pro-language-panel {
  background: #1a1a1a;
}

/* The selected language stays visible; a lighter second surface glides with
   the pointer so selection and hover never replace one another. */
html[data-page-bundle="index"] .pro-language-options {
  --pro-language-option-step: 67px;
  position: relative;
  isolation: isolate;
}

html[data-page-bundle="index"] .pro-language-options::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: 62px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .065);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
  transition: opacity .14s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
}

html[data-page-bundle="index"] .pro-language-options::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: 62px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
  transition: opacity .14s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
}

html[data-page-bundle="index"] .pro-language-options > .pro-language-option {
  position: relative;
  z-index: 1;
  border-color: transparent !important;
  background: transparent !important;
}

html[data-page-bundle="index"] .pro-language-option:focus-visible {
  outline: none !important;
}

html[data-page-bundle="index"] .pro-language-options:has(> .pro-language-option[aria-selected="true"])::before {
  opacity: 1;
}

html[data-page-bundle="index"] .pro-language-options:has(> .pro-language-option:nth-child(2)[aria-selected="true"])::before {
  transform: translateY(var(--pro-language-option-step));
}

html[data-page-bundle="index"] .pro-language-options:has(> .pro-language-option:nth-child(3)[aria-selected="true"])::before {
  transform: translateY(calc(var(--pro-language-option-step) * 2));
}

html[data-page-bundle="index"] .pro-language-options:has(> .pro-language-option:hover)::after,
html[data-page-bundle="index"] .pro-language-options:has(> .pro-language-option:focus-visible)::after {
  opacity: 1;
}

html[data-page-bundle="index"] .pro-language-options:has(> .pro-language-option[aria-selected="true"]:hover)::after,
html[data-page-bundle="index"] .pro-language-options:has(> .pro-language-option[aria-selected="true"]:focus-visible)::after {
  opacity: 0;
}

html[data-page-bundle="index"] .pro-language-options:has(> .pro-language-option:nth-child(1):hover)::after,
html[data-page-bundle="index"] .pro-language-options:has(> .pro-language-option:nth-child(1):focus-visible)::after {
  transform: translateY(0);
}

html[data-page-bundle="index"] .pro-language-options:has(> .pro-language-option:nth-child(2):hover)::after,
html[data-page-bundle="index"] .pro-language-options:has(> .pro-language-option:nth-child(2):focus-visible)::after {
  transform: translateY(var(--pro-language-option-step));
}

html[data-page-bundle="index"] .pro-language-options:has(> .pro-language-option:nth-child(3):hover)::after,
html[data-page-bundle="index"] .pro-language-options:has(> .pro-language-option:nth-child(3):focus-visible)::after {
  transform: translateY(calc(var(--pro-language-option-step) * 2));
}

/* Keep the language search field neutral while it receives input. */
html[data-page-bundle="index"] .pro-language-search:focus-within {
  border-color: var(--line) !important;
  outline: none !important;
  box-shadow: none !important;
}

html[data-page-bundle="index"] .pro-language-search input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Dark controls quietly acknowledge hover/selection without becoming bright. */
html[data-page-bundle="index"]:not([data-theme="light"]) .pro-shared-header :is(.pro-download-trigger, .pro-icon-button, .pro-language-trigger, .pro-header-language-source) {
  background: transparent !important;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

html[data-page-bundle="index"]:not([data-theme="light"]) .pro-shared-header :is(.pro-download-trigger:hover, .pro-icon-button:hover, .pro-language-trigger:hover, .pro-language-trigger[aria-expanded="true"], .pro-download-menu[open] .pro-download-trigger) {
  background: #101114 !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

/* Announcement panel above the product grid. It deliberately uses the same
   perimeter, spacing and quiet contrast as the three-card lead row below it. */
html[data-page-bundle="index"] .announcement-card {
  position: relative;
  min-height: clamp(230px, 24vw, 360px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--pro-radius-card, 22px);
  background:
    radial-gradient(560px 260px at 82% 10%, rgba(104, 89, 255, .18), transparent 68%),
    linear-gradient(135deg, #11151d 0%, #0b0e14 58%, #0a0a09 100%);
  color: #f4f6f8;
  isolation: isolate;
}

html[data-page-bundle="index"] .announcement-card::before,
html[data-page-bundle="index"] .announcement-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

html[data-page-bundle="index"] .announcement-card::before {
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(4, 6, 10, .76) 0%, rgba(4, 6, 10, .34) 58%, rgba(4, 6, 10, .08) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 35%);
}

html[data-page-bundle="index"] .announcement-card::after {
  width: min(46vw, 640px);
  height: min(46vw, 640px);
  right: -13%;
  top: -54%;
  z-index: -1;
  border: 1px solid rgba(146, 127, 255, .22);
  border-radius: 50%;
  box-shadow:
    0 0 0 34px rgba(118, 104, 255, .05),
    0 0 0 76px rgba(118, 104, 255, .028);
  transform: rotate(-18deg);
}

html[data-page-bundle="index"] .announcement-copy {
  position: relative;
  z-index: 1;
  max-width: min(660px, 72%);
}

html[data-page-bundle="index"] .announcement-kicker {
  display: inline-flex;
  margin-bottom: 10px;
  color: #aab9ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}

html[data-page-bundle="index"] .announcement-copy h2 {
  margin: 0;
  color: #f6f7f9;
  font-size: clamp(32px, 4.45vw, 66px);
  font-weight: 560;
  letter-spacing: -.045em;
  line-height: .98;
}

html[data-page-bundle="index"] .announcement-copy p {
  max-width: 580px;
  margin: 13px 0 0;
  color: #858d98;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.48;
}

html[data-page-bundle="index"] .announcement-index {
  position: absolute;
  top: clamp(17px, 2vw, 28px);
  right: clamp(18px, 2.2vw, 32px);
  z-index: 1;
  color: rgba(205, 211, 255, .54);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
}

html[data-page-bundle="index"][data-theme="light"] .announcement-card {
  border-color: rgba(42, 47, 54, .14);
  background:
    radial-gradient(560px 260px at 82% 10%, rgba(87, 91, 208, .16), transparent 68%),
    linear-gradient(135deg, #f1f2f5 0%, #e7e9ee 58%, #dfe2e8 100%);
  color: #171b20;
}

html[data-page-bundle="index"][data-theme="light"] .announcement-card::before {
  background:
    linear-gradient(90deg, rgba(248, 249, 251, .78) 0%, rgba(248, 249, 251, .4) 58%, rgba(248, 249, 251, .08) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .52), transparent 35%);
}

html[data-page-bundle="index"][data-theme="light"] .announcement-copy h2 {
  color: #171b20;
}

html[data-page-bundle="index"][data-theme="light"] .announcement-copy p {
  color: #58616c;
}

html[data-page-bundle="index"][data-theme="light"] .announcement-kicker,
html[data-page-bundle="index"][data-theme="light"] .announcement-index {
  color: #5059ad;
}

/* The original desktop composition was locked to the viewport. Let the
   announcement add a real first row and keep the remaining rails scrollable. */
@media (min-width: 901px) {
  html[data-page-bundle="index"],
  html[data-page-bundle="index"] body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  html[data-page-bundle="index"] .shell {
    height: auto;
    min-height: 100dvh;
    grid-template-rows: auto auto;
  }

  html[data-page-bundle="index"] .shell > main {
    min-height: 0;
    display: block;
    padding-top: 70px;
    padding-bottom: clamp(82px, 8vw, 118px);
  }

  html[data-page-bundle="index"] .announcement-card {
    width: calc(100% - clamp(20px, 2.5vw, 40px));
    min-height: clamp(220px, 21vw, 350px);
    margin: 0 auto clamp(11px, 1vw, 14px);
  }

  html[data-page-bundle="index"] .launcher {
    width: calc(100% - clamp(20px, 2.5vw, 40px));
    height: auto;
    min-height: 0;
    margin-inline: auto;
    grid-template-rows: repeat(2, clamp(220px, 22vw, 350px)) minmax(84px, 132px);
    align-content: start;
  }

  html[data-page-bundle="index"] .launcher .major,
  html[data-page-bundle="index"] .launcher .utility {
    height: 100%;
    min-height: 0;
  }
}

@media (max-width: 900px) {
  html[data-page-bundle="index"],
  html[data-page-bundle="index"] body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  html[data-page-bundle="index"] .shell {
    height: auto;
    min-height: 100dvh;
    grid-template-rows: auto auto;
  }

  html[data-page-bundle="index"] .shell > main {
    display: block;
    min-height: 0;
    padding-bottom: 92px;
  }

  html[data-page-bundle="index"] .launcher {
    height: auto;
    min-height: 0;
  }

  html[data-page-bundle="index"] .announcement-card {
    min-height: 210px;
    margin: 0 0 12px;
    padding: 22px 20px;
  }

  html[data-page-bundle="index"] .announcement-copy {
    max-width: 88%;
  }

  html[data-page-bundle="index"] .announcement-copy h2 {
    font-size: clamp(28px, 8.2vw, 42px);
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  html[data-page-bundle="index"] .announcement-card {
    min-height: 190px;
    margin-bottom: 12px;
  }
}

/* Supplied ecosystem wave artwork for the lead card. The center stays quiet
   enough for the product message while the light lines fill the full panel. */
html[data-page-bundle="index"] .announcement-card {
  width: 100% !important;
  min-height: clamp(260px, 28vw, 420px);
  margin-inline: 0 !important;
  border-radius: 0;
  background: transparent;
  border-color: transparent !important;
  box-shadow: none !important;
  isolation: isolate;
  overflow: hidden;
}

html[data-page-bundle="index"] .announcement-card .announcement-glow {
  position: absolute;
  top: -3%;
  right: -16%;
  bottom: -3%;
  left: -16%;
  width: auto;
  z-index: 0;
  pointer-events: none;
  background-image:
    image-set(url("assets/concepts/announcement-card/ecosystem-wave-v6.avif") type("image/avif"),url("assets/concepts/announcement-card/ecosystem-wave-v6.webp") type("image/webp"),url("assets/concepts/announcement-card/ecosystem-wave-v6.png") type("image/png"));
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: none;
  opacity: .88;
  transform: none;
  mix-blend-mode: normal;
}

html[data-page-bundle="index"] .announcement-card::before {
  display: none;
}

html[data-page-bundle="index"] .announcement-card::after {
  display: none;
}

html[data-page-bundle="index"] .announcement-card .announcement-copy,
html[data-page-bundle="index"] .announcement-card .announcement-index {
  z-index: 2;
}

/* Mobile uses a uniform dimmer artwork layer instead of the desktop circle.
   This keeps the same calm contrast without introducing a visible shape. */
@media (max-width: 760px) {
  html[data-page-bundle="index"] .announcement-card .announcement-glow {
    opacity: .66;
  }

  html[data-page-bundle="index"] .announcement-card::before {
    display: block;
    inset: 0;
    z-index: 1;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    background: rgba(2, 3, 6, .28);
  }

  html[data-page-bundle="index"] .announcement-card .announcement-copy,
  html[data-page-bundle="index"] .announcement-card .announcement-index {
    z-index: 3;
  }
}

/* The lead artwork now reads as part of the page rather than a boxed card.
   Keep the message in its quiet central space instead of anchoring it left. */
html[data-page-bundle="index"] .announcement-card .announcement-copy {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(680px, calc(100% - 80px));
  max-width: none;
  transform: translate(-50%, -50%);
  text-align: center;
}

html[data-page-bundle="index"] .announcement-card .announcement-copy p {
  margin-inline: auto;
}

/* A single, tactile primary action follows the centered hero copy. */
html[data-page-bundle="index"] .announcement-actions {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

html[data-page-bundle="index"] .announcement-download {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border: 1px solid #f5f6f8;
  border-radius: 999px;
  color: #0b0c0f;
  background: #f5f6f8;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 8px 24px rgba(0, 0, 0, .18);
  font: 540 14px/1 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.015em;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}

html[data-page-bundle="index"] .announcement-download svg {
  width: 16px;
  height: 16px;
  translate: 0 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-page-bundle="index"] .announcement-download-arrow {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

@media (any-hover: hover) {
  html[data-page-bundle="index"] .announcement-download:hover {
    border-color: #f5f6f8;
    background: #f5f6f8;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 8px 24px rgba(0, 0, 0, .18);
  }
}

@media (any-hover: hover) and (prefers-reduced-motion: no-preference) {
  html[data-page-bundle="index"] .announcement-download:hover .announcement-download-arrow {
    transform: translateY(3px);
  }
}

html[data-page-bundle="index"] .announcement-download:focus-visible {
  outline: 2px solid rgba(220, 225, 255, .92);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  html[data-page-bundle="index"] .announcement-actions {
    margin-top: 18px;
  }

  html[data-page-bundle="index"] .announcement-download {
    min-height: 42px;
    padding-inline: 15px;
  }
}

/* Kinetic copy keeps the hero alive while preserving the calm center of the
   supplied artwork. The final two words receive the moving color accent. */
html[data-page-bundle="index"] .announcement-copy h2 .announcement-title-word {
  display: inline-block;
  will-change: opacity, transform, filter;
}

html[data-page-bundle="index"] .announcement-copy h2 .announcement-title-word--accent {
  color: transparent;
  background: linear-gradient(104deg, #f6f7f9 26%, #8ba2ff 43%, #c699ff 53%, #f6f7f9 68%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: pro-announcement-title-sheen 5.8s ease-in-out infinite;
}

html.promanos-intro-pending[data-page-bundle="index"] .announcement-copy h2 .announcement-title-word {
  opacity: 0;
  transform: translateY(15px);
  filter: blur(5px);
}

html.promanos-intro-ready[data-page-bundle="index"] .announcement-copy h2 .announcement-title-word,
html[data-page-bundle="index"] .announcement-copy h2.announcement-title-is-fresh .announcement-title-word {
  animation: pro-announcement-word-in .7s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(80ms + var(--announcement-word-index) * 72ms);
}

html.promanos-intro-ready[data-page-bundle="index"] .announcement-copy h2 .announcement-title-word--accent,
html[data-page-bundle="index"] .announcement-copy h2.announcement-title-is-fresh .announcement-title-word--accent {
  animation:
    pro-announcement-word-in .7s cubic-bezier(.22, 1, .36, 1) both,
    pro-announcement-title-sheen 5.8s ease-in-out .68s infinite;
  animation-delay:
    calc(80ms + var(--announcement-word-index) * 72ms),
    .68s;
}

@keyframes pro-announcement-word-in {
  from {
    opacity: 0;
    transform: translateY(15px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes pro-announcement-title-sheen {
  0%, 36%, 100% { background-position: 118% 50%; }
  58% { background-position: -22% 50%; }
}

@media (min-width: 901px) {
  html[data-page-bundle="index"] .announcement-card {
    min-height: clamp(320px, 34vw, 520px);
  }
}

@media (max-width: 900px) {
  html[data-page-bundle="index"] .announcement-card .announcement-copy {
    width: min(88%, 580px);
  }
}

/* The cart artwork belongs to the Marketplace product card, not the
   announcement panel. Keep the original left-to-right text-safe composition. */
html[data-page-bundle="index"] .launcher .market::after {
  background-image: image-set(url("assets/concepts/marketplace-card/marketplace-amber-v1.avif") type("image/avif"),url("assets/concepts/marketplace-card/marketplace-amber-v1.webp") type("image/webp"),url("assets/concepts/marketplace-card/marketplace-amber-v1.png") type("image/png"));
  background-position: center;
  background-size: cover;
  filter: saturate(1.08) contrast(1.04) brightness(.96);
}

/* Token artwork stays neutral enough for the compact card label. */
html[data-page-bundle="index"] .launcher .utility.token {
  --utility-image: image-set(url("assets/tile-pro-token-v5.avif") type("image/avif"),url("assets/tile-pro-token-v5.webp") type("image/webp"),url("assets/tile-pro-token-v5.png") type("image/png"));
}

html[data-page-bundle="index"] .launcher .utility.token::before {
  background-image: image-set(url("assets/tile-pro-token-v5.avif") type("image/avif"),url("assets/tile-pro-token-v5.webp") type("image/webp"),url("assets/tile-pro-token-v5.png") type("image/png")) !important;
  background-position: center;
  background-size: cover;
  opacity: .94;
  filter: saturate(1.08) contrast(1.05) brightness(.98);
}

/* Partner Program artwork supplied for the compact utility card. Keep the
   left side calm enough for the card label and let the connected objects lead
   from the right edge. */
html[data-page-bundle="index"] .launcher .utility.partners {
  --utility-image: image-set(url("assets/concepts/partners-card/partner-program-v1.avif") type("image/avif"),url("assets/concepts/partners-card/partner-program-v1.webp") type("image/webp"),url("assets/concepts/partners-card/partner-program-v1.png") type("image/png"));
}

html[data-page-bundle="index"] .launcher .utility.partners::before {
  background-image: image-set(url("assets/concepts/partners-card/partner-program-v1.avif") type("image/avif"),url("assets/concepts/partners-card/partner-program-v1.webp") type("image/webp"),url("assets/concepts/partners-card/partner-program-v1.png") type("image/png")) !important;
  background-position: center;
  background-size: cover;
  opacity: .94;
  filter: saturate(1.08) contrast(1.04) brightness(.98);
}

/* Final desktop size guard: the legacy marketing bundle sets the launcher to
   70vh, which makes the cards grow with tall viewports. Keep the original
   compact card scale while allowing the page itself to scroll. */
@media (min-width: 901px) {
  html[data-page-bundle="index"] .shell > main {
    padding-top: 90px !important;
    padding-bottom: 72px !important;
  }

  html[data-page-bundle="index"] .announcement-card {
    min-height: clamp(340px, 26vw, 460px) !important;
  }

  html[data-page-bundle="index"] .launcher {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: repeat(2, clamp(200px, 14vw, 260px)) minmax(74px, 100px) !important;
  }

  html[data-page-bundle="index"] .launcher .major,
  html[data-page-bundle="index"] .launcher .utility {
    height: 100% !important;
    min-height: 0 !important;
  }
}

@media (max-width: 900px) {
  html[data-page-bundle="index"] .shell > main {
    padding-top: 82px !important;
  }
}

/* Keep the legal/theme rail in normal document flow so it appears only after
   the card stack, at the actual bottom of the page. */
html[data-page-bundle="index"] .shell > .site-footer {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  margin: 18px auto max(16px, env(safe-area-inset-bottom)) !important;
  transform: none !important;
}

html[data-page-bundle="index"] footer.site-footer {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  margin: 18px auto max(16px, env(safe-area-inset-bottom)) !important;
  transform: none !important;
}

/* Minimal site-matched scrollbar: preserve scrolling while removing the
   browser's bulky track, thumb and arrow buttons. */
html[data-page-bundle="index"],
html[data-page-bundle="index"] body {
  scrollbar-width: thin;
  scrollbar-color: rgba(116, 128, 148, .54) transparent;
}

html[data-page-bundle="index"]::-webkit-scrollbar,
html[data-page-bundle="index"] body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-page-bundle="index"]::-webkit-scrollbar-track,
html[data-page-bundle="index"] body::-webkit-scrollbar-track {
  background: transparent;
}

html[data-page-bundle="index"]::-webkit-scrollbar-thumb,
html[data-page-bundle="index"] body::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(116, 128, 148, .54);
  background-clip: padding-box;
}

html[data-page-bundle="index"]::-webkit-scrollbar-thumb:hover,
html[data-page-bundle="index"] body::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 156, 181, .7);
  background-clip: padding-box;
}

html[data-page-bundle="index"]::-webkit-scrollbar-button,
html[data-page-bundle="index"] body::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

html[data-page-bundle="index"]::-webkit-scrollbar-corner,
html[data-page-bundle="index"] body::-webkit-scrollbar-corner {
  background: transparent;
}

html[data-page-bundle="index"][data-theme="light"],
html[data-page-bundle="index"][data-theme="light"] body {
  scrollbar-color: rgba(73, 87, 108, .5) transparent;
}

html[data-page-bundle="index"][data-theme="light"]::-webkit-scrollbar-thumb,
html[data-page-bundle="index"][data-theme="light"] body::-webkit-scrollbar-thumb {
  background: rgba(73, 87, 108, .5);
  background-clip: padding-box;
}

html[data-page-bundle="index"][data-theme="light"]::-webkit-scrollbar-thumb:hover,
html[data-page-bundle="index"][data-theme="light"] body::-webkit-scrollbar-thumb:hover {
  background: rgba(73, 87, 108, .7);
  background-clip: padding-box;
}

/* The code visual belongs to Benchmarks in the dark utility row. */
html[data-page-bundle="index"] .launcher .utility.benchmarks {
  --utility-image: image-set(url("assets/concepts/benchmarks-card/benchmarks-code-v2.avif") type("image/avif"),url("assets/concepts/benchmarks-card/benchmarks-code-v2.webp") type("image/webp"),url("assets/concepts/benchmarks-card/benchmarks-code-v2.png") type("image/png"));
}

html[data-page-bundle="index"] .launcher .utility.benchmarks::before {
  background-image: image-set(url("assets/concepts/benchmarks-card/benchmarks-code-v2.avif") type("image/avif"),url("assets/concepts/benchmarks-card/benchmarks-code-v2.webp") type("image/webp"),url("assets/concepts/benchmarks-card/benchmarks-code-v2.png") type("image/png")) !important;
  background-position: center;
  background-size: cover;
  opacity: .94;
  filter: saturate(1.08) contrast(1.04) brightness(.98);
  transform: none;
}

/* Knowledge Base uses the supplied dark-blue texture with the existing
   left-side copy treatment intact. */
html[data-page-bundle="index"] .launcher .utility.knowledge-base {
  --utility-image: image-set(url("assets/tile-utility-knowledge-base-v3.avif") type("image/avif"),url("assets/tile-utility-knowledge-base-v3.webp") type("image/webp"),url("assets/tile-utility-knowledge-base-v3.png") type("image/png"));
}

html[data-page-bundle="index"] .launcher .utility.knowledge-base::before {
  background-image: image-set(url("assets/tile-utility-knowledge-base-v3.avif") type("image/avif"),url("assets/tile-utility-knowledge-base-v3.webp") type("image/webp"),url("assets/tile-utility-knowledge-base-v3.png") type("image/png")) !important;
  background-position: center;
  background-size: cover;
  opacity: .94;
  filter: saturate(1.08) contrast(1.04) brightness(.98);
  transform: none;
}

/* Supplied homepage textures. Each card keeps its existing soft copy scrim;
   only the artwork layer changes. */
html[data-page-bundle="index"] .launcher .business {
  --tile-image: image-set(url("assets/tile-promanos-business-v6.avif") type("image/avif"),url("assets/tile-promanos-business-v6.webp") type("image/webp"),url("assets/tile-promanos-business-v6.png") type("image/png"));
  --tile-position: center;
}

html[data-page-bundle="index"] .launcher .business::after {
  background-image: image-set(url("assets/tile-promanos-business-v6.avif") type("image/avif"),url("assets/tile-promanos-business-v6.webp") type("image/webp"),url("assets/tile-promanos-business-v6.png") type("image/png")) !important;
}

html[data-page-bundle="index"] .launcher .model-router {
  --tile-image: image-set(url("assets/tile-model-router-v1.avif") type("image/avif"),url("assets/tile-model-router-v1.webp") type("image/webp"),url("assets/tile-model-router-v1.png") type("image/png"));
  --tile-position: center;
}

html[data-page-bundle="index"] .launcher .model-router::after {
  background-image: image-set(url("assets/tile-model-router-v1.avif") type("image/avif"),url("assets/tile-model-router-v1.webp") type("image/webp"),url("assets/tile-model-router-v1.png") type("image/png")) !important;
}

/* Documentation returns to its dedicated dark artwork. */
html[data-page-bundle="index"] .launcher .utility.docs {
  --utility-image: image-set(url("assets/concepts/documentation-card/documentation-interface-v2.avif") type("image/avif"),url("assets/concepts/documentation-card/documentation-interface-v2.webp") type("image/webp"),url("assets/concepts/documentation-card/documentation-interface-v2.png") type("image/png"));
}

html[data-page-bundle="index"] .launcher .utility.docs::before {
  background-image: image-set(url("assets/concepts/documentation-card/documentation-interface-v2.avif") type("image/avif"),url("assets/concepts/documentation-card/documentation-interface-v2.webp") type("image/webp"),url("assets/concepts/documentation-card/documentation-interface-v2.png") type("image/png")) !important;
  background-position: center;
  background-size: cover;
  opacity: .94;
  filter: saturate(1.08) contrast(1.04) brightness(.98);
  transform: none;
}

/* Documentation has its own bright artwork in the light theme. Preserve the
   book detail and use a pale left-side scrim for the dark text hierarchy. */
html[data-page-bundle="index"][data-theme="light"] .launcher .utility.docs {
  --utility-image: image-set(url("assets/concepts/documentation-card/documentation-light-v1.avif") type("image/avif"),url("assets/concepts/documentation-card/documentation-light-v1.webp") type("image/webp"),url("assets/concepts/documentation-card/documentation-light-v1.png") type("image/png"));
  border-color: rgba(8, 11, 16, .88) !important;
  background: #f8f5f1 !important;
  color: #12161d;
  filter: none !important;
}

html[data-page-bundle="index"][data-theme="light"] .launcher .utility.docs::before {
  background-image: image-set(url("assets/concepts/documentation-card/documentation-light-v1.avif") type("image/avif"),url("assets/concepts/documentation-card/documentation-light-v1.webp") type("image/webp"),url("assets/concepts/documentation-card/documentation-light-v1.png") type("image/png")) !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

html[data-page-bundle="index"][data-theme="light"] .launcher .utility.docs::after {
  display: none !important;
  content: none;
}

html[data-page-bundle="index"][data-theme="light"] .launcher .utility.docs .utility-copy {
  position: relative;
  z-index: 3;
  filter: none !important;
}

html[data-page-bundle="index"][data-theme="light"] .launcher .utility.docs :is(h3, p) {
  text-shadow: none !important;
  filter: none !important;
}

html[data-page-bundle="index"][data-theme="light"] .launcher .utility.docs h3 {
  color: #12161d !important;
}

html[data-page-bundle="index"][data-theme="light"] .launcher .utility.docs p {
  color: rgba(18, 22, 29, .7) !important;
}

/* Use the supplied bright token artwork only in the light theme. The pale
   scrim preserves space for the label without darkening the card. */
html[data-page-bundle="index"][data-theme="light"] .launcher .utility.token {
  --utility-image: image-set(url("assets/concepts/token-card/pro-token-coin-light-v1.avif") type("image/avif"),url("assets/concepts/token-card/pro-token-coin-light-v1.webp") type("image/webp"),url("assets/concepts/token-card/pro-token-coin-light-v1.png") type("image/png"));
}

html[data-page-bundle="index"][data-theme="light"] .launcher .utility.token::before {
  background-image: image-set(url("assets/concepts/token-card/pro-token-coin-light-v1.avif") type("image/avif"),url("assets/concepts/token-card/pro-token-coin-light-v1.webp") type("image/webp"),url("assets/concepts/token-card/pro-token-coin-light-v1.png") type("image/png")) !important;
  background-position: center;
  background-size: cover;
  opacity: 1;
  filter: saturate(1.02) contrast(1.01) brightness(1.01);
}

html[data-page-bundle="index"][data-theme="light"] .launcher .utility.token::after {
  display: none !important;
  content: none;
}

/* Light theme token card: do not inherit the dark utility-card text or
   treatment. Keep the supplied coin sharp, with a dark content hierarchy and
   a precise black perimeter. */
html[data-page-bundle="index"][data-theme="light"] .launcher .utility.token {
  border-color: rgba(8, 11, 16, .88) !important;
  background: #f7f8fa !important;
  color: #12161d;
  filter: none !important;
}

html[data-page-bundle="index"][data-theme="light"] .launcher .utility.token::before {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

html[data-page-bundle="index"][data-theme="light"] .launcher .utility.token::after {
  display: none !important;
  content: none;
}

/* Do not wash out the supplied wave artwork in the light theme. Its original
   dark field provides the contrast; copy switches to white instead of adding
   a semi-opaque pale layer above the whole image. */
html[data-page-bundle="index"][data-theme="light"] .announcement-card {
  background: transparent;
}

html[data-page-bundle="index"][data-theme="light"] .announcement-card::before {
  background: transparent;
}

html[data-page-bundle="index"][data-theme="light"] .announcement-copy h2 {
  color: #f6f7f9;
}

html[data-page-bundle="index"][data-theme="light"] .announcement-copy p {
  color: #858d98;
}

/* The copy stays in the existing homepage grid; only the visual layer reaches
   edge to edge. This avoids shifting the centred content with the artwork. */
@media (min-width: 901px) {
  html[data-page-bundle="index"] .announcement-card {
    width: 100% !important;
    max-width: none;
    min-height: clamp(340px, 26vw, 460px) !important;
    margin: 0 !important;
    left: auto;
    transform: none;
    overflow: visible;
  }

  html[data-page-bundle="index"] .announcement-card .announcement-glow {
    top: -3%;
    right: auto;
    bottom: -3%;
    left: 50%;
    width: 100vw;
    transform: translate(-50%, -36px);
  }

  /* The artwork itself stays untouched.  The shared header owns the dark
     clearance above the hero, so no image detail leaks into that area. */
  html[data-page-bundle="index"] .announcement-card::before { display: none; }

  /* Match the PRO-1 contrast without affecting the mobile card layout. */
  html[data-page-bundle="index"] .announcement-card::after {
    display: block;
    top: 0;
    right: auto;
    bottom: 0;
    left: 50%;
    z-index: 1;
    width: 100vw;
    height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: translateX(-50%);
    background: radial-gradient(48% 56% at 50% 49%, rgba(10, 10, 9, .04), rgba(10, 10, 9, .76) 76%, #0a0a09 100%);
  }

  html[data-page-bundle="index"] .announcement-card .announcement-copy {
    z-index: 3;
  }
}

/* Keep the header and the small clearance beneath it opaque on the dark home
   page. This hides only the artwork outside the hero, not the blue wave. */
html[data-page-bundle="index"]:not([data-theme="light"]) .pro-shared-header:not(.pro-header-scrolled) {
  background: #0a0a09 !important;
}

html[data-page-bundle="index"][data-theme="light"] .launcher .utility.token .utility-copy {
  position: relative;
  z-index: 3;
  filter: none !important;
}

html[data-page-bundle="index"][data-theme="light"] .launcher .utility.token :is(h3, p) {
  text-shadow: none !important;
  filter: none !important;
}

html[data-page-bundle="index"][data-theme="light"] .launcher .utility.token h3 {
  color: #12161d !important;
}

html[data-page-bundle="index"][data-theme="light"] .launcher .utility.token p {
  color: rgba(18, 22, 29, .7) !important;
}

html[data-page-bundle="index"][data-theme="light"] .launcher .utility.token .utility-status {
  color: #526bff;
  border-color: rgba(82, 107, 255, .92);
  background: transparent;
}

/* The footer theme control is part of the legal rail, so it uses the exact
   same colour as Privacy and Terms in both themes. */
html[data-page-bundle="index"] .shell > .site-footer .pro-theme-toggle,
html[data-page-bundle="index"][data-theme="light"] .shell > .site-footer .pro-theme-toggle,
html[data-page-bundle="index"] .shell > .site-footer .pro-theme-toggle:hover,
html[data-page-bundle="index"] .shell > .site-footer .pro-theme-toggle:focus-visible,
html[data-page-bundle="index"][data-theme="light"] .shell > .site-footer .pro-theme-toggle:hover,
html[data-page-bundle="index"][data-theme="light"] .shell > .site-footer .pro-theme-toggle:focus-visible {
  color: inherit !important;
}

/* Benchmarks keeps its code preview at one constant exposure on hover. */
@media (any-hover: hover) {
  html[data-page-bundle="index"] .launcher .utility.benchmarks:hover::before,
  html[data-page-bundle="index"] .launcher .utility.benchmarks:focus-within::before {
    opacity: .94 !important;
    filter: saturate(1.08) contrast(1.04) brightness(.98) !important;
    transform: none !important;
  }
}

/* The lower card rail now shows the artwork directly. There is no left-side
   reading scrim over the imagery, and hover keeps every card at its resting
   exposure instead of making it brighter. */
html[data-page-bundle="index"] .launcher .major::before,
html[data-page-bundle="index"] .launcher .utility::after,
html[data-page-bundle="index"] .launcher .major .product-body::before,
html[data-page-bundle="index"] .launcher .major .product-body::after {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

@media (any-hover: hover) {
  html[data-page-bundle="index"] .launcher .card:not(.disabled):hover,
  html[data-page-bundle="index"] .launcher .card:not(.disabled):focus-within {
    transform: none !important;
    border-color: transparent !important;
    background: #141619 !important;
    box-shadow: none !important;
  }

  html[data-page-bundle="index"] .launcher :is(.business, .model-router):is(:hover, :focus-within)::after {
    filter: saturate(1.18) contrast(1.03) brightness(1.18) !important;
    transform: none !important;
  }

  html[data-page-bundle="index"] .launcher .market:is(:hover, :focus-within)::after {
    filter: saturate(1.08) contrast(1.04) brightness(.96) !important;
    transform: none !important;
  }

  html[data-page-bundle="index"] .launcher :is(.pro1, .pronet):is(:hover, :focus-within)::after,
  html[data-page-bundle="index"] .launcher .utility.chat:is(:hover, :focus-within)::before {
    filter: none !important;
    transform: none !important;
  }

  html[data-page-bundle="index"] .launcher .utility:is(.token, .knowledge-base, .partners, .docs, .benchmarks):is(:hover, :focus-within)::before {
    filter: saturate(1.08) contrast(1.04) brightness(.98) !important;
    transform: none !important;
  }
}

/* Every available tile uses the same almost-imperceptible Model Router lift. */
@media (any-hover: hover) and (prefers-reduced-motion: no-preference) {
  html[data-page-bundle="index"] .launcher .card:not(.disabled) {
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), border-color .28s cubic-bezier(.22, 1, .36, 1), background .28s cubic-bezier(.22, 1, .36, 1) !important;
  }

  html[data-page-bundle="index"] .launcher .card:not(.disabled):hover,
  html[data-page-bundle="index"] .launcher .card:not(.disabled):focus-within {
    transform: scale(1.004) !important;
  }
}

/* Swap the rail's two existing stroke states: the clearer perimeter is the
   resting state, while hover returns to the quieter original outline. */
html[data-page-bundle="index"] .launcher .card {
  border-color: rgba(255, 255, 255, .13) !important;
}

@media (any-hover: hover) {
  html[data-page-bundle="index"] .launcher .card:not(.disabled):hover,
  html[data-page-bundle="index"] .launcher .card:not(.disabled):focus-within {
    border-color: rgba(255, 255, 255, .09) !important;
  }
}

/* Mobile keeps the homepage as two deliberate swipe rails instead of forcing
   the desktop mosaic into a narrow viewport. */
@media (max-width: 760px) {
  html[data-page-bundle="index"],
  html[data-page-bundle="index"] body { overflow-x: clip; }

  html[data-page-bundle="index"] .shell {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
  }

  html[data-page-bundle="index"] .shell > main {
    width: 100%;
    min-width: 0;
    padding: max(76px, calc(60px + env(safe-area-inset-top))) 12px 52px !important;
    box-sizing: border-box;
  }

  html[data-page-bundle="index"] .announcement-card {
    width: calc(100% + 24px) !important;
    min-height: clamp(300px, 88vw, 380px) !important;
    margin: 0 -12px 20px !important;
  }

  html[data-page-bundle="index"] .announcement-card .announcement-copy { width: min(calc(100% - 36px), 480px) !important; }
  html[data-page-bundle="index"] .announcement-copy h2 { font-size: clamp(32px, 10vw, 42px); line-height: .98; }
  html[data-page-bundle="index"] .announcement-copy p { max-width: 310px; font-size: 14px; line-height: 1.46; }

  html[data-page-bundle="index"] .launcher {
    width: 100%;
    min-width: 0;
    display: block;
    overflow: visible;
  }

  html[data-page-bundle="index"] :is(.product-rail, .utility-rail) {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-auto-flow: column;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  html[data-page-bundle="index"] :is(.product-rail, .utility-rail)::-webkit-scrollbar { display: none; }

  html[data-page-bundle="index"] .product-rail {
    grid-auto-columns: min(82vw, 360px);
    gap: 12px;
    padding: 0 0 10px;
  }

  html[data-page-bundle="index"] .product-rail .major {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100%;
    min-width: 0;
    min-height: clamp(330px, 86vw, 410px) !important;
    height: clamp(330px, 86vw, 410px) !important;
    padding: 16px;
    border-radius: 20px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  html[data-page-bundle="index"] .product-rail .product-name { font-size: clamp(24px, 7vw, 30px); line-height: .98; }
  html[data-page-bundle="index"] .product-rail .product-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.4;
  }

  html[data-page-bundle="index"] .utility-rail {
    grid-auto-columns: min(76vw, 310px);
    gap: 10px;
    margin-top: 18px;
    padding: 0 0 10px;
  }

  html[data-page-bundle="index"] .utility-rail .utility {
    grid-column: auto !important;
    grid-row: auto !important;
    top: 0 !important;
    width: 100%;
    min-height: 112px;
    padding: 15px;
    border-radius: 18px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  html[data-page-bundle="index"] .utility-rail .utility h3 { font-size: 15px; line-height: 1.12; }
  html[data-page-bundle="index"] .utility-rail .utility p { display: block; margin: 5px 0 0; font-size: 13px; line-height: 1.35; }

  html[data-page-bundle="index"] footer.site-footer,
  html[data-page-bundle="index"] .shell > .site-footer {
    width: calc(100% - 24px);
    margin: 20px auto max(16px, env(safe-area-inset-bottom)) !important;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
  }

  html[data-page-bundle="index"] .shell > .site-footer .pro-theme-toggle {
    position: static;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    margin-right: 2px;
    padding: 0;
    transform: none;
  }

  html[data-page-bundle="index"] .shell > .site-footer .pro-theme-toggle:hover,
  html[data-page-bundle="index"] .shell > .site-footer .pro-theme-toggle:focus-visible {
    transform: none;
  }

  /* The light-theme footer rules are more specific than the desktop rail.
     Reset every positional property here so the icon always remains on the
     same baseline, directly before the legal links. */
  html[data-page-bundle="index"] .shell > .site-footer,
  html[data-page-bundle="index"][data-theme="light"] .shell > .site-footer {
    align-items: center !important;
  }

  html[data-page-bundle="index"] .shell > .site-footer .pro-theme-toggle,
  html[data-page-bundle="index"][data-theme="light"] .shell > .site-footer .pro-theme-toggle,
  html[data-page-bundle="index"] .shell > .site-footer .pro-theme-toggle:hover,
  html[data-page-bundle="index"][data-theme="light"] .shell > .site-footer .pro-theme-toggle:hover,
  html[data-page-bundle="index"] .shell > .site-footer .pro-theme-toggle:focus-visible,
  html[data-page-bundle="index"][data-theme="light"] .shell > .site-footer .pro-theme-toggle:focus-visible {
    position: static !important;
    inset: auto !important;
    align-self: center !important;
    margin: 0 2px 0 0 !important;
    transform: none !important;
  }
}

/* Large product cards place copy over moving product imagery. Keep one
   deliberate rhythm between the title and description, then give the lower
   reading area a subtle upward dark-to-clear blur. */
html[data-page-bundle="index"] .launcher .major .product-body {
  position: relative;
  z-index: 3;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  isolation: isolate;
  text-align: left;
}

html[data-page-bundle="index"] .launcher .major .product-name,
html[data-page-bundle="index"] .launcher .major .product-desc {
  position: relative;
  z-index: 1;
  margin: 0 !important;
}

html[data-page-bundle="index"] .launcher .major .product-name {
  align-self: flex-start !important;
  justify-self: start !important;
  width: 100%;
  line-height: 1.04;
  text-align: left !important;
}

html[data-page-bundle="index"] .launcher .major .product-desc {
  display: block !important;
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  filter: none !important;
  transform: none !important;
  text-align: left !important;
}

html[data-page-bundle="index"] .launcher .major .product-body::after {
  display: block !important;
  content: "" !important;
  position: absolute;
  z-index: 0;
  right: -16px;
  bottom: -16px;
  left: -16px;
  height: min(310px, 88%);
  pointer-events: none;
  opacity: 1 !important;
  background: linear-gradient(180deg, rgba(11, 13, 18, 0) 0%, rgba(11, 13, 18, .045) 26%, rgba(11, 13, 18, .12) 100%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(.72);
  backdrop-filter: blur(26px) saturate(.72);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .44) 24%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .44) 24%, #000 100%);
}

/* Mobile hero contrast lives strictly inside the wave screen.  This comes
   after the light-theme artwork rules so changing theme cannot remove it. */
@media (max-width: 760px) {
  /* The Business artwork contains intentional empty space on its left. Keep
     that space in the mobile crop so the interface sits to the right. */
  html[data-page-bundle="index"] .product-rail .business {
    --tile-position: 28% 0%;
  }

  html[data-page-bundle="index"] .announcement-card::before,
  html[data-page-bundle="index"][data-theme="light"] .announcement-card::before {
    display: block !important;
    inset: 0;
    z-index: 1;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    background: linear-gradient(180deg, rgba(2, 3, 6, .30) 0%, rgba(2, 3, 6, .38) 56%, rgba(2, 3, 6, .48) 100%) !important;
  }

  html[data-page-bundle="index"] .announcement-card .announcement-copy,
  html[data-page-bundle="index"] .announcement-card .announcement-index {
    z-index: 3;
  }
}

@media (hover: hover) and (pointer: fine) {
  html[data-page-bundle="index"] .launcher .major .product-body { gap: 0; }

  html[data-page-bundle="index"] .launcher .major .product-desc {
    display: block !important;
    max-height: 0 !important;
    margin-top: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    filter: blur(1.5px) !important;
    transform: translateY(7px) !important;
    transition: max-height .64s cubic-bezier(.16, 1, .3, 1), margin-top .64s cubic-bezier(.16, 1, .3, 1), opacity .52s ease-out, filter .52s ease-out, transform .64s cubic-bezier(.16, 1, .3, 1) !important;
  }

  html[data-page-bundle="index"] .launcher .major .product-body::after {
    right: -24px;
    bottom: -34px;
    left: -24px;
    height: min(360px, 135%);
    opacity: 0 !important;
    background: transparent !important;
    -webkit-backdrop-filter: blur(0) saturate(.82);
    backdrop-filter: blur(0) saturate(.82);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .22) 20%, rgba(0, 0, 0, .74) 52%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .22) 20%, rgba(0, 0, 0, .74) 52%, #000 100%);
  }

  html[data-page-bundle="index"] .launcher .major:is(:hover, :focus-within) .product-desc {
    max-height: 76px !important;
    margin-top: 5px !important;
    opacity: 1 !important;
    filter: none !important;
    transform: translateY(0) !important;
  }

  html[data-page-bundle="index"] .launcher .major:is(:hover, :focus-within) .product-body::after {
    opacity: 1 !important;
    -webkit-backdrop-filter: blur(30px) saturate(.82);
    backdrop-filter: blur(30px) saturate(.82);
  }

  /* PRO-1 already has a dark, quiet artwork field. Keep it crisp when the
     description appears rather than putting the entire card behind a film. */
  html[data-page-bundle="index"] .launcher .pro1 .product-body::after,
  html[data-page-bundle="index"] .launcher .pro1:is(:hover, :focus-within) .product-body::after {
    display: none !important;
    opacity: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-page-bundle="index"] .launcher .major::after,
  html[data-page-bundle="index"] .launcher .utility::before {
    transition: none !important;
  }
}

/* Keep the complete secondary rail in normal document flow so the footer
   cannot sit above its cards. */
@media (min-width: 901px) {
  html[data-page-bundle="index"] .launcher {
    grid-template-rows: repeat(2, clamp(200px, 14vw, 260px)) auto !important;
  }

  html[data-page-bundle="index"] .launcher .ecosystem-additions {
    padding-bottom: clamp(34px, 4vw, 62px);
  }

  html[data-page-bundle="index"] .launcher .utility-rail > .utility {
    min-height: clamp(156px, 11vw, 205px) !important;
  }
}

html[data-page-bundle="index"] .shell > .site-footer {
  grid-row: 2;
  align-self: end;
}

/* Restore the Marketplace artwork: it is the product's recognisable visual,
   so it should not be replaced by a separate tile interface. */
html[data-page-bundle="index"] .launcher .market {
  background: #0d0d0e !important;
  overflow: hidden;
}

html[data-page-bundle="index"] .launcher .market::after {
  display: block !important;
  background-image: image-set(url("assets/concepts/marketplace-card/marketplace-amber-v1.avif") type("image/avif"),url("assets/concepts/marketplace-card/marketplace-amber-v1.webp") type("image/webp"),url("assets/concepts/marketplace-card/marketplace-amber-v1.png") type("image/png")) !important;
  background-position: center !important;
  background-size: cover !important;
  filter: saturate(1.08) contrast(1.04) brightness(.96) !important;
}

html[data-page-bundle="index"] .marketplace-motion {
  position: absolute;
  z-index: 1;
  inset: clamp(18px, 2vw, 28px);
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(4px, .45vw, 7px);
  pointer-events: none;
}

html[data-page-bundle="index"] .marketplace-motion-tile {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: clamp(6px, .6vw, 10px);
  background: #111113;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  animation: marketplace-tile-pulse 7.6s cubic-bezier(.22, 1, .36, 1) infinite;
  animation-delay: var(--marketplace-delay);
}

html[data-page-bundle="index"] .marketplace-motion-tile i {
  position: relative;
  display: block;
  width: 31%;
  height: 31%;
  color: #7b8290;
  opacity: .92;
  transition: color .45s ease, transform .65s cubic-bezier(.22, 1, .36, 1);
}

html[data-page-bundle="index"] .marketplace-motion-tile.tile-orbit i {
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

html[data-page-bundle="index"] .marketplace-motion-tile.tile-orbit i::after {
  position: absolute;
  top: -19%;
  right: -19%;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

html[data-page-bundle="index"] .marketplace-motion-tile.tile-arch i {
  width: 35%;
  height: 27%;
  border: 1.5px solid currentColor;
  border-top-width: 4px;
  border-radius: 999px 999px 4px 4px;
}

html[data-page-bundle="index"] .marketplace-motion-tile.tile-spark i::before,
html[data-page-bundle="index"] .marketplace-motion-tile.tile-spark i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}

html[data-page-bundle="index"] .marketplace-motion-tile.tile-spark i::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

html[data-page-bundle="index"] .marketplace-motion-tile.tile-grid i {
  width: 36%;
  height: 36%;
  background: linear-gradient(currentColor 0 0) 0 0 / 38% 38% no-repeat,
              linear-gradient(currentColor 0 0) 100% 0 / 38% 38% no-repeat,
              linear-gradient(currentColor 0 0) 0 100% / 38% 38% no-repeat,
              linear-gradient(currentColor 0 0) 100% 100% / 38% 38% no-repeat;
}

@keyframes marketplace-tile-pulse {
  0%, 6%, 100% {
    border-color: rgba(255,255,255,.075);
    background: #111113;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  }
  1.8%, 4.3% {
    border-color: rgba(167,145,255,.54);
    background: linear-gradient(135deg, rgba(99,124,255,.42), rgba(180,112,255,.34));
    box-shadow: 0 0 0 1px rgba(119,147,255,.07), inset 0 1px 0 rgba(255,255,255,.16);
  }
}

html[data-page-bundle="index"] .marketplace-motion-tile:is(.tile-orbit, .tile-arch, .tile-spark, .tile-grid) i {
  animation: marketplace-mark-pulse 7.6s cubic-bezier(.22, 1, .36, 1) infinite;
  animation-delay: var(--marketplace-delay);
}

@keyframes marketplace-mark-pulse {
  0%, 6%, 100% { color: #7b8290; transform: scale(1); }
  1.8%, 4.3% { color: #f0edff; transform: scale(1.12); }
}

html[data-page-bundle="index"] .launcher .market .photo-card-title {
  z-index: 2;
  text-shadow: 0 2px 18px rgba(0,0,0,.62);
}

html[data-page-bundle="index"] .launcher .market .card-top {
  z-index: 2;
}

@media (max-width: 720px) {
  html[data-page-bundle="index"] .marketplace-motion {
    inset: 15px;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-page-bundle="index"] .marketplace-motion-tile,
  html[data-page-bundle="index"] .marketplace-motion-tile:is(.tile-orbit, .tile-arch, .tile-spark, .tile-grid) i {
    animation: none;
  }

  html[data-page-bundle="index"] .marketplace-motion-tile:nth-child(11) {
    border-color: rgba(167,145,255,.34);
    background: linear-gradient(135deg, rgba(99,124,255,.24), rgba(180,112,255,.2));
  }

  html[data-page-bundle="index"] .marketplace-motion-tile:nth-child(11) i {
    color: #ddd9ff;
  }
}

/* Card hover belongs to the card, never to the artwork inside it. The image
   stays in its original crop; only its parent gets an almost imperceptible
   lift, so both move together as one surface. */
@media (any-hover: hover) and (prefers-reduced-motion: no-preference) {
  html[data-page-bundle="index"] .launcher .card:not(.disabled) {
    transform-origin: center;
  }

  html[data-page-bundle="index"] .launcher .card:not(.disabled):is(:hover, :focus-within) {
    transform: scale(1.003) !important;
  }

  html[data-page-bundle="index"] .launcher .card:not(.disabled):is(:hover, :focus-within)::before,
  html[data-page-bundle="index"] .launcher .card:not(.disabled):is(:hover, :focus-within)::after,
  html[data-page-bundle="index"] .launcher .card:not(.disabled):is(:hover, :focus-within) .utility-copy::before {
    transform: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-page-bundle="index"] .launcher .card:not(.disabled):is(:hover, :focus-within) {
    transform: none !important;
  }
}

/* Keep the image rail separated without drawing attention to its frames. */
html[data-page-bundle="index"] .launcher .card {
  border-color: rgba(255, 255, 255, .055) !important;
}

@media (hover: hover) and (pointer: fine) {
  html[data-page-bundle="index"] .launcher .card:not(.disabled):is(:hover, :focus-within) {
    border-color: rgba(255, 255, 255, .075) !important;
  }
}

/* Hero copy uses a masked rise rather than a generic fade: the same compact,
   word-led entrance language used by the current x.ai first screen. */
html.promanos-intro-pending[data-page-bundle="index"] .announcement-card .announcement-copy {
  opacity: 1;
  translate: none;
  filter: none;
}

html.promanos-intro-ready[data-page-bundle="index"] .announcement-card .announcement-copy {
  transition: none;
}

html.promanos-intro-pending[data-page-bundle="index"] .announcement-copy h2 .announcement-title-word {
  opacity: 0;
  transform: translateY(105%);
  filter: none;
  clip-path: inset(0 0 100% 0);
}

html.promanos-intro-ready[data-page-bundle="index"] .announcement-copy h2 .announcement-title-word,
html[data-page-bundle="index"] .announcement-copy h2.announcement-title-is-fresh .announcement-title-word {
  animation: pro-announcement-mask-rise .82s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(110ms + var(--announcement-word-index) * 64ms);
}

html.promanos-intro-ready[data-page-bundle="index"] .announcement-copy h2 .announcement-title-word--accent,
html[data-page-bundle="index"] .announcement-copy h2.announcement-title-is-fresh .announcement-title-word--accent {
  animation:
    pro-announcement-mask-rise .82s cubic-bezier(.16, 1, .3, 1) both,
    pro-announcement-title-sheen 5.8s ease-in-out .72s infinite;
  animation-delay:
    calc(110ms + var(--announcement-word-index) * 64ms),
    .72s;
}

html.promanos-intro-pending[data-page-bundle="index"] .announcement-copy :is(p, .announcement-actions) {
  opacity: 0;
  transform: translateY(105%);
  clip-path: inset(0 0 100% 0);
}

html.promanos-intro-ready[data-page-bundle="index"] .announcement-copy p {
  animation: pro-announcement-mask-rise .76s cubic-bezier(.16, 1, .3, 1) .42s both;
}

html.promanos-intro-ready[data-page-bundle="index"] .announcement-copy .announcement-actions {
  animation: pro-announcement-mask-rise .68s cubic-bezier(.16, 1, .3, 1) .58s both;
}

@keyframes pro-announcement-mask-rise {
  from {
    opacity: 0;
    transform: translateY(105%);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-page-bundle="index"] .announcement-copy :is(.announcement-title-word, p, .announcement-actions) {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
  }
}

/* The opening screen stays intentionally quiet: the colored wave artwork is
   removed so only the centered message remains on the black field. */
html[data-page-bundle="index"] .announcement-card {
  background: transparent !important;
}

html[data-page-bundle="index"] .announcement-card .announcement-glow {
  display: none !important;
}

/* Keep the first visible artwork detail below the global header. The source
   image stays intact; only its top edge is cropped inside the hero. */
@media (min-width: 761px) {
  html[data-page-bundle="index"] .announcement-card .announcement-glow {
    clip-path: inset(64px 0 0);
  }
}

@media (min-width: 901px) {
  html[data-page-bundle="index"] .announcement-card::before {
    display: none !important;
  }

  html[data-page-bundle="index"] .announcement-card::after {
    display: block !important;
  }
}

@media (max-width: 760px) {
  html[data-page-bundle="index"] .announcement-card::before {
    display: block !important;
  }

  html[data-page-bundle="index"] .announcement-card::after {
    display: none !important;
  }
}

/* Supplied PromanOS Business artwork carries its own title. Keep it as a
   clean image card: no duplicate HTML title and no frosted copy overlay. */
html[data-page-bundle="index"] .launcher .business {
  --tile-image: image-set(url("assets/tile-promanos-business-v8.avif") type("image/avif"),url("assets/tile-promanos-business-v8.webp") type("image/webp"),url("assets/tile-promanos-business-v8.png") type("image/png"));
  --tile-position: center;
}

html[data-page-bundle="index"] .launcher .business::after {
  background-image: image-set(url("assets/tile-promanos-business-v8.avif") type("image/avif"),url("assets/tile-promanos-business-v8.webp") type("image/webp"),url("assets/tile-promanos-business-v8.png") type("image/png")) !important;
}

html[data-page-bundle="index"] .launcher .business .product-body::after,
html[data-page-bundle="index"] .launcher .business:is(:hover, :focus-within) .product-body::after {
  display: none !important;
  opacity: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Product names live on the artwork rather than in a separate copy block.
   The title uses the same motion token as the image, so translations remain
   selectable while visually travelling with the photographed surface. */
html[data-page-bundle="index"] .launcher .major:is(.business, .pro1, .pronet, .market) {
  --photo-art-motion: translate3d(0, 0, 0) scale(1);
}

html[data-page-bundle="index"] .launcher .major:is(.business, .pro1, .pronet, .market)::after {
  transform: var(--photo-art-motion) !important;
  transform-origin: center;
  transition: transform .72s cubic-bezier(.22, 1, .36, 1) !important;
}

html[data-page-bundle="index"] .launcher .photo-card-title {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 26px;
  left: 26px;
  margin: 0;
  color: rgba(246, 248, 252, .88);
  font-size: clamp(24px, 2.1vw, 34px);
  font-weight: 500;
  letter-spacing: -.065em;
  line-height: .96;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .28);
  transform: translate3d(0, -50%, 0) scale(1);
  transform-origin: center;
  transition: transform .72s cubic-bezier(.22, 1, .36, 1), color .3s ease;
  mix-blend-mode: screen;
}

@media (any-hover: hover) {
  html[data-page-bundle="index"] .launcher .major:is(.business, .pro1, .pronet, .market):is(:hover, :focus-within) {
    --photo-art-motion: translate3d(-4px, -3px, 0) scale(1.022);
  }

  html[data-page-bundle="index"] .launcher .major:is(.business, .pro1, .pronet, .market):is(:hover, :focus-within)::after {
    transform: var(--photo-art-motion) !important;
  }

  html[data-page-bundle="index"] .launcher .major:is(.business, .pro1, .pronet, .market):is(:hover, :focus-within) .photo-card-title {
    color: rgba(255, 255, 255, .96);
    transform: translate3d(-4px, calc(-50% - 3px), 0) scale(1.022);
  }
}

@media (max-width: 720px) {
  html[data-page-bundle="index"] .launcher .photo-card-title {
    right: 18px;
    left: 18px;
    font-size: clamp(22px, 7vw, 28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-page-bundle="index"] .launcher .major:is(.business, .pro1, .pronet, .market)::after,
  html[data-page-bundle="index"] .launcher .photo-card-title {
    transition: none !important;
  }
}

/* PRO-1 keeps its original centered title placement on the artwork. */
html[data-page-bundle="index"] .launcher .pro1 .photo-card-title {
  top: 50%;
  bottom: auto;
  text-align: center;
  transform: translate3d(0, -50%, 0) scale(1);
  transform-origin: center;
}

@media (any-hover: hover) {
  html[data-page-bundle="index"] .launcher .pro1:is(:hover, :focus-within) .photo-card-title {
    transform: translate3d(-4px, calc(-50% - 3px), 0) scale(1.022);
  }
}

@media (max-width: 720px) {
  html[data-page-bundle="index"] .launcher .pro1 .photo-card-title {
    top: 50%;
    bottom: auto;
  }
}

/* Product cards stay image-led on desktop; hovering never reveals extra copy. */
@media (hover: hover) and (pointer: fine) {
  html[data-page-bundle="index"] .launcher .major .product-desc,
  html[data-page-bundle="index"] .launcher .major:is(:hover, :focus-within) .product-desc {
    display: none !important;
    max-height: 0 !important;
    margin-top: 0 !important;
    opacity: 0 !important;
  }

  html[data-page-bundle="index"] .launcher .major .product-body::after,
  html[data-page-bundle="index"] .launcher .major:is(:hover, :focus-within) .product-body::after {
    display: none !important;
    opacity: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Supplied textures for the compact Partner Program and Benchmarks cards. */
html[data-page-bundle="index"] .launcher .utility.partners {
  --utility-image: image-set(url("assets/tile-utility-partners-bronze-v1.avif") type("image/avif"),url("assets/tile-utility-partners-bronze-v1.webp") type("image/webp"),url("assets/tile-utility-partners-bronze-v1.png") type("image/png"));
}

html[data-page-bundle="index"] .launcher .utility.partners::before {
  background-image: image-set(url("assets/tile-utility-partners-bronze-v1.avif") type("image/avif"),url("assets/tile-utility-partners-bronze-v1.webp") type("image/webp"),url("assets/tile-utility-partners-bronze-v1.png") type("image/png")) !important;
  background-position: center;
  background-size: cover;
  opacity: .94;
  filter: none;
  transform: none;
}

html[data-page-bundle="index"] .launcher .utility.benchmarks {
  --utility-image: image-set(url("assets/tile-utility-benchmarks-crimson-v1.avif") type("image/avif"),url("assets/tile-utility-benchmarks-crimson-v1.webp") type("image/webp"),url("assets/tile-utility-benchmarks-crimson-v1.png") type("image/png"));
}

html[data-page-bundle="index"] .launcher .utility.benchmarks::before {
  background-image: image-set(url("assets/tile-utility-benchmarks-crimson-v1.avif") type("image/avif"),url("assets/tile-utility-benchmarks-crimson-v1.webp") type("image/webp"),url("assets/tile-utility-benchmarks-crimson-v1.png") type("image/png")) !important;
  background-position: center;
  background-size: cover;
  opacity: .94 !important;
  filter: none !important;
  transform: none !important;
}

@media (any-hover: hover) {
  html[data-page-bundle="index"] .launcher .utility:is(.partners, .benchmarks):is(:hover, :focus-within)::before {
    opacity: .94 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* Every homepage card uses the same quiet image-only response. */
html[data-page-bundle="index"] .launcher .major::before,
html[data-page-bundle="index"] .launcher .major:is(:hover, :focus-within)::before {
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}

html[data-page-bundle="index"] .launcher .major::after,
html[data-page-bundle="index"] .launcher .utility::before {
  filter: none !important;
  transform: scale(1) !important;
  transform-origin: center;
  transition: transform .42s cubic-bezier(.22, 1, .36, 1) !important;
}

html[data-page-bundle="index"] .launcher .major::after {
  opacity: 1 !important;
}

html[data-page-bundle="index"] .launcher .utility::before {
  opacity: .94 !important;
}

html[data-page-bundle="index"] .launcher .pronet::after {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Supplied homepage textures for the ProNet and PRO-1 cards. */
html[data-page-bundle="index"] .launcher .pronet::after {
  background-image: image-set(url("assets/tile-pronet-carbon-v1.avif") type("image/avif"),url("assets/tile-pronet-carbon-v1.webp") type("image/webp"),url("assets/tile-pronet-carbon-v1.png") type("image/png")) !important;
}

html[data-page-bundle="index"] .launcher .pro1::after {
  background-image: image-set(url("assets/tile-pro-1-onyx-v1.avif") type("image/avif"),url("assets/tile-pro-1-onyx-v1.webp") type("image/webp"),url("assets/tile-pro-1-onyx-v1.png") type("image/png")) !important;
}

@media (hover: hover) and (pointer: fine) {
  html[data-page-bundle="index"] .launcher .card:not(.disabled):is(:hover, :focus-within) {
    border-color: rgba(255, 255, 255, .09) !important;
    box-shadow: none !important;
    transform: scale(1.003) !important;
    transform-origin: center;
  }

  html[data-page-bundle="index"] .launcher .major:is(:hover, :focus-within)::after,
  html[data-page-bundle="index"] .launcher .utility:is(:hover, :focus-within)::before {
    filter: none !important;
    transform: none !important;
  }

  html[data-page-bundle="index"] .launcher .major:is(:hover, :focus-within)::after {
    opacity: 1 !important;
  }

  html[data-page-bundle="index"] .launcher .utility:is(:hover, :focus-within)::before {
    opacity: .94 !important;
  }

html[data-page-bundle="index"] .launcher .photo-card-title,
html[data-page-bundle="index"] .launcher .major:is(:hover, :focus-within) .photo-card-title {
    color: rgba(246, 248, 252, .88) !important;
    transform: translate3d(0, -50%, 0) scale(1) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-page-bundle="index"] .launcher .major::after,
  html[data-page-bundle="index"] .launcher .utility::before {
    transition: none !important;
  }
}

/* Last override for the lower rail: five landscape cards with centred titles. */
@media (min-width: 761px) {
  html[data-page-bundle="index"] .launcher .utility-rail > .utility {
    min-height: clamp(148px, 9.2vw, 180px) !important;
  }
}

html[data-page-bundle="index"] .launcher .utility .utility-copy {
  position: absolute !important;
  z-index: 3;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 22px;
  text-align: center !important;
}

html[data-page-bundle="index"] .launcher .utility .utility-copy h3 {
  margin: 0 !important;
  color: rgba(246, 248, 252, .94);
  font-size: clamp(18px, 1.38vw, 22px) !important;
  font-weight: 560;
  letter-spacing: -.045em;
  line-height: 1.04;
  text-align: center !important;
}

/* The availability label belongs to the lower edge of the Token card, leaving
   the product name alone in the optical centre. */
html[data-page-bundle="index"] .launcher .utility.token .utility-title-row {
  display: contents;
}

html[data-page-bundle="index"] .launcher .utility.token .utility-status {
  position: absolute;
  z-index: 4;
  bottom: -32px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 3px 8px;
  transform: translateX(-50%);
  white-space: nowrap;
}

html[data-page-bundle="index"] .launcher .utility.token {
  overflow: visible !important;
}

@media (max-width: 760px) {
  html[data-page-bundle="index"] .launcher .utility-rail {
    padding-bottom: 46px;
  }
}

html[data-page-bundle="index"] .launcher .utility.token .utility-copy > p {
  display: none !important;
}

/* Keep the opening field completely flat: the wide, low-opacity radial veil
   was reading as an unintended glow around the hero copy. */
html[data-page-bundle="index"] .announcement-card::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* The hero resolves first. Product cards then reveal only as their part of the
   page enters view, so scrolling down progressively introduces the ecosystem. */
html[data-page-bundle="index"] .launcher .promanos-scroll-item {
  will-change: opacity, translate, scale, filter;
  transition:
    opacity 1.12s cubic-bezier(.16, 1, .3, 1) !important,
    translate 1.28s cubic-bezier(.16, 1, .3, 1) !important,
    scale 1.28s cubic-bezier(.16, 1, .3, 1) !important,
    filter 1.04s cubic-bezier(.16, 1, .3, 1) !important;
}

html[data-page-bundle="index"] .launcher .promanos-scroll-item:not(.is-revealed) {
  opacity: 0 !important;
  translate: 0 30px !important;
  scale: .978 !important;
  filter: blur(7px) saturate(.94) !important;
  pointer-events: none;
}

html[data-page-bundle="index"] .launcher .promanos-scroll-item.is-revealed {
  opacity: 1 !important;
  translate: 0 0 !important;
  scale: 1 !important;
  filter: none !important;
  pointer-events: auto;
}

/* Text follows the surface by a fraction of a beat. It makes the entrance
   feel assembled rather than simply faded in. */
html[data-page-bundle="index"] .launcher .promanos-scroll-item :is(.card-top, .product-body, .utility-copy, .utility-icon, .photo-card-title) {
  transition:
    opacity .72s cubic-bezier(.16, 1, .3, 1) .14s,
    translate .82s cubic-bezier(.16, 1, .3, 1) .14s,
    filter .68s cubic-bezier(.16, 1, .3, 1) .14s !important;
}

html[data-page-bundle="index"] .launcher .promanos-scroll-item:not(.is-revealed) :is(.card-top, .product-body, .utility-copy, .utility-icon, .photo-card-title) {
  opacity: 0 !important;
  translate: 0 10px !important;
  filter: blur(3px) !important;
}

html[data-page-bundle="index"] .launcher .promanos-scroll-item.is-revealed :is(.card-top, .product-body, .utility-copy, .utility-icon, .photo-card-title) {
  opacity: 1 !important;
  translate: 0 0 !important;
  filter: none !important;
}

/* Keep the first frame intentionally empty while the page assembles.  The
   opening copy resolves first; product surfaces only start their entrance
   afterwards, making the transition readable even on a fast local load. */
html.promanos-intro-pending[data-page-bundle="index"] .announcement-card,
html.promanos-intro-pending[data-page-bundle="index"] .launcher .card {
  visibility: hidden;
}

html.promanos-intro-ready[data-page-bundle="index"] .announcement-card,
html.promanos-intro-ready[data-page-bundle="index"] .launcher .card {
  visibility: visible;
}

/* Final texture overrides: keep supplied artwork fixed inside each utility
   card while preserving the existing centred labels and hover treatment. */
html[data-page-bundle="index"] .launcher .utility.token {
  --utility-image: image-set(url("assets/tile-pro-token-custom-v1.avif") type("image/avif"),url("assets/tile-pro-token-custom-v1.webp") type("image/webp"),url("assets/tile-pro-token-custom-v1.png") type("image/png"));
}

html[data-page-bundle="index"] .launcher .utility.token::before {
  background-image: image-set(url("assets/tile-pro-token-custom-v1.avif") type("image/avif"),url("assets/tile-pro-token-custom-v1.webp") type("image/webp"),url("assets/tile-pro-token-custom-v1.png") type("image/png")) !important;
  background-position: center;
  background-size: cover;
  opacity: .94 !important;
  filter: none !important;
  transform: none !important;
}

html[data-page-bundle="index"] .launcher .utility.benchmarks {
  --utility-image: image-set(url("assets/tile-utility-benchmarks-custom-v1.avif") type("image/avif"),url("assets/tile-utility-benchmarks-custom-v1.webp") type("image/webp"),url("assets/tile-utility-benchmarks-custom-v1.png") type("image/png"));
}

html[data-page-bundle="index"] .launcher .utility.benchmarks::before {
  background-image: image-set(url("assets/tile-utility-benchmarks-custom-v1.avif") type("image/avif"),url("assets/tile-utility-benchmarks-custom-v1.webp") type("image/webp"),url("assets/tile-utility-benchmarks-custom-v1.png") type("image/png")) !important;
  background-position: center;
  background-size: cover;
  opacity: .94 !important;
  filter: none !important;
  transform: none !important;
}

html[data-page-bundle="index"] .launcher .utility.knowledge-base {
  --utility-image: image-set(url("assets/tile-utility-knowledge-custom-v1.avif") type("image/avif"),url("assets/tile-utility-knowledge-custom-v1.webp") type("image/webp"),url("assets/tile-utility-knowledge-custom-v1.png") type("image/png"));
}

html[data-page-bundle="index"] .launcher .utility.knowledge-base::before {
  background-image: image-set(url("assets/tile-utility-knowledge-custom-v1.avif") type("image/avif"),url("assets/tile-utility-knowledge-custom-v1.webp") type("image/webp"),url("assets/tile-utility-knowledge-custom-v1.png") type("image/png")) !important;
  background-position: center;
  background-size: cover;
  opacity: .94 !important;
  filter: none !important;
  transform: none !important;
}

html[data-page-bundle="index"] .launcher .utility.partners {
  --utility-image: image-set(url("assets/tile-utility-partners-custom-v1.avif") type("image/avif"),url("assets/tile-utility-partners-custom-v1.webp") type("image/webp"),url("assets/tile-utility-partners-custom-v1.png") type("image/png"));
}

html[data-page-bundle="index"] .launcher .utility.partners::before {
  background-image: image-set(url("assets/tile-utility-partners-custom-v1.avif") type("image/avif"),url("assets/tile-utility-partners-custom-v1.webp") type("image/webp"),url("assets/tile-utility-partners-custom-v1.png") type("image/png")) !important;
  background-position: center;
  background-size: cover;
  opacity: .94 !important;
  filter: none !important;
  transform: none !important;
}

html[data-page-bundle="index"] .launcher .utility.docs {
  --utility-image: image-set(url("assets/tile-utility-docs-custom-v1.avif") type("image/avif"),url("assets/tile-utility-docs-custom-v1.webp") type("image/webp"),url("assets/tile-utility-docs-custom-v1.png") type("image/png"));
}

html[data-page-bundle="index"] .launcher .utility.docs::before {
  background-image: image-set(url("assets/tile-utility-docs-custom-v1.avif") type("image/avif"),url("assets/tile-utility-docs-custom-v1.webp") type("image/webp"),url("assets/tile-utility-docs-custom-v1.png") type("image/png")) !important;
  background-position: center;
  background-size: cover;
  opacity: .94 !important;
  filter: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-page-bundle="index"] .launcher .promanos-scroll-item,
  html[data-page-bundle="index"] .launcher .promanos-scroll-item:not(.is-revealed) {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
    filter: none !important;
    transition: none !important;
  }

  html[data-page-bundle="index"] .launcher .promanos-scroll-item :is(.card-top, .product-body, .utility-copy, .utility-icon, .photo-card-title),
  html[data-page-bundle="index"] .launcher .promanos-scroll-item:not(.is-revealed) :is(.card-top, .product-body, .utility-copy, .utility-icon, .photo-card-title) {
    opacity: 1 !important;
    translate: 0 0 !important;
    filter: none !important;
    transition: none !important;
  }


  html.promanos-intro-pending[data-page-bundle="index"] .announcement-card,
  html.promanos-intro-pending[data-page-bundle="index"] .launcher .card {
    visibility: visible;
  }
}

/* Final desktop sizing override: the export's viewport grid must not clip the
   second product row or the utility section. */
@media (min-width: 901px) {
  html[data-page-bundle="index"] .launcher {
    grid-template-rows: auto auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html[data-page-bundle="index"] .launcher .product-rail {
    display: grid !important;
    grid-template-rows: repeat(2, clamp(220px, 22vw, 350px)) !important;
    overflow: visible !important;
    height: auto !important;
  }

  html[data-page-bundle="index"] .launcher .product-rail > .card {
    opacity: 1 !important;
    visibility: visible !important;
    translate: none !important;
    transform: none !important;
    filter: none !important;
  }

  html[data-page-bundle="index"] .launcher .card :is(.card-top, .product-body, .product-desc, .utility-copy, .utility-icon, .photo-card-title, .major-icon) {
    opacity: 1 !important;
    visibility: visible !important;
    translate: none !important;
    transform: none !important;
    filter: none !important;
  }

  html[data-page-bundle="index"] .launcher .ecosystem-additions,
  html[data-page-bundle="index"] .launcher .utility-rail,
  html[data-page-bundle="index"] .launcher .utility-rail > .utility {
    opacity: 1 !important;
    visibility: visible !important;
    translate: none !important;
    transform: none !important;
    filter: none !important;
  }

  html[data-page-bundle="index"] .launcher .promanos-scroll-item:not(.is-revealed) :is(.card-top, .product-body, .product-desc, .utility-copy, .utility-icon, .photo-card-title, .major-icon) {
    opacity: 1 !important;
    visibility: visible !important;
    translate: none !important;
    transform: none !important;
    filter: none !important;
  }
}