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

.of { --u: calc(var(--vw, 1vw) * 100 / 1200); --gx: 600; overflow-x: clip; background: var(--c-bg); color: #232323; }
.of [style*="--w:"] { max-width: calc((var(--w) + 3) * var(--u)); } /* +3: в Tilda текст чуть шире поля */

.of-z { position: relative; height: calc(var(--h) * var(--u)); }
.of-pos { position: absolute; left: calc(50% + (var(--x) - var(--gx)) * var(--u)); top: calc(var(--y) * var(--u)); }
.of-pos[style*="--pw:"] { width: calc(var(--pw) * var(--u)); }
.of-pos[style*="--ph:"] { height: calc(var(--ph) * var(--u)); }
img.of-pos { display: block; height: auto; }
@media (min-width: 960px) { .of-only-m { display: none !important; } }

.of-h2 { font-size: calc(50 * var(--u)); font-weight: 500; line-height: 1; letter-spacing: calc(-1.4 * var(--u)); text-align: center; }
.of-h2 span { color: #fff; }
.of-h2--tight { line-height: .9; }
/* плашки-подложки под выделенными словами заголовков */
.of-mark { border-radius: calc(12 * var(--u)); background: var(--c-dark); }
.of-mark--teal { background: #26545d; }

.of-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: calc(12 * var(--u)); line-height: 1.15; color: #fff; text-align: center;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
.of-btn--green { border-radius: calc(4 * var(--u)); background: var(--c-green); }
.of-btn--dark { border-radius: calc(4 * var(--u)); background: var(--c-dark); }
.of-btn--teal { border-radius: calc(6 * var(--u)); background: var(--c-teal); font-size: calc(10 * var(--u)); line-height: 1.25; }
.of-btn--teal:hover { color: var(--c-dark); }
.of-btn--deep { border-radius: calc(10 * var(--u)); background: #124645; font-weight: 500; line-height: 1.55; }
.of-btn--start { border-radius: calc(10 * var(--u)); background: var(--c-green); color: var(--c-dark); }
.of-btn--start:hover { color: #fff; }

/* ---------- первый экран ---------- */
.of-hero__card { border-radius: calc(20 * var(--u)); background: var(--c-dark) url('/ru/ofd-rekassa/assets/img/6166-0-975-compressed.webp') 0 25.385% / 100% no-repeat; }
.of-hero__card--m { background-image: url('/ru/ofd-rekassa/assets/img/3536-0-975_-compressed.webp'); background-position: center; background-size: cover; }
.of-hero__title { color: #fff; font-size: calc(36 * var(--u)); font-weight: 500; line-height: 1; letter-spacing: calc(-1.4 * var(--u)); }
.of-hero__text { color: #fff; font-size: calc(12 * var(--u)); line-height: 1.2; letter-spacing: calc(-.6 * var(--u)); }
.of-hero .of-btn--green { border-radius: calc(10 * var(--u)); line-height: 1.25; }
.of-hero .of-btn--green:hover { color: var(--c-dark); }
.of-hero__note { color: rgba(255, 255, 255, .65); font-size: calc(12 * var(--u)); line-height: 1.2; letter-spacing: calc(-.6 * var(--u)); white-space: nowrap; }
.of-link {
    display: inline-flex; align-items: center; gap: calc(10 * var(--u));
    color: #fff; font-size: calc(10 * var(--u)); line-height: 1.05; white-space: nowrap; transition: color .2s ease-in-out;
}
.of-link::after { content: ''; width: calc(10 * var(--u)); height: calc(10 * var(--u)); background: currentColor; -webkit-mask: url('/assets/img/arw_right_bold.svg') center / contain no-repeat; mask: url('/assets/img/arw_right_bold.svg') center / contain no-repeat; }
.of-link:hover { color: #00e774; }

/* ---------- тарифы ---------- */
.of-plan { width: calc(242 * var(--u)); height: calc(305 * var(--u)); border-radius: calc(20 * var(--u)); background: #fff; color: #000; }
.of-plan > * { position: absolute; }
.of-plan__head { inset: 0 0 auto; height: calc(70 * var(--u)); padding: calc(16 * var(--u)) 0 0 calc(16 * var(--u)); border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0; background: rgba(217, 217, 217, .65); }
.of-plan__head span { display: flex; align-items: center; height: calc(15 * var(--u)); color: rgba(0, 0, 0, .65); font-size: calc(12 * var(--u)); line-height: 1.2; }
.of-plan__head strong { display: block; margin-top: calc(1 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 700; line-height: 1; }
.of-plan__kassa {
    left: calc(16 * var(--u)); top: calc(85 * var(--u)); display: flex; justify-content: space-between; align-items: center;
    width: calc(210 * var(--u)); height: calc(35 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(4 * var(--u)); background: #f7f8fb;
    font-size: calc(9 * var(--u)); line-height: 1.2;
}
.of-plan__kassa span { color: rgba(0, 0, 0, .65); }
.of-plan__kassa b { font-weight: 500; }
.of-plan__label { left: calc(16 * var(--u)); top: calc(136 * var(--u)); color: rgba(0, 0, 0, .65); font-size: calc(12 * var(--u)); line-height: 1.2; white-space: nowrap; }
/* «единоразовая оплата» рядом с подписью, за вертикальной чертой */
.of-plan__once { left: calc(114 * var(--u)); top: calc(135 * var(--u)); width: calc(94 * var(--u)); padding-left: calc(7 * var(--u)); color: rgba(0, 0, 0, .45); font-size: calc(8 * var(--u)); line-height: 1; }
.of-plan__once::before { content: ''; position: absolute; left: 0; top: calc(-2 * var(--u)); width: calc(2 * var(--u)); height: calc(20 * var(--u)); background: rgba(0, 0, 0, .45); }
.of-plan__price { left: calc(15 * var(--u)); top: calc(155 * var(--u)); color: rgba(34, 34, 34, .65); font-size: calc(36 * var(--u)); font-weight: 500; line-height: 1; letter-spacing: calc(-1.4 * var(--u)); white-space: nowrap; }
.of-plan__vat { left: calc(15 * var(--u)); top: calc(195 * var(--u)); color: rgba(0, 0, 0, .65); font-size: calc(10 * var(--u)); line-height: 1.2; }
.of-plan__btn { left: calc(16 * var(--u)); top: calc(247 * var(--u)); width: calc(210 * var(--u)); height: calc(34 * var(--u)); }
.of-plan--year .of-plan__head { background: var(--c-dark); color: #fff; }
.of-plan--year .of-plan__head span { color: rgba(255, 255, 255, .65); }
.of-plan--year mark {
    position: absolute; left: calc(65 * var(--u)); top: calc(15 * var(--u)); width: calc(78 * var(--u)); height: calc(15 * var(--u)); border-radius: calc(4 * var(--u));
    background: var(--c-green); color: #fff; font-size: calc(8 * var(--u)); line-height: calc(15 * var(--u)); text-align: center;
}
.of-plan--year mark::before { content: ''; position: absolute; left: calc(-7 * var(--u)); top: 0; width: calc(2 * var(--u)); height: 100%; background: rgba(255, 255, 255, .65); }

/* ---------- ОФД — посредник между кассой и налоговой ---------- */
.of-what__title { color: #232323; font-size: calc(36 * var(--u)); font-weight: 500; line-height: 1.25; letter-spacing: calc(-1.4 * var(--u)); }
.of-what__title span { color: #fff; }
.of-steps { display: grid; gap: calc(10 * var(--u)); margin: 0; padding: 0; list-style: none; }
.of-steps span { max-width: calc(var(--w) * var(--u)) !important; }
.of-steps li {
    position: relative; display: flex; align-items: center; gap: calc(12 * var(--u));
    height: calc(76 * var(--u)); padding: 0 calc(20 * var(--u)); border-radius: calc(20 * var(--u)); background: var(--c-dark);
    color: #fff; font-size: calc(14 * var(--u)); line-height: 1.2; letter-spacing: calc(-.6 * var(--u));
}
.of-steps b {
    flex: none; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(8 * var(--u)); background: #fff;
    color: var(--c-dark); font-size: calc(20 * var(--u)); font-weight: 400; line-height: calc(36 * var(--u)); letter-spacing: 0; text-align: center;
}
.of-steps__own b { background: var(--c-teal); color: #fff; }
.of-steps__own .of-btn { position: absolute; left: calc(381 * var(--u)); top: calc(26 * var(--u)); width: calc(80 * var(--u)); height: calc(24 * var(--u)); letter-spacing: 0; }
.of-model { display: flex; justify-content: center; align-items: flex-start; }
/* высота блока — по содержимому (в Tilda артборд «hug»): модель стоит в потоке, снизу отступ 100 */
.of-what { display: flow-root; height: auto; padding-bottom: calc(100 * var(--u)); }
.of-what .of-model { position: relative; top: auto; margin-top: calc(100 * var(--u)); }
.of-model #frd-root { flex: none; width: 480px; zoom: var(--zoom, 1); }

/* ---------- почему выбирают нас / полный спектр услуг ---------- */
.of-card { border-radius: calc(20 * var(--u)); }
.of-card__title { color: #000; font-size: calc(24 * var(--u)); font-weight: 600; line-height: 1; }
.of-card__text { color: rgba(0, 0, 0, .7); font-size: calc(12 * var(--u)); line-height: 1.2; }
.of-card__title--light { color: #fff; }
.of-card__text--light { color: rgba(255, 255, 255, .7); }
.of-serv__title { line-height: 1.1; letter-spacing: 0; text-align: left; }
.of-tile { border-radius: calc(20 * var(--u)); background: #fff; }

/* светлый лист закругляется над тёмным блоком регистрации */
.of-edge { height: calc(80 * var(--u)); background: var(--c-dark); }
.of-edge::before { content: ''; display: block; height: 100%; border-radius: 0 0 calc(40 * var(--u)) calc(40 * var(--u)); background: var(--c-bg); }

/* ---------- быстрая регистрация ---------- */
.of-reg, .of-faq { background: var(--c-dark); color: #fff; }
.of-reg__title { color: #fff; text-align: left; }
.of-reg__pin { pointer-events: none; }
.of-reg__phone { position: sticky; top: 0; height: calc(511 * var(--u)); border-radius: calc(20 * var(--u)); background: url('/assets/img/3136-0-Frame_2087325593.webp') center / cover no-repeat; }
.of-reg__phone-m { border-radius: calc(15 * var(--u)); background: url('/ru/ofd-rekassa/assets/img/6161-0-Frame_2087325620.webp') center / cover no-repeat; }
.of-step { border-radius: calc(20 * var(--u)); background: rgba(255, 255, 255, .11); }
.of-pill {
    width: calc(61 * var(--u)); height: calc(25 * var(--u)); padding-left: calc(14 * var(--u)); border-radius: calc(14 * var(--u));
    background: rgba(255, 255, 255, .07) url('/assets/img/3136-0-Rectangle_240647974.webp') center / cover;
    color: rgba(255, 255, 255, .53); font-size: calc(12 * var(--u)); line-height: calc(25 * var(--u));
}
.of-step__title { font-size: calc(24 * var(--u)); font-weight: 600; line-height: 1; }
.of-step__text { font-size: calc(12 * var(--u)); line-height: 1.1; }

/* ---------- частые вопросы (обычный блок Tilda: без масштабирования) ---------- */
.of-faq { padding: calc(100 * var(--u)) 0 90px; }
.of-faq__title { width: calc(458 * var(--u)); margin: 0 auto calc(41 * var(--u)); color: #fff; }
.of-faq__list { max-width: 1060px; margin-left: calc(50% - 580px); }
.of-faq .qa summary { gap: 10px; padding: 20px 0 21px; font-weight: 700; } /* в Tilda вопросы в <strong>: Mabry Bold */
.of-faq .qa__icon { margin: -20px 0; } /* как в Tilda: иконка не раздвигает строку */
.of-faq .qa__a { padding: 5px 0 40px; font-size: 12px; color: rgba(255, 255, 255, .75); }
.of-faq .qa__a--full { color: #fff; }
@media (max-width: 1199px) { .of-faq__list { margin: 0 20px; } }

/* ---------- /kz: другие тексты — свои места и размеры (как в Tilda) ---------- */
.of-nowrap { white-space: nowrap; }
.of-btn--orange { border-radius: calc(4 * var(--u)); background: var(--c-orange); }
.of--kz .of-plan__once { left: calc(82 * var(--u)); top: calc(139 * var(--u)); width: auto; white-space: nowrap; }
.of--kz .of-plan__once::before { top: calc(-6 * var(--u)); }
.of--kz .of-plan--year mark { width: calc(102 * var(--u)); height: calc(16 * var(--u)); line-height: calc(16 * var(--u)); }
.of--kz .of-pill { width: calc(68 * var(--u)); padding: 0; text-align: center; }
.of-pill--dim { color: rgba(255, 255, 255, .4); }
.of--kz .of-faq .qa__a { color: #fff; }
.of--kz .of-faq__title { width: calc(594 * var(--u)); }

/* ---------- планшет и телефон: мобильный макет Tilda (320 px), масштаб не больше 1.6 ---------- */
@media (max-width: 959px) {
    .of { --u: min(calc(var(--vw, 1vw) * 100 / 320), 1.6px); --gx: 160; }
    .of [style*="--wm:"] { max-width: calc((var(--wm) + 1) * var(--u)); }
    .of-z { height: calc(var(--hm) * var(--u)); }
    .of-pos { left: calc(50% + (var(--xm) - var(--gx)) * var(--u)); top: calc(var(--ym) * var(--u)); }
    .of-pos[style*="--pwm:"] { width: calc(var(--pwm) * var(--u)); }
    .of-pos[style*="--phm:"] { height: calc(var(--phm) * var(--u)); }
    .of-only-d { display: none !important; }

    .of-h2 { font-size: calc(20 * var(--u)); letter-spacing: calc(-.5 * var(--u)); }
    .of-mark { border-radius: calc(8 * var(--u)); }
    .of-mark--teal { border-radius: calc(4 * var(--u)); }
    .of-btn { font-size: calc(8 * var(--u)); }

    .of-hero__card { border-radius: calc(20 * var(--u)); }
    .of-hero__title { font-size: calc(24 * var(--u)); line-height: 1.05; letter-spacing: calc(-.5 * var(--u)); text-align: center; }
    .of-hero__text { line-height: 1.15; }
    .of-hero .of-btn--green { border-radius: calc(4 * var(--u)); }
    .of-hero__note { font-size: calc(8 * var(--u)); line-height: 1.15; white-space: normal; }
    .of-link { font-size: calc(8 * var(--u)); }

    .of-price .of-h2 { font-size: calc(24 * var(--u)); letter-spacing: calc(-1.4 * var(--u)); }
    .of-plan { width: calc(290 * var(--u)); height: calc(285 * var(--u)); border-radius: calc(10 * var(--u)); }
    .of-plan__head { height: calc(62 * var(--u)); border-radius: calc(10 * var(--u)) calc(10 * var(--u)) 0 0; }
    .of-plan__head span { font-size: calc(9 * var(--u)); }
    .of-plan__head strong { font-size: calc(14 * var(--u)); }
    .of-plan__kassa { top: calc(77 * var(--u)); width: calc(258 * var(--u)); height: calc(32 * var(--u)); }
    .of-plan__label { top: calc(125 * var(--u)); font-size: calc(9 * var(--u)); }
    .of-plan__once { left: calc(91 * var(--u)); top: calc(126 * var(--u)); width: calc(135 * var(--u)); padding-left: calc(6 * var(--u)); line-height: 1.2; }
    .of-plan__once::before { top: calc(-1 * var(--u)); width: 1px; height: calc(13 * var(--u)); }
    .of-plan__price { left: calc(16 * var(--u)); top: calc(142 * var(--u)); font-size: calc(24 * var(--u)); }
    .of-plan:first-of-type .of-plan__price { font-size: calc(23 * var(--u)); }
    .of-plan__vat { display: none; }
    .of-plan__btn { top: calc(221 * var(--u)); width: calc(258 * var(--u)); height: calc(32 * var(--u)); }
    .of-plan--year mark { left: calc(53 * var(--u)); top: calc(14 * var(--u)); }
    .of-plan--year mark::before { left: calc(-6 * var(--u)); width: 1px; }

    .of-what__title { font-size: calc(24 * var(--u)); letter-spacing: calc(-.5 * var(--u)); }
    .of-steps { gap: calc(4 * var(--u)); }
    .of-steps span { max-width: calc(var(--wm) * var(--u)) !important; }
    .of-steps li { height: calc(var(--hm) * var(--u)); gap: calc(8 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.15; }
    .of-steps b { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(24 * var(--u)); }
    .of-steps li:first-child b { border-radius: calc(8 * var(--u)); }
    .of-steps__own .of-btn { left: calc(210 * var(--u)); top: calc(28 * var(--u)); width: calc(70 * var(--u)); height: calc(25 * var(--u)); border-radius: calc(4 * var(--u)); font-size: calc(8 * var(--u)); }
    .of-model #frd-root { width: 290px; }
    .of-what { padding-bottom: calc(60 * var(--u)); }
    .of-what .of-model { margin-top: calc(558 * var(--u)); }

    .of-card { border-radius: calc(12 * var(--u)); }
    .of-card__title { font-size: calc(14 * var(--u)); }
    .of-card__text { font-size: calc(9 * var(--u)); }
    .of-serv__title { line-height: 1.05; letter-spacing: calc(-.5 * var(--u)); }
    .of-tile { border-radius: calc(12 * var(--u)); }
    .of-btn--deep { border-radius: calc(7 * var(--u)); font-size: calc(10 * var(--u)); }

    .of-edge { height: calc(40 * var(--u)); }
    .of-edge::before { border-radius: 0 0 calc(30 * var(--u)) calc(30 * var(--u)); }

    .of-reg__title { text-align: center; }
    .of-step { border-radius: calc(15 * var(--u)); }
    .of-pill { width: calc(49 * var(--u)); height: calc(20 * var(--u)); padding-left: 0; border-radius: calc(16 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(20 * var(--u)); text-align: center; }
    .of-step__title { font-size: calc(12 * var(--u)); }
    .of-step__text { font-size: calc(10 * var(--u)); line-height: 1.2; }
    .of-btn--start { border-radius: calc(7 * var(--u)); font-size: calc(10 * var(--u)); }

    .of--kz .of-plan { height: calc(260 * var(--u)); }
    .of--kz .of-plan__btn { top: calc(205 * var(--u)); }
    .of--kz .of-plan__once { left: calc(66 * var(--u)); top: calc(126 * var(--u)); }
    .of--kz .of-plan__once::before { top: calc(-2 * var(--u)); }
    .of--kz .of-plan--year mark { width: calc(99 * var(--u)); }
    .of--kz .of-pill { width: calc(57 * var(--u)); }

    .of-faq { padding-top: calc(30 * var(--u)); }
    .of-faq__title, .of--kz .of-faq__title { width: calc(258 * var(--u)); margin-bottom: calc(20 * var(--u)); }
}
@media (max-width: 639px) {
    .of-faq .qa summary { padding: 20px 0; font-size: 14px; line-height: 18.9px; }
    .of-faq .qa__icon { width: 40px; height: 40px; }
    .of-faq .qa__a { padding: 5px 0 25px; font-size: 9px; line-height: 1.45; }
}
@media (max-width: 480px) { .of-faq { padding-bottom: 60px; } }