.development-landing {
  --ai-dev-border: color-mix(in srgb, var(--ds-divider) 72%, transparent);
  --ai-dev-brand-soft: color-mix(in srgb, var(--ds-brand) 10%, var(--ds-bg-white));
  --ai-dev-dark-border: color-mix(in srgb, var(--ds-text-light) 16%, transparent);
  --ai-dev-dark-grid: color-mix(in srgb, var(--ds-text-light) 5%, transparent);
  background: var(--ds-bg-white);
  color: var(--ds-text-primary);
  font-family: var(--ds-font-family);
  overflow: hidden;
}

.development-landing * {
  box-sizing: border-box;
}

.ai-dev-hero,
.ai-dev-section {
  padding-block: 72px;
}

.ai-dev-hero {
  align-items: center;
  background: var(--ds-bg-dark);
  display: flex;
  isolation: isolate;
  /* Pull the section under the transparent sticky header (landing_header.html
     publishes --ds-header-h) so its own dark background shows through instead
     of the page's white behind a gap. Height grows by the same amount that
     moved up, so the bottom edge (where #scenarios starts) is unaffected. */
  margin-top: calc(-1 * var(--ds-header-h, 72px));
  min-height: 100svh;
  overflow: hidden;
  position: relative;
}

.ai-dev-hero .ds-display-headline {
  color: var(--ds-text-light);
  font-size: clamp(28px, 4.4vw, 60px);
}

.ai-dev-hero::before {
  background: color-mix(in srgb, var(--ds-bg-dark) 76%, transparent);
  content: "";
  inset: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  right: 0;
  top: 0;
  z-index: 2;
}

.ai-dev-hero__background {
  inset: 0;
  position: absolute;
}

.ai-dev-hero__background video,
.ai-dev-hero__background img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  width: 100%;
}

.ai-dev-hero__background video {
  position: relative;
  z-index: 1;
}

.ai-dev-hero__background img {
  inset: 0;
  position: absolute;
  z-index: 0;
}

.ai-dev-hero__content-film {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
  z-index: 3;
}

.ai-dev-hero__film-screen {
  align-items: center;
  display: flex;
  height: 100%;
  width: 100%;
}

.ai-dev-hero__film-screen--hero {
  /* The video/overlay above fills the section edge to edge on purpose (so the
     dark background shows through the transparent header), but this flex box
     centers the copy within that same full-bleed area. Without this padding
     the centered kicker/headline lands partly behind the header. Desktop's
     scroll-transition variant gets its own clearance from the JS pin math
     (hero-scroll-transition.js), not from this rule. */
  padding-top: var(--ds-header-h, 72px);
}

.ai-dev-hero__film-screen--hero > .container {
  width: 100%;
}

.ai-dev-hero__film-screen--scenarios {
  display: none;
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .development-landing:has(.ai-dev-hero--scroll-transition) {
    overflow: visible;
  }

  .ai-dev-hero.ai-dev-hero--scroll-transition {
    background: var(--ds-bg-white);
    display: block;
    height: var(--ai-dev-hero-stage-height);
    isolation: auto;
    min-height: var(--ai-dev-hero-stage-height);
    overflow: visible;
    padding-block: 0;
  }

  .ai-dev-hero--scroll-transition::before {
    display: none;
  }

  .ai-dev-hero--scroll-transition .ai-dev-hero__background {
    background: transparent;
    border-radius: 0;
    height: var(--ai-dev-hero-frame-height);
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100vw;
    will-change: border-radius, height, left, top, width;
    z-index: 2;
  }

  .ai-dev-hero--scroll-transition .ai-dev-hero__background::before {
    background: color-mix(in srgb, var(--ds-bg-dark) 72%, transparent);
    content: "";
    inset: 0;
    opacity: calc(1 - var(--ai-dev-hero-scenario-opacity, 0));
    pointer-events: none;
    position: absolute;
    z-index: 2;
  }

  .ai-dev-hero--scroll-transition .ai-dev-hero__background::after {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--ds-bg-dark) 88%, transparent) 0%,
      color-mix(in srgb, var(--ds-bg-dark) 72%, transparent) 38%,
      color-mix(in srgb, var(--ds-bg-dark) 26%, transparent) 72%,
      transparent 100%
    );
    content: "";
    inset: 0;
    opacity: var(--ai-dev-hero-scenario-opacity, 0);
    pointer-events: none;
    position: absolute;
    z-index: 2;
  }

  .ai-dev-hero--scroll-transition .ai-dev-hero__content-film {
    height: calc(var(--ai-dev-hero-frame-height) * 2);
    inset: auto 0 0;
    top: 0;
    will-change: transform;
  }

  .ai-dev-hero--scroll-transition .ai-dev-hero__film-screen {
    display: flex;
    height: var(--ai-dev-hero-frame-height);
  }

  .ai-dev-hero--scroll-transition .ai-dev-hero__film-screen--hero {
    opacity: var(--ai-dev-hero-intro-opacity, 1);
  }

  /* Медиаповерхность фиксирована с pointer-events: none, чтобы не перекрывать
     страницу; интерактивному hero-копирайтингу клики возвращаем. Когда copy
     скрыт, JS выставляет inert на весь hero-screen. */
  .ai-dev-hero--scroll-transition .ai-dev-hero__film-screen--hero .ai-dev-hero__copy {
    pointer-events: auto;
  }

  .ai-dev-hero--scroll-transition .ai-dev-hero__film-screen--scenarios {
    align-items: flex-start;
    position: relative;
  }

  .ai-dev-hero--scroll-transition .ai-dev-hero__film-screen--scenarios .ai-dev-scenarios-intro__content {
    align-items: flex-end;
    align-self: stretch;
    color: var(--ds-text-light);
    display: flex;
    height: var(--ai-dev-hero-end-height);
    max-width: none;
    opacity: var(--ai-dev-hero-scenario-opacity, 0);
    padding: clamp(var(--ds-space-xl), 5vw, var(--ds-space-5xl));
    position: relative;
    text-shadow: none;
    width: 100%;
    z-index: 1;
  }

  .ai-dev-hero--scroll-transition .ai-dev-hero__film-screen--scenarios .ai-dev-section-heading {
    max-width: 720px;
  }

  .ai-dev-hero--scroll-transition .ai-dev-hero__film-screen--scenarios .ds-section-headline {
    color: var(--ds-text-light);
  }

  .ai-dev-hero--scroll-transition .ai-dev-hero__film-screen--scenarios .ds-section-sub {
    /* Same brighten as the base rule below: this state has no text-shadow of
       its own (the hero's overlay is assumed to be enough), so the color
       needs to carry all the contrast against the photo by itself. */
    color: color-mix(in srgb, var(--ds-text-light) 85%, var(--ds-text-light-secondary) 15%);
  }

  .ai-dev-scenarios--transition-source-hidden .ai-dev-scenarios-intro {
    display: none;
  }

  .ai-dev-scenarios--transition-source-hidden .ai-dev-scenario-grid {
    margin-top: 0;
  }

  /* The heading lives inside the hero once it has transitioned there, so the
     section's own top padding is the only gap left before the cards: full
     section padding (72px here, 112px at 992px+) reads as a stray empty band.
     Match the ~40px rhythm every other section keeps between its heading and
     its grid (.ai-dev-section-heading margin-bottom: var(--ds-space-5xl)). */
  .ai-dev-scenarios--transition-source-hidden {
    padding-top: var(--ds-space-5xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-dev-hero__background video {
    display: none;
  }
}

.ai-dev-hero__copy {
  align-items: center;
  display: flex;
  flex-direction: column;
  max-width: 920px;
}

.ai-dev-hero__layout {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  text-align: center;
}

.ai-dev-hero__line {
  display: inline;
}

.ai-dev-hero .ai-dev-kicker {
  color: var(--ds-text-light-secondary);
}

@media (max-width: 575px) {
  .ai-dev-hero__line {
    display: block;
  }
}

.ai-dev-card-label {
  color: var(--ds-brand);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-bold);
  letter-spacing: 0.11em;
  margin: 0 0 var(--ds-space-md);
  text-transform: uppercase;
}

.ai-dev-hero__lead {
  color: var(--ds-text-light-secondary);
  font-size: clamp(var(--ds-fs-lg), 2.3vw, var(--ds-fs-2xl));
  line-height: var(--ds-lh-relaxed);
  margin: var(--ds-space-2xl) 0 0;
  max-width: var(--ds-prose-wide);
}

.ai-dev-actions,
.ai-dev-cases__action {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
  margin-top: var(--ds-space-3xl);
}

