/*
  Runable landing overrides — SAFE:
  - Не требует правок Aspro-шаблона
  - Скоуп только внутри .runable-content (то есть только /runable/)
*/

/* фон страницы под лендинг */
.runable-content {
  background: #000;
}

/* 1) Шапка "лендинговая": тёмная/прозрачная + blur */
.runable-content ~ * .header,
.runable-content ~ * header,
.header, header {
  /* намеренно не трогаем глобально: ниже мы уточним через body id main + URL, если понадобится */
}

/* Надежный способ: шапка находится ВНЕ .runable-content, поэтому стилить её надо по признаку страницы.
   У Aspro body имеет id="main". На /runable/ у нас точно есть .runable-content в DOM.
   Ниже используем селектор: body#main:has(.runable-content) (не везде), поэтому делаем без :has:
   — через класс на html добавим в index.php на следующем шаге, если потребуется.
*/

/* Пока — минимум: делаем контент так, чтобы hero визуально совпал (шапка будет дефолтной). */
.runable-content {
  position: relative;
  z-index: 1;
}

/* чуть поднимем контент к верху, чтобы выглядело как в макете */
.runable-content #root {
  min-height: 70vh;
}

/* Пример: если внутри React-шаблона есть hero — можно усилить контраст */
.runable-content h1,
.runable-content h2,
.runable-content h3,
.runable-content p,
.runable-content a {
  color: #fff;
}


   Aspro header styling ONLY on /runable/
   ========================= */
