/* ============================================================
   BitStat – сторінка /features
   ------------------------------------------------------------
   Перший екран – як на проді: дві колонки, одна кнопка, рамка
   зі скриншотом.

   Шість інструментів – таби, а не шість секцій одна під одною.
   Секціями сторінка виходила 8900px: людина мусила прогорнути
   шість повноекранних блоків, щоб дійти до FAQ. Табами видно
   один інструмент за раз, а решта за один клік.

   Порядок правил – спершу телефон, далі ширші екрани. Так
   мобільна версія не лишається «на потім».
   ============================================================ */

/* ============================================================
   1. ПЕРШИЙ ЕКРАН
   ============================================================ */

/* .hero має min-height: 100vh зі старих стилів. Тут контент
   займає 373px, тож у вікні на 745px згори й знизу лишалось по
   186px порожнечі – саме це й було видно. */
[data-site-refresh-content] .hero--fx {
  min-height: 0;
  overflow: hidden;   /* світлова пляма не має створювати прокрутку */
  padding: calc(var(--nav-height) + var(--sp-10)) 0 var(--sp-12);
  position: relative;
}
[data-site-refresh-content] .fx-hero-inner {
  position: relative; z-index: 1;
  max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5);
  display: grid; gap: var(--sp-8);
}
[data-site-refresh-content] .fx-hero-eyebrow {
  display: inline-block; padding: 6px 14px; border-radius: 20px;
  background: var(--green-bg); border: 1px solid rgba(60,217,122,.22);
  font-size: var(--fs-12); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-bright);
}
[data-site-refresh-content] .fx-hero-copy h1 {
  margin: var(--sp-5) 0 0;
  font-size: clamp(30px, 5.4vw, 52px); font-weight: 800;
  line-height: 1.08; letter-spacing: -.02em; color: var(--text-primary);
  text-wrap: balance;
}
[data-site-refresh-content] .fx-hero-copy > p {
  margin: var(--sp-4) 0 0; max-width: 46ch;
  font-size: var(--fs-16); line-height: 1.65; color: var(--text-secondary);
}
[data-site-refresh-content] .fx-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }
[data-site-refresh-content] .fx-hero-actions .btn-primary { margin-top: 0; }
[data-site-refresh-content] .fx-hero-actions .btn-secondary { display: inline-flex; align-items: center; gap: var(--sp-2); }
[data-site-refresh-content] .fx-hero-actions .btn-secondary svg { width: 18px; height: 18px; }

/* Живий герой: два канонічні віджети зі зсувом і чип P&L.
   Рамку-скриншот із трьома крапками прибрано: картинка казала
   «це знімок», живі картки кажуть «це продукт». */
[data-site-refresh-content] .fx-hero-live { position: relative; }
[data-site-refresh-content] .fx-hero-live .dashboard-widget {
  box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 26px 60px rgba(0,0,0,.55);
}
[data-site-refresh-content] .fxh-main { width: min(560px, 92%); margin-left: auto; }
/* у віджетах клітинки календаря квадратні (aspect-ratio: 1);
   на ширині героя це роздуває сітку до 640px – обмежуємо висоту */
[data-site-refresh-content] .fx-hero-live .cal-day { aspect-ratio: auto; height: 38px; }
[data-site-refresh-content] .fxh-side {
  position: absolute; left: 0; bottom: -18px; z-index: 2;
  width: min(330px, 58%);
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.45));
}
/* чип у нижньому правому куті: верхній зайняв би підпис місяця.
   Позиціюється завжди, і на телефоні теж: перебиваємо мобільне
   правило .split-stat { position: static } із split.css */
[data-site-refresh-content] .fx-hero-live .fxh-chip {
  position: absolute; right: -14px; bottom: 40px; top: auto; z-index: 3; margin: 0;
}

@media (max-width: 1080px) {
  /* одна колонка: віджети стають під текстом, основний на всю ширину */
  [data-site-refresh-content] .fxh-main { width: 100%; }
  [data-site-refresh-content] .fx-hero-live { margin-top: var(--sp-2); }
  [data-site-refresh-content] .fx-hero-live .fxh-chip { right: 0; }
}
@media (max-width: 640px) {
  /* вузький екран: бічній картці треба більше ширини, інакше рядки
     стратегій переносяться; чип іде нагору, щоб не товктись унизу */
  [data-site-refresh-content] .fxh-side { width: 96%; bottom: -26px; }
  [data-site-refresh-content] .fx-hero-live { padding-bottom: var(--sp-8); }
  [data-site-refresh-content] .fx-hero-live .fxh-chip { bottom: auto; top: -12px; }
}

