/* Streaming page (/streaming, /es/streaming, /ru/streaming). Prefix: streaming-. Uses the home template and global tokens. */

.streaming-hero,
.streaming-section {
  --s-teal: #0a8498;
  --s-teal-ink: #07697a;
  --s-navy: #131b2e;
  --s-card-shadow: 0 10px 30px rgba(19, 27, 46, 0.1);
}

/* home-wrap scoped to streaming page */
.streaming-hero .home-wrap,
.streaming-section .home-wrap {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .streaming-hero .home-wrap,
  .streaming-section .home-wrap {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (min-width: 1024px) {
  .streaming-hero .home-wrap,
  .streaming-section .home-wrap {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media (min-width: 1440px) {
  .streaming-hero .home-wrap,
  .streaming-section .home-wrap {
    padding-left: 0;
    padding-right: 0;
  }
}

.streaming-hl {
  color: var(--s-teal);
}

/* ── CTA slot — контейнер ── */
.trial-slot.streaming-cta {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 28px auto 0;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .trial-slot.streaming-cta {
    width: 540px;
    max-width: 540px;
  }
}
.streaming-section .streaming-cta,
.streaming-section--final .streaming-cta {
  text-align: center;
}

/* ── CTA кнопка — default ── */
.streaming-cta .button--trial,
.streaming-cta .free-trial-streaming {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 1.25rem 2rem;
  box-sizing: border-box;

  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  line-height: var(--lh-button);
  letter-spacing: var(--ls-button);
  text-decoration: none;
  text-align: center;
  white-space: normal;
  text-wrap: balance;

  color: #ffffff;
  background: linear-gradient(135deg, #0a9aab 0%, #14708a 45%, #3b2a60 100%);
  background-size: 160% 160%;
  background-position: 0% 50%;
  border: none;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 4px rgba(43, 32, 80, 0.22),
    0 12px 26px -8px rgba(10, 154, 171, 0.48);

  cursor: pointer;
  transition:
    background-position 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── hover (только устройства с hover) ── */
@media (hover: hover) {
  .streaming-cta .button--trial:hover,
  .streaming-cta .free-trial-streaming:hover {
    background-position: 100% 50%;
    filter: saturate(1.06);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 4px 8px rgba(43, 32, 80, 0.26),
      0 20px 38px -10px rgba(10, 154, 171, 0.58),
      0 8px 20px -8px rgba(59, 42, 96, 0.35);
  }
}

/* ── active ── */
.streaming-cta .button--trial:active,
.streaming-cta .free-trial-streaming:active {
  transform: scale(0.985);
  filter: brightness(0.96);
}

/* ── focus-visible ── */
.streaming-cta .button--trial:focus-visible,
.streaming-cta .free-trial-streaming:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -5px;
}

/* ── disabled ── */
.streaming-cta .button--trial:disabled,
.streaming-cta .button--trial[aria-disabled="true"],
.streaming-cta .free-trial-streaming[aria-disabled="true"] {
  color: #4a4458;
  background: #f0f0f0;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* ── тёмные секции ── */
.streaming-section--dark .streaming-cta .button--trial,
.streaming-section--dark .streaming-cta .free-trial-streaming,
.streaming-section--final .streaming-cta .button--trial,
.streaming-section--final .streaming-cta .free-trial-streaming {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 12px 26px -8px rgba(10, 154, 171, 0.4);
}
@media (hover: hover) {
  .streaming-section--dark .streaming-cta .button--trial:hover,
  .streaming-section--dark .streaming-cta .free-trial-streaming:hover,
  .streaming-section--final .streaming-cta .button--trial:hover,
  .streaming-section--final .streaming-cta .free-trial-streaming:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 0 0 1px rgba(255, 255, 255, 0.3),
      0 4px 8px rgba(0, 0, 0, 0.55),
      0 20px 38px -10px rgba(10, 154, 171, 0.5);
  }
}

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .streaming-cta .button--trial,
  .streaming-cta .free-trial-streaming {
    transition: none;
  }
  .streaming-cta .button--trial:hover,
  .streaming-cta .free-trial-streaming:hover {
    background-position: 0% 50%;
    filter: none;
    transform: none;
  }
  .streaming-cta .button--trial:active,
  .streaming-cta .free-trial-streaming:active {
    transform: none;
  }
}

/* ==========================================================================
   HERO SECTION — 8px GRID SYSTEM
   Все отступы кратны 8px. Четкая иерархия.
   ========================================================================== */

.streaming-hero {
  min-height: 0;
  background: linear-gradient(135deg, rgba(4, 186, 203, 0.08) 0%, rgba(2, 147, 168, 0.03) 50%, rgba(177, 230, 230, 0.15) 100%);
}

/* ── СЕТКА: 1 колонка на мобилке, 2 колонки 60/40 на планшете/десктопе ─ */
.streaming-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px; /* Мобилка: текст → видео */
  align-items: stretch;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .streaming-hero__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 32px; /* Планшет */
  }
}

@media (min-width: 1024px) {
  .streaming-hero__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 40px; /* Десктоп */
  }
}

/* ── ТЕКСТОВАЯ КОЛОНКА ── */
.streaming-hero__text {
  display: flex;
  flex-direction: column;
  gap: 0; /* Отступы управляются через margin-top у потомков */
}

/* H1 */
.streaming-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: #000000;
  text-wrap: balance;
}