.runable-landing .header,
.runable-landing header,
.runable-landing .header-wrapper,
.runable-landing .header__wrapper,
.runable-landing .top-block {
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* светлый текст/иконки */
.runable-landing .header a,
.runable-landing header a,
.runable-landing .header .svg,
.runable-landing header .svg,
.runable-landing .header .icon,
.runable-landing header .icon {
  color: #fff !important;
  fill: #fff !important;
}

/* границы/разделители мягче */
.runable-landing .header * {
  border-color: rgba(255,255,255,0.12) !important;
}

/* шапка поверх hero-видео */
.runable-landing .header,
.runable-landing header {
  position: relative;
  z-index: 50;
}


   RUNABLE mobile background fallback (safe, /runable/ only)
   Причина: mobile browsers often block autoplay video
   ========================= */



   STRONG mobile fallback background (Runable) — /runable/ only
   ========================= */



   MOBILE FIX: disable og-image fallback and keep Runable hero
   Scope: only /runable/ (runable-landing)
   ========================================================== */
@media (max-width: 991px) {

  /* 1) убираем любые навешанные нами картинки-фоны */
  body.runable-landing .runable-content,
  body.runable-landing .runable-content #root,
  body.runable-landing .runable-content::before,
  body.runable-landing .runable-content::after{
    background-image: none !important;
  }

  /* 2) базовый тёмный фон как в Runable (без постеров) */
  body.runable-landing .runable-content{
    background: #000 !important;
  }

  /* 3) гарантия высоты hero на мобиле (как min-h-screen) */
  body.runable-landing .runable-content #root,
  body.runable-landing .runable-content .min-h-screen,
  body.runable-landing .runable-content .hero-bg{
    min-height: 100vh !important;
  }

  /* 4) на всякий: если где-то внутри hero стоит свой фон — пусть будет прозрачный */
  body.runable-landing .runable-content .hero-bg{
    background: transparent !important;
  }
}


   MOBILE: keep Runable layout (no Aspro interference)
   Scope: /runable/ only
   ========================= */
@media (max-width: 991px) {
  body.runable-landing .runable-content{
    background: #000 !important;
    overflow-x: hidden;
  }

  /* Runable hero uses .hero-bg + min-h-screen in bundle */
  body.runable-landing .runable-content .hero-bg{
    background: transparent !important;
  }
}


   FIX: Aspro wrappers background reset (mobile + desktop)
   Scope: /runable/ only
   Цель: чтобы фон на мобилке был как в Runable, без "серого/светлого" Aspro
   ========================================================== */
html.runable-landing,
body.runable-landing{
  background: #000 !important;
}

/* Частые контейнеры Aspro, которые держат фон */
body.runable-landing .wrapper,
body.runable-landing .wrapper_inner,
body.runable-landing .main,
body.runable-landing .middle,
body.runable-landing .container,
body.runable-landing .content,
body.runable-landing .page-content,
body.runable-landing .body,
body.runable-landing .body_media,
body.runable-landing .bg,
body.runable-landing .grey-bg,
body.runable-landing .grey-bg-goods,
body.runable-landing .fill_bg_{
  background: transparent !important;
  background-image: none !important;
}

/* Сам лендинг */
body.runable-landing .runable-content{
  background: #000 !important;
}


   RUNABLE: hide Aspro page-top "empty" area (breadcrumbs/h1 spacing)
   Scope: only /runable/ (body.runable-landing)
   ========================================================== */
body.runable-landing .page-top-info,
body.runable-landing .page-top-wrapper,
body.runable-landing .page-top {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* remove extra gap before content if template adds it */
body.runable-landing .main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}


   RUNABLE: unconditional hide Aspro page-top (THIS CSS FILE is /runable/ only)
   ========================================================== */
.page-top-info,
.page-top-wrapper,
.page-top {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


   RUNABLE STATIC BLOCK (content outside #root)
   Scope: /runable/ only (body.runable-landing)
   ========================================================== */
body.runable-landing .ebs-runable-static{
  padding: 28px 16px;
}

body.runable-landing .ebs-runable-static__inner{
  max-width: 1080px;
  margin: 0 auto;
}

body.runable-landing .ebs-runable-static h2{
  margin: 0 0 12px 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
}

body.runable-landing .ebs-runable-static p{
  margin: 0 0 12px 0;
  opacity: .9;
  line-height: 1.5;
}

body.runable-landing .ebs-runable-static ul{
  margin: 0;
  padding-left: 18px;
}

body.runable-landing .ebs-runable-static li{
  margin: 6px 0;
  line-height: 1.45;
}


   RUNABLE STATIC FAQ (fix)
   Only /runable/ (body.runable-landing)
   ========================================================== */
body.runable-landing .ebs-faq details{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 12px 14px;
  margin: 10px 0;
}

body.runable-landing .ebs-faq summary{
  cursor: pointer;
  font-weight: 700;
}

body.runable-landing .ebs-faq__body{
  margin-top: 10px;
  opacity: .92;
  line-height: 1.55;
}

@media (max-width: 991px){
  body.runable-landing .ebs-grid-3{ grid-template-columns: 1fr; }
}


   RUNABLE HERO (static, before #root)
   Only /runable/ (body.runable-landing)
   ========================================================== */
body.runable-landing .ebs-hero{
  padding: 36px 16px 18px;
}

body.runable-landing .ebs-hero__inner{
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

body.runable-landing .ebs-hero__badge{
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  font-size: 12px;
  opacity: .92;
  margin-bottom: 12px;
}

body.runable-landing .ebs-hero__title{
  margin: 0 0 10px 0;
  font-weight: 800;
  font-size: 32px;
  line-height: 1.15;
}

body.runable-landing .ebs-hero__lead{
  margin: 0 0 14px 0;
  opacity: .92;
  line-height: 1.55;
  max-width: 820px;
}

body.runable-landing .ebs-hero__cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 991px){
  body.runable-landing .ebs-hero__title{ font-size: 24px; }
}


   RUNABLE INFO + QUICK CATEGORIES
   Only /runable/ (body.runable-landing)
   ========================================================== */
body.runable-landing .ebs-info{
  padding: 0 16px 18px;
}

body.runable-landing .ebs-info__inner{
  max-width: 1080px;
  margin: 0 auto;
}

body.runable-landing .ebs-grid-3--tight{
  margin-top: 12px;
  margin-bottom: 12px;
}

body.runable-landing .ebs-quickcats{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

body.runable-landing .ebs-chip{
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  font-weight: 600;
  opacity: .95;
}


   RUNABLE CONTACTS / CONSULTATION
   Only /runable/ (body.runable-landing)
   ========================================================== */
body.runable-landing .ebs-contacts{
  padding: 0 16px 18px;
}

body.runable-landing .ebs-contacts__inner{
  max-width: 1080px;
  margin: 0 auto;
}

body.runable-landing .ebs-contacts__grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
}

body.runable-landing .ebs-contacts__card{
  padding: 18px 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

body.runable-landing .ebs-contacts__card h2{
  margin: 0 0 10px 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
}

body.runable-landing .ebs-contacts__card h3{
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 800;
}

body.runable-landing .ebs-contacts__cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

body.runable-landing .ebs-kv{
  margin-top: 10px;
}

body.runable-landing .ebs-kv__row{
  display: flex;
  gap: 8px;
  margin: 6px 0;
  line-height: 1.45;
}

body.runable-landing .ebs-kv__k{
  opacity: .75;
  min-width: 78px;
}

body.runable-landing .ebs-kv__v{
  opacity: .95;
}

body.runable-landing .ebs-contacts__chips{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

@media (max-width: 991px){
  body.runable-landing .ebs-contacts__grid{ grid-template-columns: 1fr; }
}


   RUNABLE POPULAR PRODUCTS
   Only /runable/ (body.runable-landing)
   ========================================================== */
body.runable-landing .ebs-popular{
  padding: 0 16px 18px;
}

body.runable-landing .ebs-popular__inner{
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

body.runable-landing .ebs-popular__title{
  margin: 0 0 8px 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}

body.runable-landing .ebs-popular__lead{
  margin: 0 0 12px 0;
  opacity: .92;
  line-height: 1.55;
}

/* optional: make the loaded grid breathe */
body.runable-landing #ebs-products-popular{
  margin-top: 10px;
}


   RUNABLE SCOPE FIX: use html.runable-landing (body class may be absent)
   ========================================================== */

/* make our tokens/background apply even if only <html> has class */
html.runable-landing body#main{
  background: #000;
  color: rgba(255,255,255,.82);
}

/* IMPORTANT: re-scope previously written rules (body.runable-landing -> html.runable-landing) */
html.runable-landing .ebs-hero,
html.runable-landing .ebs-info,
html.runable-landing .ebs-contacts,
html.runable-landing .ebs-runable-static{
  /* keep as-is; this block just ensures selectors match */
}


   RUNABLE: neutralize Aspro left layout ONLY on /runable/
   (safe CSS override, no Aspro edits)
   ========================================================== */

/* hide possible left aside column if present */
html.runable-landing .layout [class*="aside"],
html.runable-landing .layout__aside{
  display: none !important;
}

/* force content to full width */
html.runable-landing .layout,
html.runable-landing .layout__content,
html.runable-landing .layout__inner,
html.runable-landing .container{
  width: 100% !important;
  max-width: 100% !important;
}

/* reduce “left stuck” feeling */
html.runable-landing .main{
  padding-left: 0 !important;
  padding-right: 0 !important;
}


   RUNABLE SCOPE (NO Aspro edits):
   Use meta marker + :has() instead of body/html class
   Works in Chrome: html:has(meta[name="runable-landing"])
   ========================================================== */
html:has(meta[name="runable-landing"]) body#main{
  background: #000 !important;
  color: rgba(255,255,255,.82) !important;
}

/* neutralize Aspro left layout only on /runable/ */
html:has(meta[name="runable-landing"]) .layout [class*="aside"],
html:has(meta[name="runable-landing"]) .layout__aside{
  display: none !important;
}

html:has(meta[name="runable-landing"]) .layout,
html:has(meta[name="runable-landing"]) .layout__content,
html:has(meta[name="runable-landing"]) .layout__inner,
html:has(meta[name="runable-landing"]) .container{
  width: 100% !important;
  max-width: 100% !important;
}

html:has(meta[name="runable-landing"]) .main{
  padding-left: 0 !important;
  padding-right: 0 !important;
}


   RUNABLE LAYOUT FIX (NO Aspro edits)
   Scope: only pages that contain <meta name="runable-landing">
   Goal: remove Aspro container/grid constraints and center our blocks
   ========================================================== */
html:has(meta[name="runable-landing"]) .container{
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html:has(meta[name="runable-landing"]) .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html:has(meta[name="runable-landing"]) .maxwidth-theme{
  width: 100% !important;
  max-width: 100% !important;
}

html:has(meta[name="runable-landing"]) .content-md{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* the inner content wrapper Aspro uses */
html:has(meta[name="runable-landing"]) .right_block,
html:has(meta[name="runable-landing"]) .right_block.narrow_N{
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* our own content: keep nice centered width */
html:has(meta[name="runable-landing"]) .runable-content{
  width: 100% !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}

/* optional: soften Aspro background influence */
html:has(meta[name="runable-landing"]) body#main{
  background: #000 !important;
}


   RUNABLE SCOPE (NO Aspro edits):
   Scope everything by .runable-content (exists only on /runable/)
   + Relax Aspro grid constraints ONLY for this block
   ========================================================== */

/* 1) Unwrap Aspro layout constraints around our block */
.runable-content{
  width: 100% !important;
  max-width: 1280px !important; /* ближе к “лендинговой” ширине, можно 1080/1200/1280 */
  margin: 0 auto !important;
  padding: 0 16px !important;
}

/* Aspro wrappers that sit above .runable-content (make them not squeeze) */
.page-wrapper .container,
.page-wrapper .row,
.page-wrapper .maxwidth-theme,
.page-wrapper .content-md,
.page-wrapper .right_block{
  /* не трогаем глобально — только когда внутри есть runable-content */
}

.page-wrapper:has(.runable-content) .container{
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-wrapper:has(.runable-content) .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.page-wrapper:has(.runable-content) .maxwidth-theme{
  width: 100% !important;
  max-width: 100% !important;
}

.page-wrapper:has(.runable-content) .content-md{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-wrapper:has(.runable-content) .right_block,
.page-wrapper:has(.runable-content) .right_block.narrow_N{
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* 2) “Template feel”: общий фон/цвета именно внутри runable */
.page-wrapper:has(.runable-content) body#main{
  background: #000 !important;
}

/* 3) If you previously used body.runable-landing selectors — mirror them via .runable-content */
.runable-content .ebs-hero,
.runable-content .ebs-info,
.runable-content .ebs-contacts,
.runable-content .ebs-runable-static{
  /* пустой блок — просто чтобы зафиксировать новый скоуп */
}



/* ==========================================================
   RUNABLE THEME v1 (scoped by .runable-content only)
   NO Aspro edits. Affects only /runable/ because .runable-content exists there.
   ========================================================== */

/* 1) Make Aspro wrappers stop squeezing ONLY on pages that contain .runable-content */
.page-wrapper:has(.runable-content) .container{
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.page-wrapper:has(.runable-content) .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.page-wrapper:has(.runable-content) .maxwidth-theme{
  width: 100% !important;
  max-width: 100% !important;
}
.page-wrapper:has(.runable-content) .content-md{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.page-wrapper:has(.runable-content) .right_block,
.page-wrapper:has(.runable-content) .right_block.narrow_N{
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* 2) Background/skin only for /runable/ */
.page-wrapper:has(.runable-content) body#main{
  background:
    radial-gradient(900px 420px at 18% 10%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(900px 420px at 70% 30%, rgba(255,255,255,.04), transparent 55%),
    #000 !important;
}

/* 3) Our content width */
.runable-content{
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  color: rgba(255,255,255,.82);
}

/* shared “card” surface */
.runable-content .ebs-hero__inner,
.runable-content .ebs-block,
.runable-content .ebs-contacts__card{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

/* HERO */
.runable-content .ebs-hero{ padding: 28px 0 18px; }
.runable-content .ebs-hero__inner{ padding: 18px 16px; }
.runable-content .ebs-hero__badge{
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  font-size: 12px;
  opacity: .92;
  margin-bottom: 12px;
}
.runable-content .ebs-hero__title{
  margin: 0 0 10px 0;
  font-weight: 800;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.runable-content .ebs-hero__lead{
  margin: 0 0 14px 0;
  opacity: .65;
  line-height: 1.55;
  max-width: 820px;
}
.runable-content .ebs-hero__cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* buttons/chips */
.runable-content .ebs-btn,
.runable-content .ebs-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  border-radius: 10px;
  transition: transform .08s ease, background-color .12s ease, border-color .12s ease;
}
.runable-content .ebs-btn{ height: 44px; padding: 0 16px; }
.runable-content .ebs-btn--primary{ background: rgba(255,255,255,.10); }
.runable-content .ebs-btn:hover,
.runable-content .ebs-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
}
.runable-content .ebs-btn--primary:hover{ background: rgba(255,255,255,.14); }
.runable-content .ebs-chip{ height: 38px; padding: 0 12px; opacity: .95; }

/* INFO / GRID / CARDS */
.runable-content .ebs-info{ padding: 6px 0 18px; }
.runable-content .ebs-grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.runable-content .ebs-card{
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
}
.runable-content .ebs-card p{ margin: 0; opacity: .65; line-height: 1.55; }

/* CONTACTS */
.runable-content .ebs-contacts{ padding: 6px 0 18px; }
.runable-content .ebs-contacts__grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
}
.runable-content .ebs-contacts__card{ padding: 18px 16px; }
.runable-content .ebs-kv__k{ opacity: .65; min-width: 78px; }

/* FAQ */
.runable-content .ebs-faq details{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 12px 14px;
  margin: 10px 0;
  border-radius: 14px;
}
.runable-content .ebs-faq summary{ cursor: pointer; font-weight: 700; }
.runable-content .ebs-faq__body{ margin-top: 10px; opacity: .75; line-height: 1.55; }

@media (max-width: 991px){
  .runable-content .ebs-hero__title{ font-size: 24px; }
  .runable-content .ebs-grid-3{ grid-template-columns: 1fr; }
  .runable-content .ebs-contacts__grid{ grid-template-columns: 1fr; }
}


/* EBS_RUNABLE_STAGE1_SECOND_SCREEN_CSS_V1: second meaning screen (local only) */
.page-wrapper:has(.runable-content) .runable-how {
  padding: 56px 0;
}

.page-wrapper:has(.runable-content) .runable-how__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}

.page-wrapper:has(.runable-content) .runable-h2 {
  margin: 0 0 10px 0;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
}

.page-wrapper:has(.runable-content) .runable-subtitle {
  margin: 0 auto 22px auto;
  max-width: 760px;
  opacity: 0.7;
  text-align: center;
}

.page-wrapper:has(.runable-content) .runable-how__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.page-wrapper:has(.runable-content) .runable-step-card {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 18px 16px;
}

.page-wrapper:has(.runable-content) .runable-step-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 10px;
}

.page-wrapper:has(.runable-content) .runable-step-card__title {
  margin: 0 0 8px 0;
  font-size: 14px;
  line-height: 1.25;
}

.page-wrapper:has(.runable-content) .runable-step-card__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.7;
}

@media (max-width: 991px) {
  .page-wrapper:has(.runable-content) .runable-how {
    padding: 44px 0;
  }
  .page-wrapper:has(.runable-content) .runable-how__grid {
    grid-template-columns: 1fr;
  }
}
/* /EBS_RUNABLE_STAGE1_SECOND_SCREEN_CSS_V1 */

/* ===== RUNABLE: HOW IT WORKS (cards) ===== */
.runable-how{margin-top:64px;}
.runable-how__title{font-size:32px;font-weight:600;margin-bottom:12px;}
.runable-how__subtitle{color:rgba(255,255,255,.65);margin-bottom:40px;}
.runable-how__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.runable-how-card{position:relative;padding:28px 24px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px);transition:transform .25s ease,border-color .25s ease;}
.runable-how-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18);}
.runable-how-card__step{position:absolute;top:18px;right:18px;font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.4);}
.runable-how-card h3{font-size:18px;margin-bottom:8px;}
.runable-how-card p{color:rgba(255,255,255,.65);line-height:1.5;}
@media (max-width:900px){.runable-how__grid{grid-template-columns:1fr;}}
/* ===== /RUNABLE: HOW IT WORKS (cards) ===== */


/* ===== EBS_RUNABLE_STEP1A_DEPTH_V1: deepen existing runable-step-card ===== */
/* Works with current HTML (runable-step-card). Runable-only. */

.page-wrapper:has(.runable-content) .runable-how__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:22px;
}
@media (max-width: 900px){
  .page-wrapper:has(.runable-content) .runable-how__grid{grid-template-columns:1fr;}
}