.ai-dev-hero__copy .ai-dev-actions {
  align-items: center;
  justify-content: center;
}

.ai-dev-hero__secondary-action,
.ai-dev-hero__secondary-action:hover,
.ai-dev-hero__secondary-action:focus-visible {
  color: var(--ds-text-light);
}

.ai-dev-hero__note {
  border-top: 1px solid var(--ai-dev-dark-border);
  color: var(--ds-text-light-secondary);
  font-size: var(--ds-fs-sm);
  line-height: var(--ds-lh-relaxed);
  margin: var(--ds-space-xl) 0 0;
  max-width: var(--ds-prose-regular);
  padding-top: var(--ds-space-md);
}

.ai-dev-section-heading {
  margin-bottom: var(--ds-space-5xl);
  max-width: 800px;
}

.development-landing .ds-section-headline {
  font-size: clamp(28px, 2.6vw, 40px);
}

.ai-dev-visual {
  aspect-ratio: 4 / 3;
  background: var(--ds-bg-section);
  border: 1px solid var(--ai-dev-border);
  border-radius: var(--ds-radius-2xl);
  box-shadow: var(--ds-shadow-card-lg);
  margin-inline: 0;
  overflow: hidden;
}

.ai-dev-visual img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.ai-dev-visual--workflow img {
  object-position: 68% center;
}

.ai-dev-visual--architecture {
  background: var(--ds-bg-dark);
  border-color: var(--ai-dev-dark-border);
  box-shadow: none;
}

.ai-dev-visual--architecture img {
  transform: scale(1.16);
}

.ai-dev-scenarios-intro {
  display: grid;
  min-height: clamp(440px, 138vw, 560px);
  position: relative;
}

.ai-dev-scenarios-intro .ai-dev-visual--workflow {
  aspect-ratio: auto;
  grid-area: 1 / 1;
  height: 100%;
  min-height: inherit;
  width: 100%;
}

.ai-dev-scenarios-intro::after {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ds-bg-dark) 86%, transparent) 0%,
    color-mix(in srgb, var(--ds-bg-dark) 68%, transparent) 42%,
    color-mix(in srgb, var(--ds-bg-dark) 16%, transparent) 78%,
    transparent 100%
  );
  border-radius: var(--ds-radius-2xl);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.ai-dev-scenarios-intro__content {
  align-self: end;
  color: var(--ds-text-light);
  grid-area: 1 / 1;
  max-width: 680px;
  padding: var(--ds-space-xl);
  position: relative;
  /* The photo behind this copy has light patches (desk, papers); without a
     shadow the gray kicker/sub text washes out against them. Removed again
     once the block transitions into the hero, whose own dark overlay already
     gives enough contrast (see the reset a few rules up). */
  text-shadow:
    0 1px 2px color-mix(in srgb, var(--ds-bg-dark) 85%, transparent),
    0 4px 16px color-mix(in srgb, var(--ds-bg-dark) 60%, transparent);
  z-index: 2;
}

.ai-dev-scenarios-intro__content .ai-dev-section-heading {
  margin-bottom: 0;
}

.ai-dev-scenarios-intro__content .ai-dev-kicker {
  color: var(--ds-brand-200);
}

.ai-dev-scenarios-intro__content .ds-section-headline {
  color: var(--ds-text-light);
}

.ai-dev-scenarios-intro__content .ds-section-sub {
  /* The default --ds-text-light-secondary gray reads too dim over a busy photo
     even with the text-shadow above; brighten it while keeping it a step
     below the headline's --ds-text-light so the hierarchy still reads. */
  color: color-mix(in srgb, var(--ds-text-light) 85%, var(--ds-text-light-secondary) 15%);
}

.ai-dev-scenario-grid,
.ai-dev-outcomes,
.ai-dev-case-grid {
  display: grid;
  gap: var(--ds-space-md);
}

.ai-dev-outcomes {
  grid-auto-rows: 1fr;
}

.ai-dev-scenario-grid {
  margin-top: var(--ds-space-5xl);
}

.ai-dev-scenario-card,
.ai-dev-outcome-card {
  padding: var(--ds-space-xl);
}

.ai-dev-scenario-card {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  position: relative;
}

.ai-dev-scenario-card h3,
.ai-dev-outcome-card h3,
.ai-dev-case-card h3,
.ai-dev-architecture-card h3 {
  font-size: clamp(var(--ds-fs-xl), 2.4vw, var(--ds-fs-3xl));
  font-weight: var(--ds-fw-semibold);
  letter-spacing: -0.025em;
  line-height: var(--ds-lh-snug);
  margin: 0;
}

.ai-dev-scenario-card > p:nth-of-type(2),
.ai-dev-outcome-card > p {
  color: var(--ds-text-secondary);
  line-height: var(--ds-lh-loose);
  margin: var(--ds-space-md) 0 0;
}

.ai-dev-card-line {
  background: linear-gradient(90deg, var(--ds-brand), transparent);
  height: 2px;
  margin-top: auto;
  width: 100%;
}

.ai-dev-cases {
  background: var(--ds-bg-light);
}

.ai-dev-cases__heading {
  max-width: 760px;
}

.ai-dev-case-grid {
  grid-auto-rows: 1fr;
}

/* Мозаика landing-секции кейсов: 2 карточки слева друг под другом, справа
   карточка на всю их высоту, следующая тройка идёт зеркально. Только для
   ровно 6 карточек лендинга; каталог /cases/ использует обычную сетку. */
.ai-dev-case-grid--mosaic .ai-dev-case-card {
  height: 100%;
}

.ai-dev-case-card {
  color: var(--ds-text-primary);
  display: flex;
  flex-direction: column;
  gap: 0;
  isolation: isolate;
  padding: 0;
  position: relative;
  text-decoration: none;
  transition: box-shadow var(--ds-transition), transform var(--ds-transition);
  overflow: hidden;
}

.ai-dev-case-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ds-brand) 65%, transparent);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  /* Тот же тихий lift, что у канонической .ds-card--selectable, плюс
     обводка брендового цвета вместо серой (.ds-card уже анимирует
     border-color в своём transition). */
  .ai-dev-case-card:hover {
    border-color: var(--ds-brand);
    box-shadow: var(--ds-shadow-card);
    transform: translateY(-2px);
  }

  .ai-dev-case-card:hover .ai-dev-case-card__visual img {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-dev-case-card,
  .ai-dev-case-card__visual img {
    transition: none;
  }

  .ai-dev-case-card:hover,
  .ai-dev-case-card:hover .ai-dev-case-card__visual img {
    transform: none;
  }
}

/* Изображение идёт от края до края карточки; верхние углы обрезает
   own overflow карточки. */
.ai-dev-case-card__visual {
  aspect-ratio: 16 / 10;
  border-radius: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.ai-dev-case-card__visual img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ds-transition-reveal);
  width: 100%;
}

/* Белая панель со скруглённым верхом наезжает на нижнюю кромку изображения:
   мягкий переход без градиента поверх тёмного кадра. */
.ai-dev-case-card__content {
  background: var(--ds-bg-white);
  border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--ds-space-sm);
  margin-top: calc(-1 * var(--ds-space-xl));
  padding: var(--ds-space-xl);
  position: relative;
  z-index: 1;
}

.ai-dev-case-card h3 {
  min-height: 0;
}

.ai-dev-case-card__summary {
  color: var(--ds-text-secondary);
  line-height: var(--ds-lh-relaxed);
  margin: 0;
}

/* Пока используется только в мозаике лендинга (см. медиа-запрос ниже);
   на каталоге /cases/ карточка остаётся без этой подписи. */
.ai-dev-case-card__more {
  display: none;
}

.ai-dev-cases__action {
  flex-wrap: wrap;
  justify-content: center;
}

.ai-dev-cases__action > * {
  white-space: nowrap;
}

.development-case {
  --ai-dev-border: color-mix(in srgb, var(--ds-divider) 72%, transparent);
  --ai-dev-brand-soft: color-mix(in srgb, var(--ds-brand) 10%, var(--ds-bg-white));
  --ai-dev-case-rule: color-mix(in srgb, var(--ds-text-primary) 14%, transparent);
  --ai-dev-case-dark-rule: color-mix(in srgb, var(--ds-text-light) 18%, transparent);
  background: var(--ds-bg-light);
}

.ai-dev-case-detail {
  padding-block: clamp(var(--ds-space-3xl), 7vw, var(--ds-space-5xl));
}

/* Шапка кейса идёт во всю ширину контента: полоса показателей должна
   заканчиваться там же, где линии остальных секций. Ограничение по ширине
   нужно только тексту, ради длины строки. */
