/* Страница «Список ОФД» / «ОФД для бизнеса» (ru/ofd, kz/ofd). Префикс классов — ob-.
   Как Zero-блоки Tilda, макет масштабируется под ширину окна: размеры заданы в долях --u
   (десктоп — макет 1200 px, телефон и планшет — 320 px, масштаб не больше 1.6).
   Заголовок и карточки стоят по координатам макета: .ob-pos + --x/--y/--pw/--ph (десктоп)
   и --xm/--ym/--pwm/--phm (телефон); содержимое карточек — обычным потоком. */

.ob { --u: calc(var(--vw, 1vw) * 100 / 1200); --gx: 600; overflow-x: clip; background: #f3f3f3; color: #262626; }

.ob-pos { position: absolute; left: calc(50% + (var(--x) - var(--gx)) * var(--u)); top: calc(var(--y) * var(--u)); }
.ob-pos[style*="--pw:"] { width: calc(var(--pw) * var(--u)); }
.ob-pos[style*="--ph:"] { height: calc(var(--ph) * var(--u)); }

/* ---------- заголовок ---------- */
.ob-head { position: relative; height: calc(232 * var(--u)); }
.ob-head__mark { border-radius: calc(10 * var(--u)); background: #00e673; }
.ob-head h1 { color: #232323; font-size: calc(54 * var(--u)); font-weight: 500; line-height: 1; letter-spacing: calc(-1.4 * var(--u)); text-align: center; }
.ob-head h1 span { color: #f3f3f3; }
.ob-head--kz h1 span { color: #fff; }
.ob-head p { color: rgba(35, 35, 35, .7); font-size: calc(18 * var(--u)); line-height: 1.1; text-align: center; }
.ob-head--kz p { line-height: 1.2; }

/* ---------- карточки ---------- */
.ob-list { position: relative; height: calc(1122 * var(--u)); background: var(--c-dark); }
/* светлая подложка со скруглёнными нижними углами поверх тёмного фона */
.ob-list::before { content: ''; position: absolute; inset: 0 0 auto; height: calc(1116 * var(--u)); border-radius: 0 0 calc(40 * var(--u)) calc(40 * var(--u)); background: #f3f3f3; }

.ob-card { padding: calc(24 * var(--u)) calc(24 * var(--u)) 0; border-radius: calc(20 * var(--u)); background: #fff; }
.ob-card__head { display: flex; align-items: center; gap: calc(16 * var(--u)); height: calc(37.2 * var(--u)); color: #232323; font-size: calc(24 * var(--u)); font-weight: 600; line-height: 1.55; white-space: nowrap; }
.ob-card__head img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(10 * var(--u)); }
.ob-card__head span span { color: #909090; }
.ob-card__label { margin-top: calc(23.8 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.3; }
.ob-card__price { margin-top: calc(2.4 * var(--u)); font-size: calc(32 * var(--u)); font-weight: 700; line-height: 1.3; white-space: nowrap; }
.ob-card__sub { font-size: calc(10 * var(--u)); line-height: 1.3; opacity: .65; white-space: nowrap; }
.ob-card__sub span { color: #ff1957; }

.ob-rows { margin-top: calc((9 + var(--rows, 0)) * var(--u)); border-bottom: calc(1 * var(--u)) solid #f1f1f1; }
.ob-rows li { display: flex; justify-content: space-between; height: calc(35 * var(--u)); padding-top: calc(9 * var(--u)); border-top: calc(1 * var(--u)) solid #f1f1f1; font-size: calc(12 * var(--u)); line-height: 1.3; white-space: nowrap; }
.ob-rows .ob-free { color: #15baaa; font-weight: 600; }

.ob-fee { display: flex; justify-content: space-between; align-items: center; height: calc(36 * var(--u)); margin-top: calc(10 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(4 * var(--u)); background: #ff1957; color: #fff; font-size: calc(12 * var(--u)); line-height: 1.3; white-space: nowrap; }
.ob-fee b { font-weight: 600; }

.ob-btn {
    position: absolute; left: calc(24 * var(--u)); right: calc(24 * var(--u)); bottom: calc(24 * var(--u));
    display: flex; align-items: center; justify-content: center; height: calc(52 * var(--u));
    border-radius: calc(10 * var(--u)); background: #f3f3f3; color: #232323;
    font-size: calc(12 * var(--u)); line-height: 1.55;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
.ob-btn:hover { background: var(--c-dark); color: #f3f3f3; }

/* карточка ОФД re:Kassa — тёмная */
.ob-card--rk { background: var(--c-dark); color: #fff; }
.ob-card--rk .ob-card__head, .ob-card--rk .ob-card__head span span { color: #fff; }
.ob-card--rk .ob-rows, .ob-card--rk .ob-rows li { border-color: rgba(241, 241, 241, .15); }
.ob-card--rk .ob-btn { background: var(--c-green); color: #fff; }
.ob-card--rk .ob-btn:hover { background: var(--c-orange); color: #fff; }

/* ---------- телефон и планшет: макет 320 px ---------- */
@media (max-width: 959px) {
    .ob { --u: min(calc(var(--vw, 1vw) * 100 / 320), 1.6px); --gx: 160; }
    .ob-pos { left: calc(50% + (var(--xm) - var(--gx)) * var(--u)); top: calc(var(--ym) * var(--u)); }
    .ob-pos[style*="--pwm:"] { width: calc(var(--pwm) * var(--u)); }
    .ob-pos[style*="--phm:"] { height: calc(var(--phm) * var(--u)); }

    .ob-head { height: calc(127 * var(--u)); }
    .ob-head__mark { border-radius: calc(5 * var(--u)); }
    .ob-head h1 { font-size: calc(24 * var(--u)); }
    .ob-head p { font-size: calc(10 * var(--u)); }

    .ob-list { height: calc(1500 * var(--u)); }
    .ob-list::before { height: calc(1500 * var(--u)); border-radius: 0 0 calc(30 * var(--u)) calc(30 * var(--u)); }

    .ob-card { padding: calc(15 * var(--u)) calc(13 * var(--u)) 0; border-radius: calc(15 * var(--u)); }
    .ob-card__head { gap: calc(10 * var(--u)); height: calc(21.7 * var(--u)); font-size: calc(14 * var(--u)); }
    .ob-card__head img { width: calc(25 * var(--u)); height: calc(25 * var(--u)); }
    .ob-card__label { margin-top: calc(var(--label-m, 17.3) * var(--u)); font-size: calc(9 * var(--u)); }
    .ob-card__price { margin-top: calc(4.3 * var(--u)); font-size: calc(28 * var(--u)); }
    .ob-card__sub { font-size: calc(9 * var(--u)); }
    .ob-rows { margin-top: calc(var(--rows-m, 9.3) * var(--u)); }
    .ob-rows li { height: calc(30.6 * var(--u)); padding-top: calc(9 * var(--u)); font-size: calc(9 * var(--u)); }
    .ob-fee { height: calc(28 * var(--u)); padding: 0 calc(8 * var(--u)); font-size: calc(9 * var(--u)); }
    .ob-btn { left: calc(13 * var(--u)); right: calc(13 * var(--u)); bottom: calc(13 * var(--u)); height: calc(40 * var(--u)); font-size: calc(10 * var(--u)); }
}