@charset "utf-8";
/* Страницы покупки и сервиса: kupit, partneram, o-kompanii, spasibo, 404 (2026-10).
   Подключать после site.css (ri.css сборка ставит сама). Формы: классы lf-* из ri.css. */

/* --- готовая HTML-форма заявки: выбор варианта и подсказки по варианту (без JS тоже) --- */
.buy-form { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 32px; box-shadow: var(--shadow-lift); }
.buy-form .lf-products + .lf-products { margin-top: -2px; }
.buy-form .req-kp, .buy-form .req-q { display: none; color: var(--red); font-weight: 600; }
.buy-form:has(input[name="intent"][value="kp"]:checked) .req-kp { display: inline; }
.buy-form:has(input[name="intent"][value="kp"]:checked) .opt-kp { display: none; }
.buy-form:has(input[name="intent"][value="question"]:checked) .req-q { display: inline; }
.buy-form:has(input[name="intent"][value="question"]:checked) .opt-q { display: none; }
.lf-checks { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.lf-checks legend { font-weight: 600; font-size: 15px; margin-bottom: 6px; padding: 0; }
.lf-checks input { accent-color: var(--accent); }
.lf-checks label { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; cursor: pointer; }
.lf-checks input { width: 20px; height: 20px; margin: 3px 0 0; flex: none; }
@media (max-width: 767.98px) { .buy-form { padding: 20px 16px; } }

/* --- раскрывающаяся форма регистрации сделки --- */
details.deal { margin-top: 28px; }
details.deal > summary { list-style: none; display: inline-flex; }
details.deal > summary::-webkit-details-marker { display: none; }
details.deal > summary::after { content: " ▾"; margin-left: 6px; }
details.deal[open] > summary::after { content: " ▴"; }
details.deal > .deal-in { margin-top: 20px; }

/* --- таблицы страницы (лицензия, уровни, реквизиты) --- */
.tbl.buy-tbl th[scope="col"] { white-space: nowrap; }
.tbl.buy-tbl td, .tbl.buy-tbl th { vertical-align: top; }
.req-tbl { width: 100%; border-collapse: collapse; }
.req-tbl th, .req-tbl td { text-align: left; padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.req-tbl tr:first-child > * { border-top: 0; }
.req-tbl th { width: 38%; font-weight: 600; color: var(--ink-2); }
@media (max-width: 600px) {
  .req-tbl th, .req-tbl td { display: block; width: auto; padding: 4px 14px; border: 0; }
  .req-tbl th { padding-top: 12px; border-top: 1px solid var(--line); }
  .req-tbl tr:first-child th { border-top: 0; }
}

/* --- схема «два продукта, два повода» --- */
.two-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.two-ways > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: 24px; }
.two-ways .way { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; }
.two-ways .way span { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 3px 10px; }
.two-ways .way i { font-style: normal; color: var(--ink-3); }
.two-ways p { margin: 0; color: var(--ink-2); }
@media (max-width: 767.98px) { .two-ways { grid-template-columns: 1fr; } }

/* --- страница «Спасибо» и 404 --- */
.thanks-num { display: inline-block; background: var(--bg-3); border-radius: 8px; padding: 4px 10px; font-weight: 700; }
.next-steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; max-width: 720px; }
.next-steps li { counter-increment: s; position: relative; padding: 14px 18px 14px 60px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.next-steps li::before { content: counter(s); position: absolute; left: 16px; top: 12px; width: 30px; height: 30px; border-radius: 50%;
                         background: #fff; border: 1px solid var(--line-2); color: var(--ink); font-size: 14px; font-weight: 600; display: grid; place-items: center; }
.link-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.link-list a { display: block; height: 100%; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-weight: 600;
               transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.link-list a:hover { border-color: var(--line-2); box-shadow: var(--shadow-lift); text-decoration: none; }
.link-list a small { display: block; font-weight: 500; color: var(--ink-2); font-size: 15px; margin-top: 2px; }
.e404 { font-size: clamp(64px, 12vw, 120px); font-weight: 700; letter-spacing: -.04em; color: var(--bg-3); line-height: 1; margin: 0 0 8px; }

/* --- voprosy.html: подгруппы внутри темы --- */
.faq > h3 { margin: 28px 0 10px; color: var(--ink-2); }