.ai-dev-case-detail__header {
  max-width: 100%;
}

.ai-dev-case-detail__lead-copy {
  max-width: min(100%, 960px);
}

.ai-dev-case-detail__project {
  color: var(--ds-text-label);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-sm);
  margin: var(--ds-space-md) 0;
}

.ai-dev-case-detail h1 {
  font-size: clamp(
    var(--ds-fs-3xl),
    3.8vw,
    calc(var(--ds-fs-4xl) * 1.5)
  );
  letter-spacing: -0.045em;
  line-height: var(--ds-lh-tight);
  margin: 0;
}

.ai-dev-case-detail__summary {
  color: var(--ds-text-secondary);
  font-size: clamp(var(--ds-fs-lg), 1.8vw, var(--ds-fs-2xl));
  line-height: var(--ds-lh-relaxed);
  margin: var(--ds-space-xl) 0 0;
  max-width: var(--ds-prose-wide);
}

.ai-dev-case-detail__evidence-strip {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  margin: clamp(var(--ds-space-xl), 4vw, var(--ds-space-4xl)) 0 0;
  padding: var(--ds-space-xs) 0;
  border-bottom: 1px solid var(--ai-dev-case-rule);
  border-top: 1px solid var(--ai-dev-case-rule);
}

.ai-dev-case-detail__evidence-item {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xs);
  min-height: 100%;
  padding: var(--ds-space-xl) var(--ds-space-md);
}

.ai-dev-case-detail__evidence-item dt,
.ai-dev-case-detail__status {
  color: var(--ds-text-label);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-xs);
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

.ai-dev-case-detail__evidence-item dd {
  color: var(--ds-text-primary);
  font-size: clamp(var(--ds-fs-xl), 2.1vw, var(--ds-fs-3xl));
  font-weight: var(--ds-fw-bold);
  letter-spacing: -0.035em;
  line-height: var(--ds-lh-tight);
  margin: 0;
  order: -1;
}

.ai-dev-case-detail__evidence-item .ai-dev-case-detail__status {
  margin-top: auto;
}

.ai-dev-case-detail__plate {
  aspect-ratio: 16 / 9;
  background: var(--ai-dev-brand-soft);
  border: 1px solid var(--ai-dev-border);
  border-radius: var(--ds-radius-2xl);
  box-shadow: var(--ds-shadow-card-lg);
  margin: clamp(var(--ds-space-2xl), 5vw, var(--ds-space-5xl)) 0 0;
  overflow: hidden;
  position: relative;
}

.ai-dev-case-detail__plate img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.ai-dev-case-detail__plate figcaption {
  background: color-mix(in srgb, var(--ds-bg-dark) 88%, transparent);
  bottom: 0;
  color: var(--ds-text-light-secondary);
  font-size: var(--ds-fs-sm);
  left: 0;
  line-height: var(--ds-lh-relaxed);
  padding: var(--ds-space-md) var(--ds-space-xl);
  position: absolute;
  right: 0;
}

.ai-dev-case-detail__plate--artifact {
  aspect-ratio: auto;
  display: grid;
  grid-template-rows: auto auto;
}

.ai-dev-case-detail__plate--artifact img {
  height: auto;
  object-fit: contain;
}

.ai-dev-case-detail__plate--artifact figcaption {
  position: static;
}

.ai-dev-case-detail__plate--illustration,
.ai-dev-case-detail__plate--context {
  background: var(--ds-bg-surface);
}

.ai-dev-case-detail__plate--context {
  margin-top: clamp(var(--ds-space-3xl), 6vw, var(--ds-space-5xl));
}

.ai-dev-case-detail__context {
  border-bottom: 1px solid var(--ds-divider);
  display: grid;
  gap: var(--ds-space-lg);
  margin-top: clamp(var(--ds-space-2xl), 5vw, var(--ds-space-5xl));
  padding-bottom: clamp(var(--ds-space-xl), 3vw, var(--ds-space-3xl));
}

.ai-dev-case-detail__context-detail {
  color: var(--ds-text-secondary);
  line-height: var(--ds-lh-loose);
  margin: 0;
  max-width: var(--ds-prose-wide);
}

.ai-dev-case-detail__context h2 {
  font-size: clamp(var(--ds-fs-xl), 2.5vw, var(--ds-fs-3xl));
  font-weight: var(--ds-fw-normal);
  letter-spacing: -0.028em;
  line-height: var(--ds-lh-snug);
  margin: 0;
  max-width: var(--ds-prose-wide);
}

/* Крупные смысловые секции разделяет заметный воздух: страница читается
   как последовательность глав, не как сплошной текст. */
.ai-dev-case-detail__section {
  margin-top: clamp(calc(var(--ds-space-5xl) * 1.4), 8vw, calc(var(--ds-space-5xl) * 2.6));
}

.ai-dev-case-detail__section-heading {
  max-width: var(--ds-prose-wide);
}

.ai-dev-case-detail__section-heading h2,
.ai-dev-case-detail__cta h2 {
  font-size: clamp(var(--ds-fs-2xl), 3vw, var(--ds-fs-4xl));
  letter-spacing: -0.035em;
  line-height: var(--ds-lh-snug);
  margin: var(--ds-space-sm) 0;
}

.ai-dev-case-detail__section-heading > p:last-child {
  color: var(--ds-text-secondary);
  font-size: var(--ds-fs-lg);
  line-height: var(--ds-lh-relaxed);
  margin: 0;
}

/* Заголовок и вводный текст секции решения переиспользуют типографику
   «Исходной ситуации»: один стиль у соседних смысловых блоков. */
.ai-dev-case-detail__section--journey .ai-dev-case-detail__section-heading h2 {
  font-size: clamp(var(--ds-fs-xl), 2.5vw, var(--ds-fs-3xl));
  font-weight: var(--ds-fw-normal);
  letter-spacing: -0.028em;
  margin: 0;
}

.ai-dev-case-detail__section--journey .ai-dev-case-detail__section-heading > p:last-child {
  font-size: var(--ds-fs-md);
  line-height: var(--ds-lh-loose);
}

.ai-dev-case-detail__section-heading--split {
  max-width: 840px;
}

/* Схема пути запроса. Связки живут в самой сетке, а не наложением поверх неё:
   стрелка это отдельная ячейка между станциями, поэтому линия всегда попадает
   в центр ряда при любой ширине. Базовая раскладка мобильная, сверху вниз. */
.ai-dev-case-detail__flow {
  --ai-dev-flow-lane-offset: calc(var(--ds-fs-xs) * var(--ds-lh-normal) + var(--ds-space-sm));

  display: grid;
  gap: var(--ds-space-sm);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(var(--ds-space-xl), 4vw, var(--ds-space-3xl));
}

.ai-dev-case-detail__flow-group {
  border-radius: var(--ds-radius-2xl);
  display: grid;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-md);
}

.ai-dev-case-detail__flow-group--server {
  background: var(--ds-bg-section);
}

.ai-dev-case-detail__flow-lane {
  color: var(--ds-text-label);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-xs);
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.ai-dev-case-detail__flow-nodes {
  align-content: start;
  display: grid;
  gap: var(--ds-space-sm);
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
}

.ai-dev-case-detail__flow-node {
  background: var(--ds-bg-white);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-card);
  display: grid;
  gap: var(--ds-space-2xs);
  justify-items: start;
  padding: var(--ds-space-md);
}

.ai-dev-case-detail__flow-node-icon {
  align-items: center;
  background: var(--ds-brand-100);
  border-radius: var(--ds-radius-md);
  color: var(--ds-brand);
  display: inline-flex;
  height: 34px;
  justify-content: center;
  margin-bottom: var(--ds-space-2xs);
  width: 34px;
}