/* Lead: H1 → Lead = 16/20/24px */
.streaming-lead {
  margin: 16px 0 0;
  max-width: 34em;
  font-family: var(--font-body);
  font-size: var(--text-lead);
  font-weight: var(--weight-medium);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-base);
  text-wrap: pretty;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .streaming-lead { margin-top: 20px; }
}

@media (min-width: 1024px) {
  .streaming-lead { margin-top: 24px; }
}

/* Button: Lead → Button = 20/24/32px */
.streaming-hero .trial-slot.streaming-cta {
  margin: 20px 0 0;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .streaming-hero .trial-slot.streaming-cta {
    width: 540px;
    max-width: 540px;
    margin-top: 24px;
  }
}

@media (min-width: 1024px) {
  .streaming-hero .trial-slot.streaming-cta {
    width: 540px;
    max-width: 540px;
    margin-top: 32px;
  }
}

.streaming-hero .streaming-cta {
  text-align: left;
}

/* Note: Button → Note = 8px (все брейкпоинты) */
.streaming-note {
  margin: 8px 0 0;
  color: #3d3d46;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-base);
}

.streaming-hero .streaming-note {
  width: 100%;
  max-width: 100%;
  text-align: center;
}

@media (min-width: 768px) {
  .streaming-hero .streaming-note {
    width: 540px;
    max-width: 540px;
  }
}

/* Checks: Note → Checks = 12/16/20px */
.streaming-checks {
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--lh-small);
}

.streaming-checks li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.streaming-checks svg {
  flex: none;
  color: var(--s-teal-ink);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .streaming-checks { margin-top: 16px; }
}

@media (min-width: 1024px) {
  .streaming-checks { margin-top: 20px; }
}

/* ── ВИДЕО ── */
.streaming-hero__visual {
  position: relative;
  margin: 0;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.streaming-hero__visual img,
.streaming-hero__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 862 / 480;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(19, 27, 46, 0.1);
}

@media (max-width: 767px) {
  .streaming-hero__visual img,
  .streaming-hero__video {
    max-height: 320px;
  }
}

@media (min-width: 768px) {
  .streaming-hero__visual {
    height: 100%;
  }
  .streaming-hero__visual img,
  .streaming-hero__video {
    height: 100%;
    aspect-ratio: unset;
  }
}

.streaming-hero__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.streaming-hero__visual.is-playing .streaming-hero__video {
  opacity: 1;
}

/* ── БЕЙДЖ LIVE: точка ::before (пульсирует) + текст ::after (статичен) ── */
.streaming-hero__visual::before,
.streaming-niche::before {
  content: "";
  position: absolute;
  top: 28px;  /* badge-top(16) + badge-height/2(12) */
  left: 26px; /* badge-left(16) + dot-center-x(10) */
  z-index: 3;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
  animation: dotpulse 1.6s ease-in-out infinite;
}

@keyframes dotpulse {
  0%, 100% { opacity: 1;   transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 0.5; transform: translate(-50%, -50%) scale(0.6); }
}

