/* ===== Slide 2 — phone interior content ===== */
  /* скрыты по умолчанию — появляются анимацией только после прихода на слайд 2 */
  .phone-back, .push, .credit-card, .sticker{ opacity:0; }
  .phone-back{
    position:absolute; left:169.34px; top:111.04px; width:277.311px; height:560.924px;
    border-radius:25px; object-fit:cover; pointer-events:none; z-index:10;
  }
  .push{
    position:absolute; left:178px; width:260px;
    display:flex; align-items:center; gap:8px;
    padding:9px 14px 9px 9px; border-radius:16px;
    background:rgba(26,26,28,0.8);
    backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px);
    z-index:20;
  }
  .push img{ width:38px; height:38px; border-radius:50%; flex-shrink:0; }
  .push p{
    margin:0; color:var(--push-text); font-family:'SF Pro Text','Source Sans Pro',sans-serif;
    font-size:15px; letter-spacing:-0.75px; line-height:1.3;
  }
  /* +16px по top у всех трёх — освобождает место под свёрнутый кружок
     поисковой строки (16×16, top:119.7px) над ними на слайде 2, чтобы пуши
     его не перекрывали (пользователь изначально написал "стикеры", имелись
     в виду именно эти пуши). */
  .push--1{ top:141px; }
  .push--2{ top:203px; }
  .push--3{ top:265px; }

  /* Форм-фактор реальной банковской карты — ISO/IEC 7810 ID-1, 85.6×53.98мм
     (соотношение сторон ~1.586:1). Раньше карта была почти квадратной
     (387.299×286.317, ~1.35:1) — ширину оставляем как в макете (карта
     специально "выглядывает" за края телефона), а высоту уменьшаем под
     реальную пропорцию: 387.299/1.586 ≈ 244px. Позиции текста внутри —
     в % от высоты карты (как у logo-wordmark), чтобы компоновка осталась
     такой же, как в оригинале, просто в более плоском корпусе. */
  .credit-card{
    position:absolute; left:134px; top:425px; width:387.299px; height:244px;
    border-radius:12px; overflow:hidden; z-index:25;
    box-shadow:8px 12px 22px rgba(207,103,0,0.35);
    background-image:linear-gradient(-90deg, rgb(43,170,172) 0%, rgb(201,89,80) 64.9%, rgb(252,80,110) 100%);
  }
  .credit-card .masks img{ position:absolute; inset:0; width:100%; height:100%; }
  .credit-card .logo-wordmark{ position:absolute; left:76.25%; top:12.3%; width:17.84%; height:7.9%; }
  /* Было Lato — переведено на Source Sans Pro 2026-08-03 (та же причина, что
     и у .demo-checkbox__text в css/demo-panel.css: у Lato нет кириллицы,
     а card-name ниже — "Сергей Иванов", падал на системный шрифт). */
  .credit-card .card-number{
    position:absolute; left:5.14%; top:46.83%; display:flex; gap:0;
    font-family:'Source Sans Pro',sans-serif; font-size:18px; color:#fff; letter-spacing:1px;
  }
  .credit-card .card-number span{ position:absolute; top:0; white-space:nowrap; }
  .credit-card .card-number span:nth-child(1){ left:0; }
  .credit-card .card-number span:nth-child(2){ left:63.08px; }
  .credit-card .card-number span:nth-child(3){ left:127.26px; }
  .credit-card .card-number span:nth-child(4){ left:188.12px; }
  .credit-card .card-name{
    position:absolute; left:19.91px; top:81.82%; font-family:'Source Sans Pro',sans-serif;
    font-size:12px; color:#fff;
  }
  .credit-card .card-expiry{
    position:absolute; right:23.55px; top:82.16%; font-family:'Source Sans Pro',sans-serif;
    font-size:12px; color:#fff;
  }