.ai-dev-case-detail__flow-node strong {
  color: var(--ds-text-primary);
  font-size: var(--ds-fs-md);
  font-weight: var(--ds-fw-semibold);
  line-height: var(--ds-lh-snug);
  /* Длинное слово обязано переноситься внутри карточки: иначе оно съедает
     правый отступ и подпись выглядит прижатой к краю. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.ai-dev-case-detail__flow-node-note {
  color: var(--ds-text-secondary);
  font-size: var(--ds-fs-sm);
  line-height: var(--ds-lh-snug);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Связка между станциями: линия со стрелкой, на узких экранах развёрнута вниз. */
.ai-dev-case-detail__flow-link {
  align-items: center;
  align-self: center;
  color: var(--ds-brand);
  display: inline-flex;
  justify-content: flex-end;
  justify-self: center;
  opacity: 0.75;
  transform: rotate(90deg);
}

.ai-dev-case-detail__flow-link-merge {
  display: none;
}

.ai-dev-case-detail__journey,
.ai-dev-case-detail__technical-rail,
.ai-dev-case-detail__metric-ledger {
  display: grid;
  gap: 0;
  list-style: none;
  margin: clamp(var(--ds-space-xl), 4vw, var(--ds-space-4xl)) 0 0;
  padding: 0;
}

.ai-dev-case-detail__journey-item,
.ai-dev-case-detail__technical-rail-item,
.ai-dev-case-detail__metric-ledger-item {
  border-top: 1px solid var(--ai-dev-case-rule);
  display: grid;
  gap: var(--ds-space-lg);
  padding: var(--ds-space-xl);
}

.ai-dev-case-detail__technical-rail-item {
  grid-template-rows: auto minmax(0, 1fr);
}

.ai-dev-case-detail__technical-rail-item h3 + p {
  margin-top: var(--ds-space-sm);
}

.ai-dev-case-detail__journey-item:last-child,
.ai-dev-case-detail__technical-rail-item:last-child,
.ai-dev-case-detail__metric-ledger-item:last-child {
  border-bottom: 1px solid var(--ai-dev-case-rule);
}

.ai-dev-case-detail__journey-item > div {
  display: grid;
  gap: var(--ds-space-sm);
}

/* Визуальные шаги. Кадр стоит под текстом, заполняет ячейку по ширине
   и садится на нижнюю линию сетки: углы повторяют нулевой радиус линий,
   поэтому изображение читается как часть структуры, не как карточка. */
.ai-dev-case-detail__journey--visual .ai-dev-case-detail__journey-item {
  grid-template-rows: auto auto 1fr;
  padding-bottom: 0;
}

.ai-dev-case-detail__journey-visual {
  align-self: end;
  aspect-ratio: 3 / 4;
  border-radius: 0;
  margin: var(--ds-space-sm) calc(-1 * var(--ds-space-xl)) 0;
  overflow: hidden;
}

.ai-dev-case-detail__journey-visual img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.ai-dev-case-detail__journey-index,
.ai-dev-case-detail__technical-rail-item > span {
  color: var(--ds-text-label);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-dev-case-detail__journey-item h3,
.ai-dev-case-detail__technical-rail-item h3,
.ai-dev-case-detail__metric-ledger-item h3 {
  font-size: var(--ds-fs-xl);
  letter-spacing: -0.025em;
  line-height: var(--ds-lh-snug);
  margin: 0;
}

.ai-dev-case-detail__journey-item p,
.ai-dev-case-detail__technical-rail-item p,
.ai-dev-case-detail__metric-ledger-item div > p {
  color: var(--ds-text-secondary);
  line-height: var(--ds-lh-relaxed);
  margin: 0;
}

.ai-dev-case-detail__metric-ledger-item > strong {
  align-self: start;
  color: var(--ds-text-primary);
  font-size: clamp(var(--ds-fs-xl), 2.2vw, var(--ds-fs-3xl));
  letter-spacing: -0.035em;
  line-height: var(--ds-lh-tight);
}

.ai-dev-case-detail__metric-ledger-item h3 {
  font-size: var(--ds-fs-lg);
}

.ai-dev-case-detail__metric-ledger-item[data-metric-status="potential"] > strong,
.ai-dev-case-detail__evidence-item[data-metric-status="potential"] dd {
  color: var(--ds-brand);
}

.ai-dev-case-detail__disclaimer {
  border-left: 2px solid var(--ds-brand);
  color: var(--ds-text-secondary);
  font-size: var(--ds-fs-sm);
  line-height: var(--ds-lh-relaxed);
  margin: var(--ds-space-lg) 0 0;
  max-width: var(--ds-prose-wide);
  padding-left: var(--ds-space-md);
}

.ai-dev-case-detail__special {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-top: clamp(var(--ds-space-3xl), 7vw, var(--ds-space-5xl));
  padding: clamp(var(--ds-space-xl), 4vw, var(--ds-space-3xl)) 0;
}

.ai-dev-case-detail__special-heading h2 {
  font-size: clamp(var(--ds-fs-2xl), 3vw, var(--ds-fs-4xl));
  letter-spacing: -0.035em;
  line-height: var(--ds-lh-snug);
  margin: var(--ds-space-sm) 0 0;
  max-width: 760px;
}









.ai-dev-case-detail__route {
  border-bottom: 1px solid var(--ai-dev-case-rule);
  border-top: 1px solid var(--ai-dev-case-rule);
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--ds-space-xl);
}

.ai-dev-case-detail__route span {
  border-bottom: 1px solid var(--ai-dev-case-rule);
  color: var(--ds-text-primary);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  margin: 0;
  padding: var(--ds-space-md) 0;
}

.ai-dev-case-detail__route span:last-of-type {
  border-bottom: 0;
}

/* Модуль funnel-gains: что получает клиент и что получает бизнес. Переиспользует
   route-паттерн, добавляет только вертикальный ритм между дорожками. */
.ai-dev-case-detail__funnel {
  display: grid;
  gap: clamp(var(--ds-space-xl), 4vw, var(--ds-space-3xl));
  margin-top: var(--ds-space-xl);
}

.ai-dev-case-detail__funnel-track .ai-dev-case-detail__route {
  margin-top: var(--ds-space-sm);
}

/* Обе дорожки читаются как вертикальные списки: горизонтальная раскладка
   route для этого модуля отключается, шаги идут сверху вниз. */
.ai-dev-case-detail__funnel .ai-dev-case-detail__route {
  grid-template-columns: minmax(0, 1fr);
}

/* Формулировки выгод длиннее шагов процесса, поэтому вес шрифта мягче bold. */
.ai-dev-case-detail__funnel .ai-dev-case-detail__route span {
  font-weight: var(--ds-fw-semibold);
}

.ai-dev-case-detail__route i {
  color: var(--ds-brand);
  font-size: var(--ds-fs-xl);
  font-style: normal;
  display: none;
}

.ai-dev-case-detail__scope-story {
  border-bottom: 1px solid var(--ai-dev-case-rule);
  border-top: 1px solid var(--ai-dev-case-rule);
  display: grid;
  gap: 0;
  list-style: none;
  margin-top: var(--ds-space-xl);
  padding: 0;
}

.ai-dev-case-detail__scope-story > div {
  padding: var(--ds-space-xl) 0;
}

.ai-dev-case-detail__scope-story > div + div {
  border-top: 1px solid var(--ai-dev-case-rule);
}

.ai-dev-case-detail__scope-story p {
  color: var(--ds-text-label);
  display: block;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-xs);
  letter-spacing: 0.06em;
  margin: 0 0 var(--ds-space-sm);
  text-transform: uppercase;
}

/* Карта платформы: четыре направления карточками, задачи внутри чипами.
   Тот же визуальный язык, что у станций схемы ниже по странице. */
.ai-dev-case-detail__matrix {
  display: grid;
  gap: var(--ds-space-md);
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin-top: clamp(var(--ds-space-xl), 4vw, var(--ds-space-3xl));
  padding: 0;
}

.ai-dev-case-detail__matrix-card {
  align-content: start;
  background: var(--ds-bg-white);
  border-radius: var(--ds-radius-2xl);
  box-shadow: var(--ds-shadow-card);
  display: grid;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-xl);
}

.ai-dev-case-detail__matrix-icon {
  align-items: center;
  background: var(--ds-brand-100);
  border-radius: var(--ds-radius-md);
  color: var(--ds-brand);
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.ai-dev-case-detail__matrix-card strong {
  color: var(--ds-text-primary);
  font-size: var(--ds-fs-lg);
  letter-spacing: -0.02em;
  line-height: var(--ds-lh-snug);
}

.ai-dev-case-detail__matrix-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-xs);
}

.ai-dev-case-detail__matrix-chip {
  background: var(--ds-bg-section);
  border-radius: var(--ds-radius-full);
  color: var(--ds-text-secondary);
  font-size: var(--ds-fs-sm);
  line-height: var(--ds-lh-snug);
  padding: var(--ds-space-2xs) var(--ds-space-sm);
}

.ai-dev-case-detail__scope-story strong {
  color: var(--ds-text-primary);
  display: block;
  font-size: var(--ds-fs-xl);
  letter-spacing: -0.025em;
}

/* CTA кейса. Тёмная панель с фоновым свечением: слева обещание, справа открытая
   форма на светлой карточке. Модалка для этого блока не используется. */
