/* business section — scoped under .biz (CLBP-38).
   Design: design/leaves/glavnaya/10-business.html (desktop 1440 + mobile 375).
   Skipped: *, html/body resets — already in tokens.css / hero.css.
   Collision safety: bare atoms .card/.btn/.field/.ic-circle/.chk/.ph/.field-lead/.muted
     all scoped under .biz to avoid leaking into calculator.css/reviews.css/hero.css etc.
   Token swaps: kept literal values for correctness; scoping is the hard requirement. */

/* ── shared atoms (scoped) ──────────────────────────────────────────────── */
.biz img { display: block }
.biz p, .biz h1, .biz h2, .biz h3, .biz h4 { font-weight: 400 }

.biz .card { background: #fff; border-radius: 12px }
.biz .card-bd { border: 1px solid #d6d0cd }
.biz .ic-circle { background: #f4f0ed; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none }
.biz .btn { background: #9bf0f5; border-radius: 40px; display: flex; align-items: center; justify-content: center; color: #333; cursor: pointer }
.biz .field { background: #fff; border: 1px solid #d6d0cd; border-radius: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: #b5b0ac }
.biz .field input { border: none; outline: none; background: transparent; color: #333; font-family: inherit; font-size: inherit; min-width: 0; flex: 1 }
.biz .field input::placeholder { color: #b5b0ac }
.biz .ph { color: #b5b0ac }
.biz .field-lead { display: flex; align-items: center; gap: 8px; min-width: 0 }
.biz .field img { flex: none }
.biz .muted { color: #767575 }
.biz .chk { width: 16px; height: 16px; border: 1px solid #d6d0cd; border-radius: 2px; background: #fff; flex: none }

/* ── DESKTOP (1440) ─────────────────────────────────────────────────────── */
.biz-d { display: none }
.biz-d { width: 1440px; margin: 0 auto; background: #f4f0ed; padding: 110px 140px 110px }
.biz-d h1 { font-size: 38px; line-height: 41px; max-width: 725px }
.biz-d .intro { font-size: 16px; line-height: 23px; margin-top: 40px; max-width: 1159px }
.biz-d h2 { font-size: 32px; line-height: 38px }
.biz-d .sec { margin-top: 80px }
.biz-d .sec1 { margin-top: 40px }
.biz-d .h2gap { margin-top: 24px }

/* formats grid */
.biz-d .fmt-grid { display: grid; grid-template-columns: repeat(3,367px); gap: 30px; margin-top: 24px }
.biz-d .fmt-card { height: 213px; padding: 20px; display: flex; flex-direction: column; gap: 12px }
.biz-d .fmt-card .ic-circle { width: 80px; height: 80px }
.biz-d .fmt-card .ic-circle img { width: 48px; height: 48px }
.biz-d .fmt-t { font-size: 18px; line-height: 26px }
.biz-d .fmt-s { font-size: 15px; line-height: 22px; color: #767575 }

/* experience / SLA two-col */
.biz-d .row2 { display: flex; gap: 30px; margin-top: 24px; align-items: flex-start }
.biz-d .ph-img { border-radius: 20px; flex: none; background-size: cover; background-position: center }
.biz-d .cgrid { flex: 1; display: grid; gap: 30px }
.biz-d .tcard { padding: 20px; font-size: 18px; line-height: 26px }
.biz-d .tcard.full { grid-column: 1 / -1 }

/* docs grid */
.biz-d .docs { display: grid; grid-template-columns: repeat(2,565px); gap: 30px; margin-top: 24px }

/* price grid */
.biz-d .price-intro { font-size: 16px; line-height: 23px; margin-top: 24px; max-width: 1160px }
.biz-d .price-grid { display: grid; grid-template-columns: repeat(3,367px); gap: 30px; margin-top: 24px }
.biz-d .pcard { height: 213px; padding: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 18px; line-height: 26px }
.biz-d .pcard .ic-circle { width: 80px; height: 80px }
.biz-d .pcard .ic-circle img { width: 48px; height: 48px }
.biz-d .more { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 16px; line-height: 23px }
.biz-d .more a { color: #1AA5B8; text-decoration: none }
.biz-d .cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 40px }
.biz-d .btn-main { width: 368px; height: 50px; font-size: 15px }
.biz-d .cta-sub { font-size: 15px; line-height: 21px; color: #767575; text-align: center }
.biz-d .bigimg { height: 340px; border-radius: 12px 12px 0 0; margin: 40px 99px 0; background-size: cover; background-position: center }

/* form */
.biz-d .formcard { background: #fff; border-radius: 12px; padding: 48px 40px; margin-top: 0 }
.biz-d .form-h { font-size: 32px; line-height: 38px; margin-bottom: 24px }
.biz-d .frow { display: grid; grid-template-columns: repeat(3,340px); gap: 30px }
.biz-d .fcol { display: flex; flex-direction: column; gap: 8px }
.biz-d .flabel { font-size: 16px; line-height: 20px; display: flex; align-items: center; gap: 6px }
.biz-d .flabel img { width: 16px; height: 16px }
.biz-d .field { height: 50px; font-size: 15px }
.biz-d .field img { width: 16px; height: 16px }
.biz-d .contacts-row { display: flex; gap: 8px }
.biz-d .contacts-row .field { flex: 1 }
.biz-d .req { margin-top: 24px }
.biz-d .req-label { font-size: 16px; line-height: 20px; margin-bottom: 8px }
.biz-d .chk-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center }
.biz-d .chk-item { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 18px }
.biz-d .form-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 24px }
.biz-d .consent { font-size: 15px; line-height: 21px; color: #767575; text-align: center; max-width: 614px }
.biz-d .seo { font-size: 15px; line-height: 21px; color: #767575; margin-top: 40px }
.biz-d .biz-status { font-size: 14px; text-align: center; min-height: 1em }
.biz-d .biz-status--ok { color: #1a7a3f }
.biz-d .biz-status--err { color: #c0392b }

/* ── MOBILE (375) ───────────────────────────────────────────────────────── */
.biz-m { width: 375px; margin: 0 auto; background: #f4f0ed; padding: 64px 28px 40px }
.biz-m h1 { font-size: 24px; line-height: 33px; max-width: 310px }
.biz-m .intro { font-size: 16px; line-height: 23px; margin-top: 36px }
.biz-m h2 { font-size: 20px; line-height: 24px }
.biz-m .sec { margin-top: 40px }

.biz-m .fmt-grid { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 36px -28px 0; padding: 0 28px; scroll-padding-left: 28px }
.biz-m .fmt-card { width: 234px; flex: none; scroll-snap-align: start; height: 202px; padding: 20px; display: flex; flex-direction: column; gap: 12px }
.biz-m .fmt-card .ic-circle { width: 60px; height: 60px }
.biz-m .fmt-card .ic-circle img { width: 36px; height: 36px }
.biz-m .fmt-t { font-size: 16px; line-height: 23px }
.biz-m .fmt-s { font-size: 14px; line-height: 21px; color: #b5b0ac }

.biz-m .m-img { height: 260px; border-radius: 20px; margin-top: 24px; background-size: cover; background-position: center }
.biz-m .mcards { display: flex; flex-direction: column; gap: 12px; margin-top: 24px }
.biz-m .tcard { padding: 20px; font-size: 16px; line-height: 23px }

.biz-m .price-intro { font-size: 14px; line-height: 20px; margin-top: 16px }
.biz-m .pgrid { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 24px -28px 0; padding: 0 28px; scroll-padding-left: 28px }
.biz-m .pcard { width: 234px; flex: none; scroll-snap-align: start; height: 202px; padding: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 23px }
.biz-m .pcard .ic-circle { width: 60px; height: 60px }
.biz-m .pcard .ic-circle img { width: 36px; height: 36px }
.biz-m .more { font-size: 16px; line-height: 23px; margin-top: 24px }
.biz-m .more a { color: #1AA5B8; text-decoration: none }
.biz-m .btn-main { width: 100%; height: 50px; font-size: 15px; margin-top: 16px }
.biz-m .cta-sub { font-size: 12px; line-height: 16px; color: #767575; text-align: center; margin-top: 12px }
.biz-m .bigimg { height: 210px; border-radius: 12px 12px 0 0; margin-top: 48px; background-size: cover; background-position: center }

.biz-m .formcard { background: #fff; border-radius: 12px; padding: 24px 28px; margin: 0 -28px }
.biz-m .form-inner { padding: 0 }
.biz-m .form-h { font-size: 20px; line-height: 24px; margin-bottom: 24px }
.biz-m .fcol { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px }
.biz-m .flabel { font-size: 16px; line-height: 20px }
.biz-m .field { height: 50px; font-size: 15px }
.biz-m .field img { width: 16px; height: 16px }
.biz-m .contacts-row { display: flex; gap: 8px }
.biz-m .contacts-row .name { width: 140px; flex: none }
.biz-m .contacts-row .phone { flex: 1; white-space: nowrap }
.biz-m .req-label { font-size: 16px; line-height: 20px; margin-bottom: 8px }
.biz-m .chk-col { display: flex; flex-direction: column; gap: 16px }
.biz-m .chk-row2 { display: flex; gap: 16px }
.biz-m .chk-item { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 18px }
.biz-m .consent { font-size: 12px; line-height: 16px; color: #767575; text-align: center; margin-top: 24px }
.biz-m .form-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px }
.biz-m .form-cta .btn-main { margin-top: 0 }
.biz-m .form-cta .consent { margin-top: 0 }
.biz-m .seo { font-size: 12px; line-height: 16px; color: #767575; margin-top: 48px }
.biz-m .biz-status { font-size: 14px; text-align: center; min-height: 1em }
.biz-m .biz-status--ok { color: #1a7a3f }
.biz-m .biz-status--err { color: #c0392b }

@media (min-width: 768px) {
  .biz-m { display: none }
  .biz-d { display: block }
}