/* ============================================================
   Реплика — standalone implementation
   Supplementary CSS: responsive layout overrides + utilities
   that replace the dc-runtime's isMobile/notMobile state.
   Breakpoint mirrors the source: window.innerWidth < 880.
   ============================================================ */

/* --- responsive show/hide (replaces sc-if isMobile / notMobile) --- */
dc-when { display: contents; }
.u-desktop { display: contents; }
.u-mobile  { display: none; }
@media (max-width: 879px) {
  .u-desktop { display: none !important; }
  .u-mobile  { display: contents !important; }
}

/* --- conditional (stateful) branches: idle/loading/done, tabs, nav --- */
.dc-cond { display: contents; }
.dc-cond[hidden] { display: none !important; }

/* --- horizontal sliders: scroll only on X, never show a vertical scrollbar.
   (inline overflow-x:auto otherwise makes overflow-y compute to auto too).
   A scroll container always clips at its scrollport, so to keep card hover
   shadows from being cut the scroller carries vertical padding (the shadow
   lives inside that padding) — see the per-slider inline styles. --- */
.hcar { overflow-y: hidden; }

/* Snap: на десктопе выключен (свободный скролл с JS-инерцией, см. inline
   scroll-snap-type:none + enhance() в index.html). На мобиле возвращаем
   прилипание к карточкам — нативная тач-прокрутка с пейджингом по слайдам.
   !important нужен, чтобы перебить inline scroll-snap-type:none. */
@media (max-width: 879px) {
  .hcar { scroll-snap-type: x mandatory !important; }
}

/* "Реальные результаты" (cases): hide the scrollbar (shadow shown via padding) */
.hcar-cases { scrollbar-width: none; }
.hcar-cases::-webkit-scrollbar { display: none; }

/* --- responsive grid/flex overrides (replaces isMobile ? a : b bindings) --- */
@media (max-width: 879px) {
  [data-rk="painCols"]      { grid-template-columns: 1fr !important; }
  [data-rk="scenCols"]      { grid-template-columns: 1fr !important; }
  [data-rk="scenCols0"]     { grid-template-columns: 1fr !important; }
  [data-rk="metricCols"]    { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [data-rk="dashCols"]      { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [data-rk="includedCols"]  { grid-template-columns: 1fr !important; }
  [data-rk="s9Cols"]        { grid-template-columns: 1fr !important; }
  [data-rk="s9bCols"]       { grid-template-columns: 1fr !important; }
  [data-rk="s19Cols"]       { grid-template-columns: 1fr !important; }
  [data-rk="s10Layout"]     { grid-template-columns: 1fr !important; }
  [data-rk="thesisCol"]     { grid-column: auto !important; }
  [data-rk="flowDir"]       { flex-direction: column !important; }
  [data-rk="flowArrow"]     { transform: rotate(90deg) !important; }

  /* hero: на мобиле высота по контенту (Маша + плеер + лого идут потоком,
     без вертикального центрирования и пустого провала до бегущей строки) */
  #s01-hero            { min-height: 0 !important; }
  #s01-hero > div:first-of-type { align-items: stretch !important; flex: 0 0 auto !important; }

  /* header: экономим место под call-pill (лого-иконки нет, номер кликабелен) */
  #s00-header          { padding-left: 12px !important; padding-right: 12px !important; }
  #logo span           { font-size: 18px !important; }
}

/* --- broken-asset fallbacks (hero image / UI videos may be absent) --- */
img[data-fallback="hidden"] { visibility: hidden; }
.video-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, #232019 0%, #1A1815 60%, #14120E 100%);
  color: rgba(255,255,255,.5); font: 600 13px/1.4 var(--font-sans); text-align: center; padding: 16px;
}

/* --- reveal-on-scroll (kept additive: content is visible even without JS) --- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
  .js .reveal[data-reveal].is-in { opacity: 1; transform: none; }
}

/* ============================================================
   S02 «Услышьте сами» — сторис-карточки (видео-формат stories)
   ============================================================ */
.story-row { scrollbar-width: none; }
.story-row::-webkit-scrollbar { display: none; }

.story-card {
  --story-w: clamp(170px, 23vw, 226px);
  flex: 0 0 var(--story-w);
  display: flex; flex-direction: column; min-width: 0;
}
@media (max-width: 879px) { .story-card { --story-w: clamp(180px, 51vw, 360px); } }

.story-media {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-lg);
  overflow: hidden; cursor: pointer; outline: none;
  background: linear-gradient(155deg, #2B2722 0%, #1B1813 60%, #141109 100%);
  filter: grayscale(1) contrast(.97) brightness(.9);
  transition: filter .4s ease, transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
}
.story-card:hover .story-media { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(22,21,15,.16); }
.story-media:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--highlight) 60%, transparent); }
.story-media.is-playing { filter: none; }