/* ============================================================
   1a. СМУГА ІНТЕГРАЦІЙ
   ------------------------------------------------------------
   Тонка смуга під героєм. .blk дає 100px згори й знизу – тут це
   забагато: смуга має читатись як продовження першого екрана,
   а не як окрема секція.
   ============================================================ */
[data-site-refresh-content] .blk--slim { padding: 0 0 var(--sp-16); }

[data-site-refresh-content] .intg {
  border: 1px solid var(--border); border-radius: var(--r-20);
  background: var(--surface-card);
  padding: var(--sp-5) var(--sp-4);
}
[data-site-refresh-content] .intg-title {
  margin: 0 0 var(--sp-4); text-align: center;
  font-size: var(--fs-12); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
/* Телефон: сітка два на два з плиток. Стовпчиком з чотирьох рядків
   це займало 353px і читалось як випадковий список — іконки стояли
   на різних відступах, бо кожен рядок центрувався окремо. */
[data-site-refresh-content] .intg-row {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-site-refresh-content] .intg-item {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 92px; padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-12);
  background: var(--border-a05); border: 1px solid var(--border-a10);
  font-size: var(--fs-13); font-weight: 600; color: var(--text-primary);
  text-align: center; text-wrap: balance;
}
[data-site-refresh-content] .intg-logo { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
[data-site-refresh-content] .intg-ico { display: inline-flex; color: var(--accent-bright); flex: 0 0 auto; }
[data-site-refresh-content] .intg-ico svg { width: 24px; height: 24px; }

/* Від планшета плитки вже не потрібні – вистачає рядка з роздільниками */
@media (min-width: 641px) {
  [data-site-refresh-content] .intg-row { gap: var(--sp-3); }
  [data-site-refresh-content] .intg-item {
    flex-direction: row; gap: var(--sp-3);
    min-height: 44px; padding: 0 var(--sp-3);
    border: 0; border-radius: 0; background: none;
    font-size: var(--fs-15);
  }
  /* роздільник малюємо бордюром сусіда, щоб не було зайвих елементів */
  [data-site-refresh-content] .intg-item + .intg-item { border-left: 1px solid var(--border); }
  [data-site-refresh-content] .intg-row > :nth-child(odd) { border-left: 0; }
}
/* --- жива смуга інтеграцій: копія + поля підключень --- */
[data-site-refresh-content] .intg--live { display: grid; gap: var(--sp-5); }
[data-site-refresh-content] .intg--live .intg-title { text-align: left; margin: 0; }
[data-site-refresh-content] .intg-note {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-13); line-height: 1.6; color: var(--text-secondary);
  max-width: 44ch;
}
[data-site-refresh-content] .intg-fields { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; }
[data-site-refresh-content] .intg-fields .hw-field { margin: 0; }
[data-site-refresh-content] .intg-fields .intg-ico svg { width: 22px; height: 22px; }
[data-site-refresh-content] .intg-add { flex: 0 0 auto; margin-left: auto; text-align: right; letter-spacing: 0; overflow: visible; }
[data-site-refresh-content] .hw-check--plus { background: var(--border-a10); color: var(--text-secondary); }
/* на найвужчих екранах довга назва ручних рахунків виштовхує галочку:
   назві дозволяємо стискатись, підпис «додайте свій» ховаємо */
[data-site-refresh-content] .intg-fields .hw-ex { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) {
  [data-site-refresh-content] .intg-add { display: none; }
}
@media (min-width: 641px) {
  [data-site-refresh-content] .intg-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 981px) {
  [data-site-refresh-content] .intg--live { grid-template-columns: minmax(260px, 1fr) minmax(0, 1.5fr); align-items: center; gap: var(--sp-8); }
}

@media (min-width: 981px) {
  [data-site-refresh-content] .intg { padding: var(--sp-5) var(--sp-6); }
  [data-site-refresh-content] .intg-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* «Manual Portfolio accounts» — найдовший підпис; на чверті ширини
     він переносився на два рядки й ламав рівну лінію з логотипами */
  [data-site-refresh-content] .intg-item { font-size: var(--fs-14); padding: 0 var(--sp-2); gap: var(--sp-2); }
  [data-site-refresh-content] .intg-row > :nth-child(odd) { border-left: 1px solid var(--border); }
  [data-site-refresh-content] .intg-row > :first-child { border-left: 0; }
}

/* ============================================================
   2. ТАБИ
   ============================================================ */