.ai-dev-case-detail__cta {
  align-items: stretch;
  background: var(--ds-bg-dark);
  border-radius: var(--ds-radius-2xl);
  box-shadow: var(--ds-shadow-card-lg);
  display: grid;
  gap: clamp(var(--ds-space-xl), 3vw, var(--ds-space-3xl));
  grid-template-columns: minmax(0, 1fr);
  isolation: isolate;
  /* Тёмная панель это самостоятельный блок: воздух вокруг неё крупнее, чем
     между секциями текста, иначе она слипается с кейсом и списком кейсов. */
  margin-block: clamp(
    calc(var(--ds-space-5xl) * 1.4),
    8vw,
    calc(var(--ds-space-5xl) * 2.4)
  );
  overflow: hidden;
  padding: clamp(var(--ds-space-2xl), 4vw, var(--ds-space-4xl));
  position: relative;
}

/* Свечение подложки: справа ярче, слева гасится под текст. */
.ai-dev-case-detail__cta-media {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  opacity: 0.85;
  position: absolute;
  /* Свечение исходника уходит вправо, зеркалим его в пустую нижнюю часть
     колонки с текстом: справа его всё равно закрывает карточка формы. */
  transform: scaleX(-1);
  width: 100%;
  z-index: -1;
}

.ai-dev-case-detail__cta-copy {
  align-content: start;
  display: grid;
  gap: var(--ds-space-md);
}

.ai-dev-case-detail__cta h2 {
  color: var(--ds-text-light);
  margin: 0;
}

.ai-dev-case-detail__cta .ai-dev-kicker {
  color: var(--ds-brand-200);
  margin: 0;
}

.ai-dev-case-detail__cta-points {
  display: grid;
  gap: var(--ds-space-sm);
  list-style: none;
  margin: var(--ds-space-xs) 0 0;
  padding: 0;
}

.ai-dev-case-detail__cta-points li {
  color: var(--ds-text-light);
  display: grid;
  font-size: var(--ds-fs-md);
  gap: var(--ds-space-sm);
  grid-template-columns: auto minmax(0, 1fr);
  line-height: var(--ds-lh-snug);
}

/* Маркер списка: короткая брендовая засечка вместо буллета. */
.ai-dev-case-detail__cta-points li::before {
  background: var(--ds-brand);
  border-radius: var(--ds-radius-full);
  content: "";
  height: 2px;
  margin-top: 0.6em;
  width: 14px;
}

.ai-dev-case-detail__cta-channels {
  background: var(--ds-bg-white);
  border-radius: var(--ds-radius-xl);
  display: grid;
  gap: var(--ds-space-xs);
  padding: clamp(var(--ds-space-lg), 2.5vw, var(--ds-space-2xl));
}

.ai-dev-cta-channel {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: var(--ds-radius-lg);
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: var(--ds-space-md);
  padding: var(--ds-space-md);
  text-align: left;
  text-decoration: none;
  transition: background var(--ds-transition);
  width: 100%;
}

.ai-dev-cta-channel:hover,
.ai-dev-cta-channel:focus-visible {
  background: var(--ai-dev-brand-soft);
  color: inherit;
}

.ai-dev-cta-channel__icon {
  align-items: center;
  border-radius: var(--ds-radius-md);
  display: inline-flex;
  flex: 0 0 44px;
  height: 44px;
  justify-content: center;
  width: 44px;
}

/* Иконки-моноцвет на цветной плашке, как в contact_popover.html. Сам цвет
   плашки для Telegram/MAX - брендовые hex сторонних мессенджеров, не токены
   DS; заданы локально в final_cta_channels.html тем же приёмом, что и в
   _widgets/contact_popover.html. */
.ai-dev-cta-channel__icon img {
  filter: brightness(0) invert(1);
  height: 22px;
  width: 22px;
}

.ai-dev-cta-channel__icon--webchat {
  background: var(--ds-brand);
}

.ai-dev-cta-channel__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ai-dev-cta-channel__name {
  color: var(--ds-text-primary);
  font-size: var(--ds-fs-md);
  font-weight: var(--ds-fw-semibold);
}

.ai-dev-cta-channel__hint {
  color: var(--ds-text-secondary);
  font-size: var(--ds-fs-sm);
}

.ai-dev-cta-channel__arrow {
  color: var(--ds-text-secondary);
  flex-shrink: 0;
  opacity: 0.5;
  transition: color var(--ds-transition), opacity var(--ds-transition), transform var(--ds-transition);
}

.ai-dev-cta-channel:hover .ai-dev-cta-channel__arrow {
  color: var(--ds-brand);
  opacity: 1;
  transform: translateX(3px);
}

/* Почта — второстепенный запасной канал, не конкурирует по весу с чатами. */
.ai-dev-cta-channel-mail {
  background: none;
  border: 0;
  color: var(--ds-brand);
  cursor: pointer;
  display: block;
  font: inherit;
  font-size: var(--ds-fs-sm);
  margin-top: var(--ds-space-xs);
  outline: none;
  padding: var(--ds-space-xs) var(--ds-space-md);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--ds-transition);
  width: 100%;
}

.ai-dev-cta-channel-mail:hover,
.ai-dev-cta-channel-mail:focus-visible {
  color: var(--ds-brand-hover);
}

@media (prefers-reduced-motion: reduce) {
  .ai-dev-cta-channel,
  .ai-dev-cta-channel__arrow,
  .ai-dev-cta-channel-mail {
    transition: none;
  }
}

.ai-dev-case-detail__related {
  margin-top: clamp(var(--ds-space-2xl), 6vw, var(--ds-space-5xl));
}

.ai-dev-case-detail__related > div {
  display: grid;
  gap: var(--ds-space-md);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--ds-space-lg);
}

.ai-dev-case-detail__related-item {
  aspect-ratio: 3 / 4;
  background: var(--ds-bg-dark);
  color: var(--ds-text-light);
  display: grid;
  gap: var(--ds-space-md);
  grid-template-rows: auto minmax(0, 1fr) auto;
  isolation: isolate;
  overflow: hidden;
  padding: var(--ds-space-xl);
  position: relative;
  text-decoration: none;
}

.ai-dev-case-detail__related-item::before {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ds-bg-dark) 28%, transparent) 0%,
    color-mix(in srgb, var(--ds-bg-dark) 66%, transparent) 44%,
    color-mix(in srgb, var(--ds-bg-dark) 94%, transparent) 100%
  );
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.ai-dev-case-detail__related-visual {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  transition: transform var(--ds-transition);
  width: 100%;
  z-index: 0;
}

.ai-dev-case-detail__related-item:focus-visible {
  outline: 2px solid var(--ds-brand);
  outline-offset: var(--ds-space-xs);
}

.ai-dev-case-detail__related-item:hover .ai-dev-case-detail__related-visual {
  transform: scale(1.04);
}

.ai-dev-case-detail__related-item span {
  color: var(--ds-brand-200);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-xs);
  letter-spacing: 0.06em;
  position: relative;
  text-transform: uppercase;
  z-index: 2;
}

.ai-dev-case-detail__related-item strong {
  align-self: end;
  color: var(--ds-text-light);
  font-size: var(--ds-fs-lg);
  line-height: var(--ds-lh-snug);
  position: relative;
  z-index: 2;
}

.ai-dev-case-detail__related-item i {
  color: var(--ds-brand-200);
  font-size: var(--ds-fs-xl);
  font-style: normal;
  position: relative;
  z-index: 2;
}

.ai-dev-case-chart {
  border: 1px solid color-mix(in srgb, var(--ds-brand) 32%, transparent);
  border-radius: var(--ds-radius-lg);
  inset: 19% 12%;
  position: absolute;
}

.ai-dev-case-chart--price {
  background: linear-gradient(
    145deg,
    transparent 0 20%,
    var(--ds-brand) 20.5% 22%,
    transparent 22.5% 36%,
    var(--ds-brand) 36.5% 38%,
    transparent 38.5% 51%,
    var(--ds-brand) 51.5% 53%,
    transparent 53.5% 67%,
    var(--ds-brand) 67.5% 69%,
    transparent 69.5%
  );
}

.ai-dev-case-chart--events {
  border-color: transparent;
  border-inline: 1px dashed color-mix(in srgb, var(--ds-brand) 46%, transparent);
  inset: 22% 32%;
}

.ai-dev-case-chart__marker {
  background: var(--ds-brand);
  border: 4px solid var(--ds-bg-white);
  border-radius: var(--ds-radius-full);
  box-shadow: var(--ds-shadow-card);
  height: var(--ds-space-lg);
  position: absolute;
  width: var(--ds-space-lg);
  z-index: 1;
}