.streaming-hero__visual::after,
.streaming-niche::after {
  content: "LIVE" / "";
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 6px 8px 6px 20px;
  background: #ff0000;
  border-radius: 6px;
  line-height: 1;
  color: #ffffff;
  font: 700 0.75rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
}

/* ── КНОПКА PLAY (8px grid) ── */
.streaming-hero__toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: rgba(25, 11, 40, 0.85);
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}

.streaming-hero__toggle:hover {
  transform: scale(1.05);
  background: rgba(25, 11, 40, 1);
}

.streaming-hero__toggle:focus-visible {
  outline: 3px solid var(--s-teal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .streaming-hero__video,
  .streaming-hero__toggle {
    transition: none;
  }
}

/* ==========================================================================
   SECTION SPACING — SYMMETRIC, NO OVERRIDES
   ========================================================================== */

/* Mobile (< 768px) */
.streaming-section {
  padding-top: 48px;
  padding-bottom: 48px;
}
.streaming-hero,
.streaming-section--final {
  padding-top: 48px;
  padding-bottom: 48px;
}
.streaming-section--tight,
footer {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .streaming-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .streaming-hero,
  .streaming-section--final {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .streaming-section--tight,
  footer {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .streaming-section {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .streaming-hero,
  .streaming-section--final {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .streaming-section--tight,
  footer {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}
.streaming-section--soft {
  background: #fafaf7;
}
.streaming-section--trial {
  background: linear-gradient(120deg, #fafaf7 0%, #fafaf7 60%, #eaf7f8 100%);
}
.streaming-section--dark {
  background: linear-gradient(105deg, #14233f 0%, #231d3e 55%, #3c1a35 100%);
  color: #ffffff;
}
.streaming-section--steps {
  background: linear-gradient(100deg, #14263b 0%, #23203a 48%, #3a1430 100%);
}
.streaming-section--final {
  background: linear-gradient(105deg, #3a1a35 0%, #1c1c3d 55%, #10223f 100%);
  color: #ffffff;
}
.template-home .streaming-section h2 {
  max-width: 17em;
  margin: 0 auto 16px;
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tighter);
  text-align: center;
  text-wrap: balance;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .template-home .streaming-section h2 { margin-bottom: 24px; }
}
@media (min-width: 1024px) {
  .template-home .streaming-section h2 { margin-bottom: 32px; }
}
.streaming-section--dark h2,
.streaming-section--final h2,
.streaming-section--dark h3,
.streaming-section--final h3 {
  color: #ffffff;
}
.template-home .streaming-section--dark h2,
.template-home .streaming-section--final h2 {
  font-weight: var(--weight-bold);
}
.streaming-sub {
  max-width: 46em;
  margin: 0 auto;
  font-size: var(--text-lead);
  font-weight: var(--weight-medium);
  line-height: var(--lh-lead);
  text-align: center;
}
.streaming-section--dark .streaming-sub,
.streaming-section--final .streaming-sub,
.streaming-section--dark .streaming-close {
  color: #e3e9f5;
}
.streaming-close {
  margin: 36px 0 0;
  text-align: center;
  font-size: var(--text-body);
  line-height: var(--lh-body);
}
.streaming-close + .streaming-cta {
  margin-top: 20px;
}
.streaming-section--final .streaming-cta {
  margin-top: 24px;
}
.template-home .streaming-section h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-base);
  text-wrap: balance;
}

/* Old way / cloud way */
.streaming-ways {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}
.streaming-way {
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
  box-shadow:
    0 4px 16px rgba(19, 27, 46, 0.08),
    0 12px 32px rgba(19, 27, 46, 0.06);
  transition: box-shadow 0.2s ease;
}
@media (hover: hover) {
  .streaming-way:hover {
    box-shadow:
      0 8px 24px rgba(19, 27, 46, 0.12),
      0 20px 48px rgba(19, 27, 46, 0.08);
  }
}
.streaming-way__pic {
  position: relative;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}
.streaming-way__pic img {
  display: block;
  width: 100%;
  aspect-ratio: 583 / 365;
  object-fit: cover;
  border-radius: 0;
}
.streaming-way__tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  margin: 0;
  padding: 8px 16px;
  border-radius: 16px;
  background: #c62828;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}
.streaming-way--cloud .streaming-way__tag {
  background: #00737f;
}
.streaming-way__body {
  padding: 24px;
}
.streaming-way__body h3 {
  color: var(--s-navy);
  font-size: var(--h3-lg);
  margin: 0 0 20px;
}
.streaming-way ul,
.streaming-trial__list,
.streaming-checks,
.streaming-also ul,
.streaming-niches,
.streaming-jobs,
.streaming-steps,
.streaming-feats,
.streaming-rules,
.streaming-articles {
  list-style: none;
  padding: 0;
}
.streaming-way ul {
  display: grid;
  gap: 16px;
  margin: 0;
}
.streaming-way li,
.streaming-trial__list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: start;
  font-size: var(--text-body);
  line-height: var(--lh-body);
}
.streaming-way li svg,
.streaming-trial__list li svg {
  margin-top: 2px;
}
.streaming-way--old li svg {
  color: #d4263a;
}
.streaming-way--cloud li svg,
.streaming-trial__list svg {
  color: var(--s-teal);
}
.streaming-ways + .streaming-close {
  margin-top: 24px;
}
.streaming-close + .streaming-cta {
  margin-top: 16px;
}

/* Cards on dark sections */
.streaming-steps,
.streaming-feats {
  display: grid;
  gap: 20px;
  margin: 24px 0 0;
}
.streaming-card {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.streaming-card p {
  margin: 0 0 14px;
  color: #eef2fa;
  font-size: var(--text-body);
  line-height: var(--lh-body);
}
.streaming-card h3 {
  font-size: var(--h3);
}
.streaming-card p.streaming-kicker {
  color: #4fd3e3;
}
.streaming-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: #4fd3e3;
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.streaming-kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(79, 211, 227, 0.6), transparent);
}
.streaming-tag {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-formula);
}
.streaming-card .streaming-tag {
  margin: auto 0 0;
  padding: 8px 12px;
  border: 1px solid rgba(79, 211, 227, 0.55);
  border-radius: 8px;
  background: rgba(4, 186, 203, 0.12);
  color: #8eeaf3;
}

/* Niche cards */
.streaming-niches {
  display: grid;
  gap: 20px;
  margin: 24px 0 0;
}
@media (max-width: 767px) {
  .streaming-niches {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .streaming-niches::-webkit-scrollbar {
    display: none;
  }
  .streaming-niche {
    flex: 0 0 85vw;
    scroll-snap-align: start;
  }
}
.streaming-niche {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 450px;
  overflow: hidden;
  border-radius: 20px;
  background: #0d1a20;
  color: #ffffff;
}
.streaming-niche img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.streaming-niche__text {
  position: relative;
  width: 100%;
  padding: 120px 22px 24px;
  background: linear-gradient(180deg, rgba(8, 14, 20, 0) 0%, rgba(8, 14, 20, 0.82) 38%, rgba(8, 14, 20, 0.94) 100%);
}
.streaming-niche h3 {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: var(--h3);
}
.streaming-niche p {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
}
.streaming-niche .streaming-niche__quote {
  margin: 0 0 14px;
  padding-left: 14px;
  border-left: 2px solid #ff6b78;
  color: #e6ebf0;
  font-size: 0.875rem;
  font-style: italic;
}
.streaming-also {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  text-align: center;
}
.streaming-also > p {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #55555c;
}
.streaming-also ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
}
.streaming-also li {
  padding: 10px 22px;
  border: 1px solid #dcdcd6;
  border-radius: 999px;
  background: #fafaf7;
  font-size: 0.9375rem;
}

/* Nine jobs */
.streaming-jobs {
  display: grid;
  gap: 16px;
  margin: 24px 0 0;
}
.streaming-job {
  padding: 20px 24px 24px;
  border: 1px solid #ececE6;
  border-radius: 18px;
  background: #fcfcfa;
  box-shadow: 0 6px 18px rgba(19, 27, 46, 0.07);
}
.streaming-job__top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  font-size: var(--text-label);
  letter-spacing: var(--ls-job);
}
.streaming-job__top::before {
  content: "";
  order: 1;
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(10, 132, 152, 0.7), transparent);
}
.streaming-job__num {
  color: var(--s-teal-ink);
}
.streaming-job__status {
  order: 2;
  color: #c0204f;
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.streaming-job h3 {
  color: var(--s-navy);
  font-size: var(--h3);
}
.streaming-job p:last-child {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

/* Rules */
.streaming-rules {
  display: grid;
  gap: 20px;
  margin: 24px 0 0;
}
.streaming-rule {
  padding: 24px;
  border: 1px solid #ececE6;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(19, 27, 46, 0.07);
}
.streaming-rule .streaming-tag {
  display: inline-block;
  margin: 0 0 16px;
  padding: 8px 12px;
  border: 1px solid #b6dde1;
  border-radius: 8px;
  background: #eaf5f6;
  color: #086a75;
}
.streaming-rule h3 {
  color: var(--s-navy);
  font-size: var(--h3);
}
.streaming-rule p:last-child {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

/* Trial card */
.streaming-trial {
  margin-top: 40px;
  padding: 32px 24px;
  border: 1px solid #e6e6e0;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: var(--s-card-shadow);
}
.streaming-section .streaming-trial h3 {
  color: var(--s-navy);
  font-size: var(--h3-lg);
}
.streaming-trial > p {
  margin: 0 0 20px;
}
.streaming-trial__list {
  display: grid;
  gap: 14px 40px;
  margin: 0;
}
.streaming-trial__action {
  display: grid;
  gap: 20px;
  align-items: center;
  margin-top: 28px;
}
.streaming-trial__action .streaming-cta {
  margin: 0;
  text-align: left;
}
.streaming-trial__action .streaming-note {
  max-width: 400px;
  text-align: center;
}
.streaming-trial__action p {
  margin: 0;
}
.streaming-trial__action a:not(.button) {
  color: var(--s-navy);
  font-size: 1.125rem;
  font-weight: 600;
  text-underline-offset: 3px;
}
.streaming-trial__action p:last-child {
  padding: 0;
}

/* Comparison table */
.streaming-table {
  display: block;
  width: 100%;
  margin-top: 40px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ececE6;
  border-radius: 20px;
  background: #fcfcfa;
  box-shadow: var(--s-card-shadow);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.streaming-table thead {
  display: none;
}
.streaming-table tbody,
.streaming-table tr {
  display: block;
}
.streaming-table tr {
  border-top: 1px solid #ececE6;
}
.streaming-table tr:first-child {
  border-top: 0;
}
.streaming-table th[scope="row"] {
  display: block;
  padding: 16px 18px 6px;
  font-size: 1rem;
  text-align: left;
}
.streaming-table td {
  display: block;
  padding: 8px 18px;
  line-height: var(--lh-table);
}
.streaming-table td::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 2px;
  color: #4d4d55;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.streaming-table td:nth-of-type(2)::after,
.streaming-table td:nth-of-type(3)::after {
  content: none;
}
.streaming-table td:nth-of-type(1) {
  margin-top: 6px;
  padding-bottom: 16px;
  background: #eaf6f7;
  border-left: 3px solid var(--accent);
  border-right: 3px solid var(--accent);
}
.streaming-table td:nth-of-type(2),
.streaming-table td:nth-of-type(3) {
  position: relative;
}
.streaming-table td:nth-of-type(2) > :first-child,
.streaming-table td:nth-of-type(3) > :first-child {
  display: inline;
}

/* Marks inside the table cells */
.streaming-table td:nth-of-type(2)::before,
.streaming-table td:nth-of-type(3)::before {
  color: #4d4d55;
}

/* FAQ */
.streaming-section:has(.streaming-faq) {
  background: #fafaf7;
}
.streaming-faq {
  max-width: 880px;
  margin: 24px auto 0;
}
@media (min-width: 768px) {
  .streaming-faq { margin-top: 32px; }
  .streaming-section--final .streaming-cta,
  .streaming-ways,
  .streaming-steps,
  .streaming-feats,
  .streaming-niches,
  .streaming-jobs,
  .streaming-rules,
  .streaming-articles { margin-top: 32px; }
}
@media (min-width: 1024px) {
  .streaming-faq { margin-top: 40px; }
  .streaming-section--final .streaming-cta,
  .streaming-ways,
  .streaming-steps,
  .streaming-feats,
  .streaming-niches,
  .streaming-jobs,
  .streaming-rules,
  .streaming-articles { margin-top: 40px; }
}
.streaming-faq details {
  border-radius: 12px;
  margin-bottom: 8px;
}
.streaming-faq summary {
  position: relative;
  display: block;
  min-height: 44px;
  padding: 18px 48px 18px 4px;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--lh-title);
}
.streaming-faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border: 1.5px solid #111111;
  border-radius: 50%;
  background:
    linear-gradient(#111111, #111111) center / 16px 1.5px no-repeat,
    linear-gradient(#111111, #111111) center / 1.5px 16px no-repeat;
}
.streaming-faq details[open] summary::after {
  background: linear-gradient(#111111, #111111) center / 16px 1.5px no-repeat;
}
.streaming-faq summary:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 2px;
}
.streaming-faq__a {
  padding: 0 48px 18px 4px;
}
.streaming-faq__a p {
  margin: 0 0 10px;
  line-height: 1.55;
}

.streaming-section--articles h2 {
  margin-bottom: 0;
}

/* Article cards */
.streaming-articles {
  display: grid;
  gap: 16px;
  margin: 24px 0 0;
}
.streaming-article {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e3e3dd;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(19, 27, 46, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) {
  .streaming-article:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(19, 27, 46, 0.12);
  }
}
.streaming-article:focus-within {
  outline: 3px solid var(--s-teal);
  outline-offset: 2px;
}
.streaming-article img {
  display: block;
  width: 100%;
  aspect-ratio: 378 / 190;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
}
.streaming-article__body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.streaming-article h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-title);
  color: #000000;
  text-wrap: balance;
}
.streaming-article__body > p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--weight-regular);
  line-height: 1.45;
  color: #4d4d55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.streaming-article a {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  z-index: 1;
}
.streaming-article a:focus-visible {
  outline: none;
}

/* Tablet and up */
@media (min-width: 768px) {
  .streaming-ways {
    gap: 24px;
    margin-top: 32px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .streaming-ways + .streaming-close {
    margin-top: 32px;
  }
  .streaming-steps,
  .streaming-feats,
  .streaming-niches,
  .streaming-rules,
  .streaming-articles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .streaming-articles { gap: 24px; }
  .streaming-jobs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .streaming-trial {
    padding: 40px 44px;
  }
  .streaming-trial__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .streaming-trial__action {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .streaming-ways {
    gap: 32px;
    margin-top: 40px;
  }
  .streaming-ways + .streaming-close {
    margin-top: 40px;
  }
  .streaming-steps,
  .streaming-feats,
  .streaming-niches,
  .streaming-rules,
  .streaming-jobs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .streaming-articles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
  .streaming-table {
    display: table;
  }
  .streaming-table thead {
    display: table-header-group;
  }
  .streaming-table tbody {
    display: table-row-group;
  }
  .streaming-table tr {
    display: table-row;
  }
  .streaming-table th,
  .streaming-table td {
    padding: 18px 16px;
    vertical-align: top;
    text-align: left;
  }
  .streaming-table thead th {
    background: #190b28;
    color: #ffffff;
    font-size: 0.875rem;
  }
  .streaming-table thead th:nth-child(2) {
    background: #17404a;
  }
  .streaming-table tbody th[scope="row"] {
    display: table-cell;
    width: 20%;
    padding: 18px 16px;
    font-size: 0.9375rem;
  }
  .streaming-table td {
    display: table-cell;
    width: 26.6%;
    border-top: 1px solid #ececE6;
  }
  .streaming-table tbody th[scope="row"] {
    border-top: 1px solid #ececE6;
  }
  .streaming-table tr:first-child td,
  .streaming-table tr:first-child th[scope="row"] {
    border-top: 0;
  }
  .streaming-table td::before {
    content: none;
  }
  .streaming-table td:nth-of-type(2)::before,
  .streaming-table td:nth-of-type(3)::before {
    content: "\2715\00a0";
    display: inline;
    margin: 0;
    color: #d4263a;
    font-size: inherit;
    font-weight: 700;
    letter-spacing: 0;
  }
  .streaming-table td:nth-of-type(1)::before {
    content: "\2713\00a0";
    display: inline;
    margin: 0;
    color: var(--s-teal-ink);
    font-size: inherit;
    font-weight: 700;
    letter-spacing: 0;
  }
  .streaming-table td:nth-of-type(1) {
    margin: 0;
    background: #eaf6f7;
    border-left: 3px solid var(--accent);
    border-right: 3px solid var(--accent);
  }
  .streaming-table tr {
    border-top: 0;
  }
}

@media (min-width: 1024px) and (max-width: 1099px) {
  .streaming-table td {
    font-size: 0.875rem;
  }
}

@media (max-width: 479px) {
  .streaming-niche {
    min-height: 420px;
  }
  .streaming-cta .button--trial {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .streaming-hero *,
  .streaming-section * {
    transition: none !important;
    animation: none !important;
  }
  .streaming-cta .button--trial:hover {
    background-position: 0% 50%;
    filter: none;
  }
  .streaming-cta .button--trial:active {
    transform: none;
  }
}

/* Card titles: display face, semibold per design system H3=600 */
.template-home .streaming-section .streaming-card h3,
.template-home .streaming-section .streaming-job h3,
.template-home .streaming-section .streaming-rule h3,
.template-home .streaming-section .streaming-way h3,
.template-home .streaming-section .streaming-trial h3,
.template-home .streaming-section .streaming-niche h3,
.template-home .streaming-section .streaming-article h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
}
.template-home .streaming-section h2 {
  color: #000000;
}
.template-home .streaming-section--dark h2,
.template-home .streaming-section--final h2 {
  color: #ffffff;
}
/* ---------- Multi-language heading compensations ---------- */
:lang(ru) .streaming-hero h1,
:lang(pl) .streaming-hero h1,
:lang(ru) .streaming-section h2,
:lang(pl) .streaming-section h2 {
  line-height: 1.12;
}

/* ── PRICING SECTION ── */
.pricing-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px;
}
.pricing-header h2 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 16px;
  color: var(--s-navy);
}
.pricing-header .streaming-sub {
  max-width: 46em;
  margin: 0 auto;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  color: #3d3d46;
}
@media (min-width: 768px) {
  .pricing-header { margin-bottom: 32px; }
  .pricing-header h2 { margin-bottom: 20px; }
}
@media (min-width: 1024px) {
  .pricing-header { margin-bottom: 40px; }
  .pricing-header h2 { margin-bottom: 24px; }
}
.pricing-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .pricing-controls { margin-bottom: 32px; }
}
.pricing-toggle {
  display: inline-flex;
  background: #eaf7f8;
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}
.pricing-toggle__btn {
  padding: 10px 24px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--s-navy);
  cursor: pointer;
  transition: all 0.2s ease;
}
@media (hover: hover) {
  .pricing-toggle__btn:hover { color: var(--s-teal-ink); }
}
.pricing-toggle__btn.is-active {
  background: #ffffff;
  color: var(--s-teal-ink);
  box-shadow: 0 2px 8px rgba(19, 27, 46, 0.08);
}
.pricing-grid {
  display: grid;
  gap: 24px;
  align-items: stretch;
}
@media (min-width: 768px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pricing-grid.is-hidden { display: none; }
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  background: #ffffff;
  border: 1px solid #ececE6;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(19, 27, 46, 0.05);
  transition: box-shadow 0.2s ease;
}
@media (hover: hover) {
  .pricing-card:hover {
    box-shadow: 0 12px 28px rgba(19, 27, 46, 0.1);
  }
}
.pricing-card--trial {
  background: linear-gradient(180deg, #eaf7f8 0%, #ffffff 40%);
  border: 1px solid #b6dde1;
}
.pricing-card--popular {
  border: 2px solid var(--s-teal);
  box-shadow: 0 8px 24px rgba(10, 132, 152, 0.12);
}
.pricing-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  background: var(--s-teal);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}
.pricing-card__badge--trial { background: var(--s-navy); }
.pricing-card__header {
  text-align: center;
  margin-bottom: 24px;
}
.pricing-card__header h3 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--s-navy);
}
.pricing-card__desc {
  margin: 0;
  font-size: 0.9375rem;
  color: #4d4d55;
  line-height: 1.5;
}
.pricing-card__price {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #ececE6;
}
.price-value {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--s-navy);
  line-height: 1;
}
.price-value--free { color: var(--s-teal); }
.price-currency {
  font-size: 1rem;
  color: #4d4d55;
  font-weight: 500;
}
.price-period {
  display: block;
  margin-top: 4px;
  font-size: 0.875rem;
  color: #6b6b74;
}
.pricing-card__features {
  list-style: none;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}