.story-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.story-grad { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 46%); }

/* центральная кнопка play (только в покое) */
.story-play {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%);
  width: 52px; height: 52px; border-radius: 50%; background: var(--lime); color: var(--highlight-ink);
  display: flex; align-items: center; justify-content: center; padding-left: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: opacity .2s ease, transform .2s ease;
}
.story-media.is-playing .story-play { opacity: 0; transform: translate(-50%,-50%) scale(.5); }

/* нижние контролы: статус-пилюля + mute */
.story-ctrls { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 7px; }
.story-status {
  flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--radius-pill);
  background: rgba(244,242,236,.94); color: var(--ink);
  font: 700 11.5px/1 var(--font-sans); white-space: nowrap; overflow: hidden;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.story-status .ic-pause { display: none; }
.story-media.is-playing .story-status .ic-play { display: none; }
.story-media.is-playing .story-status .ic-pause { display: inline-flex; }
.story-media.is-playing .story-label-idle { display: none; }

/* бегущая волна-эквалайзер (как у плеера на груди Маши) */
.story-wave { display: none; align-items: flex-end; gap: 2px; height: 14px; flex: 0 0 auto; }
.story-media.is-playing .story-wave { display: inline-flex; }
.story-wave i { width: 2.5px; border-radius: 2px; background: var(--ink); transform-origin: bottom;
  animation: eqBar .9s ease-in-out infinite; }
.story-wave i:nth-child(1) { height: 6px;  animation-duration: .82s; }
.story-wave i:nth-child(2) { height: 13px; animation-duration: 1.04s; animation-delay: .12s; }
.story-wave i:nth-child(3) { height: 8px;  animation-duration: .72s;  animation-delay: .26s; }
.story-wave i:nth-child(4) { height: 14px; animation-duration: .98s;  animation-delay: .08s; }
.story-wave i:nth-child(5) { height: 9px;  animation-duration: 1.1s;  animation-delay: .3s; }

.story-mute {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: none; cursor: pointer;
  border-radius: 50%; background: var(--ink); color: #fff;
  display: none; align-items: center; justify-content: center;
}
.story-media.is-playing .story-mute { display: flex; }

.story-title { display: block; margin: 14px 0 0; padding: 7px 14px; border-radius: 8px; font: 700 14px/1.15 var(--font-sans); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, var(--surface)); }
.story-desc  { margin: 8px 2px 0;  font: 400 13.5px/1.5 var(--font-sans); color: var(--ink-muted); }
@media (max-width: 600px) { .story-title { font-size: 13px; padding: 5px 11px; } }

/* ============================================================
   Maria portrait (assets/images/maria-full.png) — soft-fade the
   bottom edge so the photo doesn't end in a hard horizontal cut.
   ============================================================ */
.maria-fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0,0,0,0) 99%);
          mask-image: linear-gradient(to bottom, #000 55%, rgba(0,0,0,0) 99%);
}