.ai-dev-case-chart__marker--one {
  left: 31%;
  top: 43%;
}

.ai-dev-case-chart__marker--two {
  right: 27%;
  top: 37%;
}

.ai-dev-case-document,
.ai-dev-case-system {
  align-items: center;
  background: var(--ds-bg-white);
  border: 1px solid var(--ai-dev-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-card);
  color: var(--ds-text-primary);
  display: inline-flex;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-bold);
  height: 42%;
  justify-content: center;
  position: absolute;
  width: 23%;
  z-index: 1;
}

.ai-dev-case-document--source {
  left: 11%;
  top: 29%;
}

.ai-dev-case-document--fields {
  left: 39%;
  top: 29%;
}

.ai-dev-case-system {
  background: var(--ds-bg-dark);
  border-color: var(--ds-bg-dark);
  color: var(--ds-text-light);
  right: 11%;
  top: 29%;
}

.ai-dev-case-flow {
  border-top: 1px solid var(--ds-brand);
  left: 28%;
  position: absolute;
  right: 28%;
  top: 50%;
}

.ai-dev-case-flow::after {
  border-block: 4px solid transparent;
  border-left: 6px solid var(--ds-brand);
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
}

.ai-dev-case-vision-frame {
  border: 1px solid color-mix(in srgb, var(--ds-brand) 52%, transparent);
  border-radius: var(--ds-radius-xl);
  inset: 17% 15%;
  position: absolute;
}

.ai-dev-case-bin {
  background: color-mix(in srgb, var(--ds-brand) 16%, var(--ds-bg-white));
  border: 1px solid var(--ds-brand);
  border-radius: var(--ds-radius-sm) var(--ds-radius-sm) var(--ds-radius-md) var(--ds-radius-md);
  bottom: 26%;
  height: 34%;
  position: absolute;
  width: 19%;
}

.ai-dev-case-bin::before {
  background: var(--ds-brand);
  border-radius: var(--ds-radius-sm);
  content: "";
  height: 5%;
  left: -8%;
  position: absolute;
  right: -8%;
  top: -8%;
}

.ai-dev-case-bin--one {
  left: 30%;
}

.ai-dev-case-bin--two {
  right: 30%;
}

.ai-dev-case-vision-tag {
  background: var(--ds-bg-dark);
  border-radius: var(--ds-radius-full);
  color: var(--ds-text-light);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-xs);
  padding: var(--ds-space-xs) var(--ds-space-sm);
  position: absolute;
  right: 18%;
  top: 23%;
}

.ai-dev-case-building {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ds-bg-dark) 84%, var(--ds-brand)) 1px,
    transparent 1px
  );
  background-color: var(--ds-bg-dark);
  background-size: 16% 100%;
  border-radius: var(--ds-radius-md) var(--ds-radius-md) 0 0;
  bottom: 17%;
  height: 57%;
  position: absolute;
  width: 54%;
}

.ai-dev-case-light {
  background: var(--ds-brand-200);
  box-shadow: 0 0 var(--ds-space-2xl) color-mix(in srgb, var(--ds-brand) 74%, transparent);
  height: 2px;
  left: 24%;
  position: absolute;
  right: 24%;
}

.ai-dev-case-light--one {
  top: 37%;
}

.ai-dev-case-light--two {
  top: 51%;
}

.ai-dev-case-light--three {
  top: 65%;
}

.ai-dev-case-market {
  border-block: 1px solid color-mix(in srgb, var(--ds-brand) 42%, transparent);
  inset: 25% 15%;
  position: absolute;
}

.ai-dev-case-market::before {
  background: linear-gradient(
    125deg,
    transparent 0 14%,
    var(--ds-brand) 14.5% 16%,
    transparent 16.5% 29%,
    var(--ds-brand) 29.5% 31%,
    transparent 31.5% 48%,
    var(--ds-brand) 48.5% 50%,
    transparent 50.5% 69%,
    var(--ds-brand) 69.5% 71%,
    transparent 71.5%
  );
  content: "";
  inset: 0;
  position: absolute;
}

.ai-dev-case-market__signal {
  background: var(--ds-bg-dark);
  border: 2px solid var(--ds-brand-200);
  border-radius: var(--ds-radius-full);
  height: var(--ds-space-md);
  position: absolute;
  width: var(--ds-space-md);
}

.ai-dev-case-market__signal--one {
  left: 28%;
  top: 46%;
}

.ai-dev-case-market__signal--two {
  left: 50%;
  top: 32%;
}

.ai-dev-case-market__signal--three {
  right: 26%;
  top: 54%;
}

.ai-dev-case-match {
  align-items: center;
  background: var(--ds-bg-white);
  border: 1px solid var(--ai-dev-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-card);
  color: var(--ds-text-primary);
  display: inline-flex;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-bold);
  height: 40%;
  justify-content: center;
  position: absolute;
  top: 30%;
  width: 28%;
  z-index: 1;
}

.ai-dev-case-match--source {
  left: 15%;
}

.ai-dev-case-match--result {
  background: var(--ds-bg-dark);
  border-color: var(--ds-bg-dark);
  color: var(--ds-text-light);
  right: 15%;
}

.ai-dev-case-match__line {
  border-top: 1px solid var(--ds-brand);
  left: 38%;
  position: absolute;
  right: 38%;
  top: 50%;
}

.ai-dev-case-match__line::after {
  border-block: 4px solid transparent;
  border-left: 6px solid var(--ds-brand);
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
}

.ai-dev-section--muted {
  background: var(--ds-bg-section);
}

.ai-dev-outcome-card {
  aspect-ratio: 5 / 8;
  background: var(--ds-bg-dark);
  border-color: var(--ai-dev-dark-border);
  color: var(--ds-text-light);
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  position: relative;
}

/* В третьем кадре рабочая модель расположена чуть ниже, чтобы сохранить
   одинаковый визуальный ритм между верхним краем карточки и главным объектом. */
.ai-dev-outcome-card--governance {
  --ds-pointer-parallax-rest-y: 12px;
}

.ai-dev-outcome-card__visual {
  inset: 0;
  margin: 0;
  position: absolute;
  z-index: 0;
}

.ai-dev-outcome-card__visual img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.ai-dev-outcome-card::after {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ds-bg-dark) 18%, transparent) 0%,
    color-mix(in srgb, var(--ds-bg-dark) 58%, transparent) 48%,
    color-mix(in srgb, var(--ds-bg-dark) 94%, transparent) 100%
  );
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.ai-dev-outcome-card__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--ds-space-xl);
  position: relative;
  z-index: 2;
}

.ai-dev-outcome-card__body {
  margin-top: auto;
}

.ai-dev-outcome-card h3 {
  color: var(--ds-text-light);
}

.ai-dev-outcome-card p {
  color: var(--ds-text-light-secondary);
  line-height: var(--ds-lh-loose);
  margin: var(--ds-space-md) 0 0;
}

.ai-dev-outcome-card__index {
  align-items: center;
  background: var(--ai-dev-dark-border);
  border-radius: var(--ds-radius-full);
  color: var(--ds-text-light);
  display: inline-flex;
  font-family: var(--ds-font-mono);
  height: 40px;
  justify-content: center;
  margin-bottom: var(--ds-space-2xl);
  width: 40px;
}

.ai-dev-architecture {
  background:
    linear-gradient(90deg, var(--ai-dev-dark-grid) 1px, transparent 1px),
    linear-gradient(var(--ai-dev-dark-grid) 1px, transparent 1px),
    var(--ds-bg-dark);
  background-size: 56px 56px;
  color: var(--ds-text-light);
}

.ai-dev-architecture .ai-dev-kicker {
  color: var(--ds-brand-200);
}

.ai-dev-architecture__intro {
  max-width: 900px;
}

.ai-dev-architecture__intro > .ds-section-sub {
  color: var(--ds-text-light-secondary);
}

.ai-dev-architecture__stage {
  margin-top: var(--ds-space-5xl);
}

.ai-dev-architecture__layers {
  display: grid;
  gap: var(--ds-space-sm);
  margin-top: var(--ds-space-md);
}

.ai-dev-architecture-card {
  background: color-mix(in srgb, var(--ds-bg-white) 5%, transparent);
  border-color: var(--ai-dev-dark-border);
  border-radius: var(--ds-radius-lg);
  color: var(--ds-text-light);
  padding: var(--ds-space-xl);
}

.ai-dev-architecture-card > p {
  color: var(--ds-brand-200);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-xs);
  margin: 0 0 var(--ds-space-3xl);
  text-transform: uppercase;
}

