/* Final readability layer for text shown over the shared animated surface. */
body .readability-min-text.readability-min-text {
  font-size: 16px !important;
}

body .readability-min-before.readability-min-before::before,
body .readability-min-after.readability-min-after::after {
  font-size: 16px !important;
}

.stagenav .snav-item {
  color: #d8d1de !important;
  font-size: 16px !important;
}

.stagenav .snav-item.active,
.stagenav .snav-item:hover {
  color: #decfff !important;
}

.ops-release-marker {
  font-size: 16px !important;
}

.ops-pillar p {
  width: 84%;
  margin: 10px auto 0;
  color: #d7cfdd !important;
  font-size: 16px !important;
  line-height: 1.25;
  white-space: normal;
  transform: none;
}

.ops-pillar.is-active p {
  color: #ebe4f0 !important;
}

.readability-copy,
.readability-copy-before::before,
.readability-copy-after::after {
  color: #ece7f1 !important;
}

.readability-accent,
.readability-accent-before::before,
.readability-accent-after::after {
  color: #decfff !important;
}

.promise .pcard p {
  color: #ece7f1 !important;
}

.promise .pcard h4::before {
  color: #decfff !important;
}

/* Mid-depth card fill: lighter than near-black, still solid enough for copy. */
#s3.product-design-stage .product-decision-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--decision-accent-rgb), 0.15), transparent 40%),
    linear-gradient(154deg, rgba(43, 34, 78, 0.93), rgba(18, 14, 40, 0.94) 68%);
}

#s3.product-design-stage .product-decision-card.is-showcase-active {
  background:
    radial-gradient(circle at 50% -2%, rgba(var(--decision-accent-rgb), 0.24), transparent 41%),
    linear-gradient(154deg, rgba(48, 38, 88, 0.96), rgba(21, 16, 47, 0.97) 70%);
}

#s4.development-design-stage .product-decision-card {
  background:
    radial-gradient(circle at 18% -10%, rgba(var(--decision-accent-rgb), 0.13), transparent 42%),
    linear-gradient(118deg, rgba(45, 36, 80, 0.95), rgba(21, 16, 45, 0.96) 70%);
}

#s3.product-design-stage .product-decision-meaning div {
  grid-template-columns: 96px minmax(0, 1fr);
}

#s3.product-design-stage .product-decision-meaning small {
  min-width: 96px;
}

.readability-min-text::placeholder {
  color: #ddd5e4 !important;
  opacity: 1;
}

@media (max-width: 680px) {
  .readability-min-text,
  .readability-min-before::before,
  .readability-min-after::after {
    overflow-wrap: anywhere;
  }

  .cooperation-bubble p {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}