/* Без JS клас .js не зʼявляється: панелі лишаються видимими,
   ряд вкладок ховається. Сторінка деградує в звичайний список. */
[data-site-refresh-content] .fxt:not(.js) .fxt-barwrap { display: none; }
[data-site-refresh-content] .fxt:not(.js) .fxt-panel + .fxt-panel { margin-top: var(--sp-8); }

/* body у landing.css має overflow-x: hidden. Це створює контекст
   прокрутки на body, і будь-який position: sticky всередині
   перестає прилипати. overflow-x: clip обрізає так само, але
   контексту не створює. Старі браузери правило проігнорують і
   лишаться з hidden – тобто з поточною поведінкою, без поломки. */
[data-site-refresh-content] { overflow-x: clip; }

/* --- ряд вкладок --- */
/* Прилипає саме .fxt-barwrap, і на ньому не має бути overflow:
   overflow-x: auto створює контекст прокрутки і position: sticky
   всередині нього перестає працювати. Тому гортається .fxt-bar. */
[data-site-refresh-content] .fxt-barwrap {
  position: sticky;
  top: calc(var(--nav-height) + 6px);
  z-index: 20;
  margin: 0 0 var(--sp-6);
}

/* Перехід за якорем ставив початок секції під верх вікна, а зверху
   стоять шапка і липкий ряд вкладок: заголовок етапу опинявся під
   ними, перекриття 74px. Відступ якоря = шапка + ряд + повітря. */
/* landing.css має section[id] { scroll-margin-top: 88px } — це
   специфічніше за один клас, тому селектор із тегом. */
/* Браузер сам стрибає на елемент із id з хеша, а це панель, не секція.
   Тож відступ якоря потрібен обом. landing.css має section[id] з 88px,
   що специфічніше за один клас, тому селектор із тегом. */
[data-site-refresh-content] section[id].fxt,
[data-site-refresh-content] .fxt-panel[id] { scroll-margin-top: calc(var(--nav-height) + 116px); }

[data-site-refresh-content] .fxt-bar {
  display: flex; gap: 4px; padding: 5px;
  max-width: 100%;
  border-radius: 999px;
  background: rgba(16,16,17,.86);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  /* на телефоні шість вкладок не вміщаються – гортаємо пальцем */
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
[data-site-refresh-content] .fxt-bar::-webkit-scrollbar { display: none; }
/* натяк, що ряд гортається: край останньої видимої вкладки тане */
@supports (mask-image: linear-gradient(#000, #000)) {
  [data-site-refresh-content] .fxt-bar {
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
}

[data-site-refresh-content] .fxt-tab {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
  min-height: 44px;                 /* палець, а не курсор */
  padding: 0 16px; border: 1px solid transparent; border-radius: 999px;
  background: none; cursor: pointer;
  font: 600 var(--fs-14)/1 Inter, system-ui, sans-serif;
  color: var(--text-muted);
  scroll-snap-align: center;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
[data-site-refresh-content] .fxt-tab svg { width: 16px; height: 16px; flex: 0 0 auto; }
[data-site-refresh-content] .fxt-tab:hover { color: var(--text-primary); }
[data-site-refresh-content] .fxt-tab.is-on {
  color: var(--text-primary);
  background: rgba(60,217,122,.10);
  border-color: rgba(60,217,122,.30);
}
[data-site-refresh-content] .fxt-tab.is-on svg { color: var(--accent-bright); }
[data-site-refresh-content] .fxt-tab:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

/* --- панель --- */
[data-site-refresh-content] .fxt-panel {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-20);
  overflow: hidden;
}
[data-site-refresh-content] .fxt-panel[hidden] { display: none; }
[data-site-refresh-content] .fxt.js .fxt-panel.is-on { animation: fxtIn .28s ease both; }
@keyframes fxtIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  [data-site-refresh-content] .fxt.js .fxt-panel.is-on { animation: none; }
  [data-site-refresh-content] .fxt-barwrap { scroll-behavior: auto; }
}

[data-site-refresh-content] .fx-copy { display: grid; gap: var(--sp-4); padding: var(--sp-5); }
[data-site-refresh-content] .fx-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-12);
  background: var(--green-bg); color: var(--accent-bright);
}
[data-site-refresh-content] .fx-ico svg { width: 20px; height: 20px; }
/* На вузькому екрані надпис над заголовком переноситься на два рядки, і
   крапка з align-items: center зʼїжджала між рядками. Прибиваємо її до
   першого рядка. */