.ai-dev-architecture-card > span {
  color: var(--ds-text-light-secondary);
  display: block;
  line-height: var(--ds-lh-loose);
  margin-top: var(--ds-space-md);
}

.ai-dev-architecture__note {
  border-top: 1px solid var(--ai-dev-dark-border);
  display: grid;
  gap: var(--ds-space-xs);
  margin-top: var(--ds-space-3xl);
  padding-top: var(--ds-space-xl);
}

.ai-dev-architecture__note span {
  color: var(--ds-text-light-secondary);
  line-height: var(--ds-lh-relaxed);
}

.ai-dev-faq-grid {
  display: grid;
  gap: var(--ds-space-5xl);
}

@media (min-width: 576px) {
  .ai-dev-actions,
  .ai-dev-cases__action {
    align-items: center;
    flex-direction: row;
  }

  .ai-dev-scenario-grid,
  .ai-dev-case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Три равные колонки: [текст][картинка][высокая карточка]. Средняя
     колонка и колонка высокой карточки одной ширины, поэтому картинка
     маленькой карточки (flex-basis 50% от своих двух колонок) и картинка
     высокой карточки (aspect-ratio:1 на всю свою колонку) получаются
     одинаковыми квадратами. */
  .ai-dev-case-grid--mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(1) {
    grid-column: 1 / span 2;
    grid-row: 1;
  }

  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(2) {
    grid-column: 1 / span 2;
    grid-row: 2;
  }

  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(3) {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(4) {
    grid-column: 1;
    grid-row: 3 / span 2;
  }

  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(5) {
    grid-column: 2 / span 2;
    grid-row: 3;
  }

  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(6) {
    grid-column: 2 / span 2;
    grid-row: 4;
  }

  /* Малые карточки разворачивают контент на 90°: текстовая колонка
     и колонка картинки встают рядом вместо друг под другом. Первая пара
     (nth 1,2) текстом к центру мозаики, вторая пара (nth 5,6) отзеркалена —
     картинкой к центру, ближе к высокой карточке слева. */
  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(1),
  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(2) {
    flex-direction: row-reverse;
  }

  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(5),
  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(6) {
    flex-direction: row;
  }

  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(1) .ai-dev-case-card__visual,
  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(2) .ai-dev-case-card__visual,
  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(5) .ai-dev-case-card__visual,
  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(6) .ai-dev-case-card__visual {
    aspect-ratio: 1;
    /* Не 50%: карточка занимает 2 колонки сетки плюс отступ между ними,
       поэтому ровная половина её ширины шире настоящей колонки на половину
       этого отступа. Явно вычитаем отступ перед делением, чтобы картинка
       вставала точно по границе средней колонки — той же, что использует
       картинка высокой карточки в соседнем блоке. */
    flex: 0 0 calc((100% - var(--ds-space-md)) / 2);
  }

  /* Внутренний шов картинка/текст скруглён тем же радиусом, что у внешних
     углов карточки (.ds-card): ровный прямой срез на белый фон выглядел
     обрубленным. Внешние углы картинки не трогаем — их и так скругляет
     overflow:hidden самой карточки. */
  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(1) .ai-dev-case-card__visual,
  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(2) .ai-dev-case-card__visual {
    border-radius: var(--ds-radius-xl) 0 0 var(--ds-radius-xl);
  }

  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(5) .ai-dev-case-card__visual,
  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(6) .ai-dev-case-card__visual {
    border-radius: 0 var(--ds-radius-xl) var(--ds-radius-xl) 0;
  }

  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(1) .ai-dev-case-card__content,
  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(2) .ai-dev-case-card__content,
  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(5) .ai-dev-case-card__content,
  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(6) .ai-dev-case-card__content {
    flex: 1;
    justify-content: flex-start;
    margin-top: 0;
  }

  /* Высокая карточка перевёрнута по вертикали: текст сверху, картинка
     снизу (тем же квадратом, ширина колонки = ширине средней колонки
     слева). column-reverse меняет визуальный порядок, не трогая DOM. */
  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(3),
  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(4) {
    flex-direction: column-reverse;
  }

  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(3) .ai-dev-case-card__visual,
  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(4) .ai-dev-case-card__visual {
    aspect-ratio: 1;
    /* Шов теперь сверху картинки (снизу — внешний угол карточки, его и так
       скругляет overflow:hidden). */
    border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
  }

  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(3) .ai-dev-case-card__content,
  .ai-dev-case-grid--mosaic .ai-dev-case-card:nth-child(4) .ai-dev-case-card__content {
    flex: 1;
    justify-content: flex-start;
    /* Обычный вертикальный кейс-кард заезжает текстовой панелью на 24px
       внахлёст (скругление угла без видимого шва). В мозаике эта граница
       должна совпадать с краем малой карточки в блоке рядом, а не быть
       смещена нахлёстом — убираем его здесь. */
    margin-top: 0;
    min-height: 0;
  }

  /* Текст прилипает к верхней части панели (justify-content: flex-start
     выше), а "Подробнее" margin-top:auto прижимает к нижнему краю,
     заполняя оставшееся место. */
  .ai-dev-case-grid--mosaic .ai-dev-case-card__more {
    color: var(--ds-text-secondary);
    display: block;
    font-weight: var(--ds-fw-medium);
    margin-top: auto;
    padding-top: var(--ds-space-md);
    transition: color var(--ds-transition);
  }

  .ai-dev-case-grid--mosaic .ai-dev-case-card:hover .ai-dev-case-card__more {
    color: var(--ds-brand);
  }

}

/* Пока три outcome-карточки не помещаются в один ряд, они идут друг под другом
   в горизонтальной композиции: текст слева, изображение справа, а градиент
   затемнения повёрнут по часовой стрелке — от текстовой зоны к изображению. */
@media (min-width: 576px) and (max-width: 991px) {
  .ai-dev-outcome-card {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    min-height: calc(var(--ds-space-5xl) * 4);
  }

  /* Высоту карточки задаёт текст. Изображение занимает правую колонку
     абсолютом и подрезается снизу, сохраняя верхнюю часть кадра. */
  .ai-dev-outcome-card__visual {
    inset: 0 0 0 auto;
    overflow: hidden;
    position: absolute;
    width: calc(100% / 2.25);
  }

  .ai-dev-outcome-card__visual img {
    object-position: top;
  }

  .ai-dev-outcome-card__content {
    grid-column: 1;
    grid-row: 1;
  }

  .ai-dev-outcome-card__body {
    min-height: 0;
  }

  /* Затемнение уезжает с нижней кромки на левую: изображение растворяется
     в тёмной текстовой панели без видимого шва. */
  .ai-dev-outcome-card::after {
    content: none;
  }

  .ai-dev-outcome-card__visual::after {
    background: linear-gradient(
      270deg,
      color-mix(in srgb, var(--ds-bg-dark) 18%, transparent) 0%,
      color-mix(in srgb, var(--ds-bg-dark) 58%, transparent) 62%,
      var(--ds-bg-dark) 100%
    );
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
  }
}

@media (max-width: 767px) {
  .ai-dev-case-detail__journey-item:last-child,
  .ai-dev-case-detail__technical-rail-item:last-child,
  .ai-dev-case-detail__metric-ledger-item:last-child {
    border-bottom: 0;
  }

  .ai-dev-case-detail__related > div {
    grid-template-columns: 1fr;
  }

  .ai-dev-case-detail__cta {
    align-items: stretch;
    padding: var(--ds-space-xl);
  }

  .ai-dev-case-detail__evidence-item {
    padding: var(--ds-space-md) 0;
  }



}

/* На узких экранах шаги идут по одному в ряд: подписи с описаниями
   не помещаются в половину маленькой карточки. */

@media (prefers-reduced-motion: reduce) {
  .ai-dev-case-detail__related-item:hover {
    transform: none;
  }
}

@media (max-width: 374px) {
  .ai-dev-case-detail h1 {
    font-size: clamp(var(--ds-fs-xl), 6.5vw, var(--ds-fs-2xl));
  }

  .ai-dev-case-detail__evidence-item + .ai-dev-case-detail__evidence-item {
    border-top: 1px solid var(--ai-dev-case-rule);
  }
}

@media (min-width: 375px) and (max-width: 767px) {
  .ai-dev-case-detail__evidence-item:nth-child(odd) {
    padding-right: var(--ds-space-md);
  }

  .ai-dev-case-detail__evidence-item:nth-child(even) {
    border-left: 1px solid var(--ai-dev-case-rule);
    padding-left: var(--ds-space-md);
  }

  .ai-dev-case-detail__evidence-item:nth-child(n + 3) {
    border-top: 1px solid var(--ai-dev-case-rule);
  }
}

@media (min-width: 768px) {
  .ai-dev-case-detail__context {
    grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
  }

  .ai-dev-case-detail__context-detail {
    grid-column: 2;
  }

  /* Секция решения повторяет композицию «Исходной ситуации»: кикер слева,
     заголовок и вводный текст в правой колонке. */
  .ai-dev-case-detail__section--journey .ai-dev-case-detail__section-heading {
    display: grid;
    gap: var(--ds-space-lg);
    grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
    max-width: none;
  }

  .ai-dev-case-detail__section--journey .ai-dev-case-detail__section-heading h2,
  .ai-dev-case-detail__section--journey .ai-dev-case-detail__section-heading > p:not(.ai-dev-kicker) {
    grid-column: 2;
    max-width: var(--ds-prose-wide);
  }

  .ai-dev-case-detail__cta {
    gap: clamp(var(--ds-space-2xl), 4vw, var(--ds-space-4xl));
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.95fr);
  }

  .ai-dev-case-detail__matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-dev-case-detail__evidence-item + .ai-dev-case-detail__evidence-item {
    border-left: 1px solid var(--ai-dev-case-rule);
    padding-left: var(--ds-space-xl);
  }

  .ai-dev-case-detail__matrix,
  .ai-dev-case-detail__scope-story {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-dev-case-detail__matrix li + li,
  .ai-dev-case-detail__scope-story > div + div {
    border-top: 0;
    border-left: 1px solid var(--ai-dev-case-rule);
    padding-left: var(--ds-space-xl);
  }

  .ai-dev-case-detail__matrix li:nth-child(n + 3) {
    border-top: 1px solid var(--ai-dev-case-rule);
  }

  .ai-dev-case-detail__journey,
  .ai-dev-case-detail__technical-rail {
    border-bottom: 1px solid var(--ai-dev-case-rule);
    border-top: 1px solid var(--ai-dev-case-rule);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .ai-dev-case-detail__journey-item,
  .ai-dev-case-detail__technical-rail-item {
    border: 0;
    min-height: 100%;
    padding: var(--ds-space-xl);
  }

  .ai-dev-case-detail__journey-item:last-child,
  .ai-dev-case-detail__technical-rail-item:last-child {
    border-bottom: 0;
  }

  .ai-dev-case-detail__journey-item + .ai-dev-case-detail__journey-item,
  .ai-dev-case-detail__technical-rail-item + .ai-dev-case-detail__technical-rail-item {
    border-left: 1px solid var(--ai-dev-case-rule);
  }

  .ai-dev-case-detail__route {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ai-dev-case-detail__funnel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--ds-space-2xl), 4vw, var(--ds-space-4xl));
  }

  .ai-dev-case-detail__funnel .ai-dev-case-detail__route span {
    border-bottom: 1px solid var(--ai-dev-case-rule);
    padding: var(--ds-space-md) 0;
  }

  .ai-dev-case-detail__funnel .ai-dev-case-detail__route span + span {
    border-left: 0;
    padding-left: 0;
  }

  .ai-dev-case-detail__funnel .ai-dev-case-detail__route span:last-of-type {
    border-bottom: 0;
  }

  .ai-dev-case-detail__route span {
    border-bottom: 0;
    padding: var(--ds-space-xl) 0;
  }

  .ai-dev-case-detail__route span + span {
    border-left: 1px solid var(--ai-dev-case-rule);
    padding-left: var(--ds-space-xl);
  }

  .ai-dev-case-detail__metric-ledger-item {
    align-items: start;
    grid-template-columns: minmax(100px, 0.35fr) minmax(150px, 0.55fr) minmax(0, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 991px) {

  .ai-dev-case-detail__technical-rail--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-dev-case-detail__technical-rail--4 .ai-dev-case-detail__technical-rail-item + .ai-dev-case-detail__technical-rail-item {
    border-left: 0;
  }

  .ai-dev-case-detail__technical-rail--4 .ai-dev-case-detail__technical-rail-item:nth-child(even) {
    border-left: 1px solid var(--ai-dev-case-rule);
  }

  .ai-dev-case-detail__technical-rail--4 .ai-dev-case-detail__technical-rail-item:nth-child(n + 3) {
    border-top: 1px solid var(--ai-dev-case-rule);
  }
}

@media (min-width: 768px) {
  .ai-dev-visual {
    aspect-ratio: 1915 / 821;
  }

  .ai-dev-visual--architecture {
    aspect-ratio: 2.9 / 1;
  }

  .ai-dev-visual--architecture img {
    transform: none;
  }
}

@media (min-width: 992px) {
  .ai-dev-hero,
  .ai-dev-section {
    padding-block: 112px;
  }

  .ai-dev-hero {
    padding-block: 112px;
  }

  /* Re-assert the 768px override: at 992px+ .ai-dev-section jumps to 112px
     padding-block above, which would restore the stray empty band this class
     removes once the scenario heading has transitioned into the hero. */
  .ai-dev-scenarios--transition-source-hidden {
    padding-top: var(--ds-space-5xl);
  }

  .ai-dev-hero__copy {
    max-width: 920px;
  }

  .ai-dev-scenarios-intro {
    min-height: clamp(460px, 42vw, 600px);
  }

  .ai-dev-scenario-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-dev-outcomes,
  .ai-dev-architecture__layers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ai-dev-architecture__layers {
    margin-top: calc(-1 * var(--ds-space-5xl));
    padding-inline: var(--ds-space-xl);
    position: relative;
    z-index: 1;
  }

  .ai-dev-architecture__note {
    justify-items: center;
    margin-inline: calc(16.666667% + var(--ds-space-sm));
    text-align: center;
  }

  .ai-dev-architecture-card {
    background: var(--ds-bg-dark);
  }

  .ai-dev-faq-grid {
    align-items: start;
    grid-template-columns: minmax(280px, 0.65fr) minmax(0, 1.35fr);
  }

  .ai-dev-case-detail__plate {
    aspect-ratio: 16 / 9;
  }

  /* Кадры-артефакты показываются целиком: пропорция 16/9 из правила выше
     обрезала бы им низ, а на таких кадрах есть подписи, которые нельзя резать. */
  .ai-dev-case-detail__plate--artifact {
    aspect-ratio: auto;
  }
}

/* Горизонтальный поток схемы требует ширины: на 992px подписи станций
   уже не помещаются в колонку, поэтому порог выше остальных. */
@media (min-width: 1200px) {
  /* Четыре полосы и связки между ними одной строкой. */
  .ai-dev-case-detail__flow {
    align-items: stretch;
    gap: 0;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-template-columns:
      minmax(0, 1.05fr) max-content minmax(0, 3.1fr) max-content
      minmax(0, 1.05fr) max-content minmax(0, 1.05fr);
  }

  /* Подпись полосы занимает ровно строку, станции центрируются в остатке. */
  .ai-dev-case-detail__flow-group {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .ai-dev-case-detail__flow-nodes {
    align-content: center;
    gap: 0;
  }

  /* Входы клиента одинаковой высоты: линии слияния выходят из их центров. */
  .ai-dev-case-detail__flow-nodes--parallel {
    align-content: stretch;
    gap: var(--ds-space-sm);
    grid-auto-rows: 1fr;
  }

  .ai-dev-case-detail__flow-group--server .ai-dev-case-detail__flow-nodes {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  }

  .ai-dev-case-detail__flow-link {
    transform: none;
  }

  /* Связка между полосами опускается на строку подписи, чтобы встать вровень
     с центром станций, и подтягивается к карточкам сквозь отступ полосы. */
  .ai-dev-case-detail__flow > .ai-dev-case-detail__flow-link {
    margin-inline: calc(-1 * var(--ds-space-md));
    padding-top: var(--ai-dev-flow-lane-offset);
  }

  .ai-dev-case-detail__flow-link--merge {
    align-self: stretch;
    position: relative;
  }

  .ai-dev-case-detail__flow-link--merge .ai-dev-case-detail__flow-link-line {
    display: none;
  }

  /* Габариты задают только inset: собственная высота из viewBox сломала бы
     привязку концов кривых к центрам карточек. */
  .ai-dev-case-detail__flow-link-merge {
    display: block;
    height: calc(
      100% - var(--ai-dev-flow-lane-offset) - var(--ds-space-md) * 2
    );
    left: 0;
    position: absolute;
    top: calc(var(--ai-dev-flow-lane-offset) + var(--ds-space-md));
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .development-landing *,
  .development-landing *::before,
  .development-landing *::after,
  .development-case *,
  .development-case *::before,
  .development-case *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}