/* ============================================================
   Maria portrait sizing — enlarged per-composition (scaled up;
   source is 1448×1086 so it stays crisp). transform keeps the
   layout box intact so siblings aren't pushed.
   ============================================================ */
.maria-hero   { transform: translateY(-19px) scale(1.485); transform-origin: top center; }
.maria-hero-m { transform: none; }
.maria-s09    { transform: none; }
.maria-s19    { transform: scale(1.21); transform-origin: top center; }

/* Hero portrait: start the bottom fade earlier so she doesn't extend too low. */
.maria-fade.maria-hero,
.maria-fade.maria-hero-m {
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, rgba(0,0,0,0) 85%);
          mask-image: linear-gradient(to bottom, #000 40%, rgba(0,0,0,0) 85%);
}

/* Hero audio player (desktop): 1.5x larger, gentle grow on hover. */
.hero-player-d {
  transform: translateX(-50%) scale(1.275);
  transform-origin: bottom center;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.hero-player-d:hover { transform: translateX(-50%) scale(1.34); }

/* Логотипы клиентов (бегущая строка): все названия — капслоком */
#clients-marquee .marq-track span { text-transform: uppercase; }

/* ============================================================
   S17 · Подключение — таймлайн на одной подложке.
   База (мобайл): вертикальный список, точки 1-4 связаны «верёвочкой».
   ≥880px: те же шаги встают в ряд с горизонтальной «верёвочкой».
   ============================================================ */
.onb {
  background: var(--surface-warm); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(18px, 5vw, 24px);
}
.onb-step { position: relative; display: flex; gap: 13px; }
.onb-step:not(:last-child) { padding-bottom: 18px; }
.onb-mark { position: relative; flex: 0 0 30px; display: flex; justify-content: center; }
.onb-dot {
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%;
  background: var(--highlight); color: var(--highlight-ink);
  display: flex; align-items: center; justify-content: center;
  font: 800 14px/1 var(--font-sans);
}
/* «верёвочка»: от низа текущей точки к верху следующей */
.onb-step:not(:last-child) .onb-mark::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  top: 30px; bottom: -18px; width: 2px; background: var(--border-strong);
}
.onb-body { padding-top: 4px; min-width: 0; }
.onb-body h3 { margin: 0; font: 700 15.5px/1.3 var(--font-sans); color: var(--ink); }
.onb-body p  { margin: 3px 0 0; font: 400 13px/1.45 var(--font-sans); color: var(--ink-muted); }

/* ≥880px — горизонтальный ряд из 4 этапов с горизонтальной «верёвочкой» */
@media (min-width: 880px) {
  .onb { display: flex; gap: clamp(16px, 2.4vw, 30px); padding: clamp(28px, 3vw, 40px); }
  .onb-step { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 14px; padding-bottom: 0; text-align: center; }
  /* гасим вертикальную верёвочку, рисуем горизонтальную между точками */
  .onb-step:not(:last-child) .onb-mark::after { display: none; }
  .onb-step:not(:last-child)::after {
    content: ""; position: absolute; z-index: 0; top: 15px; transform: translateY(-50%);
    left: 50%; width: calc(100% + clamp(16px, 2.4vw, 30px)); height: 2px; background: var(--border-strong);
  }
  .onb-body { padding-top: 2px; }
  .onb-body h3 { font-size: 17px; }
  .onb-body p  { font-size: 14px; line-height: 1.5; }
}

/* ============================================================
   S15 · Отзывы партнёров — те же декоративные кавычки, что у
   карточек Ильи/Сони (« сверху-слева, » снизу-справа).
   ============================================================ */
.rev-quote { position: relative; padding: 2px 0 30px 36px; }
.rev-quote::before,
.rev-quote::after {
  position: absolute; font: 800 52px/1 var(--font-display);
  color: var(--ink-muted); opacity: .82; pointer-events: none; user-select: none;
}
.rev-quote::before { content: "«"; left: 0; top: -11px; }
.rev-quote::after  { content: "»"; right: 2px; bottom: 0; }