.pricing-card__features li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.9375rem;
  color: var(--s-navy);
  line-height: 1.5;
}
.pricing-card__features li svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--s-teal);
}
.pricing-card .trial-slot.streaming-cta {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
/* Every card ends with its button; the button height is set at the end of this file. */
.pricing-card__note {
  margin: 0 0 12px;
  text-align: center;
  font-size: 0.8125rem;
  color: #6b6b74;
  line-height: 1.4;
}
.pricing-close {
  text-align: center;
  margin-top: 40px;
  font-size: 1rem;
  color: var(--s-navy);
}
.pricing-close--all {
  margin-top: 16px;
  font-weight: 700;
}
.pricing-close a {
  color: var(--s-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .pricing-close a:hover { color: var(--s-teal-ink); }
}

:lang(ru) .streaming-section h3,
:lang(pl) .streaming-section h3 {
  line-height: 1.4;
}

:lang(es) .streaming-lead { max-width: 38em; }
:lang(es) .streaming-sub  { max-width: 52em; }

@media (max-width: 479px) {
  .streaming-cta .button--trial {
    padding: 10px 16px;
  }
}

/* ── Hero sized by the screen, like the other product heroes (template-home.css): h1, lead, gaps, padding and the
   button follow the screen height as well as its width, so the button, the note and the checks under it are on the
   first screen above the cookie-settings button. Comes last so it wins over the fixed section paddings above. ── */
.streaming-hero {
  /* Fills the screen under the header, content centred above the cookie-settings button (as on the translator page). */
  min-height: calc(100svh - var(--hero-header));
  padding: var(--hero-pad) 0 var(--hero-safe-bottom);
}
.streaming-hero__grid {
  align-items: center;
}
/* Bigger heading and lead than the shared hero scale, still bounded by the screen height. */
.streaming-hero {
  --hero-h1: clamp(1.75rem, min(1rem + 3.8vw, 5.4svh), 3.25rem);
  --hero-lead: clamp(1rem, min(0.9rem + 0.8vw, 2.9svh), 1.375rem);
}
@media (min-width: 960px) {
  .streaming-hero {
    --hero-h1: clamp(2rem, min(1rem + 3vw, 7.6svh), 4.5rem);
    --hero-lead: clamp(1.0625rem, min(0.85rem + 0.7vw, 2.9svh), 1.5rem);
  }
}
.streaming-hero h1 {
  font-size: var(--hero-h1);
}
.streaming-hero .streaming-lead {
  margin-top: calc(var(--hero-gap) * 0.85);
  font-size: var(--hero-lead);
  line-height: var(--hero-lead-lh);
}
.streaming-hero .trial-slot.streaming-cta {
  margin-top: var(--hero-gap);
}
.streaming-hero .streaming-cta .button--trial {
  min-height: var(--hero-cta-h);
  padding-top: 8px;
  padding-bottom: 8px;
}
.streaming-hero .streaming-checks {
  margin-top: calc(var(--hero-gap) * 0.35);
}
.streaming-hero__visual img,
.streaming-hero__video {
  max-height: var(--hero-visual-max);
}

/* ── Buttons: the site's 56px height, not 64px plus padding. In the price cards the label is a little smaller, so
   a two-line label ("Попробовать 3 дня бесплатно") still fits the same height and the row lines up. ── */
.streaming-cta .button--trial,
.streaming-cta .free-trial-streaming {
  min-height: 56px;
  padding: 12px 28px;
}
.pricing-card .streaming-cta .button--trial {
  min-height: 56px;
  min-height: calc(2lh + 20px);
  padding: 10px 16px;
  font-size: 1rem;
  line-height: 1.15;
}