[data-site-refresh-content] .fx-text .blk-eyebrow { align-items: flex-start; }
[data-site-refresh-content] .fx-text .blk-eyebrow i { margin-top: .45em; flex: 0 0 auto; }
[data-site-refresh-content] .fx-text h3 {
  margin: var(--sp-2) 0 0;
  font-size: clamp(22px, 4.4vw, 30px); font-weight: 800;
  letter-spacing: -.02em; color: var(--text-primary);
}
[data-site-refresh-content] .fx-text p {
  margin: var(--sp-3) 0 0; max-width: 62ch;
  font-size: var(--fs-15); line-height: 1.65; color: var(--text-secondary);
}
[data-site-refresh-content] .fx-side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
[data-site-refresh-content] .fx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
[data-site-refresh-content] .fx-chips li {
  padding: 5px 11px; border-radius: 20px;
  background: var(--border-a05); border: 1px solid var(--border-a10);
  font-size: var(--fs-12); color: var(--text-secondary);
}
[data-site-refresh-content] .fx-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px;
  font-size: var(--fs-14); font-weight: 600;
  color: var(--accent-bright); text-decoration: none;
}
[data-site-refresh-content] .fx-link svg { width: 15px; height: 15px; transition: transform .18s ease; }
[data-site-refresh-content] .fx-link:hover svg { transform: translateX(3px); }

/* ============================================================
   2a. ПАНЕЛІ-КОМПОЗИЦІЇ (/features, секція .fxt--live)
   ------------------------------------------------------------
   Панель – «вікно продукту» за мовою героя: текст ліворуч, жива
   композиція праворуч. Ряд плиток зі стелею висоти різав віджети
   посеред рядка; тут композиції підібрані збіркою так, що влазять
   цілком, і механіка обрізання не потрібна взагалі.
   Правила скоуплені під .fxt--live: .fx-stage і старий .fx-copy
   лишаються як були – ними користується /solutions.
   ============================================================ */
[data-site-refresh-content] .fxt--live .fxt-panel { padding: var(--sp-5); }
[data-site-refresh-content] .fxt--live .fx-copy {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0; padding: 0;
}
[data-site-refresh-content] .fxt--live .fx-copy .blk-eyebrow { margin-top: var(--sp-4); align-items: flex-start; }
[data-site-refresh-content] .fxt--live .fx-copy .blk-eyebrow i { margin-top: .45em; flex: 0 0 auto; }
[data-site-refresh-content] .fxt--live .fx-copy h3 {
  margin: var(--sp-2) 0 0;
  font-size: clamp(22px, 4.4vw, 30px); font-weight: 800;
  letter-spacing: -.02em; color: var(--text-primary);
}
[data-site-refresh-content] .fxt--live .fx-copy p {
  margin: var(--sp-3) 0 0; max-width: 62ch;
  font-size: var(--fs-15); line-height: 1.65; color: var(--text-secondary);
}
[data-site-refresh-content] .fx-checks {
  list-style: none; margin: var(--sp-4) 0 0; padding: 0;
  display: grid; gap: var(--sp-2);
}
[data-site-refresh-content] .fx-checks li {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  font-size: var(--fs-14); line-height: 1.5; color: var(--text-secondary);
}
[data-site-refresh-content] .fx-checks svg { width: 15px; height: 15px; margin-top: 3px; color: var(--accent-bright); flex: 0 0 auto; }
[data-site-refresh-content] .fxt--live .fx-link { margin-top: var(--sp-3); }

[data-site-refresh-content] .fx-live { position: relative; margin-top: var(--sp-5); }
[data-site-refresh-content] .fx-live .dashboard-widget,
[data-site-refresh-content] .fx-live .jrn-card {
  box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 18px 44px rgba(0,0,0,.45);
}
/* клітинки календаря лишаються квадратними, як у продукті
   (aspect-ratio: 1 з product-widgets.css); висоту панелі тримає
   обмеження ширини календаря нижче */
[data-site-refresh-content] .fxl-side { margin-top: var(--sp-3); }
[data-site-refresh-content] .fx-live .fxl-chip { position: absolute; top: -10px; right: 0; z-index: 3; margin: 0; }

/* компактний журнал: шапка місяця впритул до таблиці */
[data-site-refresh-content] .journal--slim th { white-space: nowrap; }
[data-site-refresh-content] .fx-live .jrn-scroll { overflow-x: auto; }

/* смуги стратегій і сетапів у вузьких картках: рядок не переноситься,
   довга назва обрізається трикрапкою, цифри лишаються цілими */
