/* =====================================================================
   7. CYNC THE DIFFERENCE — заголовок + 4 карточки со списками
   Внутри карточки: --ix иконка, --tx/--tw заголовок, --lx/--lt список,
   --g1/--g2 промежутки между пунктами (в дизайне они разные у каждой карточки).
   ===================================================================== */

.difference { height: 828px; }
.difference__eyebrow { position: absolute; left: 583px; top: 65px; width: 274px; font: 500 18px/0 var(--head); text-align: center; }
.difference__title   { position: absolute; left: 322px; top: 84px; width: 796px; font: 500 50px/55px var(--head); text-align: center; }
.difference__text    { position: absolute; left: 304px; top: 211px; width: 832px; line-height: 19.2px; text-align: center; }

.dcard {
  --ix: 18px; --tx: 17px; --tw: 242px; --tt: 93px; --lx: 42.1px; --lt: 161px; --g1: 10px; --g2: 10px; --bx: 27.7px;
  position: absolute; top: 306px; width: 300px; height: 492px;
  border: 1px solid var(--line); border-radius: 20px;
}
.dcard > * { position: absolute; }
.dcard img { left: calc(var(--ix) - 1px); top: 23px; width: 45px; }
.dcard h3  { left: calc(var(--tx) - 1px); top: calc(var(--tt) - 1px); width: var(--tw); font: 500 20px/20px var(--head); }
.dcard ul  { left: calc(var(--lx) - 1px); top: calc(var(--lt) - 1px); width: 234px; font-size: 14px; line-height: 16.8px; }
.dcard li  { position: relative; }
.dcard li:nth-child(2) { margin-top: var(--g1); }
.dcard li:nth-child(3) { margin-top: var(--g2); }
.dcard li::before {      /* стрелка-маркер, повёрнутая на 45° */
  content: ""; position: absolute; left: calc(-1 * var(--bx)); top: 1px; width: 15px; height: 15px; margin: 3.1px;
  background: url(../../img/icon-arrow-bullet.png) center / contain no-repeat; rotate: 45deg;
}
.dcard--1 { left: 60px;     --g1: 19.6px; --g2: 17.8px; }
.dcard--2 { left: 402.1px;  --ix: 17px; --tw: 211px; --g1: 9px; --g2: 11.6px; }
.dcard--3 { left: 742.1px;  --ix: 16px; --tw: 247px; --g1: 6px; --g2: 6px; }
.dcard--4 { left: 1080px;   --ix: 19px; --tx: 20px; --tw: 258px; --lx: 45px; --g1: 9.8px; --g2: 10.4px; }

/* desktop 1250–1439 */
@media (max-width: 1439px) {
  .difference__eyebrow { left: 488px; }
  .difference__title { left: 226.9px; }
  .difference__text { left: 209px; }
  .dcard { width: 275px; --lx: 29.6px; --bx: 23.2px; }
  .dcard--1 { left: 60.5px; --ix: 11px; --tx: 11px; }
  .dcard--2 { left: 346px;  --ix: 9px;  --tx: 12px; }
  .dcard--3 { left: 632.5px; --ix: 13px; --tx: 10px; }
  .dcard--4 { left: 917px; width: 280px; --ix: 15px; --tx: 14px; --lx: 35px; }
}
/* tablet 740–1249 */
@media (max-width: 1249px) {
  .difference { height: 1229px; }
  .difference__eyebrow { left: 233px; }
  .difference__title { left: 50px; width: 640px; font-size: 40px; line-height: 44px; }
  .difference__text { left: 36px; width: 668px; font-size: 14px; line-height: 16.8px; }
  .dcard { width: 308px; height: 402px; top: 300px; --ix: 21px; --tx: 21px; --lx: 48.6px; --lt: 158px; --bx: 27.2px; }
  .dcard--1 { left: 50.5px;  --g1: 9.6px; --g2: 12.8px; }
  .dcard--2 { left: 382.5px; --g1: 6px;   --g2: 9.6px; }
  .dcard--3 { left: 50.5px;  top: 722px; width: 307px; height: 482px; --g1: 11px; --g2: 6px; }
  .dcard--4 { left: 382.5px; top: 722px; width: 307px; height: 482px; --g1: 7.8px; --g2: 7.4px; }
}
/* mobile <740 */
@media (max-width: 739px) {
  .difference { height: 1149px; }
  .difference__eyebrow { left: 22.5px; top: 42px; font-size: 14px; }
  .difference__title { left: -8.5px; top: 53px; width: 337px; font-size: 25px; line-height: 27.5px; }
  .difference__text { left: -1.5px; top: 133px; width: 321px; }
  .dcard { width: 159px; height: 381px; top: 264px; --ix: 16px; --tx: 13.6px; --tt: 80px; --lx: 29.2px; --lt: 141px; --bx: 17.3px; }
  .dcard img { top: 15px; }
  .dcard h3 { font-size: 16px; line-height: 16px; }
  .dcard ul { width: 123px; font-size: 10px; line-height: 12px; }
  .dcard li::before { width: 10px; height: 10px; margin: 2.05px; }
  .dcard--1 { left: -9.5px; --tx: 12.6px; --tw: 135px; --g1: 7px;  --g2: 8px; }
  .dcard--2 { left: 171.5px; top: 263px; --tw: 133px; --g1: 11px; --g2: 12px; }
  .dcard--3 { left: -9.5px; top: 663px; height: 466px; --ix: 14px; --tt: 82px; --tw: 124px; --g1: 6px; --g2: 8px; }
  .dcard--4 { left: 171.5px; top: 663px; height: 467px; --tx: 15.6px; --tw: 124px; --lt: 156px; --g1: 8px; --g2: 7px; }
}