/* =====================================================================
   2. PARADOX — «Despite billions invested…», вкладки Consumers / Businesses
   ===================================================================== */

.paradox { height: 498px; }
.paradox__tabs   { position: absolute; left: 504px; top: 5px; z-index: 2; }
.paradox__panels { position: absolute; inset: 0; }
.paradox__panels > div { position: relative; }

.paradox__label   { position: absolute; left: 61px; top: 108px; width: 196px; font: 400 18px/21.6px var(--head); }
.paradox__heading { position: absolute; left: 470px; top: 93px; width: 881px; font: 500 50px/50px var(--head); }
[data-panel="businesses"] .paradox__heading { left: 472.4px; width: 878px; }

/* --- Consumers: 4 показателя с линией слева.
       Ширины колонок grid = шаг между показателями в дизайне.
       Отступы внутри: --pl слева, --it до иконки, --vt до цифры, --dt до текста. --- */
.stats {
  position: absolute; left: 484px; top: 249px;
  display: grid; grid-template-columns: 232.7px 216.3px 231px 195px; grid-auto-rows: 223px;
}
.stat { --pl: 20px; --it: 0px; --vt: 43px; --dt: 18px;
  width: 195px; height: 223px; padding-left: var(--pl); border-left: 1px solid var(--line); }
.stat img { width: 44px; margin-top: var(--it); }
.stat__value { height: 50px; margin-top: var(--vt); font: 500 50px/50px var(--head); }
.stat__value strong { font-weight: 500; font-size: 30px; }
.stat__text { width: 174px; margin-top: var(--dt); font-size: 18px; line-height: 18px; }

/* --- Businesses: 4 тёмные карточки (--pt/--pl отступ иконки, --tt до текста) --- */
.cards4 {
  position: absolute; left: 485.6px; top: 233px;
  display: grid; grid-template-columns: 221.5px 223px 223px 210px; grid-auto-rows: 245px;
}
.card4 { --pt: 16px; --pl: 21px; --tt: 70px; --tw: 174px;
  width: 210px; height: 245px; padding: var(--pt) 0 0 var(--pl);
  border-radius: 10px; background: var(--navy); color: var(--bg); }
.card4 img { width: 44px; }
.card4 p { width: var(--tw); margin-top: var(--tt); font: 500 20px/20px var(--head); }
.card4:nth-child(1) { --pl: 21.5px; --tw: 163px; }
.card4:nth-child(4) { --tw: 162px; }

/* desktop 1250–1439 */
@media (max-width: 1439px) {
  .paradox__tabs { left: 409px; }
  .paradox__label { left: 60px; }
  .paradox__heading { left: 298.6px; }
  [data-panel="businesses"] .paradox__heading { left: 302.4px; }
  .stats { left: 333px; grid-template-columns: 194.9px 185.1px 197.8px 195px; }
  .cards4 { left: 306px; grid-template-columns: 221px 219.1px 223px 210px; }
  .card4:nth-child(1) { --pl: 20px; }
}
/* tablet 740–1249 */
@media (max-width: 1249px) {
  .paradox { height: 759px; }
  .paradox__tabs { left: 154px; }
  .paradox__label { left: 9.9px; width: 165px; font-size: 16px; line-height: 19.2px; }
  .paradox__heading, [data-panel="businesses"] .paradox__heading { left: 212.4px; width: 521px; font-size: 35px; line-height: 35px; }
  .stats { left: 212.2px; top: 221px; grid-template-columns: 257.8px 195px; grid-auto-rows: 238.2px; }
  .cards4 { left: 212.2px; top: 219px; grid-template-columns: 241.1px 210px; grid-auto-rows: 268.8px; }
  .card4 { --pt: 12px; --pl: 27px; }
  .card4:nth-child(1) { --pl: 27.4px; }
}
/* mobile <740 */
@media (max-width: 739px) {
  .paradox { height: 637px; }
  .paradox__tabs { left: 3.5px; top: 8px; }
  .paradox__label { left: 5.5px; top: 72px; width: 273px; font-size: 14px; line-height: 16.8px; }
  .paradox__heading { left: 5.5px; top: 105px; width: 310px; font-size: 25px; line-height: 25px; }
  [data-panel="businesses"] .paradox__heading { left: 5.5px; top: 104px; width: 306px; font-size: 25px; line-height: 25px; }

  .stats { left: 8.5px; top: 225px; grid-template-columns: 166.7px 150px; grid-auto-rows: 205px; }
  .stat { width: 150px; height: 180px; --pl: 8px; --it: 1px; --vt: 22px; --dt: 13px; }
  .stat:nth-child(2) { --pl: 12.5px; --it: 0px; --vt: 24.9px; --dt: 11.1px; }
  .stat:nth-child(3) { --pl: 13px; --it: 2.9px; --vt: 18.2px; --dt: 21.9px; }
  .stat:nth-child(4) { --pl: 12.2px; --it: 0px; --vt: 20.1px; --dt: 20.9px; }
  .stat__value { height: 40px; font-size: 40px; line-height: 40px; }
  .stat__value strong { font-size: 20px; }
  .stat__text { width: 124px; font-size: 14px; line-height: 14px; }

  .cards4 { left: 5px; top: 215.5px; grid-template-columns: 167.7px 160px; grid-auto-rows: 204.5px; }
  .card4 { width: 160px; height: 190px; --tt: 50px; }
  .card4:nth-child(1) { --pt: 17.9px; --pl: 21.2px; --tw: 128px; }
  .card4:nth-child(2) { --pt: 15.7px; --pl: 17.7px; --tw: 125px; }
  .card4:nth-child(3) { --pt: 15px;   --pl: 19.5px; --tw: 129px; }
  .card4:nth-child(4) { --pt: 16px;   --pl: 16.3px; --tw: 125.4px; }
  .card4 p { font-size: 15px; line-height: 15px; }
}