.page-wrapper:has(.runable-content) .runable-step-card{
  position:relative;
  padding:28px 24px 26px;
  border-radius:22px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset;
}
.page-wrapper:has(.runable-content) .runable-step-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.18);
  box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset;
}

.page-wrapper:has(.runable-content) .runable-step-card__icon{
  position:absolute;
  top:18px;
  right:18px;
  font-size:12px;
  letter-spacing:.12em;
  color:rgba(255,255,255,.45);
  width:auto;height:auto;
  opacity:1;
}

.page-wrapper:has(.runable-content) .runable-step-card__title{
  margin-top:10px;
  font-size:18px;
  line-height:1.25;
}
.page-wrapper:has(.runable-content) .runable-step-card__text{
  margin-top:10px;
  color:rgba(255,255,255,.68);
  line-height:1.5;
}
/* ===== /EBS_RUNABLE_STEP1A_DEPTH_V1 ===== */


/* ===== EBS_RUNABLE_STEP1A_DEPTH_V2_FORCE: force cards depth (runable-only) ===== */
.runable-content .runable-how__grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:24px !important;
  margin-top:22px !important;
}
@media (max-width: 900px){
  .runable-content .runable-how__grid{grid-template-columns:1fr !important;}
}

.runable-content .runable-step-card{
  position:relative !important;
  padding:28px 24px 26px !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  backdrop-filter:blur(10px) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset, 0 10px 30px rgba(0,0,0,.35) !important;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.runable-content .runable-step-card:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(255,255,255,.20) !important;
  box-shadow: 0 14px 46px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset !important;
}