[data-site-refresh-content] .fx-live .strategy-bar-content,
[data-site-refresh-content] .fx-hero-live .strategy-bar-content { gap: 10px; padding: 0 12px; }
[data-site-refresh-content] .fx-live .strategy-bar-left,
[data-site-refresh-content] .fx-hero-live .strategy-bar-left { min-width: 0; }
[data-site-refresh-content] .fx-live .strategy-bar-name,
[data-site-refresh-content] .fx-hero-live .strategy-bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-site-refresh-content] .fx-live .strategy-bar-count,
[data-site-refresh-content] .fx-live .strategy-bar-right,
[data-site-refresh-content] .fx-hero-live .strategy-bar-count,
[data-site-refresh-content] .fx-hero-live .strategy-bar-right { white-space: nowrap; }

/* скріншот цілого дашборда: єдина панель з картинкою замість живих
   віджетів. Це кнопка: клік відкриває лайтбокс на весь екран */
[data-site-refresh-content] .fx-shot {
  display: block; width: 100%; margin: 0; padding: 0;
  border: 0; background: none; cursor: zoom-in;
}
[data-site-refresh-content] .fx-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border-color); border-radius: 14px;
  box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 18px 44px rgba(0,0,0,.45);
}
[data-site-refresh-content] .has-shotbox { overflow: hidden; }
[data-site-refresh-content] .fx-shotbox {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 32px);
  background: rgba(4, 6, 9, .98); cursor: zoom-out;
}
[data-site-refresh-content] .fx-shotbox img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border: 1px solid var(--border-color); border-radius: 10px;
}
[data-site-refresh-content] .fx-shotbox-x {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--border-color); border-radius: 50%;
  background: rgba(255, 255, 255, .06); color: var(--text-primary);
  font-size: 17px; line-height: 1; cursor: pointer;
}
[data-site-refresh-content] .fx-shotbox-x:hover { background: rgba(255, 255, 255, .12); }

/* контролки в шапках віджетів (Day/Week, Distribution/Analysis) на
   вузькому екрані не влазять у рядок – переносимо, як у старої сцени */
[data-site-refresh-content] .fx-live .widget-header { flex-wrap: wrap; }
[data-site-refresh-content] .fx-live .widget-controls,
[data-site-refresh-content] .fx-live .widget-controls-stack { flex-wrap: wrap; justify-content: flex-end; }
[data-site-refresh-content] .fx-live .widget-header > .widget-controls { margin-left: auto; }

