.case-playground {
  position: relative;
  isolation: isolate;
}

.case-actions [hidden],
.case-switch [hidden] {
  display: none !important;
}

.case-playground::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 25%, #4bdcf52e 48%, transparent 70%);
  background-size: 220% 100%;
  opacity: .55;
  animation: case-sheen 7s ease-in-out infinite;
}

.case-preview-link > * {
  transition: opacity .32s ease, transform .52s cubic-bezier(.2, .8, .2, 1);
}

.case-preview-link.is-changing > *:not(.case-open-hint) {
  animation: case-enter .52s cubic-bezier(.2, .8, .2, 1);
}

@keyframes case-enter {
  from { opacity: .2; transform: scale(1.018) translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes case-sheen {
  0%, 55% { background-position: 120% 0; }
  85%, 100% { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .case-playground::after { animation: none; opacity: .18; }
  .case-preview-link.is-changing > *:not(.case-open-hint) { animation: none; }
  .case-preview-link > * { transition: none; }
}

/* Live embedded demo: the real site scaled into the browser window, over a screenshot fallback. */
.case-browser { position: relative; }
.case-live-frame {
  position: absolute; inset: 42px 0 0 0; z-index: 2; overflow: hidden; background: #fff;
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.case-live-frame.is-ready { opacity: 1; pointer-events: auto; }
.case-live-frame[hidden] { display: none; }
.case-live-frame iframe { position: absolute; inset: 0 auto auto 0; border: 0; transform-origin: 0 0; background: #fff; }
@media (max-width: 700px) { .case-live-frame { inset-block-start: 38px; } }
@media (prefers-reduced-motion: reduce) { .case-live-frame { transition: none; } }

/* Единый процесс: пять карточек вместо длинной строки со стрелками */
.flow { margin-top: 18px; padding: 38px; border: 1px solid var(--sb-line); border-radius: 24px; background: #0d1039; }
.flow-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.flow-head .tag { margin: 0 0 12px; }
.flow-head h3 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 38px); line-height: 1.08; letter-spacing: -.03em; }
.flow-head p:not(.tag) { max-width: 62ch; margin: 0; color: var(--sb-muted); }
.flow-head .button { white-space: nowrap; }
.flow-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.flow-steps li { position: relative; padding: 20px 18px 22px; border: 1px solid #2a3166; border-radius: 18px; background: #0a0d33; transition: border-color .2s ease, transform .2s ease; }
.flow-steps li:hover { border-color: var(--sb-cyan); transform: translateY(-2px); }
.flow-steps span { display: block; margin-bottom: 26px; color: var(--sb-cyan); font: 800 12px monospace; letter-spacing: .12em; }
.flow-steps h4 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.02em; }
.flow-steps p { margin: 0; color: var(--sb-muted); font-size: 14px; line-height: 1.55; }
@media (max-width: 1050px) { .flow-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .flow { padding: 22px 18px; border-radius: 20px; }
  .flow-head { grid-template-columns: 1fr; gap: 20px; }
  .flow-head .button { width: 100%; }
  .flow-steps { grid-template-columns: 1fr; }
  .flow-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 0 12px; padding: 16px; }
  .flow-steps span { grid-row: 1 / 3; margin: 2px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .flow-steps li { transition: none; } .flow-steps li:hover { transform: none; } }

/* Подписи и названия кейсов длиннее: аккуратные переносы */
.case-picker button { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.case-picker small { overflow-wrap: anywhere; line-height: 1.35; }
.case-features li { overflow-wrap: anywhere; }
.case-note { margin: 12px 3px 0; padding: 12px 14px; border: 1px solid #323a72; border-radius: 12px; background: #0b0e35; color: var(--sb-muted); font-size: 13px; line-height: 1.5; }
.case-note[hidden] { display: none; }
.case-note a { color: var(--sb-cyan); font-weight: 700; }