.runable-content .runable-step-card__icon{
  position:absolute !important;
  top:18px !important;
  right:18px !important;
  font-size:12px !important;
  letter-spacing:.12em !important;
  color:rgba(255,255,255,.45) !important;
}

.runable-content .runable-step-card__title{
  margin-top:10px !important;
  font-size:18px !important;
  line-height:1.25 !important;
}
.runable-content .runable-step-card__text{
  margin-top:10px !important;
  color:rgba(255,255,255,.68) !important;
  line-height:1.5 !important;
}
/* ===== /EBS_RUNABLE_STEP1A_DEPTH_V2_FORCE ===== */


/* ===== EBS_RUNABLE_STEP1A_GLOW_V1: premium depth for step cards (runable-only) ===== */
.runable-content .runable-step-card{
  overflow:hidden !important;
}

.runable-content .runable-step-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(600px 220px at 20% 10%, rgba(172,70,70,.18), transparent 60%),
    radial-gradient(520px 220px at 85% 0%, rgba(80,160,170,.14), transparent 55%);
  opacity:.85;
  pointer-events:none;
}

.runable-content .runable-step-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 35%);
  opacity:.10;
  pointer-events:none;
}

.runable-content .runable-step-card:hover::before{opacity:1;}
.runable-content .runable-step-card:hover::after{opacity:.16;}

.runable-content .runable-step-card__icon{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:999px !important;
  padding:6px 10px !important;
}
/* ===== /EBS_RUNABLE_STEP1A_GLOW_V1 ===== */


/* ===== EBS_RUNABLE_STEP1A_GLOW_LAYERS_V1: ensure glow sits under content ===== */
.runable-content .runable-step-card{
  position:relative !important;
  isolation:isolate !important;
}
.runable-content .runable-step-card::before,
.runable-content .runable-step-card::after{
  z-index:0 !important;
}
.runable-content .runable-step-card > *{
  position:relative !important;
  z-index:1 !important;
}
/* ===== /EBS_RUNABLE_STEP1A_GLOW_LAYERS_V1 ===== */


/* ===== EBS_RUNABLE_STEP1A_GLOW_TUNE_V1: premium soften (runable-only) ===== */
.runable-content .runable-step-card{
  /* чуть “чище” поверхность */
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.018) inset,
    0 12px 34px rgba(0,0,0,.42) !important;
}

.runable-content .runable-step-card::before{
  /* приглушаем пятна, чтобы не “мыло” текст */
  opacity: .55 !important;
  filter: blur(1px) !important;
}

.runable-content .runable-step-card::after{
  /* лёгкая диагональная подсветка, почти незаметная */
  opacity: .08 !important;
}

.runable-content .runable-step-card:hover::before{ opacity: .70 !important; }
.runable-content .runable-step-card:hover::after{  opacity: .12 !important; }
/* ===== /EBS_RUNABLE_STEP1A_GLOW_TUNE_V1 ===== */


/* ===== EBS_RUNABLE_STEP1A_STEPBADGE_FIX_V1: compact step badge (runable-only) ===== */
.runable-content .runable-step-card__icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:max-content !important;
  max-width:none !important;
  height:auto !important;

  /* чтобы точно не растягивалось */
  left:auto !important;
  right:18px !important;
  top:18px !important;

  padding:6px 10px !important;
  border-radius:999px !important;
  white-space:nowrap !important;
}
/* ===== /EBS_RUNABLE_STEP1A_STEPBADGE_FIX_V1 ===== */


/* ===== EBS_RUNABLE_STEP1A_STEPBADGE_POSFIX_V1: lock badge position (runable-only) ===== */
.runable-content .runable-step-card{
  position: relative !important;
}

.runable-content .runable-step-card__icon{
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;

  padding: 6px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}
/* ===== /EBS_RUNABLE_STEP1A_STEPBADGE_POSFIX_V1 ===== */


/* ===== EBS_RUNABLE_STEP1A_BADGE_TO_RIGHT_V1: move badge away from title overlap (runable-only) ===== */
.runable-content .runable-step-card__icon{
  left: auto !important;
  right: 18px !important;
  top: 18px !important;
  z-index: 3 !important;
}
/* ===== /EBS_RUNABLE_STEP1A_BADGE_TO_RIGHT_V1 ===== */


/* ===== EBS_RUNABLE_STEP1A_REMOVE_INSET_V1: remove inner border line (runable-only) ===== */
.runable-content .runable-step-card{
  box-shadow: 0 12px 34px rgba(0,0,0,.42) !important; /* без inset */
}
/* ===== /EBS_RUNABLE_STEP1A_REMOVE_INSET_V1 ===== */


/* ===== EBS_RUNABLE_STEP1A_BADGE_REMOVE_BORDER_V1: remove inner ring on step numbers ===== */
.runable-content .runable-step-card__icon{
  border: none !important;          /* убираем внутреннюю обводку */
  box-shadow: none !important;      /* на всякий случай */
}
/* ===== /EBS_RUNABLE_STEP1A_BADGE_REMOVE_BORDER_V1 ===== */


/* ===== EBS_RUNABLE_STEP1A_BADGE_SINGLE_RING_V1: keep ONE outer ring, remove inner effects ===== */
.runable-content .runable-step-card__icon{
  /* вернуть аккуратную внешнюю рамку */
  border: 1px solid rgba(255,255,255,.14) !important;

  /* убрать любые "внутренние" линии/тени */
  box-shadow: none !important;
  outline: none !important;

  /* фон бейджа (чуть стекла) */
  background: rgba(255,255,255,.06) !important;
}
/* ===== /EBS_RUNABLE_STEP1A_BADGE_SINGLE_RING_V1 ===== */


/* ===== EBS_RUNABLE_STEP1A_BADGE_CIRCLE_V2: perfect circle badge ===== */
.runable-content .runable-step-card__icon{
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;
  font-size: 14px !important;
  font-weight: 600 !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: none !important;
  outline: none !important;
}
/* ===== /EBS_RUNABLE_STEP1A_BADGE_CIRCLE_V2 ===== */


/* ===== EBS_RUNABLE_STEP1A_HOW_WRAP_V1: unify "How it works" block rhythm (runable-only) ===== */
.runable-content .runable-h2{
  margin-bottom: 10px !important;
  letter-spacing: -0.01em;
}
.runable-content .runable-subtitle{
  margin-bottom: 26px !important;
  color: rgba(255,255,255,.60) !important;
}