/* --- десктоп: текст ліворуч, композиція праворуч --- */
@media (min-width: 1081px) {
  [data-site-refresh-content] .fxt--live .fxt-panel {
    display: grid;
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
    align-items: center; gap: var(--sp-9);
    padding: var(--sp-7) var(--sp-8);
  }
  [data-site-refresh-content] .fxt--live .fxt-panel[hidden] { display: none; }
  [data-site-refresh-content] .fx-live { margin-top: 0; }
  [data-site-refresh-content] .fxt--live .fxl-main { width: min(600px, 100%); margin-left: auto; }
  /* бічний віджет з накладанням: на /features його більше немає
     (календар стоїть сам, з тултіпами), але степер /solutions досі
     кладе бічний віджет поверх календаря цим правилом */
  [data-site-refresh-content] .fxt--live .fxl-side {
    position: absolute; left: 0; bottom: -14px; margin: 0; z-index: 2;
    width: min(320px, 55%);
    filter: drop-shadow(0 16px 36px rgba(0,0,0,.45));
  }
  [data-site-refresh-content] .fx-live .fxl-chip { top: -12px; right: -6px; }

  /* журнал і виплати – одна широка картка без бічного */
  [data-site-refresh-content] .fxt-panel--journal .fxl-main,
  [data-site-refresh-content] .fxt-panel--payouts .fxl-main { width: 100%; }

  /* --- дашборд: скріншот цілого екрана під компактною шапкою --- */
  /* Дошка з шести живих віджетів давала неповну картину продукту,
     тому тут стоїть скріншот усього дашборда. Текст стає компактною
     шапкою: чек-лист розгортається в рядок, велика іконка зайва
     (та сама стоїть у вкладці над панеллю). */
  [data-site-refresh-content] .fxt--live .fxt-panel--dashboard { display: block; padding: var(--sp-6) var(--sp-7); }
  [data-site-refresh-content] .fxt-panel--dashboard .fx-ico { display: none; }
  [data-site-refresh-content] .fxt-panel--dashboard .fx-copy .blk-eyebrow { margin-top: 0; }
  [data-site-refresh-content] .fxt-panel--dashboard .fx-checks {
    display: flex; flex-wrap: wrap;
    margin-top: var(--sp-3); gap: var(--sp-2) var(--sp-6);
  }
  [data-site-refresh-content] .fxt-panel--dashboard .fx-link { margin-top: var(--sp-1); min-height: 28px; }
  [data-site-refresh-content] .fxt-panel--dashboard .fx-copy p { margin-top: var(--sp-2); }
  [data-site-refresh-content] .fxt-panel--dashboard .fx-checks { margin-top: var(--sp-2); }
  [data-site-refresh-content] .fxt-panel--dashboard .fx-live { margin-top: var(--sp-3); width: 100%; }
  /* опис без стелі ширини (був 74ch): один рядок замість двох
     звільняє висоту для ширшого скріншота */
  [data-site-refresh-content] .fxt-panel--dashboard .fx-copy p { max-width: none; }
  /* ширина скріншота гранична: панель має лишатись до 720px, щоб
     разом із рядом вкладок влазити у вікно 1440x800 */
  [data-site-refresh-content] .fxt-panel--dashboard .fxl-main { width: min(900px, 100%); margin: 0 auto; }
  /* календар з квадратними клітинками: ширина обмежена так, щоб
     сітка з шести рядів тримала панель у межах 720px */
  [data-site-refresh-content] .fxt-panel--calendar .fxl-main { width: min(560px, 100%); }

  /* --- дует: два віджети поруч, без накладання --- */
  /* графік балансу і смуги стратегій затуляти не можна, тож ці
     панелі кладуть віджети поруч; накладання немає більше ніде */
  [data-site-refresh-content] .fx-live--duo { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--sp-3); align-items: start; }
  [data-site-refresh-content] .fx-live--duo .fxl-main { width: auto; margin: 0; }
  [data-site-refresh-content] .fx-live--duo .fxl-side { position: static; width: auto; margin: 0; filter: none; }
  [data-site-refresh-content] .fxt-panel--accounts .fx-live--duo { grid-template-columns: 1fr 1.45fr; }
  [data-site-refresh-content] .fxt-panel--strategies .fx-live--duo { grid-template-columns: 1.05fr 1fr; }
  /* смугам стратегій і сетапів тісно: рядок «назва · n +$x  y% WR»
     потребує близько 260px тексту, тож копія-колонка тут вужча,
     а дует забирає звільнене */
  [data-site-refresh-content] .fxt--live .fxt-panel--strategies { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); }
  /* чип у дуеті – нижній правий кут композиції */
  [data-site-refresh-content] .fx-live--duo .fxl-chip { top: auto; bottom: -10px; right: -6px; }
}


/* --- сцена з віджетами --- */
/* Телефон: карусель, а не стовпчик. Пʼять віджетів один під одним
   давали пʼять екранів однакових карток – гортати їх ніхто не буде.
   Горизонтальний ряд із прилипанням показує все за один екран і
   поводиться як застосунок, а не як довгий список. */
[data-site-refresh-content] .fx-stage {
  display: flex; gap: var(--sp-3);
  /* без цього всі картки тягнуться до найвищої: у «Account Balance»
     контенту на 140px, а плитка ставала 511px через сусідній
     «P&L Analysis» – усередині картки зяяла порожнеча */
  align-items: flex-start;
  padding: var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--surface-base);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
[data-site-refresh-content] .fx-stage::-webkit-scrollbar { display: none; }
/* Однакова висота карток – інакше під низькою карткою лишалась порожня
   смуга у висоту найвищої сусідки. Але 320px були замалі: у календаря
   вмісту на 594px, тобто дві третини віджета ховалось. Тепер висота
   йде від екрана, і видно рівно стільки, скільки той дозволяє. */
[data-site-refresh-content] .fx-stage > .fx-tile {
  flex: 0 0 86%; height: clamp(320px, 62vh, 560px);
  scroll-snap-align: center;
}
[data-site-refresh-content] .fx-stage > .fx-tile > * { height: 100%; overflow: hidden; }
/* Картки однакової висоти, а вміст у них різного розміру: у графіка
   балансу лише 140px, і під ним лишалась пустка. Даємо тілу віджета
   й самому графіку рости – svg із viewBox масштабується сам. */
[data-site-refresh-content] .fx-stage .widget-content { flex: 1 1 auto; min-height: 0; }
[data-site-refresh-content] .fx-stage .chart { flex: 1 1 auto; min-height: 0; height: auto; }

/* Тултіпи днів календаря – на дотику вони або не викликаються, або
   вилазять за обрізану картку каруселі. Показуємо лише там, де є курсор. */
@media (hover: none) {
  [data-site-refresh-content] .fx-stage .cal-tip { display: none; }
}