@media (max-width: 900px){
  .runable-content .runable-how__grid{
    gap: 16px !important;
  }
}
/* ===== /EBS_RUNABLE_STEP1A_HOW_WRAP_V1 ===== */


/* ===== EBS_RUNABLE_STEP1A_GRID_GAP_ALIGN_V1: unify gaps between top/bottom 3-cards (runable-only) ===== */
.runable-content .ebs-grid-3{
  gap: 24px !important;
}
@media (max-width: 900px){
  .runable-content .ebs-grid-3{
    gap: 16px !important;
  }
}
/* ===== /EBS_RUNABLE_STEP1A_GRID_GAP_ALIGN_V1 ===== */


/* ===== EBS_RUNABLE_STEP1A_GRID_SIDE_PADDING_V1: prevent step cards sticking to edges on mobile ===== */
/* Keep current card style. Only add safe side paddings for the "steps" grid. Runable-only. */

@media (max-width: 991px){
  /* give same "air" as other blocks */
  .runable-content .runable-how__grid{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}

/* ===== /EBS_RUNABLE_STEP1A_GRID_SIDE_PADDING_V1 ===== */


/* ===== EBS_RUNABLE_STEP1A_SECOND_SCREEN_PADDING_V1 ===== */
/* Fix mobile side paddings for title + subtitle + cards.
   No style changes, only geometry. Runable-only. */

@media (max-width: 991px){
  .runable-content .runable-h2,
  .runable-content .runable-subtitle{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .runable-content .runable-how__grid{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}

/* ===== /EBS_RUNABLE_STEP1A_SECOND_SCREEN_PADDING_V1 ===== */


/* ===== EBS_RUNABLE_STAGE1B_OFFLINE_CSS_V1: atmosphere block (runable-only) ===== */
.runable-content .runable-offline{
  margin: 18px 0 34px;
}
.runable-content .runable-offline__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 991px){
  .runable-content .runable-offline__inner{ padding: 0 16px; }
}

/* фон-свечение секции (мягко, как в hero) */
.runable-content .runable-offline{
  position: relative;
}
.runable-content .runable-offline::before{
  content:"";
  position:absolute;
  inset:-40px 0 -40px 0;
  background:
    radial-gradient(700px 220px at 18% 10%, rgba(172,70,70,.14), transparent 62%),
    radial-gradient(620px 260px at 85% 0%, rgba(80,160,170,.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  pointer-events:none;
  opacity:.9;
}

/* glass card */
.runable-content .runable-offline__card{
  position: relative;
  border-radius: 26px;
  padding: 26px 26px 22px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 44px rgba(0,0,0,.42);
  overflow: hidden;
}
.runable-content .runable-offline__card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 42%);
  opacity:.08;
  pointer-events:none;
}

/* typography */
.runable-content .runable-offline__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:10px;
}
.runable-content .runable-offline__title{
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 10px;
}
.runable-content .runable-offline__text{
  color: rgba(255,255,255,.68);
  line-height: 1.55;
  margin: 0;
  max-width: 78ch;
}

/* chips */
.runable-content .runable-offline__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}
.runable-content .runable-offline__chip{
  display:inline-flex;
  align-items:center;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.72);
  font-size: 13px;
}
/* ===== /EBS_RUNABLE_STAGE1B_OFFLINE_CSS_V1 ===== */


/* ===== EBS_RUNABLE_STAGE1B_OFFLINE_BG_FIX_V1: keep glow inside offline block ===== */
.runable-content .runable-offline{
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;        /* КЛЮЧ: не даём градиенту вылезать */
  border-radius: 24px !important;     /* чтобы клиппинг был красивым */
}

.runable-content .runable-offline::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;               /* убираем отрицательные inset */
  z-index: 0 !important;
  pointer-events: none !important;

  background:
    radial-gradient(900px 360px at 20% 20%, rgba(172,70,70,.22), transparent 60%),
    radial-gradient(900px 360px at 85% 30%, rgba(80,160,170,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0) 45%);
  opacity: .85 !important;
}

/* весь контент блока поверх фона */
.runable-content .runable-offline > *{
  position: relative !important;
  z-index: 1 !important;
}
/* ===== /EBS_RUNABLE_STAGE1B_OFFLINE_BG_FIX_V1 ===== */


/* ===== EBS_RUNABLE_STAGE1B_OFFLINE_GLOW_LOCK_V2: glow only inside the CARD ===== */

/* 1) если раньше glow был на секции — выключаем его */
.runable-content .runable-offline::before,
.runable-content .runable-offline::after{
  content:none !important;
  background:none !important;
}

/* 2) секция просто как контейнер */
.runable-content .runable-offline{
  position: relative !important;
}

/* 3) glow делаем на карточке и клиппим по радиусу */
.runable-content .runable-offline__card{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  isolation: isolate !important;
}

/* 4) сам градиент внутри карточки */
.runable-content .runable-offline__card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;

  background:
    radial-gradient(900px 360px at 18% 18%, rgba(172,70,70,.22), transparent 60%),
    radial-gradient(900px 360px at 88% 22%, rgba(80,160,170,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0) 55%);
  opacity:.9 !important;
}

/* 5) контент карточки поверх */
.runable-content .runable-offline__card > *{
  position: relative !important;
  z-index: 1 !important;
}

/* ===== /EBS_RUNABLE_STAGE1B_OFFLINE_GLOW_LOCK_V2 ===== */



/* ===== EBS_RUNABLE_HERO_BGVIDEO_CSS_V1: video background inside existing hero (runable-only) ===== */
.runable-content .ebs-hero{
  position: relative;
  overflow: hidden;
}

/* фон-видео */
.runable-content .ebs-hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.runable-content .ebs-hero__bg-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.05) contrast(1.03);
}

.runable-content .ebs-hero__bg-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.70));
}

/* контент поверх */
.runable-content .ebs-hero__inner{
  position: relative;
  z-index: 1;
}
/* ===== /EBS_RUNABLE_HERO_BGVIDEO_CSS_V1 ===== */


/* ===== EBS_RUNABLE_HERO_VIDEO_FULLSCREEN_V1 ===== */
.runable-content .ebs-hero{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  border-radius: 0; /* герой на весь экран */
}

/* видео фоном */
.runable-content .ebs-hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* тонировка (заменяет “градиентный фон” на аккуратный overlay) */
.runable-content .ebs-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.70));
}

/* контент поверх */
.runable-content .ebs-hero__inner{
  position: relative;
  z-index: 2;
}

/* ===== /EBS_RUNABLE_HERO_VIDEO_FULLSCREEN_V1 ===== */

/* ===== EBS_RUNABLE_HERO_VIDEO_FIX_V2: keep hero size, video as bg + tint (runable-only) ===== */
.runable-content .ebs-hero{
  min-height: auto !important;      /* КЛЮЧ: не раздуваем до 100vh */
  border-radius: 24px !important;   /* возвращаем “карточный” радиус */
  overflow: hidden !important;
  position: relative !important;
}

/* видео фоном, не влияет на высоту блока */
.runable-content .ebs-hero__video{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
}

/* тонировка поверх видео (на весь hero), без градиентных пятен */
.runable-content .ebs-hero::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background: rgba(0,0,0,.55) !important; /* можно потом ослабить до .45 */
  pointer-events:none !important;
}

/* контент поверх */
.runable-content .ebs-hero__inner{
  position: relative !important;
  z-index: 2 !important;
}

/* убираем “градиентность/картинку” у стеклянной карточки, если она есть */
.runable-content .ebs-hero__inner{
  background-image: none !important;
}
/* ===== /EBS_RUNABLE_HERO_VIDEO_FIX_V2 ===== */


/* ===== EBS_RUNABLE_HERO_GLASS_FULL_V1: glass == hero, no color gradient, no tint ===== */
.runable-content .ebs-hero{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: none !important; /* убираем любые фоны/градиенты у контейнера */
}

/* УБИРАЕМ тонировку, которую мы добавляли через ::after */
.runable-content .ebs-hero::after{
  content: none !important;
}

/* видео фоном */
.runable-content .ebs-hero__video{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
}

/* стекло растягиваем на весь баннер */
.runable-content .ebs-hero__inner{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  border-radius: 24px !important;
  background: rgba(0,0,0,.35) !important; /* “стекло” без цветного градиента */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,.10) !important;

  padding: 28px 28px !important;
}

/* на мобильном — чтобы не прилипало к краям внутри стекла */
@media (max-width: 900px){
  .runable-content .ebs-hero__inner{
    padding: 22px 18px !important;
  }
}
/* ===== /EBS_RUNABLE_HERO_GLASS_FULL_V1 ===== */


/* ===== EBS_RUNABLE_HERO_NO_GLASS_V1: remove glass, text on video ===== */
.runable-content .ebs-hero__inner{
  position: relative !important;
  inset: auto !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  padding: 28px 28px !important;
}

.runable-content .ebs-hero__title,
.runable-content .ebs-hero__lead{
  text-shadow: 0 8px 28px rgba(0,0,0,.65) !important;
}
/* ===== /EBS_RUNABLE_HERO_NO_GLASS_V1 ===== */


/* ===== EBS_RUNABLE_HERO_RATIONAL_FIX_V1: video bg + tint, keep glass, remove color blobs ===== */

/* 1) Возвращаем hero из fullscreen в “баннерный” формат */
.runable-content .ebs-hero{
  min-height: unset !important;
  height: auto !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  /* на всякий случай прибиваем любые background-градиенты на самом hero */
  background-image: none !important;
}

/* 2) Видео фоном (если уже вставлено как <video class="ebs-hero__video">) */
.runable-content .ebs-hero__video{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
}

/* 3) Тонировка на весь баннер (вместо “цветного градиента”) */
.runable-content .ebs-hero::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: rgba(0,0,0,.55) !important; /* ровная тонировка */
}

/* 4) Возвращаем “стекло” у контента, но убираем любые цветные пятна/псевдо-градиенты */
.runable-content .ebs-hero__inner{
  position: relative !important;
  z-index: 2 !important;

  max-width: 1180px !important;
  margin: 0 auto !important;

  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.42) !important;
}

/* Убиваем возможные “цветные” подложки, если они сделаны через псевдоэлементы */
.runable-content .ebs-hero__inner::before,
.runable-content .ebs-hero__inner::after{
  content: none !important;
  background: none !important;
}

/* ===== /EBS_RUNABLE_HERO_RATIONAL_FIX_V1 ===== */

/* ===== EBS_RUNABLE_HERO_GLASS_TUNE_V1: cleaner premium glass ===== */

/* чуть слабее общую тонировку (видео ярче, но текст читается) */
.runable-content .ebs-hero::before{
  background: rgba(0,0,0,.48) !important;
}

/* стекло: плотнее фон, меньше “полос/двойных рамок”, мягче края */
.runable-content .ebs-hero__inner{
  background: rgba(12,12,14,.42) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.55) !important; /* без inset, без лишних линий */
  backdrop-filter: blur(12px) !important;

  padding: 28px 28px !important;
}

@media (max-width: 768px){
  .runable-content .ebs-hero__inner{
    padding: 22px 18px !important;
  }
}

/* ===== /EBS_RUNABLE_HERO_GLASS_TUNE_V1 ===== */

/* ===== EBS_RUNABLE_HERO_NO_GLASS_V1: remove glass panel in hero video ===== */

/* убираем стеклянную панель полностью */
.runable-content .ebs-hero__inner{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* аккуратные отступы контента (чтобы не прилипал к краям) */
.runable-content .ebs-hero__inner{
  padding: 56px 56px !important;
}
@media (max-width: 768px){
  .runable-content .ebs-hero__inner{
    padding: 22px 18px !important;
  }
}

/* тонировка на весь hero для читаемости (вместо “стекла”) */
.runable-content .ebs-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75));
}

/* контент выше тонировки */
.runable-content .ebs-hero__inner{
  position: relative !important;
  z-index: 2 !important;
}

/* ===== /EBS_RUNABLE_HERO_NO_GLASS_V1 ===== */

/* ===== EBS_RUNABLE_HERO_BADGE_INLINE_V1: hero badge fit to text ===== */
.runable-content .ebs-hero__badge{
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: max-content !important;

  padding: 6px 14px !important;
  border-radius: 999px !important;

  white-space: nowrap !important;
}

/* на мобильных — чуть компактнее */
@media (max-width: 768px){
  .runable-content .ebs-hero__badge{
    padding: 5px 12px !important;
    font-size: 12px !important;
  }
}
/* ===== /EBS_RUNABLE_HERO_BADGE_INLINE_V1 ===== */