/* у журналі плитка одна – каруселі нема чого показувати */
[data-site-refresh-content] .fx-stage > .fx-tile:only-child { flex-basis: 100%; }

/* Згасання вмикає скрипт і тільки там, де вміст справді не влазить:
   інакше низ невисокого віджета блякнув би без причини. */
@supports (mask-image: linear-gradient(#000, #000)) {
  [data-site-refresh-content] .fx-stage > .fx-tile.is-clipped > * {
    mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
  }
}

/* --- точки каруселі --- */
[data-site-refresh-content] .fx-dots {
  display: flex; justify-content: center; gap: 6px;
  padding: 0 0 var(--sp-4);
  background: var(--surface-base);
}
[data-site-refresh-content] .fx-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border-light);
  transition: background .18s ease, transform .18s ease;
}
[data-site-refresh-content] .fx-dots i.is-on { background: var(--accent-bright); transform: scale(1.25); }
/* натяк, що ряд гортається – той самий прийом, що й на вкладках */
@supports (mask-image: linear-gradient(#000, #000)) {
  [data-site-refresh-content] .fx-stage:not(:has(> .fx-tile:only-child)) {
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }
}
/* Ширину тайла задає розмітка через data-c (колонки) і data-r (рядки).
   Раніше це були інлайнові grid-column, і щоб перебити їх на телефоні,
   доводилось писати !important. Далі кожне правило мусило бути теж
   !important, а відновлювали ширину за підрядком у style: селектор
   [style*="span 2"] тайла на три колонки просто не бачив – журнал
   лишався на третину сцени. З атрибутами нічого перебивати не треба. */
[data-site-refresh-content] .fx-stage .fx-tile { grid-column: 1 / -1; grid-row: auto; min-width: 0; }
[data-site-refresh-content] .fx-stage .dashboard-widget { height: 100%; }

/* Віджети малювались для широких секцій, а тут стоять у плитці на 330px.
   Два місця через це вилазили за плитку, і .fxt-panel їх обрізав. */

/* П’ять днів тижня: підпис «+$2,220.00» тримав колонку на 91px, тож
   п’ять колонок просили 435px замість наявних 296. minmax(0, 1fr)
   дозволяє колонці стиснутись, картка тягнеться за нею. */
[data-site-refresh-content] .fx-stage .weekdays-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
[data-site-refresh-content] .fx-stage .weekday-col { min-width: 0; width: 100%; }
[data-site-refresh-content] .fx-stage .weekday-card { width: 100%; padding: 6px 4px; }
[data-site-refresh-content] .fx-stage .weekday-sum { font-size: 10px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Журнальна таблиця має 21 колонку і рядок метрик такий самий широкий:
   у будь-яку плитку вони не влазять і гортаються вбік. Різаний по
   половині слова край читався як поламана верстка, тому гасимо його —
   тим самим прийомом, що й ряд вкладок вище. */
@supports (mask-image: linear-gradient(#000, #000)) {
  [data-site-refresh-content] .fx-stage .jrn-scroll,
  [data-site-refresh-content] .fx-stage .jrn-metrics {
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
  }
}

/* Шапка віджета: заголовок і перемикачі в один ряд не вміщаються на
   телефоні. Дозволяємо перенос – на ширших екранах ряд і так цілий. */
[data-site-refresh-content] .fx-stage .widget-header { flex-wrap: wrap; }
[data-site-refresh-content] .fx-stage .widget-controls,
[data-site-refresh-content] .fx-stage .widget-controls-stack { flex-wrap: wrap; justify-content: flex-end; }
/* коли контроли зʼїхали на другий рядок, space-between лишає їх ліворуч
   під заголовком – auto-відступ повертає їх до правого краю */
[data-site-refresh-content] .fx-stage .widget-header > .widget-controls { margin-left: auto; }

/* ============================================================
   3. ПЛАНШЕТ
   ============================================================ */
@media (min-width: 701px) {
  /* від планшета місця вистачає – повертаємось до сітки */
  [data-site-refresh-content] .fx-stage {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--sp-5); gap: var(--sp-4);
    overflow: visible; scroll-snap-type: none;
  }
  @supports (mask-image: linear-gradient(#000, #000)) {
    [data-site-refresh-content] .fx-stage:not(:has(> .fx-tile:only-child)) { mask-image: none; }
  }
  /* Стеля висоти плитки. Без неї панель виростала до 1263px при вікні
     на 800px: етап не вміщався в екран ноутбука, а деякі займали два.
     Що не влізло, гасне донизу — згасання вмикає скрипт. */
  [data-site-refresh-content] .fx-stage > .fx-tile { height: auto; max-height: 420px; }
  [data-site-refresh-content] .fx-stage .widget-content, [data-site-refresh-content] .fx-stage .chart { flex: 0 1 auto; min-height: auto; }
  [data-site-refresh-content] .fx-stage > .fx-tile > * { height: 100%; overflow: hidden; }
  [data-site-refresh-content] .fx-dots { display: none; }
  [data-site-refresh-content] .fx-stage .fx-tile { grid-column: auto; }
  /* колонок лише дві, тож і «на дві», і «на три» – це вся ширина */
  [data-site-refresh-content] .fx-stage .fx-tile[data-c="2"],
  [data-site-refresh-content] .fx-stage .fx-tile[data-c="3"] { grid-column: 1 / -1; }
  [data-site-refresh-content] .fx-copy { grid-template-columns: 44px minmax(0, 1fr); padding: var(--sp-6); }
  [data-site-refresh-content] .fx-side { grid-column: 2; }
}

/* ============================================================
   4. ДЕСКТОП
   ============================================================ */
@media (min-width: 1081px) {
  [data-site-refresh-content] .hero--fx { padding: calc(var(--nav-height) + var(--sp-12)) 0 var(--sp-16); }
  [data-site-refresh-content] .fx-hero-inner {
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
    gap: var(--sp-10); align-items: center; padding: 0 var(--sp-6);
  }
  [data-site-refresh-content] .fxt-barwrap { text-align: center; }
  /* на десктопі шість вкладок вміщаються – пігулка стискається по вмісту
     й стоїть по центру, а не тягнеться на всю ширину */
  [data-site-refresh-content] .fxt-bar { display: inline-flex; overflow: visible; }
  /* на десктопі гортати нічого не треба – згасання прибираємо */
  @supports (mask-image: linear-gradient(#000, #000)) { [data-site-refresh-content] .fxt-bar { mask-image: none; } }
  [data-site-refresh-content] .fx-copy { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 340px); padding: var(--sp-7); }
  [data-site-refresh-content] .fx-side { grid-column: 3; }
  [data-site-refresh-content] .fx-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--sp-6); }
  [data-site-refresh-content] .fx-stage--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-site-refresh-content] .fx-stage--3 .fx-tile[data-c="2"] { grid-column: span 2; }
  [data-site-refresh-content] .fx-stage--3 .fx-tile[data-c="3"] { grid-column: 1 / -1; }
  [data-site-refresh-content] .fx-stage .fx-tile[data-r="2"] { grid-row: span 2; }
}

/* ============================================================
   5. БЛОК ПЕРЕВАГ: цифри доказів + три наслідки (концепт B)
   ============================================================ */
/* смуга цифр - компонент trust-line з головної v2, дослівно:
   підпис праворуч від числа, яскравий вертикальний перелив */
[data-site-refresh-content] .trust-line {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 20px 0;
  padding: 0 24px 10px;
}
[data-site-refresh-content] .trust-line > span {
  display: flex; align-items: center; gap: 14px; padding: 0 46px;
}
[data-site-refresh-content] .trust-line b {
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #52e392 0%, #3cd97a 38%, #2d8a55 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #3cd97a;
}
[data-site-refresh-content] .trust-line em {
  font-style: normal; font-size: 14px; line-height: 1.3;
  color: rgba(255, 255, 255, .50); max-width: 11ch;
}
[data-site-refresh-content] .trust-line i { width: 1px; height: 44px; background: rgba(255, 255, 255, .10); }
[data-site-refresh-content] .trust-line + .db-grid { margin-top: var(--sp-7); }
@media (max-width: 720px) {
  [data-site-refresh-content] .trust-line { gap: 18px 0; }
  [data-site-refresh-content] .trust-line > span { padding: 0 20px; }
  [data-site-refresh-content] .trust-line i { display: none; }
}
[data-site-refresh-content] .db-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
[data-site-refresh-content] .db-card {
  border: 1px solid var(--border); border-radius: var(--r-16);
  background: var(--surface-card); padding: var(--sp-5);
}
[data-site-refresh-content] .db-card b { display: block; font-size: var(--fs-16); font-weight: 700; color: var(--text-primary); margin: 0 0 8px; }
[data-site-refresh-content] .db-card span { font-size: var(--fs-14); line-height: 1.6; color: var(--text-muted); }
@media (max-width: 767px) {
  [data-site-refresh-content] .db-grid { grid-template-columns: 1fr; }
}