/* ===== EBS_RUNABLE_HERO_FADEIN_V1: video + badge fade-in ===== */
@keyframes ebsFadeUpSoft{
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ebsFadeOnly{
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* видео — мягко проявляем, чтобы не было “резкого” старта */
.runable-content .ebs-hero__video{
  opacity: 0;
  animation: ebsFadeOnly .65s ease-out .10s forwards;
  will-change: opacity;
}

/* контент поверх видео — по очереди */
.runable-content .ebs-hero__badge{
  opacity: 0;
  animation: ebsFadeUpSoft .55s ease-out .18s forwards;
  will-change: opacity, transform;
}

.runable-content .ebs-hero__title{
  opacity: 0;
  animation: ebsFadeUpSoft .60s ease-out .26s forwards;
  will-change: opacity, transform;
}

.runable-content .ebs-hero__lead{
  opacity: 0;
  animation: ebsFadeUpSoft .60s ease-out .34s forwards;
  will-change: opacity, transform;
}

.runable-content .ebs-hero__cta{
  opacity: 0;
  animation: ebsFadeUpSoft .60s ease-out .42s forwards;
  will-change: opacity, transform;
}

/* уважение к reduce motion */
@media (prefers-reduced-motion: reduce){
  .runable-content .ebs-hero__video,
  .runable-content .ebs-hero__badge,
  .runable-content .ebs-hero__title,
  .runable-content .ebs-hero__lead,
  .runable-content .ebs-hero__cta{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ===== /EBS_RUNABLE_HERO_FADEIN_V1 ===== */


/* ===== EBS_RUNABLE_HERO_TINT_CLEAN_V1: neutral high-contrast tint (no color cast) ===== */

/* Видео: чуть контраста, без цветового оттенка */
.runable-content .ebs-hero__video{
  filter: brightness(.92) contrast(1.12) saturate(1.02) !important;
}

/* Тонировка: только чёрные градиенты + лёгкая виньетка */
.runable-content .ebs-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;

  background:
    radial-gradient(1200px 520px at 50% 15%, rgba(0,0,0,.18), rgba(0,0,0,0) 55%),
    radial-gradient(1400px 700px at 50% 100%, rgba(0,0,0,.72), rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 78%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.78)) !important;

  opacity: 1 !important;
}

/* ===== /EBS_RUNABLE_HERO_TINT_CLEAN_V1 ===== */


/* ===== EBS_RUNABLE_HERO_TINT_ROLLBACK_V1: DISABLE last tint completely ===== */

/* возвращаем видео в нейтральное состояние */
.runable-content .ebs-hero__video{
  filter: none !important;
}

/* полностью убираем псевдо-слой тонировки */
.runable-content .ebs-hero::before{
  background: none !important;
  opacity: 0 !important;
  content: none !important;
}

/* ===== /EBS_RUNABLE_HERO_TINT_ROLLBACK_V1 ===== */


/* ===== EBS_RUNABLE_CAROUSEL_PHOTO_BG_FIX_V1: remove gray behind product photos (runable-only) ===== */
.runable-content .ebs-carousel .ebs-card__img,
.runable-content .ebs-carousel .ebs-card__imgwrap,
.runable-content .ebs-carousel .ebs-card__image,
.runable-content .ebs-carousel .product-card__image,
.runable-content .ebs-carousel .product-card__picture,
.runable-content .ebs-carousel .catalog-item__image,
.runable-content .ebs-carousel .image,
.runable-content .ebs-carousel .img,
.runable-content .ebs-carousel .thumb{
  background: transparent !important;
}

.runable-content .ebs-carousel .ebs-card__imgwrap,
.runable-content .ebs-carousel .ebs-card__image,
.runable-content .ebs-carousel .product-card__image,
.runable-content .ebs-carousel .product-card__picture,
.runable-content .ebs-carousel .catalog-item__image,
.runable-content .ebs-carousel .image{
  overflow: hidden !important;
  border-radius: inherit !important;
}
/* ===== /EBS_RUNABLE_CAROUSEL_PHOTO_BG_FIX_V1 ===== */


/* ===== EBS_RUNABLE_UI_CARD_RATIO_BG_FIX_V2 ===== */
/* Убираем серый фон у вертикальных карточек товаров (ratio 264x320) */
/* Только runable, только ui-card, без влияния на Aspro */

.runable-content .ui-card__image.ui-card__image--ratio-264-320{
  background: transparent !important;
}

/* на всякий — если фон задан псевдоэлементом */
.runable-content .ui-card__image.ui-card__image--ratio-264-320::before,
.runable-content .ui-card__image.ui-card__image--ratio-264-320::after{
  background: transparent !important;
}

/* сам img не трогаем по размеру */
.runable-content .ui-card__image--ratio-264-320 img.ui-card__img{
  background: transparent !important;
}
/* ===== /EBS_RUNABLE_UI_CARD_RATIO_BG_FIX_V2 ===== */


/* ===== EBS_RUNABLE_NO_PURPLE_FOCUS_V1 ===== */
.runable-landing .ebs-product-image,
.runable-landing .ebs-product-image:focus,
.runable-landing .ebs-product-image:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}
/* ===== /EBS_RUNABLE_NO_PURPLE_FOCUS_V1 ===== */


/* ===== EBS_FIX_BRAND_IMAGE_BG_SOLID_WHITE_V1: make underlay pure white (beats runable_theme.css) ===== */
body.runable-landing .runable-content .ebs-brand .ebs-carousel-host a.ebs-product-image{
  background-color: #fff !important;       /* было rgba(...,.92) => визуально “серое” на тёмном фоне */
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: contain !important;
}
/* ===== /EBS_FIX_BRAND_IMAGE_BG_SOLID_WHITE_V1 ===== */



/* Runable brand enhancer: isolated styles for banner/video button */
body.runable-landing .runable-content [data-brand-title] .runable-brand-banner {
  display: block;
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}

body.runable-landing .runable-content [data-brand-title] .runable-brand-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

body.runable-landing .runable-content [data-brand-title] .runable-video-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

body.runable-landing .runable-content [data-brand-title] .runable-video-btn:hover {
  border-color: rgba(255,255,255,.28);
}

@media (max-width: 768px) {
  body.runable-landing .runable-content [data-brand-title] .runable-brand-banner {
    margin-top: 10px;
    border-radius: 10px;
  }

  body.runable-landing .runable-content [data-brand-title] .runable-video-btn {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
  }
}


/* ===== EBS_RUNABLE_BRAND_MOBILE_TUNE_V9 ===== */
@media (max-width: 991px){
  /* Affects only brand blocks, never header/footer */
  body.runable-landing .runable-content [data-brand-title] .runable-brand-banner{
    aspect-ratio:1 / 1 !important;
    max-height:320px !important;
    min-height:0 !important;
  }

  body.runable-landing .runable-content [data-brand-title] .runable-brand-banner img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

  body.runable-landing .runable-content [data-brand-title] .ebs-brand__video{
    aspect-ratio:9 / 16 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    min-height:0 !important;
    height:auto !important;
    overflow:hidden !important;
    border-radius:14px !important;
  }

  body.runable-landing .runable-content [data-brand-title] .ebs-brand__video iframe{
    width:100% !important;
    height:100% !important;
    aspect-ratio:9 / 16 !important;
    border:0 !important;
  }
}
/* ===== /EBS_RUNABLE_BRAND_MOBILE_TUNE_V9 ===== */


/* ===== EBS_RUNABLE_BRAND_BANNER_BALANCE_V10 ===== */
/* Brand blocks only. Header/footer untouched. */
body.runable-landing .runable-content [data-brand-title] .ebs-brand__meta{
  display:flex;
  flex-direction:column;
  min-height:0;
}

body.runable-landing .runable-content [data-brand-title] .runable-brand-banner{
  display:block;
  width:100%;
  flex:1 1 auto;
  margin-top:12px;
  min-height:220px;
  overflow:hidden;
  border-radius:12px;
}

body.runable-landing .runable-content [data-brand-title] .runable-brand-banner img{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:50% 50% !important;
}

@media (min-width: 992px){
  body.runable-landing .runable-content [data-brand-title] .runable-brand-banner{
    min-height:260px;
  }
}

@media (max-width: 991px){
  body.runable-landing .runable-content [data-brand-title] .runable-brand-banner{
    aspect-ratio:1 / 1 !important;
    min-height:0 !important;
    max-height:none !important;
  }

  body.runable-landing .runable-content [data-brand-title] .runable-brand-banner img{
    object-position:50% 50% !important;
  }
}
/* ===== /EBS_RUNABLE_BRAND_BANNER_BALANCE_V10 ===== */


/* EBS_RUNABLE_P0_HIDE_EMPTY_PAGETITLE_V1 */
html.runable-landing #pagetitle.switcher-title:empty,
body.runable-landing #pagetitle.switcher-title:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}


/* EBS_RUNABLE_P1_REVIEWS_CAROUSEL_V1 */
html.runable-landing #ebs-runable-reviews,
body.runable-landing #ebs-runable-reviews {
  margin: 28px auto 36px;
  padding: 0 16px;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__inner {
  max-width: 1240px;
  margin: 0 auto;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__title {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1.2;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__subtitle {
  margin: 0 0 14px;
  opacity: 0.85;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__controls {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__card {
  scroll-snap-align: start;
  border-radius: 14px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__text {
  margin: 0 0 12px;
  line-height: 1.45;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__meta {
  font-weight: 600;
  opacity: 0.9;
}
@media (max-width: 768px) {
  html.runable-landing #ebs-runable-reviews,
  body.runable-landing #ebs-runable-reviews {
    margin: 20px auto 28px;
    padding: 0 12px;
  }
  html.runable-landing #ebs-runable-reviews .ebs-reviews__title {
    font-size: 24px;
  }
  html.runable-landing #ebs-runable-reviews .ebs-reviews__track {
    grid-auto-columns: 84%;
  }
}


/* EBS_RUNABLE_P1_REVIEWS_CARDS_HOTFIX_V2 */
html.runable-landing #ebs-runable-reviews .ebs-reviews__track,
body.runable-landing #ebs-runable-reviews .ebs-reviews__track {
  display: flex !important;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__card,
body.runable-landing #ebs-runable-reviews .ebs-reviews__card {
  flex: 0 0 min(360px, calc(100vw - 48px));
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  padding: 16px;
  scroll-snap-align: start;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__text,
body.runable-landing #ebs-runable-reviews .ebs-reviews__text {
  margin: 0 0 12px;
  line-height: 1.45;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__meta,
body.runable-landing #ebs-runable-reviews .ebs-reviews__meta {
  font-weight: 600;
  opacity: .95;
}


/* EBS_RUNABLE_P1_REVIEWS_ARROWS_AVATARS_V3 */
html.runable-landing #ebs-runable-reviews .ebs-reviews__controls,
body.runable-landing #ebs-runable-reviews .ebs-reviews__controls {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__nav,
body.runable-landing #ebs-runable-reviews .ebs-reviews__nav {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__nav:hover,
body.runable-landing #ebs-runable-reviews .ebs-reviews__nav:hover {
  background: rgba(255,255,255,.14);
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__nav-icon,
body.runable-landing #ebs-runable-reviews .ebs-reviews__nav-icon {
  line-height: 0;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__author,
body.runable-landing #ebs-runable-reviews .ebs-reviews__author {
  display: flex;
  align-items: center;
  gap: 10px;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__avatar,
body.runable-landing #ebs-runable-reviews .ebs-reviews__avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg,#6f7dff,#9a67ff);
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__name,
body.runable-landing #ebs-runable-reviews .ebs-reviews__name {
  font-weight: 600;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__city,
body.runable-landing #ebs-runable-reviews .ebs-reviews__city {
  opacity: .8;
  font-size: 13px;
}


/* EBS_RUNABLE_P1_REVIEWS_CONTROLS_ALIGN_V4 */
html.runable-landing #ebs-runable-reviews .ebs-reviews__heading-row,
body.runable-landing #ebs-runable-reviews .ebs-reviews__heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__heading,
body.runable-landing #ebs-runable-reviews .ebs-reviews__heading {
  flex: 1 1 auto;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__title,
body.runable-landing #ebs-runable-reviews .ebs-reviews__title {
  margin: 0 0 6px;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__subtitle,
body.runable-landing #ebs-runable-reviews .ebs-reviews__subtitle {
  margin: 0;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__controls,
body.runable-landing #ebs-runable-reviews .ebs-reviews__controls {
  margin: 0;
  align-items: center;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__nav--prev .ebs-reviews__nav-icon,
body.runable-landing #ebs-runable-reviews .ebs-reviews__nav--prev .ebs-reviews__nav-icon {
  transform: rotate(180deg);
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__nav .svg svg,
body.runable-landing #ebs-runable-reviews .ebs-reviews__nav .svg svg {
  display: block;
}
@media (max-width: 768px) {
  html.runable-landing #ebs-runable-reviews .ebs-reviews__heading-row,
  body.runable-landing #ebs-runable-reviews .ebs-reviews__heading-row {
    align-items: center;
  }
}


/* EBS_RUNABLE_P1_REVIEWS_ARROW_SAMPLE_MATCH_V5 */
html.runable-landing #ebs-runable-reviews .ebs-reviews__nav,
body.runable-landing #ebs-runable-reviews .ebs-reviews__nav {
  width: 82px;
  height: 68px;
  border-radius: 20px;
  border: 2px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.02);
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__nav .svg svg,
body.runable-landing #ebs-runable-reviews .ebs-reviews__nav .svg svg {
  width: 16px;
  height: 16px;
}
html.runable-landing #ebs-runable-reviews .ebs-reviews__controls,
body.runable-landing #ebs-runable-reviews .ebs-reviews__controls {
  gap: 16px;
}
@media (max-width: 768px) {
  html.runable-landing #ebs-runable-reviews .ebs-reviews__nav,
  body.runable-landing #ebs-runable-reviews .ebs-reviews__nav {
    width: 56px;
    height: 52px;
    border-radius: 16px;
  }
}


/* EBS_RUNABLE_P1_REVIEWS_BUTTON_TEXT_VISIBILITY_V6 */
html.runable-landing #ebs-runable-reviews .ebs-carousel-nav .ebs-carousel-btn,
body.runable-landing #ebs-runable-reviews .ebs-carousel-nav .ebs-carousel-btn {
  color: #fff !important;
  font-size: 26px !important;
  line-height: 1 !important;
  text-indent: 0 !important;
}


/* ===== EBS_RUNABLE_BRAND_VIDEO_PREVIEW_PLAY_V1 ===== */
body.runable-landing .runable-content [data-brand-title] .ebs-brand__videoStub.runable-video-stub--preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: transparent;
}

body.runable-landing .runable-content [data-brand-title] .ebs-brand__videoStub.runable-video-stub--preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.28) 100%);
  pointer-events: none;
}

body.runable-landing .runable-content [data-brand-title] .ebs-brand__videoStub.runable-video-stub--preview .runable-video-btn {
  position: relative;
  z-index: 1;
  width: 88px;
  height: 88px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #5f64ff 0%, #4f53f0 55%, #4044d5 100%);
  box-shadow: 0 10px 26px rgba(79, 83, 240, .45);
}

body.runable-landing .runable-content [data-brand-title] .ebs-brand__videoStub.runable-video-stub--preview .runable-video-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(79, 83, 240, .5);
}

body.runable-landing .runable-content [data-brand-title] .ebs-brand__videoStub.runable-video-stub--preview .runable-video-btn__play {
  color: #fff;
  font-size: 34px;
  line-height: 1;
  margin-left: 4px;
}
/* ===== /EBS_RUNABLE_BRAND_VIDEO_PREVIEW_PLAY_V1 ===== */