

/* Start:/local/templates/dmtlab/css/bootstrap-grid.min.css?178972777651789*/
/*!
 * Bootstrap Grid v5.3.8 (https://getbootstrap.com/)
 * Copyright 2011-2025 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width:576px){.container,.container-sm{max-width:540px}}@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}}@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}}@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{box-sizing:border-box;flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.66666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.33333333%}.col-2{flex:0 0 auto;width:16.66666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.33333333%}.col-5{flex:0 0 auto;width:41.66666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.33333333%}.col-8{flex:0 0 auto;width:66.66666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.33333333%}.col-11{flex:0 0 auto;width:91.66666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}.g-0,.gx-0{--bs-gutter-x:0}.g-0,.gy-0{--bs-gutter-y:0}.g-1,.gx-1{--bs-gutter-x:0.25rem}.g-1,.gy-1{--bs-gutter-y:0.25rem}.g-2,.gx-2{--bs-gutter-x:0.5rem}.g-2,.gy-2{--bs-gutter-y:0.5rem}.g-3,.gx-3{--bs-gutter-x:1rem}.g-3,.gy-3{--bs-gutter-y:1rem}.g-4,.gx-4{--bs-gutter-x:1.5rem}.g-4,.gy-4{--bs-gutter-y:1.5rem}.g-5,.gx-5{--bs-gutter-x:3rem}.g-5,.gy-5{--bs-gutter-y:3rem}@media (min-width:576px){.col-sm{flex:1 0 0}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.66666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.33333333%}.col-sm-2{flex:0 0 auto;width:16.66666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-5{flex:0 0 auto;width:41.66666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.33333333%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.33333333%}.col-sm-11{flex:0 0 auto;width:91.66666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}.g-sm-0,.gx-sm-0{--bs-gutter-x:0}.g-sm-0,.gy-sm-0{--bs-gutter-y:0}.g-sm-1,.gx-sm-1{--bs-gutter-x:0.25rem}.g-sm-1,.gy-sm-1{--bs-gutter-y:0.25rem}.g-sm-2,.gx-sm-2{--bs-gutter-x:0.5rem}.g-sm-2,.gy-sm-2{--bs-gutter-y:0.5rem}.g-sm-3,.gx-sm-3{--bs-gutter-x:1rem}.g-sm-3,.gy-sm-3{--bs-gutter-y:1rem}.g-sm-4,.gx-sm-4{--bs-gutter-x:1.5rem}.g-sm-4,.gy-sm-4{--bs-gutter-y:1.5rem}.g-sm-5,.gx-sm-5{--bs-gutter-x:3rem}.g-sm-5,.gy-sm-5{--bs-gutter-y:3rem}}@media (min-width:768px){.col-md{flex:1 0 0}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.66666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.33333333%}.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-5{flex:0 0 auto;width:41.66666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.33333333%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-11{flex:0 0 auto;width:91.66666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}.g-md-0,.gx-md-0{--bs-gutter-x:0}.g-md-0,.gy-md-0{--bs-gutter-y:0}.g-md-1,.gx-md-1{--bs-gutter-x:0.25rem}.g-md-1,.gy-md-1{--bs-gutter-y:0.25rem}.g-md-2,.gx-md-2{--bs-gutter-x:0.5rem}.g-md-2,.gy-md-2{--bs-gutter-y:0.5rem}.g-md-3,.gx-md-3{--bs-gutter-x:1rem}.g-md-3,.gy-md-3{--bs-gutter-y:1rem}.g-md-4,.gx-md-4{--bs-gutter-x:1.5rem}.g-md-4,.gy-md-4{--bs-gutter-y:1.5rem}.g-md-5,.gx-md-5{--bs-gutter-x:3rem}.g-md-5,.gy-md-5{--bs-gutter-y:3rem}}@media (min-width:992px){.col-lg{flex:1 0 0}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.66666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.33333333%}.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}.col-lg-11{flex:0 0 auto;width:91.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}.g-lg-0,.gx-lg-0{--bs-gutter-x:0}.g-lg-0,.gy-lg-0{--bs-gutter-y:0}.g-lg-1,.gx-lg-1{--bs-gutter-x:0.25rem}.g-lg-1,.gy-lg-1{--bs-gutter-y:0.25rem}.g-lg-2,.gx-lg-2{--bs-gutter-x:0.5rem}.g-lg-2,.gy-lg-2{--bs-gutter-y:0.5rem}.g-lg-3,.gx-lg-3{--bs-gutter-x:1rem}.g-lg-3,.gy-lg-3{--bs-gutter-y:1rem}.g-lg-4,.gx-lg-4{--bs-gutter-x:1.5rem}.g-lg-4,.gy-lg-4{--bs-gutter-y:1.5rem}.g-lg-5,.gx-lg-5{--bs-gutter-x:3rem}.g-lg-5,.gy-lg-5{--bs-gutter-y:3rem}}@media (min-width:1200px){.col-xl{flex:1 0 0}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.66666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.33333333%}.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.33333333%}.col-xl-11{flex:0 0 auto;width:91.66666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}.g-xl-0,.gx-xl-0{--bs-gutter-x:0}.g-xl-0,.gy-xl-0{--bs-gutter-y:0}.g-xl-1,.gx-xl-1{--bs-gutter-x:0.25rem}.g-xl-1,.gy-xl-1{--bs-gutter-y:0.25rem}.g-xl-2,.gx-xl-2{--bs-gutter-x:0.5rem}.g-xl-2,.gy-xl-2{--bs-gutter-y:0.5rem}.g-xl-3,.gx-xl-3{--bs-gutter-x:1rem}.g-xl-3,.gy-xl-3{--bs-gutter-y:1rem}.g-xl-4,.gx-xl-4{--bs-gutter-x:1.5rem}.g-xl-4,.gy-xl-4{--bs-gutter-y:1.5rem}.g-xl-5,.gx-xl-5{--bs-gutter-x:3rem}.g-xl-5,.gy-xl-5{--bs-gutter-y:3rem}}@media (min-width:1400px){.col-xxl{flex:1 0 0}.row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.row-cols-xxl-1>*{flex:0 0 auto;width:100%}.row-cols-xxl-2>*{flex:0 0 auto;width:50%}.row-cols-xxl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xxl-4>*{flex:0 0 auto;width:25%}.row-cols-xxl-5>*{flex:0 0 auto;width:20%}.row-cols-xxl-6>*{flex:0 0 auto;width:16.66666667%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.33333333%}.col-xxl-2{flex:0 0 auto;width:16.66666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.33333333%}.col-xxl-5{flex:0 0 auto;width:41.66666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.33333333%}.col-xxl-8{flex:0 0 auto;width:66.66666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.33333333%}.col-xxl-11{flex:0 0 auto;width:91.66666667%}.col-xxl-12{flex:0 0 auto;width:100%}.offset-xxl-0{margin-left:0}.offset-xxl-1{margin-left:8.33333333%}.offset-xxl-2{margin-left:16.66666667%}.offset-xxl-3{margin-left:25%}.offset-xxl-4{margin-left:33.33333333%}.offset-xxl-5{margin-left:41.66666667%}.offset-xxl-6{margin-left:50%}.offset-xxl-7{margin-left:58.33333333%}.offset-xxl-8{margin-left:66.66666667%}.offset-xxl-9{margin-left:75%}.offset-xxl-10{margin-left:83.33333333%}.offset-xxl-11{margin-left:91.66666667%}.g-xxl-0,.gx-xxl-0{--bs-gutter-x:0}.g-xxl-0,.gy-xxl-0{--bs-gutter-y:0}.g-xxl-1,.gx-xxl-1{--bs-gutter-x:0.25rem}.g-xxl-1,.gy-xxl-1{--bs-gutter-y:0.25rem}.g-xxl-2,.gx-xxl-2{--bs-gutter-x:0.5rem}.g-xxl-2,.gy-xxl-2{--bs-gutter-y:0.5rem}.g-xxl-3,.gx-xxl-3{--bs-gutter-x:1rem}.g-xxl-3,.gy-xxl-3{--bs-gutter-y:1rem}.g-xxl-4,.gx-xxl-4{--bs-gutter-x:1.5rem}.g-xxl-4,.gy-xxl-4{--bs-gutter-y:1.5rem}.g-xxl-5,.gx-xxl-5{--bs-gutter-x:3rem}.g-xxl-5,.gy-xxl-5{--bs-gutter-y:3rem}}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-grid{display:grid!important}.d-inline-grid{display:inline-grid!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-none{display:none!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.justify-content-evenly{justify-content:space-evenly!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-auto{margin:auto!important}.mx-0{margin-right:0!important;margin-left:0!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-5{margin-right:3rem!important;margin-left:3rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-auto{margin-top:auto!important}.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-4{margin-right:1.5rem!important}.me-5{margin-right:3rem!important}.me-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.mb-auto{margin-bottom:auto!important}.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.ms-5{margin-left:3rem!important}.ms-auto{margin-left:auto!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-5{padding-right:3rem!important;padding-left:3rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}.pe-0{padding-right:0!important}.pe-1{padding-right:.25rem!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}.pe-4{padding-right:1.5rem!important}.pe-5{padding-right:3rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}.ps-0{padding-left:0!important}.ps-1{padding-left:.25rem!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}.ps-4{padding-left:1.5rem!important}.ps-5{padding-left:3rem!important}@media (min-width:576px){.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-grid{display:grid!important}.d-sm-inline-grid{display:inline-grid!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.d-sm-none{display:none!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.justify-content-sm-evenly{justify-content:space-evenly!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}.m-sm-0{margin:0!important}.m-sm-1{margin:.25rem!important}.m-sm-2{margin:.5rem!important}.m-sm-3{margin:1rem!important}.m-sm-4{margin:1.5rem!important}.m-sm-5{margin:3rem!important}.m-sm-auto{margin:auto!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-sm-0{margin-top:0!important}.mt-sm-1{margin-top:.25rem!important}.mt-sm-2{margin-top:.5rem!important}.mt-sm-3{margin-top:1rem!important}.mt-sm-4{margin-top:1.5rem!important}.mt-sm-5{margin-top:3rem!important}.mt-sm-auto{margin-top:auto!important}.me-sm-0{margin-right:0!important}.me-sm-1{margin-right:.25rem!important}.me-sm-2{margin-right:.5rem!important}.me-sm-3{margin-right:1rem!important}.me-sm-4{margin-right:1.5rem!important}.me-sm-5{margin-right:3rem!important}.me-sm-auto{margin-right:auto!important}.mb-sm-0{margin-bottom:0!important}.mb-sm-1{margin-bottom:.25rem!important}.mb-sm-2{margin-bottom:.5rem!important}.mb-sm-3{margin-bottom:1rem!important}.mb-sm-4{margin-bottom:1.5rem!important}.mb-sm-5{margin-bottom:3rem!important}.mb-sm-auto{margin-bottom:auto!important}.ms-sm-0{margin-left:0!important}.ms-sm-1{margin-left:.25rem!important}.ms-sm-2{margin-left:.5rem!important}.ms-sm-3{margin-left:1rem!important}.ms-sm-4{margin-left:1.5rem!important}.ms-sm-5{margin-left:3rem!important}.ms-sm-auto{margin-left:auto!important}.p-sm-0{padding:0!important}.p-sm-1{padding:.25rem!important}.p-sm-2{padding:.5rem!important}.p-sm-3{padding:1rem!important}.p-sm-4{padding:1.5rem!important}.p-sm-5{padding:3rem!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-sm-0{padding-top:0!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-2{padding-top:.5rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.5rem!important}.pt-sm-5{padding-top:3rem!important}.pe-sm-0{padding-right:0!important}.pe-sm-1{padding-right:.25rem!important}.pe-sm-2{padding-right:.5rem!important}.pe-sm-3{padding-right:1rem!important}.pe-sm-4{padding-right:1.5rem!important}.pe-sm-5{padding-right:3rem!important}.pb-sm-0{padding-bottom:0!important}.pb-sm-1{padding-bottom:.25rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pb-sm-3{padding-bottom:1rem!important}.pb-sm-4{padding-bottom:1.5rem!important}.pb-sm-5{padding-bottom:3rem!important}.ps-sm-0{padding-left:0!important}.ps-sm-1{padding-left:.25rem!important}.ps-sm-2{padding-left:.5rem!important}.ps-sm-3{padding-left:1rem!important}.ps-sm-4{padding-left:1.5rem!important}.ps-sm-5{padding-left:3rem!important}}@media (min-width:768px){.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-grid{display:grid!important}.d-md-inline-grid{display:inline-grid!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.d-md-none{display:none!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.justify-content-md-evenly{justify-content:space-evenly!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}.m-md-0{margin:0!important}.m-md-1{margin:.25rem!important}.m-md-2{margin:.5rem!important}.m-md-3{margin:1rem!important}.m-md-4{margin:1.5rem!important}.m-md-5{margin:3rem!important}.m-md-auto{margin:auto!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-md-0{margin-top:0!important}.mt-md-1{margin-top:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mt-md-3{margin-top:1rem!important}.mt-md-4{margin-top:1.5rem!important}.mt-md-5{margin-top:3rem!important}.mt-md-auto{margin-top:auto!important}.me-md-0{margin-right:0!important}.me-md-1{margin-right:.25rem!important}.me-md-2{margin-right:.5rem!important}.me-md-3{margin-right:1rem!important}.me-md-4{margin-right:1.5rem!important}.me-md-5{margin-right:3rem!important}.me-md-auto{margin-right:auto!important}.mb-md-0{margin-bottom:0!important}.mb-md-1{margin-bottom:.25rem!important}.mb-md-2{margin-bottom:.5rem!important}.mb-md-3{margin-bottom:1rem!important}.mb-md-4{margin-bottom:1.5rem!important}.mb-md-5{margin-bottom:3rem!important}.mb-md-auto{margin-bottom:auto!important}.ms-md-0{margin-left:0!important}.ms-md-1{margin-left:.25rem!important}.ms-md-2{margin-left:.5rem!important}.ms-md-3{margin-left:1rem!important}.ms-md-4{margin-left:1.5rem!important}.ms-md-5{margin-left:3rem!important}.ms-md-auto{margin-left:auto!important}.p-md-0{padding:0!important}.p-md-1{padding:.25rem!important}.p-md-2{padding:.5rem!important}.p-md-3{padding:1rem!important}.p-md-4{padding:1.5rem!important}.p-md-5{padding:3rem!important}.px-md-0{padding-right:0!important;padding-left:0!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-md-5{padding-right:3rem!important;padding-left:3rem!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-md-0{padding-top:0!important}.pt-md-1{padding-top:.25rem!important}.pt-md-2{padding-top:.5rem!important}.pt-md-3{padding-top:1rem!important}.pt-md-4{padding-top:1.5rem!important}.pt-md-5{padding-top:3rem!important}.pe-md-0{padding-right:0!important}.pe-md-1{padding-right:.25rem!important}.pe-md-2{padding-right:.5rem!important}.pe-md-3{padding-right:1rem!important}.pe-md-4{padding-right:1.5rem!important}.pe-md-5{padding-right:3rem!important}.pb-md-0{padding-bottom:0!important}.pb-md-1{padding-bottom:.25rem!important}.pb-md-2{padding-bottom:.5rem!important}.pb-md-3{padding-bottom:1rem!important}.pb-md-4{padding-bottom:1.5rem!important}.pb-md-5{padding-bottom:3rem!important}.ps-md-0{padding-left:0!important}.ps-md-1{padding-left:.25rem!important}.ps-md-2{padding-left:.5rem!important}.ps-md-3{padding-left:1rem!important}.ps-md-4{padding-left:1.5rem!important}.ps-md-5{padding-left:3rem!important}}@media (min-width:992px){.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-grid{display:grid!important}.d-lg-inline-grid{display:inline-grid!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.d-lg-none{display:none!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.justify-content-lg-evenly{justify-content:space-evenly!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}.m-lg-0{margin:0!important}.m-lg-1{margin:.25rem!important}.m-lg-2{margin:.5rem!important}.m-lg-3{margin:1rem!important}.m-lg-4{margin:1.5rem!important}.m-lg-5{margin:3rem!important}.m-lg-auto{margin:auto!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mt-lg-4{margin-top:1.5rem!important}.mt-lg-5{margin-top:3rem!important}.mt-lg-auto{margin-top:auto!important}.me-lg-0{margin-right:0!important}.me-lg-1{margin-right:.25rem!important}.me-lg-2{margin-right:.5rem!important}.me-lg-3{margin-right:1rem!important}.me-lg-4{margin-right:1.5rem!important}.me-lg-5{margin-right:3rem!important}.me-lg-auto{margin-right:auto!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-1{margin-bottom:.25rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mb-lg-3{margin-bottom:1rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.mb-lg-5{margin-bottom:3rem!important}.mb-lg-auto{margin-bottom:auto!important}.ms-lg-0{margin-left:0!important}.ms-lg-1{margin-left:.25rem!important}.ms-lg-2{margin-left:.5rem!important}.ms-lg-3{margin-left:1rem!important}.ms-lg-4{margin-left:1.5rem!important}.ms-lg-5{margin-left:3rem!important}.ms-lg-auto{margin-left:auto!important}.p-lg-0{padding:0!important}.p-lg-1{padding:.25rem!important}.p-lg-2{padding:.5rem!important}.p-lg-3{padding:1rem!important}.p-lg-4{padding:1.5rem!important}.p-lg-5{padding:3rem!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-lg-0{padding-top:0!important}.pt-lg-1{padding-top:.25rem!important}.pt-lg-2{padding-top:.5rem!important}.pt-lg-3{padding-top:1rem!important}.pt-lg-4{padding-top:1.5rem!important}.pt-lg-5{padding-top:3rem!important}.pe-lg-0{padding-right:0!important}.pe-lg-1{padding-right:.25rem!important}.pe-lg-2{padding-right:.5rem!important}.pe-lg-3{padding-right:1rem!important}.pe-lg-4{padding-right:1.5rem!important}.pe-lg-5{padding-right:3rem!important}.pb-lg-0{padding-bottom:0!important}.pb-lg-1{padding-bottom:.25rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pb-lg-3{padding-bottom:1rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.pb-lg-5{padding-bottom:3rem!important}.ps-lg-0{padding-left:0!important}.ps-lg-1{padding-left:.25rem!important}.ps-lg-2{padding-left:.5rem!important}.ps-lg-3{padding-left:1rem!important}.ps-lg-4{padding-left:1.5rem!important}.ps-lg-5{padding-left:3rem!important}}@media (min-width:1200px){.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-grid{display:grid!important}.d-xl-inline-grid{display:inline-grid!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.d-xl-none{display:none!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.justify-content-xl-evenly{justify-content:space-evenly!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}.m-xl-0{margin:0!important}.m-xl-1{margin:.25rem!important}.m-xl-2{margin:.5rem!important}.m-xl-3{margin:1rem!important}.m-xl-4{margin:1.5rem!important}.m-xl-5{margin:3rem!important}.m-xl-auto{margin:auto!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xl-0{margin-top:0!important}.mt-xl-1{margin-top:.25rem!important}.mt-xl-2{margin-top:.5rem!important}.mt-xl-3{margin-top:1rem!important}.mt-xl-4{margin-top:1.5rem!important}.mt-xl-5{margin-top:3rem!important}.mt-xl-auto{margin-top:auto!important}.me-xl-0{margin-right:0!important}.me-xl-1{margin-right:.25rem!important}.me-xl-2{margin-right:.5rem!important}.me-xl-3{margin-right:1rem!important}.me-xl-4{margin-right:1.5rem!important}.me-xl-5{margin-right:3rem!important}.me-xl-auto{margin-right:auto!important}.mb-xl-0{margin-bottom:0!important}.mb-xl-1{margin-bottom:.25rem!important}.mb-xl-2{margin-bottom:.5rem!important}.mb-xl-3{margin-bottom:1rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.mb-xl-5{margin-bottom:3rem!important}.mb-xl-auto{margin-bottom:auto!important}.ms-xl-0{margin-left:0!important}.ms-xl-1{margin-left:.25rem!important}.ms-xl-2{margin-left:.5rem!important}.ms-xl-3{margin-left:1rem!important}.ms-xl-4{margin-left:1.5rem!important}.ms-xl-5{margin-left:3rem!important}.ms-xl-auto{margin-left:auto!important}.p-xl-0{padding:0!important}.p-xl-1{padding:.25rem!important}.p-xl-2{padding:.5rem!important}.p-xl-3{padding:1rem!important}.p-xl-4{padding:1.5rem!important}.p-xl-5{padding:3rem!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xl-0{padding-top:0!important}.pt-xl-1{padding-top:.25rem!important}.pt-xl-2{padding-top:.5rem!important}.pt-xl-3{padding-top:1rem!important}.pt-xl-4{padding-top:1.5rem!important}.pt-xl-5{padding-top:3rem!important}.pe-xl-0{padding-right:0!important}.pe-xl-1{padding-right:.25rem!important}.pe-xl-2{padding-right:.5rem!important}.pe-xl-3{padding-right:1rem!important}.pe-xl-4{padding-right:1.5rem!important}.pe-xl-5{padding-right:3rem!important}.pb-xl-0{padding-bottom:0!important}.pb-xl-1{padding-bottom:.25rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pb-xl-3{padding-bottom:1rem!important}.pb-xl-4{padding-bottom:1.5rem!important}.pb-xl-5{padding-bottom:3rem!important}.ps-xl-0{padding-left:0!important}.ps-xl-1{padding-left:.25rem!important}.ps-xl-2{padding-left:.5rem!important}.ps-xl-3{padding-left:1rem!important}.ps-xl-4{padding-left:1.5rem!important}.ps-xl-5{padding-left:3rem!important}}@media (min-width:1400px){.d-xxl-inline{display:inline!important}.d-xxl-inline-block{display:inline-block!important}.d-xxl-block{display:block!important}.d-xxl-grid{display:grid!important}.d-xxl-inline-grid{display:inline-grid!important}.d-xxl-table{display:table!important}.d-xxl-table-row{display:table-row!important}.d-xxl-table-cell{display:table-cell!important}.d-xxl-flex{display:flex!important}.d-xxl-inline-flex{display:inline-flex!important}.d-xxl-none{display:none!important}.flex-xxl-fill{flex:1 1 auto!important}.flex-xxl-row{flex-direction:row!important}.flex-xxl-column{flex-direction:column!important}.flex-xxl-row-reverse{flex-direction:row-reverse!important}.flex-xxl-column-reverse{flex-direction:column-reverse!important}.flex-xxl-grow-0{flex-grow:0!important}.flex-xxl-grow-1{flex-grow:1!important}.flex-xxl-shrink-0{flex-shrink:0!important}.flex-xxl-shrink-1{flex-shrink:1!important}.flex-xxl-wrap{flex-wrap:wrap!important}.flex-xxl-nowrap{flex-wrap:nowrap!important}.flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xxl-start{justify-content:flex-start!important}.justify-content-xxl-end{justify-content:flex-end!important}.justify-content-xxl-center{justify-content:center!important}.justify-content-xxl-between{justify-content:space-between!important}.justify-content-xxl-around{justify-content:space-around!important}.justify-content-xxl-evenly{justify-content:space-evenly!important}.align-items-xxl-start{align-items:flex-start!important}.align-items-xxl-end{align-items:flex-end!important}.align-items-xxl-center{align-items:center!important}.align-items-xxl-baseline{align-items:baseline!important}.align-items-xxl-stretch{align-items:stretch!important}.align-content-xxl-start{align-content:flex-start!important}.align-content-xxl-end{align-content:flex-end!important}.align-content-xxl-center{align-content:center!important}.align-content-xxl-between{align-content:space-between!important}.align-content-xxl-around{align-content:space-around!important}.align-content-xxl-stretch{align-content:stretch!important}.align-self-xxl-auto{align-self:auto!important}.align-self-xxl-start{align-self:flex-start!important}.align-self-xxl-end{align-self:flex-end!important}.align-self-xxl-center{align-self:center!important}.align-self-xxl-baseline{align-self:baseline!important}.align-self-xxl-stretch{align-self:stretch!important}.order-xxl-first{order:-1!important}.order-xxl-0{order:0!important}.order-xxl-1{order:1!important}.order-xxl-2{order:2!important}.order-xxl-3{order:3!important}.order-xxl-4{order:4!important}.order-xxl-5{order:5!important}.order-xxl-last{order:6!important}.m-xxl-0{margin:0!important}.m-xxl-1{margin:.25rem!important}.m-xxl-2{margin:.5rem!important}.m-xxl-3{margin:1rem!important}.m-xxl-4{margin:1.5rem!important}.m-xxl-5{margin:3rem!important}.m-xxl-auto{margin:auto!important}.mx-xxl-0{margin-right:0!important;margin-left:0!important}.mx-xxl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xxl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xxl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xxl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xxl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xxl-auto{margin-right:auto!important;margin-left:auto!important}.my-xxl-0{margin-top:0!important;margin-bottom:0!important}.my-xxl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xxl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xxl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xxl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xxl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xxl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xxl-0{margin-top:0!important}.mt-xxl-1{margin-top:.25rem!important}.mt-xxl-2{margin-top:.5rem!important}.mt-xxl-3{margin-top:1rem!important}.mt-xxl-4{margin-top:1.5rem!important}.mt-xxl-5{margin-top:3rem!important}.mt-xxl-auto{margin-top:auto!important}.me-xxl-0{margin-right:0!important}.me-xxl-1{margin-right:.25rem!important}.me-xxl-2{margin-right:.5rem!important}.me-xxl-3{margin-right:1rem!important}.me-xxl-4{margin-right:1.5rem!important}.me-xxl-5{margin-right:3rem!important}.me-xxl-auto{margin-right:auto!important}.mb-xxl-0{margin-bottom:0!important}.mb-xxl-1{margin-bottom:.25rem!important}.mb-xxl-2{margin-bottom:.5rem!important}.mb-xxl-3{margin-bottom:1rem!important}.mb-xxl-4{margin-bottom:1.5rem!important}.mb-xxl-5{margin-bottom:3rem!important}.mb-xxl-auto{margin-bottom:auto!important}.ms-xxl-0{margin-left:0!important}.ms-xxl-1{margin-left:.25rem!important}.ms-xxl-2{margin-left:.5rem!important}.ms-xxl-3{margin-left:1rem!important}.ms-xxl-4{margin-left:1.5rem!important}.ms-xxl-5{margin-left:3rem!important}.ms-xxl-auto{margin-left:auto!important}.p-xxl-0{padding:0!important}.p-xxl-1{padding:.25rem!important}.p-xxl-2{padding:.5rem!important}.p-xxl-3{padding:1rem!important}.p-xxl-4{padding:1.5rem!important}.p-xxl-5{padding:3rem!important}.px-xxl-0{padding-right:0!important;padding-left:0!important}.px-xxl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xxl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xxl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xxl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xxl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xxl-0{padding-top:0!important;padding-bottom:0!important}.py-xxl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xxl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xxl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xxl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xxl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xxl-0{padding-top:0!important}.pt-xxl-1{padding-top:.25rem!important}.pt-xxl-2{padding-top:.5rem!important}.pt-xxl-3{padding-top:1rem!important}.pt-xxl-4{padding-top:1.5rem!important}.pt-xxl-5{padding-top:3rem!important}.pe-xxl-0{padding-right:0!important}.pe-xxl-1{padding-right:.25rem!important}.pe-xxl-2{padding-right:.5rem!important}.pe-xxl-3{padding-right:1rem!important}.pe-xxl-4{padding-right:1.5rem!important}.pe-xxl-5{padding-right:3rem!important}.pb-xxl-0{padding-bottom:0!important}.pb-xxl-1{padding-bottom:.25rem!important}.pb-xxl-2{padding-bottom:.5rem!important}.pb-xxl-3{padding-bottom:1rem!important}.pb-xxl-4{padding-bottom:1.5rem!important}.pb-xxl-5{padding-bottom:3rem!important}.ps-xxl-0{padding-left:0!important}.ps-xxl-1{padding-left:.25rem!important}.ps-xxl-2{padding-left:.5rem!important}.ps-xxl-3{padding-left:1rem!important}.ps-xxl-4{padding-left:1.5rem!important}.ps-xxl-5{padding-left:3rem!important}}@media print{.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-grid{display:grid!important}.d-print-inline-grid{display:inline-grid!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}.d-print-none{display:none!important}}
/*# sourceMappingURL=bootstrap-grid.min.css.map */
/* End */


/* Start:/local/templates/dmtlab/css/fancybox.css?178972777615598*/
.carousel{position:relative;box-sizing:border-box}.carousel *,.carousel *:before,.carousel *:after{box-sizing:inherit}.carousel.is-draggable{cursor:move;cursor:grab}.carousel.is-dragging{cursor:move;cursor:grabbing}.carousel__viewport{position:relative;overflow:hidden;max-width:100%;max-height:100%}.carousel__track{display:flex}.carousel__slide{flex:0 0 auto;width:var(--carousel-slide-width, 60%);max-width:100%;padding:1rem;position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.has-dots{margin-bottom:calc(0.5rem + 22px)}.carousel__dots{margin:0 auto;padding:0;position:absolute;top:calc(100% + 0.5rem);left:0;right:0;display:flex;justify-content:center;list-style:none;user-select:none}.carousel__dots .carousel__dot{margin:0;padding:0;display:block;position:relative;width:22px;height:22px;cursor:pointer}.carousel__dots .carousel__dot:after{content:"";width:8px;height:8px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:currentColor;opacity:.25;transition:opacity .15s ease-in-out}.carousel__dots .carousel__dot.is-selected:after{opacity:1}.carousel__button{width:var(--carousel-button-width, 48px);height:var(--carousel-button-height, 48px);padding:0;border:0;display:flex;justify-content:center;align-items:center;pointer-events:all;cursor:pointer;color:var(--carousel-button-color, currentColor);background:var(--carousel-button-bg, transparent);border-radius:var(--carousel-button-border-radius, 50%);box-shadow:var(--carousel-button-shadow, none);transition:opacity .15s ease}.carousel__button.is-prev,.carousel__button.is-next{position:absolute;top:50%;transform:translateY(-50%)}.carousel__button.is-prev{left:10px}.carousel__button.is-next{right:10px}.carousel__button[disabled]{cursor:default;opacity:.3}.carousel__button svg{width:var(--carousel-button-svg-width, 50%);height:var(--carousel-button-svg-height, 50%);fill:none;stroke:currentColor;stroke-width:var(--carousel-button-svg-stroke-width, 1.5);stroke-linejoin:bevel;stroke-linecap:round;filter:var(--carousel-button-svg-filter, none);pointer-events:none}html.with-fancybox{scroll-behavior:auto}body.compensate-for-scrollbar{overflow:hidden !important;touch-action:none}.fancybox__container{position:fixed;top:0;left:0;bottom:0;right:0;direction:ltr;margin:0;padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);box-sizing:border-box;display:flex;flex-direction:column;color:var(--fancybox-color, #fff);-webkit-tap-highlight-color:rgba(0,0,0,0);overflow:hidden;z-index:1050;outline:none;transform-origin:top left;--carousel-button-width: 48px;--carousel-button-height: 48px;--carousel-button-svg-width: 24px;--carousel-button-svg-height: 24px;--carousel-button-svg-stroke-width: 2.5;--carousel-button-svg-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4))}.fancybox__container *,.fancybox__container *::before,.fancybox__container *::after{box-sizing:inherit}.fancybox__container :focus{outline:none}body:not(.is-using-mouse) .fancybox__container :focus{box-shadow:0 0 0 1px #fff,0 0 0 2px var(--fancybox-accent-color, rgba(1, 210, 232, 0.94))}@media all and (min-width: 1024px){.fancybox__container{--carousel-button-width:48px;--carousel-button-height:48px;--carousel-button-svg-width:27px;--carousel-button-svg-height:27px}}.fancybox__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:var(--fancybox-bg, rgba(24, 24, 27, 0.92))}.fancybox__carousel{position:relative;flex:1 1 auto;min-height:0;height:100%;z-index:10}.fancybox__carousel.has-dots{margin-bottom:calc(0.5rem + 22px)}.fancybox__viewport{position:relative;width:100%;height:100%;overflow:visible;cursor:default}.fancybox__track{display:flex;height:100%}.fancybox__slide{flex:0 0 auto;width:100%;max-width:100%;margin:0;padding:48px 8px 8px 8px;position:relative;overscroll-behavior:contain;display:flex;flex-direction:column;outline:0;overflow:auto;--carousel-button-width: 36px;--carousel-button-height: 36px;--carousel-button-svg-width: 22px;--carousel-button-svg-height: 22px}.fancybox__slide::before,.fancybox__slide::after{content:"";flex:0 0 0;margin:auto}@media all and (min-width: 1024px){.fancybox__slide{padding:64px 100px}}.fancybox__content{margin:0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);padding:36px;color:var(--fancybox-content-color, #374151);background:var(--fancybox-content-bg, #fff);position:relative;align-self:center;display:flex;flex-direction:column;z-index:20}.fancybox__content :focus:not(.carousel__button.is-close){outline:thin dotted;box-shadow:none}.fancybox__caption{align-self:center;max-width:100%;margin:0;padding:1rem 0 0 0;line-height:1.375;color:var(--fancybox-color, currentColor);visibility:visible;cursor:auto;flex-shrink:0;overflow-wrap:anywhere}.is-loading .fancybox__caption{visibility:hidden}.fancybox__container>.carousel__dots{top:100%;color:var(--fancybox-color, #fff)}.fancybox__nav .carousel__button{z-index:40}.fancybox__nav .carousel__button.is-next{right:8px}@media all and (min-width: 1024px){.fancybox__nav .carousel__button.is-next{right:40px}}.fancybox__nav .carousel__button.is-prev{left:8px}@media all and (min-width: 1024px){.fancybox__nav .carousel__button.is-prev{left:40px}}.carousel__button.is-close{position:absolute;top:8px;right:8px;top:calc(env(safe-area-inset-top, 0px) + 8px);right:calc(env(safe-area-inset-right, 0px) + 8px);z-index:40}@media all and (min-width: 1024px){.carousel__button.is-close{right:40px}}.fancybox__content>.carousel__button.is-close{position:absolute;top:-40px;right:0;color:var(--fancybox-color, #fff)}.fancybox__no-click,.fancybox__no-click button{pointer-events:none}.fancybox__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:50px;height:50px;color:var(--fancybox-color, currentColor)}.fancybox__slide .fancybox__spinner{cursor:pointer;z-index:1053}.fancybox__spinner svg{animation:fancybox-rotate 2s linear infinite;transform-origin:center center;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;height:100%}.fancybox__spinner svg circle{fill:none;stroke-width:2.75;stroke-miterlimit:10;stroke-dasharray:1,200;stroke-dashoffset:0;animation:fancybox-dash 1.5s ease-in-out infinite;stroke-linecap:round;stroke:currentColor}@keyframes fancybox-rotate{100%{transform:rotate(360deg)}}@keyframes fancybox-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.fancybox__backdrop,.fancybox__caption,.fancybox__nav,.carousel__dots,.carousel__button.is-close{opacity:var(--fancybox-opacity, 1)}.fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop,.fancybox__container.is-animated[aria-hidden=false] .fancybox__caption,.fancybox__container.is-animated[aria-hidden=false] .fancybox__nav,.fancybox__container.is-animated[aria-hidden=false] .carousel__dots,.fancybox__container.is-animated[aria-hidden=false] .carousel__button.is-close{animation:.15s ease backwards fancybox-fadeIn}.fancybox__container.is-animated.is-closing .fancybox__backdrop,.fancybox__container.is-animated.is-closing .fancybox__caption,.fancybox__container.is-animated.is-closing .fancybox__nav,.fancybox__container.is-animated.is-closing .carousel__dots,.fancybox__container.is-animated.is-closing .carousel__button.is-close{animation:.15s ease both fancybox-fadeOut}.fancybox-fadeIn{animation:.15s ease both fancybox-fadeIn}.fancybox-fadeOut{animation:.1s ease both fancybox-fadeOut}.fancybox-zoomInUp{animation:.2s ease both fancybox-zoomInUp}.fancybox-zoomOutDown{animation:.15s ease both fancybox-zoomOutDown}.fancybox-throwOutUp{animation:.15s ease both fancybox-throwOutUp}.fancybox-throwOutDown{animation:.15s ease both fancybox-throwOutDown}@keyframes fancybox-fadeIn{from{opacity:0}to{opacity:1}}@keyframes fancybox-fadeOut{to{opacity:0}}@keyframes fancybox-zoomInUp{from{transform:scale(0.97) translate3d(0, 16px, 0);opacity:0}to{transform:scale(1) translate3d(0, 0, 0);opacity:1}}@keyframes fancybox-zoomOutDown{to{transform:scale(0.97) translate3d(0, 16px, 0);opacity:0}}@keyframes fancybox-throwOutUp{to{transform:translate3d(0, -30%, 0);opacity:0}}@keyframes fancybox-throwOutDown{to{transform:translate3d(0, 30%, 0);opacity:0}}.fancybox__carousel .carousel__slide{scrollbar-width:thin;scrollbar-color:#ccc rgba(255,255,255,.1)}.fancybox__carousel .carousel__slide::-webkit-scrollbar{width:8px;height:8px}.fancybox__carousel .carousel__slide::-webkit-scrollbar-track{background-color:rgba(255,255,255,.1)}.fancybox__carousel .carousel__slide::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:2px;box-shadow:inset 0 0 4px rgba(0,0,0,.2)}.fancybox__carousel.is-draggable .fancybox__slide,.fancybox__carousel.is-draggable .fancybox__slide .fancybox__content{cursor:move;cursor:grab}.fancybox__carousel.is-dragging .fancybox__slide,.fancybox__carousel.is-dragging .fancybox__slide .fancybox__content{cursor:move;cursor:grabbing}.fancybox__carousel .fancybox__slide .fancybox__content{cursor:auto}.fancybox__carousel .fancybox__slide.can-zoom_in .fancybox__content{cursor:zoom-in}.fancybox__carousel .fancybox__slide.can-zoom_out .fancybox__content{cursor:zoom-out}.fancybox__carousel .fancybox__slide.is-draggable .fancybox__content{cursor:move;cursor:grab}.fancybox__carousel .fancybox__slide.is-dragging .fancybox__content{cursor:move;cursor:grabbing}.fancybox__image{transform-origin:0 0;user-select:none;transition:none}.has-image .fancybox__content{padding:0;background:rgba(0,0,0,0);min-height:1px}.is-closing .has-image .fancybox__content{overflow:visible}.has-image[data-image-fit=contain]{overflow:visible;touch-action:none}.has-image[data-image-fit=contain] .fancybox__content{flex-direction:row;flex-wrap:wrap}.has-image[data-image-fit=contain] .fancybox__image{max-width:100%;max-height:100%;object-fit:contain}.has-image[data-image-fit=contain-w]{overflow-x:hidden;overflow-y:auto}.has-image[data-image-fit=contain-w] .fancybox__content{min-height:auto}.has-image[data-image-fit=contain-w] .fancybox__image{max-width:100%;height:auto}.has-image[data-image-fit=cover]{overflow:visible;touch-action:none}.has-image[data-image-fit=cover] .fancybox__content{width:100%;height:100%}.has-image[data-image-fit=cover] .fancybox__image{width:100%;height:100%;object-fit:cover}.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content,.fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content,.fancybox__carousel .fancybox__slide.has-video .fancybox__content,.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content{max-width:100%;flex-shrink:1;min-height:1px;overflow:visible}.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content,.fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content{width:100%;height:80%}.fancybox__carousel .fancybox__slide.has-video .fancybox__content,.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content{width:960px;height:540px;max-width:100%;max-height:100%}.fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content,.fancybox__carousel .fancybox__slide.has-video .fancybox__content,.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content{padding:0;background:rgba(24,24,27,.9);color:#fff}.fancybox__carousel .fancybox__slide.has-map .fancybox__content{background:#e5e3df}.fancybox__html5video,.fancybox__iframe{border:0;display:block;height:100%;width:100%;background:rgba(0,0,0,0)}.fancybox-placeholder{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.fancybox__thumbs{flex:0 0 auto;position:relative;padding:0px 3px;opacity:var(--fancybox-opacity, 1)}.fancybox__container.is-animated[aria-hidden=false] .fancybox__thumbs{animation:.15s ease-in backwards fancybox-fadeIn}.fancybox__container.is-animated.is-closing .fancybox__thumbs{opacity:0}.fancybox__thumbs .carousel__slide{flex:0 0 auto;width:var(--fancybox-thumbs-width, 96px);margin:0;padding:8px 3px;box-sizing:content-box;display:flex;align-items:center;justify-content:center;overflow:visible;cursor:pointer}.fancybox__thumbs .carousel__slide .fancybox__thumb::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-width:5px;border-style:solid;border-color:var(--fancybox-accent-color, rgba(34, 213, 233, 0.96));opacity:0;transition:opacity .15s ease;border-radius:var(--fancybox-thumbs-border-radius, 4px)}.fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb::after{opacity:.92}.fancybox__thumbs .carousel__slide>*{pointer-events:none;user-select:none}.fancybox__thumb{position:relative;width:100%;padding-top:calc(100%/(var(--fancybox-thumbs-ratio, 1.5)));background-size:cover;background-position:center center;background-color:rgba(255,255,255,.1);background-repeat:no-repeat;border-radius:var(--fancybox-thumbs-border-radius, 4px)}.fancybox__toolbar{position:absolute;top:0;right:0;left:0;z-index:20;background:linear-gradient(to top, hsla(0deg, 0%, 0%, 0) 0%, hsla(0deg, 0%, 0%, 0.006) 8.1%, hsla(0deg, 0%, 0%, 0.021) 15.5%, hsla(0deg, 0%, 0%, 0.046) 22.5%, hsla(0deg, 0%, 0%, 0.077) 29%, hsla(0deg, 0%, 0%, 0.114) 35.3%, hsla(0deg, 0%, 0%, 0.155) 41.2%, hsla(0deg, 0%, 0%, 0.198) 47.1%, hsla(0deg, 0%, 0%, 0.242) 52.9%, hsla(0deg, 0%, 0%, 0.285) 58.8%, hsla(0deg, 0%, 0%, 0.326) 64.7%, hsla(0deg, 0%, 0%, 0.363) 71%, hsla(0deg, 0%, 0%, 0.394) 77.5%, hsla(0deg, 0%, 0%, 0.419) 84.5%, hsla(0deg, 0%, 0%, 0.434) 91.9%, hsla(0deg, 0%, 0%, 0.44) 100%);padding:0;touch-action:none;display:flex;justify-content:space-between;--carousel-button-svg-width: 20px;--carousel-button-svg-height: 20px;opacity:var(--fancybox-opacity, 1);text-shadow:var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.4))}@media all and (min-width: 1024px){.fancybox__toolbar{padding:8px}}.fancybox__container.is-animated[aria-hidden=false] .fancybox__toolbar{animation:.15s ease-in backwards fancybox-fadeIn}.fancybox__container.is-animated.is-closing .fancybox__toolbar{opacity:0}.fancybox__toolbar__items{display:flex}.fancybox__toolbar__items--left{margin-right:auto}.fancybox__toolbar__items--center{position:absolute;left:50%;transform:translateX(-50%)}.fancybox__toolbar__items--right{margin-left:auto}@media(max-width: 640px){.fancybox__toolbar__items--center:not(:last-child){display:none}}.fancybox__counter{min-width:72px;padding:0 10px;line-height:var(--carousel-button-height, 48px);text-align:center;font-size:17px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased}.fancybox__progress{background:var(--fancybox-accent-color, rgba(34, 213, 233, 0.96));height:3px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;z-index:30;user-select:none}.fancybox__container:fullscreen::backdrop{opacity:0}.fancybox__button--fullscreen g:nth-child(2){display:none}.fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(1){display:none}.fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(2){display:block}.fancybox__button--slideshow g:nth-child(2){display:none}.fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(1){display:none}.fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(2){display:block}
/* End */


/* Start:/local/templates/dmtlab/css/carousel.css?17897277762112*/
.carousel{position:relative;box-sizing:border-box}.carousel *,.carousel *:before,.carousel *:after{box-sizing:inherit}.carousel.is-draggable{cursor:move;cursor:grab}.carousel.is-dragging{cursor:move;cursor:grabbing}.carousel__viewport{position:relative;overflow:hidden;max-width:100%;max-height:100%}.carousel__track{display:flex}.carousel__slide{flex:0 0 auto;width:var(--carousel-slide-width, 60%);max-width:100%;padding:1rem;position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.has-dots{margin-bottom:calc(0.5rem + 22px)}.carousel__dots{margin:0 auto;padding:0;position:absolute;top:calc(100% + 0.5rem);left:0;right:0;display:flex;justify-content:center;list-style:none;user-select:none}.carousel__dots .carousel__dot{margin:0;padding:0;display:block;position:relative;width:22px;height:22px;cursor:pointer}.carousel__dots .carousel__dot:after{content:"";width:8px;height:8px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:currentColor;opacity:.25;transition:opacity .15s ease-in-out}.carousel__dots .carousel__dot.is-selected:after{opacity:1}.carousel__button{width:var(--carousel-button-width, 48px);height:var(--carousel-button-height, 48px);padding:0;border:0;display:flex;justify-content:center;align-items:center;pointer-events:all;cursor:pointer;color:var(--carousel-button-color, currentColor);background:var(--carousel-button-bg, transparent);border-radius:var(--carousel-button-border-radius, 50%);box-shadow:var(--carousel-button-shadow, none);transition:opacity .15s ease}.carousel__button.is-prev,.carousel__button.is-next{position:absolute;top:50%;transform:translateY(-50%)}.carousel__button.is-prev{left:10px}.carousel__button.is-next{right:10px}.carousel__button[disabled]{cursor:default;opacity:.3}.carousel__button svg{width:var(--carousel-button-svg-width, 50%);height:var(--carousel-button-svg-height, 50%);fill:none;stroke:currentColor;stroke-width:var(--carousel-button-svg-stroke-width, 1.5);stroke-linejoin:bevel;stroke-linecap:round;filter:var(--carousel-button-svg-filter, none);pointer-events:none}
/* End */


/* Start:/local/templates/dmtlab/css/normalize.css?17897277766132*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2.5em;
  margin: 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
/* End */


/* Start:/local/templates/dmtlab/css/api.css?17897277761629*/
* { 
	margin: 0;
	padding: 0;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
		  box-sizing: border-box;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	outline: none;
	border: 0;
}

li {
	list-style: none;
}

img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
	border: 0;
	vertical-align: middle;
}

.pf {
	position: fixed;
}

.pa {
	position: absolute;
}

.pr {
	position: relative;
}

.ps {
	position: static;
	z-index: 9999;
}

.psb {
	position: sticky;
	bottom: 0;
	align-self: flex-end;
}

.db {
	display: block;
}

.di {
	display: inline;
	vertical-align: middle;
}

.dibm,
.dib {
	display: inline-block;
	zoom: 1;
	*display: inline;
}

.dib {
	vertical-align: top;
}

.dibm {
	vertical-align: middle;
}

.dn {
	display: none;
}

.ma {
	margin: 0 auto;
}

.oa {
	overflow: auto;
}

.oh {
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.tac {
	text-align: center;
}

.tar {
	text-align: right;
}

.ttu {
	text-transform: uppercase;
}

.fwb {
	font-weight: bold;
}

.wsn {
	white-space: nowrap;
}

.no-wsn {
	white-space: normal!important;
}

.w-100 {
	width: 100%;
}

.w-100vw {
	width: 100vw;
}

.h-100 {
    height: 100%!important;
}

.h-100vh {
    height: 100vh;
}

.dt {
	display: table;
}

.dtc {
	display: table-caption;
}

.dth {
	display: table-header-group;
}

.dtr {
	display: table-row-group;
}

.dtf {
	display: table-footer-group;
}

.clear:after {
	content: "";
	height: 0;
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
}
/* End */


/* Start:/local/templates/dmtlab/css/base.css?1789727776125784*/
/*	base.css — ВСЯ вёрстка проекта dmtlab: layout, типографика, компоненты.
	Правится руками, сборки и препроцессора нет.
	При каждой правке поднимать ?ver=N в подключении на всех страницах (кэш!).

	Схема файлов согласована с бэкендом (дока «Цветовые темы», DMTSITES-1829):
	   base.css → theme-dark.css → theme-light.css
	Подключаются все три всегда, активную тему выбирает data-theme на <html>.

	ДВА ЖЁСТКИХ ПРАВИЛА ЭТОГО ФАЙЛА:
	1. Ни одного захардкоженного цвета. Только var(--…) из тем.
	   Исключение — служебные rgba в тенях/бликах, не зависящие от темы (блик кнопки).
	2. Геометрия по инлайновой оси — только логическими свойствами
	   (padding-inline, margin-inline-start, inset-inline-start), это задел под иврит/RTL.
	   left/right в этом файле — ошибка ревью.

	Схема комментариев — три уровня, имя страницы из Figma:
	   -- 1. Главная --                секция страницы
	   1. Главная — Первый экран       блок
	   мелкие пояснения — обычными комментариями внутри правил
*/

/* ==========================================================================
   Шрифты — Montserrat (заголовки) и Inter (текст), локальные woff2.
   Объявлены ровно те начертания, что есть в макете: Montserrat 800/900,
   Inter 300/600. Вес, которого нет в @font-face, молча отрисуется соседним.
   ========================================================================== */
@font-face {
	font-family: 'Montserrat';
	src: url('/local/templates/dmtlab/css/../fonts/Montserrat-800-cyrillic.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Montserrat';
	src: url('/local/templates/dmtlab/css/../fonts/Montserrat-800-latin.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Montserrat';
	src: url('/local/templates/dmtlab/css/../fonts/Montserrat-900-cyrillic.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Montserrat';
	src: url('/local/templates/dmtlab/css/../fonts/Montserrat-900-latin.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	src: url('/local/templates/dmtlab/css/../fonts/Inter-300-cyrillic.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Inter';
	src: url('/local/templates/dmtlab/css/../fonts/Inter-300-latin.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	src: url('/local/templates/dmtlab/css/../fonts/Inter-600-cyrillic.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Inter';
	src: url('/local/templates/dmtlab/css/../fonts/Inter-600-latin.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* [new] EB Garamond 400 — антиква, только для цен на странице «Продукты и цены».
   Три подмножества, а не два: знак рубля (U+20BD) лежит в latin-ext, без него
   ₽ молча отрисуется системным шрифтом. */
@font-face {
	font-family: 'EB Garamond';
	src: url('/local/templates/dmtlab/css/../fonts/EBGaramond-400-cyrillic.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'EB Garamond';
	src: url('/local/templates/dmtlab/css/../fonts/EBGaramond-400-latin-ext.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'EB Garamond';
	src: url('/local/templates/dmtlab/css/../fonts/EBGaramond-400-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Нецветовые токены (цвета — в theme-*.css)
   ========================================================================== */
:root {
	--font-main: 'Inter', sans-serif;      /* весь текст */
	--font-title: 'Montserrat', sans-serif;/* заголовки H1-H3 */
	--font-price: 'EB Garamond', serif;    /* [new] цены в юните шкалы */

	--header-h: 80px;

	/* Зеркало бутстраповского контейнера — нужно слайдерам, чтобы посчитать,
	   на сколько лента выходит за колонку до края экрана. Менять вместе с ним. */
	--container-max: 1320px;
	--container-pad: 16px;
}

/* ==========================================================================
   База
   ========================================================================== */
html {
	background: var(--bg);
	color: var(--text);
	font-size: 1rem;
	line-height: 1.5;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

body {
	position: relative;                    /* база для слоя фонового декора */
	min-height: 100vh;
	overflow-x: hidden;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-main);
	font-weight: 300;
	font-size: 20px;
}

main {
	flex: 1;
}

/* весь контент лежит над слоем декора */
.header,
main,
.footer {
	position: relative;
	z-index: 1;
}

h1, h2, h3, h4 {
	font-family: var(--font-title);
	font-weight: 800;
	line-height: 1.2;
}

a {
	color: inherit;
	text-decoration: none;
	transition: opacity .15s ease, color .15s ease;
}

a:hover {
	opacity: .7;
}

button {
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

/* Контейнер — штатный бутстраповский, max-width не переопределяем.
   У .container-xxl ступенька всего одна: до 1400 он резиновый, от 1400 — 1320px.
   Единственное отклонение — увеличенный жёлоб (как на Molodeu): поля контейнера
   становятся 16px вместо 12, контент на десктопе 1288 (в макете 1280, дельта 8px).
   Меньше 1.5rem не ставить: у .row свой жёлоб 1.5rem, и если паддинг контейнера
   окажется меньше 12px, отрицательные поля row дадут горизонтальный скролл. */
[class*="container-"] {
	--bs-gutter-x: 2rem;
}

/* На мобилке в макете поля 30px (фрейм 360: контент 300). Штатные 16px там заметно
   уже — поднимаем тем же бутстраповским жёлобом, max-width контейнера не трогаем.
   Безопасно: .row переобъявляет свой --bs-gutter-x: 1.5rem, его отрицательные поля
   остаются 12px и не превышают паддинг контейнера. */
@media (max-width: 767.98px) {
	[class*="container-"] {
		--bs-gutter-x: 3.75rem;
	}

	:root {
		--container-pad: 30px;
	}
}

/* ==========================================================================
   Фоновый декор — сквозной слой на всю высоту документа.
   В макете это отдельный фрейм «Объекты фона»: размытые цветные пятна
   и «Планета». Собран градиентами (картинок в фоне не используем).
   Позиции — от центра страницы, чтобы композиция не разъезжалась по ширине.
   Значения взяты из макета в системе координат страницы 1920 × 5104.
   ========================================================================== */
.bg-decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;                      /* иначе пятна дают горизонтальный скролл */
	pointer-events: none;
}

.bg-decor span {
	position: absolute;
	display: block;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	filter: blur(196px);
}

/* жёлтый → фиолетовый, правый край, ~середина страницы */
.blob-1 {
	inset-inline-start: calc(50% + 1463px);
	top: 2593px;
	width: 2136px;
	height: 1761px;
	opacity: var(--decor-o-soft);
	background: linear-gradient(187deg, var(--decor-blob-1-from) 0%, var(--decor-blob-1-to) 100%);
}

/* синий → песочный, левый край, верхняя треть */
.blob-2 {
	inset-inline-start: calc(50% - 1505px);
	top: 1413px;
	width: 1200px;                         /* фигура в макете уже своего bbox 1425×1636 */
	height: 1400px;
	opacity: var(--decor-o-strong);
	background: linear-gradient(171deg, var(--decor-blob-2-from) 0%, var(--decor-blob-2-to) 100%);
}

/* бирюза → лайм, правый низ */
.blob-3 {
	inset-inline-start: calc(50% + 1458px);
	top: 4577px;
	width: 1599px;
	height: 1461px;
	opacity: var(--decor-o-soft);
	background: linear-gradient(210deg, var(--decor-blob-3-from) 0%, var(--decor-blob-3-to) 100%);
}

/* оранжевый → голубой, левый край, нижняя треть */
.blob-4 {
	inset-inline-start: calc(50% - 1326px);
	top: 3564px;
	width: 1089px;
	height: 1520px;
	opacity: var(--decor-o-soft);
	background: linear-gradient(6deg, var(--decor-blob-4-from) 0%, var(--decor-blob-4-to) 100%);
}

/* синее свечение из левого верхнего угла — единственный декор первого экрана.
   Селекторы декора с собственным filter/transform — с префиксом .bg-decor:
   голый класс (0,1,0) молча проигрывает правилу «.bg-decor span» (0,1,1). */
.bg-decor .glow-1 {
	inset-inline-start: calc(50% - 785px);
	top: -186px;
	width: 1104px;
	height: 2478px;
	opacity: var(--decor-o-glow);
	transform: translate(-50%, -50%) rotate(-19.94deg);
	filter: blur(23px);
	background: radial-gradient(closest-side, var(--decor-glow-core) 0%, var(--decor-glow-mid) 22.6%, var(--decor-glow-edge) 100%);
}

/* «Планета»: голубое свечение и светлая дуга за фото первого экрана.
   Центр свечения взят из gradientTransform заливки (он выше центра самой фигуры),
   позиция сверена попиксельно с рендером ноды «Объекты фона» (метаданные ноды
   врут по вертикали — доверять только рендеру). */
.bg-decor .planet-glow {
	inset-inline-start: calc(50% + 690px);
	top: 720px;
	width: 1194px;
	height: 1074px;
	opacity: var(--decor-o-planet-glow);
	transform: translate(-50%, -50%) rotate(-40deg);
	filter: blur(34px);
	/* заливка обрезана формой эллипса — поэтому светится только верхняя часть */
	background: radial-gradient(667px 599px at 634px 97px, var(--decor-planet-glow) 0%, var(--decor-planet-edge) 100%);
}

/* Дуга — серп между двумя окружностями (в макете boolean Subtract):
   диск внешней окружности, из которого маской вырезана внутренняя.
   Серп толщиной ~38px идёт из точки (1000, 883) за фото к точке (1904, 124),
   пик — за головой модели (1315, 341). Окружности сняты фитом по рендеру ноды. */
.bg-decor .planet-ring {
	inset-inline-start: calc(50% + 952px);
	top: 1052px;
	width: 1856px;
	height: 1856px;
	opacity: var(--decor-o-planet-ring);
	/* подсветка серпа из макета: цветной drop-shadow поверх собственного размытия */
	filter: drop-shadow(0 0 70px var(--decor-planet-arc-glow)) blur(35px);
}

/* Сам серп — на псевдоэлементе: filter применяется ДО mask, поэтому маску
   и заливку нельзя держать на том же элементе, что и размытие. */
.bg-decor .planet-ring::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--decor-planet-arc);
	-webkit-mask-image: radial-gradient(1086px 1086px at 1054px 1079px, transparent 1082px, #000 1090px);
	mask-image: radial-gradient(1086px 1086px at 1054px 1079px, transparent 1082px, #000 1090px);
}

/* ==========================================================================
   Кнопки
   ========================================================================== */
.btn-accent {
	position: relative;
	display: flex;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 80px;
	border-radius: 6px;
	background: var(--accent);
	box-shadow: 0 0 48px var(--accent-glow);
	color: var(--accent-contrast);
	font-size: 26px;
	font-weight: 600;
	text-align: center;
}

/* «Блик» из макета — диагональный полупрозрачный отсвет поверх заливки.
   Не статичный: непрерывно пробегает по кнопке слева направо с короткой
   паузой в конце цикла (за экраном). Обрезается overflow кнопки. */
.btn-accent::after {
	position: absolute;
	content: "";
	inset: 0;
	background: linear-gradient(115.7deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, .6) 30%, rgba(255, 255, 255, 0) 100%);
	animation: btn-shine 2.6s ease-in-out infinite;
}

@keyframes btn-shine {
	0% { transform: translateX(-130%); }
	85%, 100% { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
	.btn-accent::after,
	.btn-wa::after,
	.seal::after,
	.plan .section-title > a span > span {
		animation: none;
	}
}

.btn-accent:hover {
	opacity: 1;
	box-shadow: 0 0 64px var(--accent-glow);
}

/* Контурная кнопка — вторая в баннере (телефон) */
.btn-outline {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 80px;
	border: 2px solid currentColor;
	border-radius: 6px;
	font-size: 26px;
	font-weight: 600;
	text-align: center;
}

/* ==========================================================================
   Шапка (дублируется в каждой странице — под нарезку CMS)
   ========================================================================== */
.header {
	height: var(--header-h);
}

.header-row {
	height: var(--header-h);
	flex-wrap: wrap;                       /* на мобилке меню уходит во вторую строку */
}

.header-nav {
	min-width: 0;
}

.logo {
	flex-shrink: 0;
	color: var(--text);                    /* знак и надпись — fill="currentColor" */
	line-height: 0;
}

.logo svg {
	display: block;
}

.header-menu {
	gap: 20px;
	font-size: 17px;
}

.header-menu a {
	text-decoration: underline;
	text-underline-position: from-font;
}

.header-tools {
	flex-shrink: 0;
	gap: 40px;
}

.lang-switch {
	font-size: 17px;
	font-weight: 600;
}

/* Переключатель темы: дорожка 64×32, иконки 22×22 по краям,
   ползунок перекрывает иконку неактивной темы */
.theme-toggle {
	position: relative;
	flex-shrink: 0;
	width: 64px;
	height: 32px;
	padding: 0;
	border: var(--toggle-border-width) solid var(--toggle-border);
	border-radius: 16px;
	background: var(--toggle-bg);
}

.theme-toggle span {
	position: absolute;
	top: 50%;
	display: block;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	line-height: 0;
}

.theme-toggle span img {
	display: block;
	width: 22px;
	height: 22px;
}

.theme-toggle .is-sun {
	inset-inline-start: 4px;
}

.theme-toggle .is-moon {
	inset-inline-start: 36px;
	color: var(--icon-moon);
}

.theme-toggle .is-knob {
	inset-inline-start: 4px;
	border-radius: 50%;
	background: var(--toggle-knob);
	transform: translateX(calc(var(--toggle-knob-offset) - 5px));
	transition: transform .2s ease;
}

/* в RTL ползунок едет в другую сторону */
[dir="rtl"] .theme-toggle .is-knob {
	transform: translateX(calc(5px - var(--toggle-knob-offset)));
}

/* ==========================================================================
   Модальные окна (общие для всех страниц: форма заявки, видео, «отправлено»).
   Разметка лежит в каждой странице перед скриптами, открываются штатным
   Fancybox: кнопка с data-fancybox data-src="#modal-…".
   Карточка модалки тёмная в обеих темах — как баннер и карточки цифр.
   ========================================================================== */
.modal {
	display: none;                         /* до открытия Fancybox окно скрыто */
	width: 1420px;
	max-width: 100%;
	padding: 60px 70px;
	border: 1px solid var(--modal-border);
	border-radius: 24px;
	background: linear-gradient(126deg, var(--modal-from) 0%, var(--modal-to) 100%);
	color: var(--text);
}

/* Fancybox v4 вешает свой класс на сам элемент окна, а не на обёртку */
.modal.fancybox__content {
	display: block;
}

/* fancybox.css рисует свою пунктирную обводку на ВСЁМ, что получает фокус внутри
   окна (`.fancybox__content :focus:not(.carousel__button.is-close)`, специфичность
   0,4,0 — наши `outline: none` на полях и карточках она перебивала), и заодно гасит
   тени. Гасим её и возвращаем свечение там, где оно наше: у карточки под фокусом
   с клавиатуры и у выбранной карточки. */
.modal.fancybox__content :focus:not(.carousel__button.is-close) {
	outline: none;
}

.modal.fancybox__content .offer:focus-visible,
.modal.fancybox__content .offer[aria-pressed="true"]:focus {
	box-shadow: 0 0 48px var(--offer-glow);
}

/* штатный крестик Fancybox подгоняем под макет: 40×40 в 30px от угла */
.modal > .carousel__button.is-close {
	top: 30px;
	inset-inline-end: 30px;
	width: 40px;
	height: 40px;
	color: var(--text);
}

.modal__title {
	max-width: 560px;
	margin-inline: auto;
	font-size: 48px;
	text-align: center;
}

/* --- Модалка «Чем вам помочь?» (класс формы .modal-form — хук из main.js) --- */
.modal-lead__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	margin-bottom: 60px;
}

/* карточки продуктов: число задаёт CMS, ширина только через flex */
.offers {
	display: flex;
	gap: 40px;
	width: 100%;
}

/* Три состояния карточки (макет «Кнопки / Ховер / Активно»):
   покой   — нейтральная заливка, без свечения и без рамки;
   ховер   — та же заливка, рамка цвета текста и цветное свечение;
   активно — заливка цветом продукта и то же свечение, рамки нет.
   Рамка объявлена прозрачной уже в покое: иначе на ховере карточка прыгает на 2px. */
.offer {
	position: relative;
	/* у <button> своя внутренняя раскладка с вертикальным центрированием —
	   поэтому задаём флекс явно, иначе заголовок съезжает вниз */
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	height: 178px;
	padding: 14px 18px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: var(--offer-dark);
	color: var(--text);
	text-align: start;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

/* Своя обводка фокуса вместо браузерной: normalize.css возвращает кнопкам
   `outline: 1px dotted` (Firefox), и пунктир вылезал на карточке под фокусом —
   на первой при открытии окна и на любой после клика. Индикатор не убираем,
   а заменяем на рамку макета: она видна и в покое, и на выбранной карточке. */
.offer:focus {
	outline: none;
}

.offer:hover,
.offer:focus-visible {
	border-color: var(--text);
	box-shadow: 0 0 48px var(--offer-glow);
}

/* «Активно» — выбранный продукт. Состояние держит aria-pressed (js/main.js),
   поэтому оно доступно и с клавиатуры, и скринридеру. */
.offer[aria-pressed="true"] {
	border-color: transparent;
	background: var(--hl);
	box-shadow: 0 0 48px var(--offer-glow);
	color: var(--hl-contrast);
}

/* у выбранной карточки рамки нет — возвращаем её, когда карточка под фокусом
   с клавиатуры, иначе выбранная карточка теряет индикатор фокуса совсем */
.offer[aria-pressed="true"]:focus-visible {
	border-color: var(--text);
}

.offer__title {
	font-size: 26px;
	font-weight: 600;
	line-height: 1.5;
}

/* нижняя строка карточки: подарок-иконка и цена */
.offer__bottom {
	position: absolute;
	inset-inline-start: 19px;
	top: 98px;
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 20px;
}

.offer__gift {
	flex-shrink: 0;
	width: 63px;
	height: 60px;
	background: url("/local/templates/dmtlab/css/../img/gift.png") no-repeat center / 62px 60px;
}

/* цвет свечения — от цвета продукта, тот же модификатор, что и у плашки */
.offer.is-lime   { --offer-glow: var(--offer-glow-lime); }
.offer.is-cyan   { --offer-glow: var(--offer-glow-cyan); }
.offer.is-pink   { --offer-glow: var(--offer-glow-pink); }
.offer.is-yellow { --offer-glow: var(--offer-glow-yellow); }

.modal-lead__form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
}

.form-fields {
	display: flex;
	gap: 40px;
	width: 100%;
}

.form-fields input {
	flex: 1 1 0;
	min-width: 0;
	padding-block: 10px;
	border: 0;
	border-bottom: 1px solid var(--text);
	background: none;
	color: var(--text);
	font-family: inherit;
	font-size: 20px;
	font-weight: 300;
}

.form-fields input::placeholder {
	color: var(--field-placeholder);
	opacity: 1;
}

.form-fields input:focus {
	outline: none;
}

.modal-lead__actions {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 840px;
	max-width: 100%;
}

.modal-lead__buttons {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* Кнопка Whatsapp — единственная со своим градиентом */
.btn-wa {
	position: relative;
	display: flex;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	height: 80px;
	border-radius: 8px;
	background: linear-gradient(180deg, var(--wa-from) 0%, var(--wa-to) 100%);
	color: var(--hl-contrast);
	font-size: 26px;
	font-weight: 600;
}

/* «Блик» — тот же, что у лимонных кнопок, и так же пробегает по кнопке */
.btn-wa::after {
	position: absolute;
	content: "";
	inset: 0;
	background: linear-gradient(128.45deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, .6) 30%, rgba(255, 255, 255, 0) 100%);
	animation: btn-shine 2.6s ease-in-out infinite;
}

.modal-lead__consent {
	display: flex;
	gap: 30px;
	align-items: flex-start;
}

.modal-lead__consent p {
	flex: 1 1 0;
	min-width: 0;
	font-size: 17px;
}

.modal-lead__consent a {
	flex: 0 0 290px;
	font-size: 20px;
	font-weight: 600;
	text-align: end;
	text-decoration: underline;
	text-underline-position: from-font;
}

/* --- Модалка видео: подложки у неё нет. В макете это только скруглённый кадр
   ролика на затемнении и крестик над его правым верхним углом (нода 831:4649).
   Поля оставляем — в них и стоит крестик: 30 сверху и справа при кадре
   1280×719 в окне 1420. --- */
.modal-video {
	padding: 80px 70px;
	border: 0;
	border-radius: 0;
	background: none;
}

/* крестик лежит на затемнении, а не на подложке окна: в обеих темах он белый */
.modal-video > .carousel__button.is-close {
	color: var(--text-on-dark);
}

/* кадр 16:9 — переживает любую вставку из CMS */
.modal-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 24px;
	background: var(--offer-dark);
}

.modal-video__frame iframe,
.modal-video__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- Модалка «Заявка отправлена» --- */
.modal-sent {
	/* окно по ширине контента: 560 текста + 2 × 70 паддинга */
	width: 700px;
	text-align: center;
}

.modal-sent .modal__title {
	margin-bottom: 30px;
}

.modal-sent p {
	max-width: 560px;
	margin-inline: auto;
	font-size: 26px;
}

/* ==========================================================================
   Заголовок секции — единая идиома на весь проект.
   Разметка: <h2 class="section-title"><span><span>Наши</span></span> продукты</h2>

   Вложенных <span> ровно два, и у каждого своя работа:
   ВНЕШНИЙ — строка заголовка. Строки складываются колонкой, поэтому он сам
             по себе задаёт перенос. Плашки на нём нет.
   ВНУТРЕННИЙ — плашка. Он строчный, поэтому при переносе длинного слова
             («Дополнитель-/ные» на мобилке) плашка ложится ПО КАЖДОЙ СТРОКЕ
             отдельно, а не одним прямоугольником на обе — так в макете.
             Держится на box-decoration-break: clone.
   Цвет плашки — модификатором секции (.is-lime, .is-magenta и т. д.).
   ========================================================================== */
.section-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	font-size: 48px;
	font-weight: 800;
	/* [new] длинное слово в плашке шире колонки («Дополнительные» на мобилке).
	   Переносим по слогам, а не мягким переносом в тексте: текст из языкового файла.
	   overflow-wrap обязателен вторым эшелоном: словарь переносов есть не в каждом
	   браузере (в headless Chrome его нет), без него слово молча вылезает за экран.
	   Именно anywhere, а не break-word: заголовок — flex-элемент по ширине контента,
	   а break-word не уменьшает его min-content, и строка всё равно не переносится. */
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: anywhere;
}

/* строка заголовка может быть обёрнута в <a> (ссылка на детальную) — тогда она
   display:contents и не создаёт свой уровень, но в DOM всё равно стоит между
   .section-title и span, поэтому здесь потомковый селектор, а не прямой потомок */
.section-title > a {
	display: contents;
}

/* внешний <span> — строка заголовка, шире колонки не растёт */
.section-title span {
	max-width: 100%;
}

/* заливка плашки выходит на 15px за колонку — сам текст остаётся на общей линии.
   clone повторяет поля, отступы и заливку на каждой строке переноса */
.section-title span span {
	margin-inline-start: -15px;
	padding-block-end: 5px;
	padding-inline: 15px;
	background: var(--hl);
	color: var(--hl-contrast);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.is-magenta {
	--hl: var(--hl-magenta);
}

.is-lime {
	--hl: var(--hl-lime);
}

.is-cyan {
	--hl: var(--hl-cyan);
}

.is-pink {
	--hl: var(--hl-pink);
}

.is-yellow {
	--hl: var(--hl-yellow);
}

.is-mint {
	--hl: var(--hl-mint);
}

.is-violet {
	--hl: var(--hl-violet);
}

.is-orange {
	--hl: var(--hl-orange);
}

/* [new] зелёная плашка — только на страницах продуктов («Как мы работаем») */
.is-green {
	--hl: var(--hl-green);
}

/* Кнопка «смотреть видео» — иконка YouTube рядом с названием.
   Рисуется фоном, чтобы не копировать SVG в разметку на каждый пункт. */
.btn-video {
	flex-shrink: 0;
	width: 36px;
	height: 30px;
	padding: 0;
	background: url("/local/templates/dmtlab/css/../img/icon-youtube.svg") no-repeat center / 30px 21px;
}

/* ==========================================================================
   -- 1. Главная --
   ========================================================================== */

/* 1. Главная — Первый экран */
.hero {
	padding-block: 140px 60px;
}

.hero-grid {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.hero-text {
	flex: 730 1 0;                         /* пропорции колонок макета 730 : 510 */
	min-width: 0;
}

.hero-aside {
	display: flex;
	flex: 510 1 0;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	height: 600px;
}

/* Заголовок: три строки, средняя — в цветной плашке.
   Идиома проекта: выделенное слово оборачивается в <span> внутри заголовка. */
.hero-title {
	margin-bottom: 5px;
	font-size: 80px;
	font-weight: 900;
	text-transform: uppercase;
}

/* Подзаголовок — текст, залитый градиентом (в тёмной и светлой темах разным) */
.hero-lead {
	background: linear-gradient(90deg, var(--lead-from) 0%, var(--lead-to) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	font-size: 26px;
}

.hero-desc {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-top: 40px;
	font-size: 20px;
}

/* Иллюстрация: кадр 510×520, картинка выступает на 60px вверх и обрезается */
.hero-media {
	position: relative;
	width: 100%;
	height: 520px;
}

.hero-media__frame {
	position: absolute;
	top: -60px;
	inset-inline-start: 0;
	overflow: hidden;
	width: 100%;
	height: 617px;
}

.hero-media img {
	position: absolute;
	top: 0;
	inset-inline-start: 50%;
	width: 472px;
	height: 584px;
	margin-inline-start: -224px;           /* центр картинки смещён вправо на 12px */
	object-fit: cover;
	transform: scaleX(-1);                 /* в макете картинка отзеркалена */
}

.hero .btn-accent {
	z-index: 1;                            /* кнопка перекрывает низ иллюстрации */
}

/* 1. Главная — Юнит наши продукты */
.products {
	padding-block: 60px;
}

.products .section-title {
	margin-bottom: 60px;
}

.products-grid {
	display: flex;
	gap: 40px;
}

/* колонок в CMS может быть любое число — ширина только через flex, не фиксированная */
.product {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.product-head {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.product-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-size: 30px;
	text-decoration: underline;
	text-underline-position: from-font;
}

/* вторая строка названия — вместе с кнопкой видео */
.product-title span {
	display: flex;
	align-items: flex-end;
	gap: 10px;
}

.note {
	padding-block: 40px 45px;
	border-top: 1px solid var(--hl);
	border-bottom: 1px solid var(--hl);
	font-size: 26px;
}

/* 1. Главная — Юнит Банер (компонент, повторяется на всех страницах) */
.banner {
	padding-block: 60px;
}

/* Карточка шире контейнера: в макете она 1380 при контенте 1235 и выходит
   за колонку слева на 72.5px, справа на 27.5px. Текст при этом остаётся
   на общей левой линии страницы. Карточка тёмная в обеих темах. */
.banner-card {
	position: relative;
	/* карточку НЕ обрезаем: фото выходит за её верхний край (в макете подложка —
	   отдельный слой под контентом, а иллюстрация лежит поверх него).
	   Декор обрезается сам по себе, у .banner-decor свой overflow. */
	margin-block-start: 60px;              /* отбивка «Выпуска» — она вне карточки */
	margin-inline: -72.5px -27.5px;
	padding-inline: 72.5px;
	border-radius: 24px;
	background: var(--bg-secondary);
	color: var(--text-on-dark);
}

.banner-content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	/* в макете зазор 10px: колонки 760 + 465 занимают почти всю ширину.
	   space-between сам растянет его, если контейнер шире, и не даст
	   колонкам сжиматься раньше времени */
	gap: 10px;
}

/* ширина по кнопкам (760), заголовок внутри переносится сам */
.banner-left {
	flex: 0 1 760px;
	min-width: 0;
	padding-block: 40px 60px;
}

.banner .section-title {
	margin-bottom: 60px;
}

.banner-actions {
	display: flex;
	gap: 40px;
}

.banner-actions > * {
	flex: 0 1 360px;
}

/* фото выходит за верхний край карточки — поэтому лежит вне её обрезки */
.banner-media {
	position: relative;
	z-index: 2;
	flex: 0 0 465px;
	height: 327px;
}

.banner-media__frame {
	position: absolute;
	top: -83px;
	inset-inline-start: 0;
	overflow: hidden;
	width: 100%;
	height: 410px;
}

.banner-media img {
	position: absolute;
	top: 0;
	inset-inline-start: 50%;
	width: 371px;
	height: 581px;
	margin-inline-start: -185.5px;
	object-fit: cover;
	transform: scaleX(-1);
}

/* Декор внутри карточки — те же «Объекты фона» и «Планета», что и на странице,
   но обрезанные скруглением карточки. Прозрачность фиксированная: карточка
   тёмная в обеих темах, приглушать декор по светлой теме здесь нельзя. */
.banner-decor {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

.banner-decor span {
	position: absolute;
	display: block;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.banner-decor .glow {
	inset-inline-start: 151px;
	top: -571px;
	width: 1105px;
	height: 2479px;
	opacity: .4;
	transform: translate(-50%, -50%) rotate(-19.94deg);
	filter: blur(23px);
	background: radial-gradient(closest-side, var(--decor-glow-core) 0%, var(--decor-glow-mid) 22.6%, var(--decor-glow-edge) 100%);
}

/* «Планета» баннера — копия сквозной с коэффициентом 0.627 (сверено фитом
   дуги по рендеру ноды «Фон» баннера: центр (1139, 692), радиус риджа 570).
   Карточка у нас другой высоты и ширины, чем в макете (365×1388 против
   426×1280), поэтому позиции привязаны к НИЖНЕМУ краю карточки (в макете
   центр дуги на 266px ниже низа) и сдвинуты к фото (+27px влево от макетного
   отступа справа) — так композиция относительно модели совпадает с макетом
   при любой высоте карточки. */
.banner-decor .planet-glow {
	inset-inline-end: 332px;
	inset-block-end: -58px;
	width: 741px;
	height: 667px;
	opacity: .4;
	transform: translate(50%, 50%) rotate(-40deg);
	filter: blur(21px);
	background: radial-gradient(414px 372px at 394px 60px, var(--decor-planet-glow) 0%, var(--decor-planet-edge) 100%);
}

.banner-decor .planet-ring {
	inset-inline-end: 168px;
	inset-block-end: -266px;
	width: 1164px;
	height: 1164px;
	opacity: .2;
	transform: translate(50%, 50%);
	filter: drop-shadow(0 0 44px var(--decor-planet-arc-glow)) blur(22px);
}

/* серп — как у сквозной планеты: диск минус внутренняя окружность на псевдоэлементе */
.banner-decor .planet-ring::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--decor-planet-arc);
	-webkit-mask-image: radial-gradient(681px 681px at 661px 676px, transparent 677px, #000 685px);
	mask-image: radial-gradient(681px 681px at 661px 676px, transparent 677px, #000 685px);
}

/* Примечание — текст между двумя цветными линиями. Общий юнит: он же подзаголовок
   продукта, он же врезка в «Что мы делаем» и «Наши технологии». */

/* 1. Главная — Юнит Что мы делаем */
.section {
	padding-block: 60px;
}

.about-do {
	display: flex;
	gap: 40px;
}

.about-do .section-title {
	flex: 0 0 400px;
}

.about-do__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
	padding-top: 50px;
}

/* 1. Главная — Юнит Наши технологии */
.tech {
	padding-block: 60px;
}

.tech .section-title {
	margin-bottom: 30px;
}

.tech-cols {
	display: flex;
	/* по высоте колонки не равняем: врезка в линиях должна кончаться на своём
	   тексте, а не тянуться до низа соседней колонки (все ноды — items-start) */
	align-items: flex-start;
	gap: 40px;
}

.tech-cols > * {
	flex: 1 1 0;
	min-width: 0;
}

/* [new] 3.1 Статья — Юнит с таблицей: врезка .tech-cols в виде таблицы */
.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 17px;
	table-layout: fixed;
}

.data-table th,
.data-table td {
	font-weight: 300;
	text-align: start;
	vertical-align: top;
}

/* Зазор 40 между колонками — по половине с каждой стороны: колонки при
   table-layout: fixed делятся поровну, и обе остаются по 290 (как в макете).
   Процентная ширина ячейки тут не работает: в fixed-раскладке Chrome
   раздаёт остаток поровну и колонка всё равно получает половину. */
.data-table th:first-child,
.data-table td:first-child {
	padding-inline-end: 20px;
}

.data-table th + th,
.data-table td + td {
	padding-inline-start: 20px;
}

.data-table th {
	padding-block-end: 10px;
}

.data-table td {
	padding-block: 40px;
}

/* тип интента — отдельной строкой над пояснением */
.data-table b {
	display: block;
	font-weight: 600;
}

.data-table tbody tr {
	border-block-end: 1px solid var(--text);
}

.data-table thead tr,
.data-table tbody tr:last-child {
	border-block-end: 1px solid var(--hl);
}

/* 1. Главная — Юнит Кто мы */
.about-us {
	padding-block: 60px;
}

.about-us__row {
	display: flex;
	align-items: stretch;
	gap: 40px;
}

.about-us__text {
	display: flex;
	flex: 0 0 620px;
	flex-direction: column;
	gap: 30px;
	min-width: 0;
}

/* в макете между абзацами этого блока пустая строка */
.about-us__text p + p {
	margin-top: 30px;
}

.about-us__media {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
}

/* высота приходит от текстовой колонки — фото кадрируется, а не тянется */
.about-us__media img {
	flex: 1;
	width: 100%;
	min-height: 300px;
	object-fit: cover;
}

.about-us__media::after {
	display: block;
	height: 1px;
	background: var(--rule);
	content: "";
}

/* Слайдеры (Carousel из @fancyapps/ui). Слайд шире карточки на величину зазора:
   зазор делается паддингом слайда, а сама лента сдвигается отрицательным полем,
   чтобы первая карточка стояла на общей левой линии страницы.
   Число слайдов задаёт CMS — ширины лент нигде не фиксируем. */
.slider {
	/* расстояние от края экрана до левой линии контента */
	--bleed: calc(max(0px, (100vw - var(--sbw, 0px) - var(--container-max)) / 2) + var(--container-pad));

	margin-inline: calc(var(--bleed) * -1);
}

/* лента листается во всю ширину экрана, но первая карточка стоит на линии контента,
   а соседние выглядывают за край — так в макете видно, что блок листается */
.slider .carousel__viewport {
	padding-inline: calc(var(--bleed) - var(--slide-gap) / 2);
}

.slider .carousel__slide {
	width: calc(var(--slide-w) + var(--slide-gap));
	/* у carousel.css свой вертикальный паддинг слайда (16px) — он ломает высоту секции */
	padding-block: 0;
	padding-inline: calc(var(--slide-gap) / 2);
}

/* carousel.css вешает на .has-dots нижнюю отбивку 30px — там точки абсолютные
   и висят ПОД лентой. У нас точки в потоке (см. .team-slider .carousel__dots),
   и эта отбивка остаётся пустым местом: на десктопе точек нет вовсе,
   на мобилке отбивку даёт сам блок точек. */
.slider.has-dots {
	margin-bottom: 0;
}

/* 1. Главная — Юнит цифры */
.numbers {
	--slide-w: 400px;
	--slide-gap: 40px;

	padding-block: 60px;
}

.stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	height: 231px;
	padding-block: 30px;
	border-radius: 12px;
	background: var(--bg-secondary);
	color: var(--text-on-dark);
	text-align: center;
}

.stat__top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
}

.stat__value {
	padding-block-end: 5px;
	padding-inline: 15px;
	background: var(--hl);
	color: var(--hl-contrast);
	font-family: var(--font-title);
	font-size: 48px;
	font-weight: 800;
	line-height: 1.2;
}

.stat__label {
	color: var(--hl);
	font-size: 30px;
}

.stat__note {
	font-size: 17px;
}

/* 1. Главная — Юнит термины */
.terms {
	--slide-w: 510px;
	--slide-gap: 40px;

	padding-block: 60px;
}

.terms__head {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-bottom: 60px;
}

.article-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.article-card h3 {
	font-size: 30px;
}

.article-card p {
	/* анонс окрашен цветом ссылок: в тёмной теме лимонный, в светлой синий */
	color: var(--link);
	font-size: 17px;
}

/* ==========================================================================
   -- [new] 2. Продукты и цены --
   ========================================================================== */

/* [new] 2. Продукты и цены — Первый экран.
   Каркас целиком от первого экрана главной (.hero…), отличий три:
   заголовок без цветной плашки, своя иллюстрация и своя высота кадра. */
.products-hero .hero-title {
	/* В макете заголовок ломается после «Продукты». Ширина колонки в макете 630px,
	   но в браузере «ПРОДУКТЫ И» набирается в 605px и влезает — метрики шрифта чуть уже.
	   Держим перенос шириной, а не <br> в тексте: заголовок приходит из языкового файла.
	   Ширина в em, чтобы перенос держался и на планшете (56px), и на мобилке (40px). */
	max-width: 7em;
}

.products-hero .hero-media__frame {
	height: 580px;                         /* у главной 617px: там картинка свисает ниже кадра */
}

.products-hero .hero-media img {
	width: 448px;
	height: 610px;
	margin-inline-start: -224px;           /* картинка по центру кадра, без зеркала */
	transform: none;
}

/* [new] 2. Продукты и цены — Юнит шкала (три продукта: основные, дополнительные, премиум).
   Порядок в разметке — мобильный: колонка, шкала, колонка, колонка, шкала, подписи.
   На десктопе колонки встают в строку, шкалы — в следующую строку и смыкаются
   в одну линию. Число и колонок, и шкал, и сегментов задаёт CMS. */
.plan {
	padding-block: 60px;
}

.plan__head {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-bottom: 60px;
}

.plan__lead {
	max-width: 620px;
	font-size: 18px;
}

/* [new] 2. Продукты и цены — заголовок продукта — ссылка на страницу продукта.
   Правила ключуются на <a> внутри заголовка: на страницах продуктов
   (.plan без ссылки в заголовке) они инертны. Ховер и фокус — на строках:
   у самой ссылки с display: contents бокса нет. */
.plan .section-title > a > span {
	transition: opacity .15s ease;
}

.plan .section-title > a:hover > span {
	opacity: .7;
}

.plan .section-title > a:focus-visible > span {
	outline: 2px solid var(--hl);
	outline-offset: 4px;
}

/* строка без плашки подчёркнута как ссылка */
.plan .section-title > a > span:not(:has(> span)) {
	text-decoration: underline;
	text-underline-position: from-font;
}

/* плашка светится в цвет продукта, и по ней пробегает блик — тот же, что
   у кнопок, но механизмом печати (background-position): обрезка не нужна,
   а box-decoration-break: clone повторяет его по каждой строке переноса */
.plan .section-title > a span > span {
	box-shadow: 0 0 24px var(--hl-glow);
	background-image: linear-gradient(115.7deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 60%);
	background-repeat: no-repeat;
	background-size: 300% 100%;
	animation: seal-shine 2.6s ease-in-out infinite;
}

.plan.is-lime { --hl-glow: var(--hl-glow-lime); }
.plan.is-cyan { --hl-glow: var(--hl-glow-cyan); }
.plan.is-pink { --hl-glow: var(--hl-glow-pink); }

.plan__body {
	display: flex;
	flex-wrap: wrap;
}

/* перенос строки после колонок: псевдоэлемент — такой же flex-элемент,
   order ставит его последним в группе колонок */
.plan__body::after {
	flex: 0 0 100%;
	order: 1;
	content: "";
}

.plan__col {
	display: flex;
	position: relative;
	flex: 1 1 0;
	flex-direction: column;
	order: 0;
	gap: 20px;
	min-width: 0;
	padding-inline-end: 40px;
}

/* последняя колонка стоит на правой линии контента — жёлоб ей не нужен */
.plan__col:not(:has(~ .plan__col)) {
	padding-inline-end: 0;
}

/* линия отделяет разовый платёж от периодических — поэтому висит на первой
   колонке, а не между всеми. Одна колонка в CMS — линии не будет. */
.plan__col:first-child:has(~ .plan__col)::after {
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-end: 40px;
	width: 1px;
	background: var(--divider);
	content: "";
}

.plan__price {
	font-family: var(--font-price);
	font-size: 48px;
	line-height: 1;
}

.plan__price span {
	font-size: 24px;
}

.plan__list {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 17px;
}

.plan__list li {
	display: flex;
	gap: 10px;
}

/* буллит — обычное тире тем же шрифтом, что и текст (так в макете) */
.plan__list li::before {
	flex: 0 0 17px;
	content: "\2014";
}

/* Шкала: сегменты равной ширины с зазором 1px. Скругление — только у внешних
   концов всей ленты, поэтому соседние шкалы читаются как одна линия. */
/* Лента — это план на 12 месяцев: ячейка = месяц, на всю ленту их не больше 12.
   Ячейки во всех шкалах одной ленты обязаны быть одной ширины, поэтому ширина
   шкалы = сколько в ней ячеек. Считает их CSS (см. блок с :has ниже) — в разметке
   ничего, кроме самих ячеек, не нужно: CMS выводит от 1 до 12 ячеек с классом цвета.
   Одна шкала на ленту — занимает её целиком; две и больше — делят по числу ячеек. */
.plan__scale {
	display: flex;
	flex: var(--span, 12) 0 0;
	order: 2;
	gap: 1px;
	/* min-width обязателен: при flex-basis 0 у шкалы из ОДНОГО сегмента
	   гипотетический размер равен нулю, и она остаётся на строке разделителя
	   вместо переноса к остальным шкалам (ловилось на «Обращениях премиум») */
	min-width: 1px;
	height: 15px;
	margin-block-start: 40px;
	border-radius: 7.5px;
}

/* --span = число ячеек в шкале. Все правила одной специфичности, поэтому
   срабатывает последнее подошедшее: у шкалы с 9 ячейками --span станет 9.
   Больше 12 ячеек лента не рассчитана — сверх двенадцати --span не растёт. */
.plan__scale:has(> :nth-child(1)) { --span: 1; }
.plan__scale:has(> :nth-child(2)) { --span: 2; }
.plan__scale:has(> :nth-child(3)) { --span: 3; }
.plan__scale:has(> :nth-child(4)) { --span: 4; }
.plan__scale:has(> :nth-child(5)) { --span: 5; }
.plan__scale:has(> :nth-child(6)) { --span: 6; }
.plan__scale:has(> :nth-child(7)) { --span: 7; }
.plan__scale:has(> :nth-child(8)) { --span: 8; }
.plan__scale:has(> :nth-child(9)) { --span: 9; }
.plan__scale:has(> :nth-child(10)) { --span: 10; }
.plan__scale:has(> :nth-child(11)) { --span: 11; }
.plan__scale:has(> :nth-child(12)) { --span: 12; }

.plan__scale + .plan__scale {
	margin-inline-start: 1px;
}

.plan__scale ~ .plan__scale {
	border-start-start-radius: 0;
	border-end-start-radius: 0;
}

.plan__scale:has(~ .plan__scale) {
	border-start-end-radius: 0;
	border-end-end-radius: 0;
}

.plan__scale span {
	flex: 1 1 0;
	background: var(--seg-color, var(--scale-neutral));
	border-radius: inherit;
}

/* внутренние стыки сегментов прямые: скругление только по краям ленты */
.plan__scale span:not(:first-child) {
	border-start-start-radius: 0;
	border-end-start-radius: 0;
}

.plan__scale span:not(:last-child) {
	border-start-end-radius: 0;
	border-end-end-radius: 0;
}

.plan__scale .is-violet { --seg-color: var(--scale-violet); }
.plan__scale .is-yellow { --seg-color: var(--scale-yellow); }
.plan__scale .is-green  { --seg-color: var(--scale-green); }

.plan__notes {
	display: flex;
	flex: 0 0 100%;
	justify-content: space-between;
	order: 3;
	gap: 40px;
	margin-block-start: 15px;
	font-size: 17px;
}

/* подпись «План расходов…» — приглушённая и прижата к правому краю.
   margin нужен, когда она единственная (продукт «Дополнительные пациенты»). */
.plan__notes .is-plan {
	margin-inline-start: auto;
	opacity: .6;
	text-align: end;
}

/* [new] 2. Продукты и цены — Перетяжка справа (примечание про число страниц).
   Линии сверху и снизу уходят за правый край экрана, текст остаётся в колонке. */
.wide-note {
	/* сверху отступа нет: в макете перетяжка примыкает к нижнему полю
	   предыдущей секции, свой отступ у неё только снизу */
	padding-block: 0 60px;
}

.wide-note__rule {
	/* тот же вылет, что у слайдеров: расстояние от края экрана до линии контента */
	--bleed: calc(max(0px, (100vw - var(--sbw, 0px) - var(--container-max)) / 2) + var(--container-pad));

	margin-inline-end: calc(var(--bleed) * -1);
	padding-inline-end: var(--bleed);
	border-block: 1px solid var(--text);
}

.wide-note__rule p {
	padding-block: 40px 45px;
	font-size: 26px;
	text-align: center;
}

/* [new] 2. Продукты и цены — Юнит Зачем журнал («Дополнительные работы»).
   Две равные колонки; правая — в рамке цвета акцента. На мобилке правая
   колонка поднимается наверх (так в мобильном фрейме). */
.extra {
	padding-block: 60px;
}

.extra .section-title {
	margin-bottom: 30px;
}

.extra__cols {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.extra__text,
.extra__accent {
	flex: 1 1 0;
	min-width: 0;
}

.extra__text {
	display: flex;
	flex-direction: column;
	gap: 30px;                             /* пустая строка между абзацами, как в макете */
}

.extra__accent {
	padding-block: 40px 45px;
	border-block: 1px solid var(--accent);
	font-size: 26px;
}

.extra__accent p + p {
	margin-top: 39px;                      /* пустая строка при кегле 26 */
}

/* ==========================================================================
   -- [new] 2.1 Основные пациенты --
   ========================================================================== */

/* [new] 2.1 Основные пациенты — Первый экран.
   Каркас от первого экрана главной: те же отступы секции, тот же .hero-title
   и .hero-lead. Иллюстрации нет — справа «надклейка», а под заголовком
   полоса якорей по юнитам страницы (число пунктов задаёт CMS). */
.product-hero__bottom {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	margin-block-start: 20px;
}

.product-hero__text {
	display: flex;
	flex: 0 1 843px;                       /* колонка макета 843 при контенте 1280 */
	flex-direction: column;
	align-items: flex-end;
	gap: 40px;
	min-width: 0;
}

/* В макете заголовок ломается после «Основные»: ширина ноды 977, а в браузере
   «ОСНОВНЫЕ ПАЦИЕНТЫ» набирается в 1071 и в контент влезает. Держим перенос
   шириной, а не <br>: заголовок приходит из языкового файла. Ширина в em —
   тогда перенос держится и на планшете (56px), и на мобилке (40px). */
.product-hero .hero-title {
	max-width: 7em;
}

/* печать сдвинута вверх: в макете её центр стоит ровно на верхней линии
   нижнего ряда, поэтому она заходит на строку подзаголовка */
.product-hero__seal {
	flex: 0 0 250px;
	margin-block-start: -120px;
}

/* Полоса якорей: линии сверху и снизу уходят за ЛЕВЫЙ край экрана (в макете
   полоса шире своей колонки и вылезает влево), ссылки прижаты к правому краю.
   Вылет считаем так же, как у слайдеров и перетяжки — от края экрана. */
.anchor-nav {
	--bleed: calc(max(0px, (100vw - var(--sbw, 0px) - var(--container-max)) / 2) + var(--container-pad));

	width: calc(100% + var(--bleed));
	margin-inline-start: calc(var(--bleed) * -1);
	padding-inline-start: var(--bleed);
	border-block: 1px solid var(--text);
}

.anchor-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 20px;
	padding-block: 10px 15px;
	padding-inline-end: 20px;
	font-size: 17px;
}

.anchor-nav a {
	color: var(--link);
	text-decoration: underline dotted;
	text-underline-position: from-font;
}

/* «Надклейка» — печать «Всё под ключ». Форма одним ассетом (img/seal.svg),
   тень из макета — фильтром: внутри SVG она обрезалась бы холстом.
   Текст остаётся в разметке: он приходит из языкового файла. */
.seal {
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: center;
	width: 250px;
	height: 240px;
	padding-block-end: 12px;               /* в макете строки стоят выше центра печати */
	color: var(--seal-text);
	font-family: var(--font-price);
	font-size: 32px;
	line-height: 1.1;
	text-align: center;
	filter: drop-shadow(8px 8px 4px var(--seal-shadow));
}

/* Печать — на псевдоэлементе: z-index отрицательный кладёт её под текст,
   но над фоном (filter у .seal уже создал контекст наложения). */
.seal::before {
	position: absolute;
	z-index: -1;
	content: "";
	inset: 0;
	background: url("/local/templates/dmtlab/css/../img/seal.svg") no-repeat center / contain;
}

/* «Блик» — тот же, что у лимонных кнопок, и с тем же ритмом: пробегает слева
   направо с паузой в конце цикла. Обрезается не маской, а собственным
   скруглением: inset 4% — это ровно жёлтый круг внутри зубчатого края
   (230×222 из 250×240), маска с внешним url не работает с file://. */
.seal::after {
	position: absolute;
	content: "";
	inset: 4%;
	border-radius: 50%;
	background-image: linear-gradient(115.7deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 60%);
	background-size: 300% 100%;
	animation: seal-shine 2.6s ease-in-out infinite;
}

@keyframes seal-shine {
	0% { background-position: 100% 0; }
	85%, 100% { background-position: 0 0; }
}

/* [new] 2.1 Основные пациенты — Юнит банер «Заключите договор».
   Карточка та же, что у баннера «Нужны пациенты?» (.banner-card), но смещена
   иначе: в макете она 1380 при контенте 1280 и выходит на 50px в каждую сторону.
   Нижний отступ 160 = 60 отбивка юнита + 60 отбивка баннера под кнопкой
   (в макете они вложены) + 40 свеса кнопки за карточку. */
.promo {
	padding-block: 60px 160px;
}

.promo-card {
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	margin-block-start: 0;
	margin-inline: -50px;
	padding-block: 40px 0;
	padding-inline: 50px;
}

/* в макете обе строки — один текстовый блок, отбивки между строками нет.
   z-index обязателен: .banner-decor позиционирован, а заголовок — нет, поэтому
   без него синее свечение декора красится ПОВЕРХ белого текста (у баннера
   ту же роль играет .banner-content). */
.promo-title {
	position: relative;
	z-index: 1;
	align-self: stretch;
	gap: 0;
}

/* «до 31 марта» — не плашка, а цветное слово: начертание то же, что у заголовка */
.promo-title b {
	color: var(--hl-violet);
	font-weight: inherit;
}

/* в макете плашка — отдельный элемент строки, а не слово через обычный пробел:
   до её заливки 21px (замер по рендеру ноды), у обычной плашки было бы -2px */
.promo-title > span > span {
	margin-inline-start: 8px;
}

/* строка кнопок в макете уже контента (1060) и центрирована, а кнопка стоит
   в её начале — поэтому она не по центру карточки */
.promo-actions {
	display: flex;
	position: relative;
	z-index: 1;
	width: 1060px;
	max-width: 100%;
	margin-block: 60px -40px;              /* кнопка свисает за карточку ровно наполовину */
}

/* Поле слева — место под подарок: он лежит вне кнопки, но текст должен встать
   так же, как в макете. В макете надпись начинается на 217 от левого края кнопки
   (подарок 110 от 67-й + зазор 40) и НЕ центрируется: у «Видеоролика» это давало
   центр 332, у ценника «−90 000 ₽» центрирование сдвигало надпись вправо.
   Начертание 400: EB Garamond объявлен только в нём, 600 браузер подделывал. */
.promo-btn {
	flex: 0 1 510px;
	justify-content: flex-start;
	height: 80px;
	padding-inline: 217px 0;
	font-family: var(--font-price);
	font-size: 48px;
	font-weight: 400;
	line-height: 1;
}

/* Подарок в макете выше кнопки (105 против 80) и свисает за её края. Внутри
   кнопки его резал бы overflow: hidden, который нужен «блику», — поэтому он
   лежит рядом с кнопкой и позиционируется поверх неё. Та же идиома, что
   у фото в баннере: что выходит за край, то живёт вне обрезки. */
.promo-gift {
	position: absolute;
	inset-inline-start: 67px;
	top: calc(50% - 52px);
	width: 110px;
	height: 105px;
	object-fit: contain;
	transform: rotate(14.84deg);
	pointer-events: none;
}

/* [new] 2.1 — в этих двух заголовках макет ломает строки по пробелам, а не
   по слогам: ни одно слово не шире колонки, переносить нечего. Общий для
   проекта hyphens: auto иначе рвёт «при-ведет» и «об-ращения». */
.promo-title,
.team .section-title {
	-webkit-hyphens: none;
	hyphens: none;
	overflow-wrap: normal;
}

/* [new] 2.1 — заголовок над двумя колонками: та же отбивка, что у «Наших
   технологий». Правило намеренно узкое (заголовок — прямой ребёнок контейнера),
   чтобы не задеть юниты главной, где он лежит внутри строки. */
.section > .container-xxl > .section-title {
	margin-bottom: 30px;
}

/* [new] 2.1 — между абзацами колонки пустая строка (так в макете) */
.unit-text p + p {
	margin-top: 30px;
}

/* [new] 2.1 — ссылка в тексте: цветом ссылок темы */
.link-accent {
	color: var(--link);
	text-decoration: underline;
	text-underline-position: from-font;
}

/* [new] 2.1 — ссылка во врезке: тот же градиент, что у подзаголовка первого экрана.
   Открывает форму, поэтому это <button> (правило проекта: действие — кнопка):
   гасим паддинг, чтобы кнопка стояла в строке текста как обычная ссылка. */
.link-gradient {
	padding: 0;
	background: linear-gradient(90deg, var(--lead-from) 0%, var(--lead-to) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	text-decoration: underline;
	text-decoration-color: var(--lead-from);
	text-underline-position: from-font;
}

/* [new] 2.1 — врезка со списком: тот же .note, но пункты основным кеглем и с тире.
   Буллит — обычное тире тем же шрифтом, что и текст (как в юните шкалы). */
.note-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding-block: 40px;
	font-size: 20px;
}

.note-list li {
	display: flex;
	gap: 10px;
}

.note-list li::before {
	flex: 0 0 20px;
	content: "\2014";
}

/* [new] 2.1 — врезка «Что нужно от вас» набрана основным кеглем, не выделенным */
.note-plain {
	font-size: 20px;
}

/* [new] 2.1 — На этой странице обе перетяжки — самостоятельные юниты с отбивкой
   py-60 (ноды «Перетяжка справа» 684:3941 и «Перетяжка слева» 684:3977), поэтому
   между ними и соседней секцией 120px. На «Продуктах и ценах» верхнего отступа
   у перетяжки нет — там он снят в самом компоненте, здесь возвращаем модификатором. */
.wide-note--gap-top {
	padding-block-start: 60px;
}

/* [new] 2.1 — Перетяжка слева: зеркало перетяжки справа, линии уходят за левый край */
.wide-note--start .wide-note__rule {
	margin-inline: calc(var(--bleed) * -1) 0;
	padding-inline: var(--bleed) 0;
}

/* [new] 2.1 Основные пациенты — Юнит «Карта и отзывы»: текст и иллюстрация.
   Высота приходит от текстовой колонки, картинка центрируется в остатке. */
.maps-row {
	display: flex;
	align-items: flex-end;
	gap: 30px;
}

.maps-text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 30px;
	min-width: 0;
}

.maps-media {
	display: flex;
	flex: 0 0 620px;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.maps-media img {
	width: 352px;
	height: 336px;
	max-width: 100%;
	object-fit: contain;
}

/* [new] 2.1 Основные пациенты — Юнит команда (слайдер, число карточек задаёт CMS) */
.team {
	--slide-w: 290px;
	--slide-gap: 40px;

	padding-block: 60px;
}

.team .section-title {
	margin-bottom: 30px;
}

.person {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

/* фото из CMS переживает любую загрузку: квадрат и кроп, а не натуральные пропорции */
.person img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.person__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.person__text h3 {
	font-size: 30px;
}

.person__text p {
	font-size: 17px;
}

/* точки-пагинация есть только в мобильном фрейме макета */
.team-slider .carousel__dots {
	position: static;
	display: none;
	justify-content: center;
	gap: 10px;
	margin-block-start: 30px;
	transform: none;
}

.team-slider .carousel__dot {
	width: 8px;
	height: 8px;
	margin: 0;
	padding: 0;
}

.team-slider .carousel__dot::after {
	width: 8px;
	height: 8px;
	border: 0;
	border-radius: 50%;
	background: var(--text);
	opacity: .4;
}

.team-slider .carousel__dot.is-selected::after {
	background: var(--accent);
	opacity: 1;
}

/* [new] 3.1 Статья — Юнит с иллюстрацией: тот же каркас, что «Карта и отзывы»
   на «Основных пациентах». Своя только картинка: в макете она шире кадра
   (644 при колонке 620) и обрезается им — по краям у неё пустые поля.
   Картинка выведена из потока: иначе она диктует высоту всего юнита, а в макете
   высоту задаёт текстовая колонка («Лендинги и квиз» на «Обращениях премиум»
   ниже картинки, и та обрезается сверху и снизу). inset + margin: auto
   центрируют её по обеим осям даже когда она больше кадра. */
.article-media .maps-media {
	position: relative;
}

.article-media .maps-media img {
	position: absolute;
	inset-block: 0;
	inset-inline: -12px;                   /* шире кадра на 24 — обрезается им поровну */
	width: auto;                           /* ширину задают отрицательные поля: 620 + 24 */
	height: 379px;
	max-width: none;
	margin-block: auto;                    /* по вертикали центрируем, даже когда выше кадра */
	object-fit: cover;
}

/* [new] Лента, которая становится слайдером ТОЛЬКО на мобилке.
   Carousel поднимается и гасится по matchMedia (см. скрипт в конце страницы),
   а на десктопе лента остаётся обычной колонкой: гасим и вынос под края экрана,
   и ширину слайда, которые приходят от .slider. */
.slider--mobile {
	display: flex;
	flex-direction: column;
	gap: 60px;
	margin-inline: 0;
}

.slider--mobile .carousel__slide {
	width: auto;
	padding-inline: 0;
}

/* Carousel.destroy() НЕ разворачивает разметку обратно: обёртки viewport/track
   остаются в DOM, и трансформ ленты вместе с ними. display: contents убирает их
   из потока — слайды снова становятся прямыми элементами колонки. */
.slider--mobile > .carousel__viewport,
.slider--mobile .carousel__track {
	display: contents;
}

/* ==========================================================================
   Подвал (дублируется в каждой странице — под нарезку CMS)
   ========================================================================== */
.footer {
	padding-block: 60px;
}

.footer-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 40px;
}

.footer-info {
	display: flex;
	flex: 0 1 617px;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* название компании — H3 из макета, но не заголовок страницы, поэтому div:
   шрифт заголовков задаём явно, правило h1-h4 сюда не достаёт */
.footer-name {
	margin-bottom: 20px;
	font-family: var(--font-title);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.2;
}

.footer-address {
	font-size: 17px;
	font-weight: 600;
}

.footer-hours {
	font-size: 17px;
}

.footer-phone {
	display: block;
	margin-bottom: 20px;
	font-size: 20px;
	font-weight: 600;
}

.footer-soc {
	display: flex;
	align-items: center;
	gap: 20px;
}

.footer-soc img {
	display: block;
	width: 40px;
	height: 40px;
}

.footer-products {
	display: flex;
	flex: 0 0 400px;
	flex-direction: column;
	gap: 15px;
	font-size: 20px;
}

.footer-products__title {
	font-weight: 600;
}

.footer-products a {
	color: var(--link);
	text-decoration: underline;
	text-underline-position: from-font;
}

.footer-bottom {
	display: flex;
	align-items: flex-start;
	padding-top: 40px;
	border-top: 1px solid var(--border);
	font-size: 17px;
}

.footer-copy {
	flex: 1 1 0;
	min-width: 0;
}

.footer-copy b {
	display: block;
	font-weight: 600;
	opacity: .6;
}

.footer-copy span {
	display: block;
	opacity: .4;
}

.footer-links {
	display: flex;
	flex: 0 0 400px;
	flex-direction: column;
	gap: 10px;
}

.footer-links a {
	text-decoration: underline;
	text-underline-position: from-font;
}

/* ==========================================================================
   -- [new] 2.2 Дополнительные пациенты и 2.3 Обращения премиум --
   ========================================================================== */

/* [new] 2.2 — Первый экран: заголовок длиннее, чем на «Основных пациентах»,
   и ломается по словам сам. Ограничение ширины оттуда (max-width: 7em) здесь
   рвало бы слово по слогам — снимаем его. */
.product-hero--wide .hero-title {
	max-width: none;
}

/* [new] 2.3 — «ОБРАЩЕНИЯ ПРЕМИУМ» в контент 1288 влезает в одну строку, а в макете
   ломается после первого слова (нода 977). Держим перенос шириной, а не <br>:
   заголовок приходит из языкового файла. Ширина в em — тогда перенос остаётся
   и на планшете (56px), и на мобилке (40px). */
.product-hero--premium .hero-title {
	max-width: 12em;
}

/* Полоса якорей встаёт в свою колонку: у этих страниц она шире, чем
   на «Основных пациентах» (864 и 839 против 843), и при 843 пункты
   переносились бы на вторую строку. Число пунктов задаёт CMS — если их станет
   больше, полоса перенесётся, это нормально. */
.product-hero--wide .product-hero__text {
	flex-basis: 864px;
}

.product-hero--premium .product-hero__text {
	flex-basis: 839px;
}

/* [new] 2.2/2.3 — сдвиг строк вверх у каждой печати свой: у «Всё под ключ»
   на «Основных пациентах» это 6px (общий .seal), в «Дополнительных пациентах»
   текст и печать в макете концентричны, в «Премиуме» текст выше центра на 3px.
   Компенсация = удвоенный сдвиг: нижнее поле в центрирующем флексе делит его пополам. */
.product-hero--wide .seal {
	padding-block-end: 0;
}

.product-hero--premium .seal {
	padding-block-end: 6px;
}

/* [new] 2.2 — Юнит «Журнал + сайт клиники»: тот же каркас, что «Карта и отзывы»,
   но под картинкой тонкая линия во всю колонку — та же идиома, что у фото
   на главной (.about-us__media). */
.journal-media {
	flex-direction: column;
	justify-content: flex-end;
}

.journal-media img {
	width: 550px;
	height: 405px;
	max-width: 100%;
	object-fit: cover;
}

.journal-media::after {
	display: block;
	align-self: stretch;                   /* .maps-media центрирует детей, линии нужна вся ширина */
	height: 1px;
	background: var(--rule);
	content: "";
}

/* --- Планшет и ниже: макета нет, колонки складываем в одну --- */
@media (max-width: 1199.98px) {
	.hero-title {
		font-size: 64px;
	}
}

@media (max-width: 991.98px) {
	.products-grid {
		flex-direction: column;
	}

	.about-do,
	.about-us__row,
	.footer-top,
	.footer-bottom {
		flex-direction: column;
	}

	/* Модалки: карточки продуктов в две колонки, поля в столбик */
	.offers {
		flex-wrap: wrap;
	}

	.offers .offer {
		flex: 1 1 calc(50% - 20px);
	}

	.footer-info,
	.footer-products,
	.footer-links,
	.footer-copy {
		flex: none;
	}

	.footer-top {
		gap: 40px;
	}

	.footer-bottom {
		gap: 30px;
	}

	.about-do .section-title,
	.about-us__text {
		flex: none;
	}

	.about-do__text {
		padding-top: 0;
	}

	.tech-cols {
		flex-direction: column;
	}

	.about-us__media img {
		min-height: 380px;
	}

	/* фото уезжает под текст — колонки складываем */
	.banner-content {
		flex-direction: column;
		align-items: stretch;
	}

	.banner-left {
		flex: none;
		padding-bottom: 40px;
	}

	.banner-media {
		flex: none;
		align-self: center;
		width: 465px;
		max-width: 100%;
	}

	.banner-media__frame {
		top: 0;
		height: 327px;
	}

	/* [new] 2. Продукты и цены — на планшете колонки цен уже не встают в ряд:
	   при трёх колонках на 768 остаётся ~200px, а пункты списка длинные.
	   Раскладка становится мобильной, типографика остаётся десктопной. */
	.plan__body {
		flex-direction: column;
	}

	.plan__body::after {
		display: none;
	}

	.plan__col,
	.plan__scale,
	.plan__notes {
		order: 0;
	}

	.plan__col {
		padding-inline-end: 0;
	}

	.plan__col:first-child:has(~ .plan__col)::after {
		display: none;                     /* вертикальная линия — только в ряду колонок */
	}

	.plan__col + .plan__col {
		margin-block-start: 40px;
	}

	.plan__scale {
		flex: 0 0 auto;
		margin-block-start: 30px;
	}

	/* скругление НЕ трогаем: в мобильном фрейме лента так же разомкнута —
	   у первой шкалы скруглён левый конец, у последней правый */
	.plan__scale + .plan__scale {
		margin-inline-start: 0;
	}

	.plan__scale + .plan__col {
		margin-block-start: 40px;
	}

	.plan__notes {
		flex-direction: column;
		gap: 10px;
		margin-block-start: 10px;
	}

	/* в мобильном фрейме приглушённая подпись стоит первой и по левому краю */
	.plan__notes .is-plan {
		order: -1;
		margin-inline-start: 0;
		text-align: start;
	}

	.extra__cols {
		flex-direction: column;
		gap: 30px;
	}

	.extra__accent {
		order: -1;                         /* в мобильном фрейме блок в рамке идёт первым */
	}
}

@media (max-width: 991.98px) {
	.hero {
		padding-block: 100px 40px;
	}

	.hero-grid {
		flex-direction: column;
		gap: 30px;
	}

	.hero-text,
	.hero-aside {
		flex: 0 0 auto;
		width: 100%;
		max-width: 510px;
		height: auto;
	}

	.hero-title {
		font-size: 56px;
	}

	.hero-text {
		max-width: none;
	}

	.hero-media,
	.hero-media__frame {
		height: 470px;
	}

	.hero-media__frame {
		top: 0;
	}

	/* [new] 2. Продукты и цены — кадр иллюстрации не режем: колонка уехала под
	   текст, места по высоте достаточно, кроп остаётся десктопным */
	.products-hero .hero-media,
	.products-hero .hero-media__frame {
		height: 580px;
	}

	/* [new] 2.1 Основные пациенты — макета планшета нет. Печать остаётся в ряду
	   с текстом, но перестаёт заходить наверх: на 768 она наехала бы
	   на подзаголовок. Картинка карт встаёт под свою колонку. */
	.product-hero__seal {
		margin-block-start: 0;
	}

	.maps-row {
		flex-direction: column;
		align-items: stretch;
	}

	.maps-media {
		flex: 0 0 auto;
		align-self: auto;
	}
}

/* --- Мобилка: отдельный фрейм макета (360) --- */
@media (max-width: 767.98px) {
	body {
		font-size: 18px;
	}

	/* Мобильная шапка (макет 360, отдельный компонент «Шапка мобилки»):
	   две строки — лого + переключатели, под ними полоса меню.
	   15 сверху + 48 строка + 15 зазор + 24 меню + 15 снизу = 117 высоты макета.
	   Гамбургера в макете нет: меню шире экрана и прокручивается вбок. */
	.header {
		height: auto;
		padding-block: 15px;
	}

	.header-row {
		height: auto;
		row-gap: 15px;
	}

	.logo {
		order: 1;
	}

	.header-tools {
		order: 2;
		gap: 20px;
	}

	.header-nav {
		order: 3;
		/* полоса выходит под края экрана, чтобы последний пункт можно было домотать;
		   отступы берём из бутстраповского жёлоба — первый пункт остаётся на линии
		   контента. Ширина = контент + оба отрицательных поля: внешний габарит
		   остаётся ровно 100%, поэтому перенос строки срабатывает, а скролла нет */
		width: calc(100% + var(--bs-gutter-x));
		overflow-x: auto;
		margin-inline: calc(var(--bs-gutter-x) * -.5);
		padding-inline: calc(var(--bs-gutter-x) * .5);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-inline: contain;
	}

	.header-nav::-webkit-scrollbar {
		display: none;
	}

	.header-menu {
		width: max-content;                /* иначе flex сожмёт пункты вместо прокрутки */
		font-size: 16px;
	}

	.lang-switch {
		font-size: 16px;
	}

	/* в макете рамка переключателя на мобилке тоньше, чем на десктопе (1px против 2px) */
	.theme-toggle {
		--toggle-border-width: 1px;
	}

	.hero {
		padding-block: 100px 40px;
	}

	.hero-grid {
		gap: 20px;
	}

	.section-title {
		font-size: 36px;
	}

	.section-title span span {
		margin-inline-start: -10px;
		padding-inline: 10px;
	}

	.hero-title {
		font-size: 40px;
	}

	.products {
		padding-block: 40px;
	}

	.products .section-title {
		margin-bottom: 45px;
	}

	.products-grid {
		gap: 40px;
	}

	.product,
	.product-head {
		gap: 15px;
	}

	.product-title {
		font-size: 24px;
	}

	.note {
		padding-block: 30px 35px;
		font-size: 20px;
	}

	.btn-video {
		width: 29px;
		height: 24px;
		background-size: 24px 17px;
	}

	.section,
	.tech,
	.about-us {
		padding-block: 40px;
	}

	.about-do {
		gap: 25px;
	}

	.about-do__text {
		gap: 30px;
	}

	.tech .section-title,
	.about-us .section-title {
		margin-bottom: 25px;
	}

	.tech-cols {
		gap: 30px;
	}

	/* на мобилке врезка в «Наших технологиях» идёт ПЕРЕД основным текстом */
	.tech-cols .note {
		order: -1;
	}

	/* [new] 3.1 Статья — Юнит с таблицей: на мобилке таблица идёт ПЕРЕД текстом,
	   как и остальные врезки .tech-cols */
	.tech-cols .data-table {
		order: -1;
	}

	.data-table {
		font-size: 16px;
	}

	.data-table th:first-child,
	.data-table td:first-child {
		padding-inline-end: 10px;
	}

	.data-table th + th,
	.data-table td + td {
		padding-inline-start: 10px;
	}

	.data-table td {
		padding-block: 30px;
	}

	.about-us__row {
		gap: 30px;
	}

	/* фото встаёт МЕЖДУ заголовком и текстом (мобильный фрейм макета):
	   текстовую колонку раскрываем, её дети и фото сортируются в общем флексе */
	.about-us__text {
		display: contents;
	}

	.about-us .section-title {
		margin-bottom: 0;              /* расстояние даёт gap колонки */
		order: -2;
	}

	.about-us__media {
		order: -1;
	}

	.about-us__media img {
		min-height: 0;
		height: 191px;
	}

	/* Модалки на мобилке: поля уже, отступы меньше */
	.modal {
		padding: 40px 20px;
		border-radius: 16px;
	}

	.modal__title {
		font-size: 36px;
	}

	.modal-lead__head {
		gap: 25px;
		margin-bottom: 30px;
	}

	.offers {
		flex-direction: column;
		gap: 20px;
	}

	.offers .offer {
		flex: none;
	}

	.modal-lead__form {
		gap: 30px;
	}

	.form-fields {
		flex-direction: column;
		gap: 25px;
	}

	.form-fields input {
		font-size: 18px;
	}

	.modal-lead__actions,
	.modal-lead__buttons {
		gap: 20px;
	}

	.btn-wa {
		height: 60px;
		font-size: 20px;
	}

	.modal-lead__consent {
		flex-direction: column;
		gap: 20px;
	}

	.modal-lead__consent p {
		font-size: 16px;
	}

	.modal-lead__consent a {
		flex: none;
		font-size: 18px;
		text-align: start;
	}

	/* Модалка видео (мобильный фрейм 831:4775): кадр во всю ширину экрана,
	   без скругления и без полей, по центру по вертикали; крестик 32×32
	   у верхнего края экрана. Поле слайда Fancybox гасим только под этой
	   модалкой — у остальных окон оно остаётся. */
	.fancybox__slide:has(#modal-video) {
		padding: 0;
	}

	/* .fancybox__content в паре с .modal задаёт display: block — поэтому флекс
	   объявляем с той же специфичностью, иначе кадр не встанет по центру */
	.modal-video.fancybox__content {
		display: flex;
		align-items: center;
		justify-content: center;           /* Fancybox ставит контенту колоночный флекс */
		width: 100%;
		height: 100%;
		padding: 0;
	}

	/* во флексе кадр без явной ширины схлопывается: aspect-ratio считает её от контента */
	.modal-video__frame {
		width: 100%;
		border-radius: 0;
	}

	.modal.modal-video > .carousel__button.is-close {
		top: 20px;
		inset-inline-end: 20px;
		width: 32px;
		height: 32px;
	}

	.modal-sent p {
		font-size: 20px;
	}

	.modal > .carousel__button.is-close {
		top: 15px;
		inset-inline-end: 15px;
	}

	/* Цифры и статьи: слайды уже, зазоры меньше */
	.numbers {
		--slide-w: 300px;
		--slide-gap: 10px;

		padding-block: 40px;
	}

	.stat {
		height: 185px;
		padding-block: 25px;
	}

	.stat__top {
		gap: 15px;
	}

	.stat__value {
		font-size: 36px;
	}

	.stat__label {
		font-size: 24px;
	}

	.stat__note {
		font-size: 16px;
	}

	.terms {
		--slide-w: 300px;
		--slide-gap: 20px;

		padding-block: 40px;
	}

	.terms__head {
		gap: 25px;
		margin-bottom: 45px;
	}

	.terms__head p {
		font-size: 18px;
	}

	.article-card h3 {
		font-size: 24px;
	}

	.article-card p {
		font-size: 16px;
	}

	/* Подвал */
	.footer {
		padding-block: 40px;
	}

	.footer-top {
		gap: 20px;
		margin-bottom: 30px;
	}

	.footer-name {
		margin-bottom: 15px;
		font-size: 24px;
	}

	.footer-info {
		gap: 15px;
	}

	.footer-address,
	.footer-hours {
		font-size: 16px;
	}

	.footer-phone {
		font-size: 18px;
	}

	.footer-products {
		gap: 10px;
		font-size: 18px;
	}

	.footer-bottom {
		gap: 20px;
		padding-top: 15px;
		font-size: 16px;
	}

	/* на мобилке служебные ссылки идут ПЕРЕД копирайтом */
	.footer-links {
		order: -1;
		gap: 15px;
		font-size: 16px;
	}

	/* Баннер: карточка выступает по 20px, всё в одну колонку,
	   фото прижато к низу карточки и уже не выходит за её верх */
	.banner {
		padding-block: 40px;
	}

	.banner-card {
		margin-block-start: 0;
		margin-inline: -20px;
		padding-inline: 20px;
		border-radius: 16px;
	}

	.banner-content {
		gap: 20px;
	}

	/* на мобилке плашка ГОЛУБОГО баннера в макете другого оттенка, чем на десктопе.
	   Модификатор в селекторе обязателен: на странице продукта баннер маджентовый
	   (нода 788:3905, #fc42ff), и без него он тоже красился бы в мятный. */
	.banner .section-title {
		margin-bottom: 45px;
	}

	.banner.is-cyan .section-title {
		--hl: var(--hl-cyan-mobile);
	}

	.banner-left {
		padding-block: 30px 0;
	}

	.banner-actions {
		flex-direction: column;
		gap: 20px;
	}

	.banner-actions > * {
		flex: none;
	}

	/* фото шириной с контент, до низа карточки */
	.banner-media {
		align-self: stretch;
		width: auto;
		height: 264px;
	}

	.banner-media__frame {
		height: 264px;
	}

	.banner-media img {
		width: 238px;
		height: 374px;
		margin-inline-start: -119px;
	}

	.btn-outline {
		height: 60px;
		font-size: 20px;
	}

	.hero-lead {
		font-size: 20px;
	}

	.hero-desc {
		gap: 30px;
		margin-top: 30px;
		font-size: 18px;
	}

	.hero-media,
	.hero-media__frame {
		height: 362px;
	}

	.hero-media img {
		width: 295px;
		height: 364px;
		margin-inline-start: -141px;       /* центр смещён вправо на 6.85px */
	}

	.btn-accent {
		height: 60px;
		font-size: 20px;
	}

	/* Фоновый декор на мобилке: в макете ОТДЕЛЬНАЯ композиция «Объектов фона»
	   (мобильный фрейм 360 × 7323) — позиции и размеры сняты с рендера ноды
	   790:4661 (центроиды пятен) и фитом дуги планеты, как на десктопе.
	   Планета — копия десктопной с коэффициентом 0.4884. */
	.bg-decor span {
		filter: blur(98px);
	}

	/* Прозрачности мобильных пятен калиброваны по альфе рендера ноды
	   (пики 0.45–0.7 против 1 на десктопе) — множители поверх переменных
	   темы, чтобы светлая тема сохранила своё приглушение */

	/* синий «луч»: на мобилке он НИЖЕ — яркая часть за фото первого экрана
	   (в макете штрих от (30, 1450) к (130, 850)), и наклон зеркальный
	   десктопному — верх уходит вправо */
	.bg-decor .glow-1 {
		inset-inline-start: calc(50% - 100px);
		top: calc(var(--decor-hero, 117px) + 1033px);
		width: 550px;
		height: 1550px;
		transform: translate(-50%, -50%) rotate(19.94deg);
		filter: blur(18px);
	}

	/* жёлтый → фиолетовый: фиолетовый верх у «Наших технологий» справа,
	   жёлтый низ у «Кто мы» слева */
	.blob-1 {
		inset-inline-start: calc(50% + 28px);
		top: calc(var(--decor-tech, 4254px) + 358px);
		width: 900px;
		height: 1900px;
		opacity: calc(var(--decor-o-soft) * .6);
		background: linear-gradient(8deg, var(--decor-blob-1-from) 0%, var(--decor-blob-1-to) 100%);
	}

	/* синий → песочный: у первого экрана и «Наших продуктов» слева */
	.blob-2 {
		inset-inline-start: calc(50% - 86px);
		top: calc(var(--decor-products, 1415px) + 105px);
		width: 660px;
		height: 1000px;
		opacity: calc(var(--decor-o-strong) * .5);
	}

	/* бирюза → лайм: правый нижний угол подвала */
	.blob-3 {
		inset-inline-start: calc(50% + 170px);
		top: calc(var(--decor-footer, 6580px) + 570px);
		width: 480px;
		height: 440px;
		opacity: calc(var(--decor-o-soft) * .35);
	}

	/* оранжевый → голубой: между «Технологиями» и «Кто мы» слева */
	.blob-4 {
		inset-inline-start: calc(50% - 70px);
		top: calc(var(--decor-tech, 4254px) + 396px);
		width: 500px;
		height: 650px;
		opacity: calc(var(--decor-o-soft) * .15);
	}

	.bg-decor .planet-glow {
		inset-inline-start: calc(50% + 238px);
		top: calc(var(--decor-hero, 117px) + 943px);
		width: 583px;
		height: 525px;
		filter: blur(18px);
		background: radial-gradient(326px 293px at 310px 47px, var(--decor-planet-glow) 0%, var(--decor-planet-edge) 100%);
	}

	.bg-decor .planet-ring {
		inset-inline-start: calc(50% + 366px);
		top: calc(var(--decor-hero, 117px) + 1105px);
		width: 906px;
		height: 906px;
		filter: drop-shadow(0 0 34px var(--decor-planet-arc-glow)) blur(17px);
	}

	.bg-decor .planet-ring::before {
		-webkit-mask-image: radial-gradient(531px 531px at 515px 527px, transparent 523px, #000 530px);
		mask-image: radial-gradient(531px 531px at 515px 527px, transparent 523px, #000 530px);
	}

	/* Планета баннера на мобилке — мобильный симбол банера, коэффициент 0.3663
	   (фит дуги по рендеру ноды 766:5783: центр (319, 647) карточки 300×673) */
	.banner-decor .planet-glow {
		inset-inline-end: 77px;
		inset-block-end: 148px;
		width: 437px;
		height: 393px;
		filter: blur(12px);
		background: radial-gradient(244px 219px at 232px 36px, var(--decor-planet-glow) 0%, var(--decor-planet-edge) 100%);
	}

	.banner-decor .planet-ring {
		inset-inline-end: -19px;
		inset-block-end: 26px;
		width: 680px;
		height: 680px;
		filter: drop-shadow(0 0 26px var(--decor-planet-arc-glow)) blur(13px);
	}

	.banner-decor .planet-ring::before {
		-webkit-mask-image: radial-gradient(398px 398px at 386px 395px, transparent 394px, #000 401px);
		mask-image: radial-gradient(398px 398px at 386px 395px, transparent 394px, #000 401px);
	}

	/* [new] 2. Продукты и цены — мобильный фрейм 360 */
	.products-hero .hero-media,
	.products-hero .hero-media__frame {
		height: 345px;
	}

	.products-hero .hero-media img {
		width: 275px;
		height: 375px;
		margin-inline-start: -137.5px;
	}

	.plan {
		padding-block: 40px;
	}

	.plan__head {
		gap: 25px;
		margin-bottom: 45px;
	}

	.plan__lead {
		max-width: none;
	}

	.plan__col {
		gap: 15px;
	}

	.plan__price {
		font-size: 36px;
	}

	.plan__price span {
		font-size: 18px;
	}

	.plan__list {
		font-size: 16px;
	}

	.plan__list li {
		gap: 5px;
	}

	.plan__list li::before {
		flex-basis: 16px;
	}

	.plan__scale {
		height: 10px;
		border-radius: 5px;
	}

	.plan__notes {
		font-size: 16px;
	}

	.wide-note {
		padding-block: 40px;
	}

	.wide-note__rule p {
		padding-block: 30px 35px;
		font-size: 20px;
	}

	.extra {
		padding-block: 40px;
	}

	.extra .section-title {
		margin-bottom: 25px;
	}

	.extra__text {
		gap: 27px;                         /* пустая строка при кегле 18 */
		font-size: 18px;
	}

	.extra__accent {
		padding-block: 30px 35px;
		font-size: 20px;
	}

	.extra__accent p + p {
		margin-top: 30px;
	}

	/* [new] 2.1 Основные пациенты — Первый экран */
	.product-hero__bottom {
		flex-direction: column;
		align-items: stretch;
		gap: 30px;
		margin-block-start: 15px;
	}

	/* Полоса якорей: в мобильном фрейме она начинается на линии контента
	   и уходит под правый край экрана — как меню в шапке. Прокручивается вбок. */
	.anchor-nav {
		width: calc(100% + var(--bs-gutter-x) * .5);
		overflow-x: auto;
		margin-inline: 0 calc(var(--bs-gutter-x) * -.5);
		padding-inline: 0 calc(var(--bs-gutter-x) * .5);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-inline: contain;
	}

	.anchor-nav::-webkit-scrollbar {
		display: none;
	}

	.anchor-nav ul {
		flex-wrap: nowrap;                 /* иначе flex перенесёт пункты вместо прокрутки */
		justify-content: flex-start;
		width: max-content;
		padding-inline-end: 0;
	}

	/* flex-basis 843 у колонки — ширина; в колоночном флексе он стал бы высотой */
	.product-hero__text {
		flex: 0 0 auto;
		align-items: stretch;
		font-size: 18px;
	}

	/* Печать в макете лежит ПОВЕРХ последних строк текста у правого края — но там
	   строки разорваны вручную, чтобы её обойти. Текст приходит из инфоблока
	   и ломается сам, поэтому наложение закрыло бы произвольный текст CMS.
	   По договорённости ставим печать ПОД текстом и по центру. */
	.product-hero__seal {
		flex: 0 0 auto;
		align-self: center;
		margin-block-start: 0;
	}

	.seal {
		width: 125px;
		height: 120px;
		padding-block-end: 6px;
		font-size: 16px;
	}

	/* [new] 2.1 — Юнит банер «Заключите договор» */
	.promo {
		padding-block: 40px 100px;
	}

	/* в мобильном фрейме карточка выходит за контент на 20px в каждую сторону */
	.promo-card {
		margin-inline: -20px;
		padding-block: 20px 0;
		padding-inline: 20px;
	}

	/* заголовок переносится — плашка встаёт на свою строку, зазор ей не нужен */
	.promo-title > span > span {
		margin-inline-start: -10px;
	}

	.promo-actions {
		width: 100%;
		margin-block: 30px -30px;
	}

	.promo-btn {
		flex: 1 1 auto;
		justify-content: center;           /* на мобилке подарок ближе к краю — надпись центрируем */
		height: 60px;
		padding-inline: 90px 0;
		font-size: 32px;
	}

	.promo-gift {
		inset-inline-start: 16px;
		top: calc(50% - 38px);
		width: 80px;
		height: 76px;
	}

	.section > .container-xxl > .section-title {
		margin-bottom: 25px;
	}

	.note-list,
	.note-plain {
		font-size: 18px;
	}

	.note-list {
		gap: 10px;
		padding-block: 30px;
	}

	.note-list li::before {
		flex: 0 0 18px;
	}

	.unit-text p + p {
		margin-top: 27px;                  /* пустая строка при кегле 18 */
	}

	/* [new] 2.1 — Юнит «Карта и отзывы»: картинка выносится под края экрана */
	.maps-row {
		gap: 25px;
	}

	.maps-text {
		gap: 25px;
	}

	.maps-media {
		margin-inline: calc(var(--bs-gutter-x) * -.5);
	}

	.maps-media img {
		width: 204px;
		height: 195px;
	}

	/* [new] 2.1 — Юнит команда. В макете (фрейм 360) карточки стоят на 0 и 340
	   при контенте 300: зазор 40, соседняя целиком уходит за край, видна ровно
	   одна. Что блок листается, показывают точки.
	   Ширину карточки НЕ фиксируем в px: контент на мобилке резиновый, и на
	   любом экране шире 360 фикс-карточка не дотягивалась бы до правого края —
	   сосед выглядывал бы, а точки не совпали бы с центром карточки.
	   calc(100% - зазор) даёт слайд ровно в ширину ленты на любом экране. */
	.team {
		--slide-gap: 40px;
		--slide-w: calc(100% - var(--slide-gap));

		padding-block: 40px;
	}

	.team .section-title {
		margin-bottom: 25px;
	}

	.person__text h3 {
		font-size: 24px;
	}

	/* точки-пагинация — только в мобильном фрейме макета */
	.team-slider .carousel__dots {
		display: flex;
	}

	/* [new] 4. О компании — на мобилке лента статей листается: возвращаем ей
	   вынос под края экрана и ширину слайда, погашенные на десктопе.
	   Сам Carousel поднимает скрипт страницы по matchMedia */
	.slider--mobile {
		display: block;
		margin-inline: calc(var(--bleed) * -1);
	}

	.slider--mobile .carousel__slide {
		width: calc(var(--slide-w) + var(--slide-gap));
		padding-inline: calc(var(--slide-gap) / 2);
	}

	.slider--mobile > .carousel__viewport {
		display: block;
	}

	.slider--mobile .carousel__track {
		display: flex;
	}

	/* [new] 2.2/2.3 — то же и здесь: в колоночном флексе flex-basis стал бы высотой */
	.product-hero--wide .product-hero__text,
	.product-hero--premium .product-hero__text {
		flex-basis: auto;
	}

	/* [new] 3.1 Статья — Юнит с иллюстрацией: кадр выносится под края экрана
	   (мобильный фрейм: 360×195 при контенте 300), картинка 374×220 больше кадра
	   и обрезается им со всех сторон */
	.maps-row.article-media {
		gap: 30px;
	}

	.article-media .maps-media {
		height: 195px;
	}

	.article-media .maps-media img {
		inset-inline: -7px;                /* 360 + 14 = 374 из мобильного фрейма */
		height: 220px;
	}

	/* [new] 2.2 — Юнит «Журнал + сайт клиники»: в мобильном фрейме картинка
	   остаётся в колонке (под края экрана её НЕ выносим, в отличие от «Карт») */
	.journal-media {
		margin-inline: 0;
	}

	.journal-media img {
		width: 268px;
		height: 197px;
	}
}

/* ==========================================================================
   -- [new] 4. О компании --
   ========================================================================== */

/* [new] 4. О компании — Первый экран: тот же юнит, что на главной.
   Отличается только кадр иллюстрации — 510×580 при картинке 519×668 (на главной
   кадр 510×617 при 472×584). Заголовок здесь без плашки, отдельных правил не нужно. */
.about-hero .hero-media__frame {
	height: 580px;
}

.about-hero .hero-media img {
	width: 519px;
	/* картинка ШИРЕ кадра (519 при 510) — глобальный max-width: 100% её бы сжал */
	max-width: none;
	height: 668px;
	margin-inline-start: -256px;           /* центр картинки смещён вправо на 3.5px */
}

/* [new] 4. О компании — «Наши продукты» и «Как мы работаем» стоят рядом,
   каждый в половину контента (в макете 620 + 40 + 620 при контенте 1280).
   Колонки резиновые: число продуктов и статей задаёт CMS. */
.about-cols {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.about-cols > * {
	flex: 1 1 0;
	min-width: 0;
}

/* продукты идут колонкой, а не в ряд, как на главной */
.about-cols .products-grid {
	flex-direction: column;
	gap: 60px;
}

/* название продукта в одну строку: в колонке 620 оно помещается целиком.
   Подчёркивания у названия в этом макете нет (на главной есть). */
.about-cols .product-title {
	display: block;
	text-decoration: none;
}

/* вторая строка названия остаётся строчной — она встаёт в общий поток текста,
   но кнопку видео по-прежнему держит флексом */
.about-cols .product-title span {
	display: inline-flex;
}

/* заголовок правой колонки отбит меньше, чем заголовок продуктов */
.about-cols__works .section-title {
	margin-bottom: 40px;
}

/* [new] 4. О компании — Юнит «Штаб-квартира»: заголовок и текст в левой половине,
   фото — в правой, во всю высоту юнита.
   Сетка, а не флекс: на мобилке фото встаёт МЕЖДУ заголовком и текстом,
   а флексом при таком порядке пришлось бы дублировать картинку в разметке. */
.office-row {
	display: grid;
	grid-template-areas:
		"title media"
		"text  media";
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	column-gap: 30px;
}

.office-row > .section-title {
	grid-area: title;
	margin-block-end: 30px;
}

/* фото из CMS переживает любую загрузку: кадр задаёт сетка, картинка кроется */
.office-media {
	position: relative;
	grid-area: media;
	overflow: hidden;
}

.office-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.office-text {
	display: flex;
	flex-direction: column;
	gap: 40px;
	grid-area: text;
}

.office-address {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* адрес набран полужирным. Именно 600, а не bolder: основной текст лёгкий (300),
   и bolder из normalize.css даёт от него всего 400 */
.office-address b {
	font-weight: 600;
}

@media (max-width: 991.98px) {
	/* [new] 4. О компании — Первый экран: кадр иллюстрации не режем, колонка
	   уехала под текст и места по высоте достаточно */
	.about-hero .hero-media,
	.about-hero .hero-media__frame {
		height: 580px;
	}

	/* [new] 4. О компании — «Наши продукты» и «Как мы работаем» встают колонкой:
	   две половины по 620 в планшетный контейнер уже не влезают */
	.about-cols {
		flex-direction: column;
		align-items: stretch;              /* иначе колонка сжимается по контенту */
		gap: 40px;
	}

	/* [new] 4. О компании — «Штаб-квартира»: фото уходит под заголовок, во всю
	   ширину колонки. Пропорция кадра десктопная, под края экрана НЕ выносим */
	.office-row {
		grid-template-areas:
			"title"
			"media"
			"text";
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	/* макета планшета нет: кадр остаётся десктопным и не растягивается на всю
	   колонку — иначе фото уходит под 700px высоты */
	.office-media {
		aspect-ratio: 625 / 531;
		max-width: 625px;
		margin-block-end: 30px;
	}
}

@media (max-width: 767.98px) {
	.about-hero .hero-grid {
		gap: 20px;
	}

	.about-hero .hero-media,
	.about-hero .hero-media__frame {
		height: 325px;
	}

	.about-hero .hero-media img {
		width: 304px;
		height: 391px;
		margin-inline-start: -151px;       /* центр смещён вправо на 0.97px */
	}

	/* [new] 4. О компании — продукты в колонке отбиты чуть шире, чем на главной */
	.about-cols .products-grid {
		gap: 45px;
	}

	/* [new] 4. О компании — в мобильном фрейме название продукта снова ломается
	   на две строки, как на главной: возвращаем базовую колонку */
	.about-cols .product-title,
	.about-cols .product-title span {
		display: flex;
	}

	/* [new] 4. О компании — «Как мы работаем» на мобилке: своя ширина слайда,
	   отличная от «терминов» на других страницах */
	.works-slider {
		--slide-w: 300px;
		--slide-gap: 20px;
	}

	/* [new] 4. О компании — «Штаб-квартира»: фото выходит на всю ширину экрана,
	   кадр 360×300 из мобильного фрейма */
	.office-media {
		aspect-ratio: 6 / 5;
		max-width: none;                   /* на мобилке кадр во всю ширину экрана */
		margin-inline: calc(var(--bs-gutter-x) * -.5);
	}

	.office-row > .section-title {
		margin-block-end: 25px;
	}

	.office-text {
		gap: 30px;
	}
}

/* ==========================================================================
   -- [new] 5. Технические страницы (карта сайта, 404, политика, контакты) --
   ========================================================================== */

/* [new] 5. Технические страницы — Первый экран.
   Тот же .hero, что на остальных страницах, но в макете в нём только заголовок:
   ни иллюстрации, ни кнопки — отсюда лишний класс, а не второй юнит.
   Ширина заголовка 620px — колонка макета. Переносы по слогам тут выключены:
   в макете «КОНФИДЕНЦИАЛЬНОСТИ» уходит за колонку одним словом, а не режется
   дефисом (на мобилке фрейм другой — там переносы возвращаются). */
.hero--plain .hero-title {
	margin-bottom: 0;                      /* подзаголовка под ним нет */
	width: 620px;
	-webkit-hyphens: none;
	hyphens: none;
	overflow-wrap: normal;
}

/* [new] 5.1 Карта сайта — Юнит рубрики.
   Число рубрик и ссылок в каждой задаёт CMS — ничего не фиксируем. */
.sitemap {
	padding-block: 60px;
}

.sitemap-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;               /* подчёркивание по ширине текста, не колонки */
	gap: 15px;
}

.sitemap-group + .sitemap-group {
	margin-top: 40px;
}

.sitemap-group a {
	text-decoration: underline;
	text-underline-position: from-font;
}

.sitemap-group__title {
	font-weight: 600;
}

/* [new] 5.2 Ошибка 404 — Юнит текста (он же на «Политике» и «Контактах») */
.text-unit {
	padding-block: 60px;
}

/* [new] 5.4 Контакты — Юнит карта.
   В макете статичный скриншот 1280×640, ставим в тот же кадр виджет Яндекс.Карт.
   Пропорция вместо фикс-высоты: контейнер резиновый до 1400px, а кадр макета 2:1.
   Полей у юнита нет — в макете карта стоит вплотную к тексту сверху и к подвалу. */
.map-unit__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 2 / 1;
}

.map-unit__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 767.98px) {
	/* [new] 5. Технические страницы: заголовок занимает всю колонку — в 620px
	   на планшете он уже не помещается. Длинное слово рвётся посимвольно
	   и БЕЗ дефиса: так нарисовано в мобильном фрейме («КОНФИДЕНЦ/ИАЛЬНОСТИ»),
	   переносы по слогам дают на строку больше */
	.hero--plain .hero-title {
		width: auto;
		overflow-wrap: anywhere;
	}

	/* [new] 5.1 Карта сайта — Юнит рубрики */
	.sitemap {
		padding-block: 40px;
	}

	.sitemap-group + .sitemap-group {
		margin-top: 30px;
	}

	/* [new] 5.2 Ошибка 404 — Юнит текста */
	.text-unit {
		padding-block: 40px;
	}

	/* [new] 5.4 Контакты — Юнит карта: в мобильном фрейме кадр 360×480 выходит
	   на всю ширину экрана (та же механика выноса за контейнер, что у слайдеров) */
	.map-unit__frame {
		--bleed: calc(max(0px, (100vw - var(--sbw, 0px) - var(--container-max)) / 2) + var(--container-pad));

		height: 480px;
		margin-inline: calc(var(--bleed) * -1);
		aspect-ratio: auto;
	}
}

/* .wide-note, .product-hero__bottom, .note-list/.note-plain, .wide-note--gap-top/
   --start, .maps-row/.maps-text/.maps-media, .hero--plain .hero-title (десктоп) —
   уже перенесены соседними страницами (см. выше в этом же файле), повторно не
   дублируем. Мобильный сброс ширины .hero--plain .hero-title — ниже, в
   @media (max-width: 991.98px): в существующей копии он стоит только на 767.98px,
   без него на планшете (768–991) заголовок остаётся фиксированной ширины 620px. */

/* [new] 4. О компании — «Наши продукты» и «Как мы работаем» стоят рядом,
   каждый в половину контента (в макете 620 + 40 + 620 при контенте 1280).
   Колонки резиновые: число продуктов и статей задаёт CMS. */
.about-cols {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.about-cols > * {
	flex: 1 1 0;
	min-width: 0;
}

/* ==========================================================================
   -- [new] 3.1 Статья --
   ========================================================================== */

/* [new] 3.1 Статья — Первый экран. Каркас от первого экрана «Основных пациентов»:
   те же .hero, .hero-title, .hero-lead. Отличие: до нижнего ряда в макете
   60px вместо 20. Ширину заголовка НЕ режем (на «Основных пациентах»
   она держит перенос): заголовок статьи приходит из CMS и может быть любым. */
.article-hero .product-hero__bottom {
	margin-block-start: 60px;
}

/* Подзаголовок здесь короткий («Как всё работает» — 219px в макете), а градиент
   заливки растягивается по ширине блока: на всю колонку он даёт почти один цвет,
   виден только его край. Сжимаем блок по тексту — тогда весь переход
   magenta → лимон укладывается в саму строку, как в макете. */
.article-hero .hero-lead {
	width: fit-content;
	max-width: 100%;
}

.article-hero .product-hero__text {
	flex-basis: 849px;                     /* колонка макета 849 при контенте 1280 */
}

/* .article-media .maps-media/img («Юнит с иллюстрацией») уже перенесены
   соседней страницей выше в этом файле — не дублируем. */

/* [new] 3.1 Статья — Юнит автор: подпись прижата к правому краю колонки,
   линия под ней уходит за ЛЕВЫЙ край экрана — тот же вылет, что у перетяжки
   слева. */
.author {
	padding-block: 60px;
}

.author__rule {
	--bleed: calc(max(0px, (100vw - var(--sbw, 0px) - var(--container-max)) / 2) + var(--container-pad));

	margin-inline-start: calc(var(--bleed) * -1);
	padding-inline-start: var(--bleed);
	padding-block-end: 20px;
	border-block-end: 1px solid var(--text);
	text-align: end;
}

.author__name {
	font-family: var(--font-title);
	font-weight: 800;
	font-size: 30px;
	line-height: 1.2;
}

.author__role {
	font-size: 17px;
}

/* ==========================================================================
   -- [new] 3. Как всё работает --
   ========================================================================== */

/* [new] 3. Как всё работает — Первый экран. Каркас технических страниц
   (.hero--plain): заголовок без подзаголовка, ширина 620 держит перенос
   «КАК ВСЁ / РАБОТАЕТ» из макета. Ниже — абзац шириной текстовой колонки. */
.howto-hero__text {
	max-width: 864px;                      /* колонка макета 864 при контенте 1280 */
	margin-block-start: 40px;
}

/* [new] 3. Как всё работает — головы обеих колонок отбиты от содержимого
   на 40 (у «терминов» на других страницах 60) */
.howto-cols .terms__head {
	margin-bottom: 40px;
}

/* [new] 3. Как всё работает — список терминов: тот же буллит-тире, что у врезки
   со списком (.note-list), но кеглем выделенного текста и без линий и полей.
   Пункты — ссылки на статьи: подчёркнуты и цвета текста, не цвета ссылок. */
.term-list {
	gap: 20px;
	padding-block: 0;
	font-size: 26px;
}

.term-list li::before {
	flex: 0 0 26px;
}

.term-list a {
	text-decoration: underline;
	text-underline-position: from-font;
}

@media (max-width: 991.98px) {
	/* [new] 4. О компании — «Наши продукты» и «Как мы работаем» встают колонкой:
	   две половины по 620 в планшетный контейнер уже не влезают */
	.about-cols {
		flex-direction: column;
		align-items: stretch;              /* иначе колонка сжимается по контенту */
		gap: 40px;
	}

	/* [new] 3. Как всё работает — сложенные колонки расходятся на 80: в мобильном
	   фрейме это два самостоятельных юнита со своими отбивками 40 + 40.
	   Макета планшета нет — держим ту же величину. */
	.howto-cols {
		gap: 80px;
	}

	/* [new] 5. Технические страницы: заголовок занимает всю колонку — в 620px
	   на планшете он уже не помещается. Длинное слово рвётся посимвольно
	   и БЕЗ дефиса: так нарисовано в мобильном фрейме («КОНФИДЕНЦ/ИАЛЬНОСТИ»),
	   переносы по слогам дают на строку больше */
	.hero--plain .hero-title {
		width: auto;
		overflow-wrap: anywhere;
	}
}

/* .slider--mobile (десктоп + сброс на 767.98px) уже перенесён соседней страницей
   выше в этом файле — не дублируем. Уникальны для /how-it-works/ только
   переменные .works-slider ниже, в мобильном блоке. */

@media (max-width: 767.98px) {
	/* [new] 3.1 Статья — Первый экран: до нижнего ряда 15px, колонку раскрываем
	   на всю ширину экрана (десктопный flex-basis 849 иначе останется) */
	.article-hero .product-hero__bottom {
		margin-block-start: 15px;
	}

	.article-hero .product-hero__text {
		flex-basis: auto;
		gap: 30px;                         /* в мобильном фрейме между полосой якорей и текстом 30 */
	}

	/* мобильный вариант «Юнита с иллюстрацией» (.maps-row.article-media,
	   .article-media .maps-media/img) уже перенесён соседней страницей выше
	   в этом файле — не дублируем. */

	/* [new] 3.1 Статья — Юнит автор */
	.author {
		padding-block: 40px;
	}

	.author__rule {
		padding-block-end: 15px;
	}

	.author__name {
		font-size: 24px;
	}

	.author__role {
		font-size: 16px;
	}

	/* [new] 3. Как всё работает — Первый экран */
	.howto-hero__text {
		margin-block-start: 15px;
	}

	/* [new] 3. Как всё работает — голова колонки и список терминов.
	   padding-block повторяем: мобильное правило .note-list идёт ниже
	   десктопного .term-list и с той же специфичностью перебило бы его. */
	.howto-cols .terms__head {
		margin-bottom: 30px;
	}

	.term-list {
		gap: 15px;
		padding-block: 0;
		font-size: 20px;
	}

	.term-list li::before {
		flex: 0 0 20px;
	}

	/* .slider--mobile на 767.98px уже перенесён соседней страницей выше (см.
	   комментарий у десктопной версии) — здесь только своя переменная ширины
	   слайда для .works-slider (список /how-it-works/). */
	.works-slider {
		--slide-w: 300px;
		--slide-gap: 20px;
	}
}

/* End */


/* Start:/local/templates/dmtlab/css/theme-dark.css?17897277766382*/
/*	theme-dark.css — значения переменных ТЁМНОЙ темы (тема по умолчанию).

	Схема согласована с бэкендом (дока «Цветовые темы», задача DMTSITES-1829):
	три файла — base.css → theme-dark.css → theme-light.css, подключаются ВСЕ ТРИ ВСЕГДА,
	активную выбирает атрибут data-theme на <html>.

	Здесь живут ТОЛЬКО значения цветов. Ни одного цвета мимо этих переменных
	в base.css быть не должно. Набор переменных в тёмной и светлой темах
	обязан совпадать — если добавляешь переменную, добавь её в оба файла,
	даже когда значение одинаковое.
*/
html[data-theme="dark"] {
	color-scheme: dark;

	/* --- База --- */
	--bg: #0b0f1c;                         /* «Тёмный фон» */
	--bg-secondary: #192032;               /* подложки карточек (баннер, карточки цифр) */
	--text: #fff;                          /* «Белый» */
	--text-on-dark: #fff;                  /* текст на тёмных карточках — в обеих темах белый */
	--text-muted: rgba(255, 255, 255, .7);
	--border: rgba(255, 255, 255, .2);
	--link: #feef36;                       /* ссылки-продукты в подвале */
	--modal-from: #0d1427;                 /* подложка модалок — градиент */
	--modal-to: #041f41;
	--modal-border: #feef36;
	--field-placeholder: #9baabe;
	--field-error: #ff5470;                /* подсветка невалидного поля формы; в макете состояния ошибки нет */
	/* свечение карточек продуктов в модалке — цвет продукта с прозрачностью 60% */
	--offer-glow-lime: rgba(176, 255, 28, .6);
	--offer-glow-cyan: rgba(51, 223, 253, .6);
	--offer-glow-pink: rgba(255, 50, 149, .6);
	--offer-glow-yellow: rgba(254, 239, 54, .6);
	--offer-dark: #011027;                 /* карточка «Нужна консультация» */
	--wa-from: #61fd7d;                    /* кнопка Whatsapp */
	--wa-to: #25cf43;
	--rule: #dfe5ef;                       /* тонкая линия под иллюстрацией */
	/* [new] «Надклейка» — печать одинакова в обеих темах: жёлтая с фиолетовым
	   зубчатым краем, текст чёрный, тень из макета */
	--seal-text: #000;
	--seal-shadow: rgba(0, 0, 0, .5);

	/* --- Акценты (в макете одинаковы в обеих темах) --- */
	--accent: #feef36;                     /* «Лимонный» — кнопки */
	--accent-contrast: #0b0f1c;            /* текст на лимонной заливке */
	--accent-glow: rgba(254, 239, 54, .8); /* свечение под кнопкой */
	/* плашки выделенных слов в заголовках — свой цвет у каждой секции */
	--hl-magenta: #fc42ff;                 /* первый экран */
	--hl-lime: #b0ff1c;                    /* наши продукты */
	--hl-cyan: #33dffd;                    /* баннер (на мобилке в макете другой — см. base.css) */
	--hl-cyan-mobile: #01fecb;
	--hl-pink: #ff3295;                    /* что мы делаем */
	--hl-yellow: #feef36;                  /* наши технологии */
	--hl-mint: #01fea5;                    /* кто мы */
	--hl-violet: #ab83ff;                  /* как мы работаем, карточки цифр */
	--hl-orange: #ff9f04;                  /* карточки цифр */
	--hl-green: #00ff26;                   /* [new] «Как мы работаем» на странице продукта */
	--hl-contrast: #0b0f1c;                /* текст на любой плашке */
	/* [new] свечение плашек заголовков-ссылок «Продуктов и цен» — rgba из ноды */
	--hl-glow-lime: rgba(179, 255, 37, .8);
	--hl-glow-cyan: rgba(51, 223, 253, .8);
	--hl-glow-pink: rgba(255, 50, 149, .8);

	/* градиент подзаголовка первого экрана — единственная пара, которая реально разная */
	--lead-from: #fc42ff;
	--lead-to: #feef36;

	/* --- 2. Продукты и цены --- */
	--divider: rgba(255, 255, 255, .4);    /* вертикальная линия между колонками цен */
	--scale-violet: #ab83ff;               /* сегменты шкалы: цвет назначает CMS */
	--scale-yellow: #feef36;
	--scale-green: #00ff99;
	--scale-neutral: #fff;                 /* «пустой» сегмент — единственный, что различается по темам */

	/* --- Переключатель тем --- */
	--toggle-bg: transparent;
	--toggle-border: #fff;
	--toggle-border-width: 1px;
	--toggle-knob: #fff;
	--toggle-knob-offset: 37px;            /* тёмная — ползунок справа */
	--icon-moon: #feef36;

	/* --- Фоновый декор («Объекты фона» + «Планета») --- */
	--decor-blob-1-from: #feef36;
	--decor-blob-1-to: #8935ff;
	--decor-blob-2-from: #2f00ff;
	--decor-blob-2-to: #ffcb59;
	--decor-blob-3-from: #02ffca;
	--decor-blob-3-to: #b0ff1c;
	--decor-blob-4-from: #ff9f04;
	--decor-blob-4-to: #33e0fe;
	--decor-glow-core: #fff;
	--decor-glow-mid: #0075ff;
	--decor-glow-edge: rgba(0, 119, 255, 0);
	--decor-planet-glow: rgba(32, 175, 255, .6);
	--decor-planet-edge: rgba(11, 20, 37, 0);
	--decor-planet-ring: rgba(255, 255, 255, .55);
	--decor-planet-arc: #fff;              /* серп у фото, белый — приглушается через opacity */
	--decor-planet-arc-glow: #00a3ff;      /* цвет drop-shadow серпа из ноды Subtract */

	/* прозрачности пятен — главное отличие тем: в светлой все пятна приглушены */
	--decor-o-strong: 1;
	--decor-o-soft: .6;
	--decor-o-glow: .4;
	--decor-o-planet-glow: .4;
	--decor-o-planet-ring: .2;
}

/* End */


/* Start:/local/templates/dmtlab/css/theme-light.css?17897277765739*/
/*	theme-light.css — значения переменных СВЕТЛОЙ темы.
	Набор переменных обязан совпадать с theme-dark.css (см. комментарий там).
*/
html[data-theme="light"] {
	color-scheme: light;

	/* --- База --- */
	--bg: #fff;
	--bg-secondary: #192032;               /* баннер и карточки цифр в макете остаются тёмными */
	--text: #0b0f1c;                       /* «Цвет текста светлая» */
	--text-on-dark: #fff;                  /* текст на тёмных карточках — в обеих темах белый */
	--text-muted: rgba(11, 15, 28, .7);
	--border: rgba(11, 15, 28, .15);
	--link: #2079c8;                       /* ссылки-продукты в подвале */
	--modal-from: #fff;                    /* в светлой теме модалка белая, без градиента */
	--modal-to: #fff;
	--modal-border: #feef36;
	--field-placeholder: #9baabe;
	--field-error: #ff5470;                /* подсветка невалидного поля формы; в макете состояния ошибки нет */
	/* свечение карточек продуктов в модалке — цвет продукта с прозрачностью 60% */
	--offer-glow-lime: rgba(176, 255, 28, .6);
	--offer-glow-cyan: rgba(51, 223, 253, .6);
	--offer-glow-pink: rgba(255, 50, 149, .6);
	--offer-glow-yellow: rgba(254, 239, 54, .6);
	--offer-dark: #dfe6f0;                 /* карточка «Нужна консультация» */
	--wa-from: #61fd7d;                    /* кнопка Whatsapp */
	--wa-to: #25cf43;
	--rule: #dfe5ef;                       /* тонкая линия под иллюстрацией */
	/* [new] «Надклейка» — печать одинакова в обеих темах: жёлтая с фиолетовым
	   зубчатым краем, текст чёрный, тень из макета */
	--seal-text: #000;
	--seal-shadow: rgba(0, 0, 0, .5);

	/* --- Акценты (совпадают с тёмной темой — так в макете) --- */
	--accent: #feef36;
	--accent-contrast: #0b0f1c;
	--accent-glow: rgba(254, 239, 54, .8);
	/* плашки выделенных слов в заголовках — свой цвет у каждой секции */
	--hl-magenta: #fc42ff;                 /* первый экран */
	--hl-lime: #b0ff1c;                    /* наши продукты */
	--hl-cyan: #33dffd;                    /* баннер (на мобилке в макете другой — см. base.css) */
	--hl-cyan-mobile: #01fecb;
	--hl-pink: #ff3295;                    /* что мы делаем */
	--hl-yellow: #feef36;                  /* наши технологии */
	--hl-mint: #01fea5;                    /* кто мы */
	--hl-violet: #ab83ff;                  /* как мы работаем, карточки цифр */
	--hl-orange: #ff9f04;                  /* карточки цифр */
	--hl-green: #00ff26;                   /* [new] «Как мы работаем» на странице продукта */
	--hl-contrast: #0b0f1c;                /* текст на любой плашке */
	/* [new] свечение плашек заголовков-ссылок «Продуктов и цен» — rgba из ноды */
	--hl-glow-lime: rgba(179, 255, 37, .8);
	--hl-glow-cyan: rgba(51, 223, 253, .8);
	--hl-glow-pink: rgba(255, 50, 149, .8);

	/* в светлой теме градиент подзаголовка уходит не в лимонный, а в синий */
	--lead-from: #fc42ff;
	--lead-to: #2079c8;                    /* из «Цвет ссылок светлого сайта» */

	/* --- 2. Продукты и цены --- */
	--divider: rgba(11, 15, 28, .4);       /* вертикальная линия между колонками цен */
	--scale-violet: #ab83ff;               /* сегменты шкалы: цвет назначает CMS */
	--scale-yellow: #feef36;
	--scale-green: #00ff99;
	--scale-neutral: #e8e8e8;              /* «пустой» сегмент — единственный, что различается по темам */

	/* --- Переключатель тем --- */
	--toggle-bg: #ebf0f8;
	--toggle-border: #dfe5ef;
	--toggle-border-width: 2px;
	--toggle-knob: #fff;
	--toggle-knob-offset: 5px;             /* светлая — ползунок слева */
	--icon-moon: #0075ff;

	/* --- Фоновый декор: те же краски, прозрачность у всех пятен 15% --- */
	--decor-blob-1-from: #feef36;
	--decor-blob-1-to: #8935ff;
	--decor-blob-2-from: #2f00ff;
	--decor-blob-2-to: #ffcb59;
	--decor-blob-3-from: #02ffca;
	--decor-blob-3-to: #b0ff1c;
	--decor-blob-4-from: #ff9f04;
	--decor-blob-4-to: #33e0fe;
	--decor-glow-core: #fff;
	--decor-glow-mid: #0075ff;
	--decor-glow-edge: rgba(0, 119, 255, 0);
	--decor-planet-glow: rgba(32, 175, 255, .6);
	--decor-planet-edge: rgba(11, 20, 37, 0);
	--decor-planet-ring: rgba(255, 255, 255, .55);
	--decor-planet-arc: #fff;              /* серп у фото, белый — приглушается через opacity */
	--decor-planet-arc-glow: #00a3ff;      /* цвет drop-shadow серпа из ноды Subtract */

	--decor-o-strong: .15;
	--decor-o-soft: .15;
	--decor-o-glow: .15;
	/* «Планета» в светлом фрейме в 2.5 раза прозрачнее тёмного (альфа рендера
	   ноды 29/255 против 72/255, коэффициент 0.4) — тёмные значения × 0.4 */
	--decor-o-planet-glow: .16;
	--decor-o-planet-ring: .08;
}

/* End */


/* Start:/local/templates/dmtlab/css/fixes.css?178973521522298*/
/* DMTSITES-1965. Точечные правки поверх base.css — сам base.css не трогаем
   (должен совпадать с вёрсткой из layout-репозитория), фиксы живут здесь.
   Подключать ПОСЛЕ base.css/theme-*, чтобы правила перекрывали исходные при
   равной специфичности. */

/* Баг 1 (мобилка): у .promo-title > span > span margin-inline-start: -10px
   компенсирует padding-inline: 10px (base.css, .section-title span span)
   только слева — справа лишние 10px бleed'а вылезают за карточку баннера
   «Заключите договор» (видно на скрине Натальи, текст обрезан по правому
   краю). Гасим правый бleed, левый (декоративный) не трогаем. */
@media (max-width: 767.98px) {
	.promo-title > span > span {
		padding-inline-end: 0;
	}
}

/* Баг 2 (десктоп + мобилка): в фигме между строкой «...и получите» и плашкой
   «обращения пациентов!» есть видимый зазор, в base.css его нет. Плашка сейчас
   — обычный inline <span>: то, влезет ли она в одну строку с «...и получите»
   или уйдёт на свою, зависит от длины даты в CTA_TABLE и ничем не управляется
   (проверено на «до 30 сентября» и «до 31 марта» — по-разному переносится).
   Из-за этого же (inline) padding-block-start не работает как отступ — он не
   раздвигает строки, а просто красит область НАД текстом, заезжая на строку
   выше (проверено в devtools, Антон, 09.09.2026); line-height вместо него
   считает высоту на КАЖДУЮ обёрнутую строку плашки — если фраза уйдёт в 2
   строки, отступ задвоится.
   Фикс: плашка всегда блочная и всегда на своей строке (не зависит от длины
   даты), но по ширине контента (width: fit-content), а не на всю строку.
   margin (не padding) — гарантированно ОДИН прозрачный отступ сверху, не
   зависит от того, сколько строк займёт сама фраза при переносе.
   white-space: nowrap снят: раньше он не давал фразе переноситься ВНУТРИ
   строки (когда та делила строку с «...и получите»); теперь строка своя,
   и перенос «обращения»/«пациентов!» на 2 строки — нормальный сценарий.
   padding-block-end тоже переопределён: у базового .section-title span span
   всего 5px (там box-decoration-break: clone красил его на КАЖДУЮ обёрнутую
   inline-строку отдельно, тонкой полоской хватало); теперь плашка блочная —
   тот же padding красит ОДИН раз под всем текстом целиком, 5px мало (скрин
   Антона на мобилке: «пациентов!» почти касается низа плашки). */
.promo-title > span > span {
	display: block;
	width: fit-content;
	margin-inline-start: 0;
	margin-block-start: 12px;
	padding-block-end: 12px;
	white-space: normal;
}

/* Баг 2, продолжение (скрин Антона, /premium/ мобилка): «...пациентов!»
   прижата к нижнему краю карточки. Причина не в самой плашке, а в
   .promo-card: padding-block: 20px 0 (0 снизу) — расчёт на то, что кнопка
   .promo-actions margin-block: 30px -30px «свисает» за нижний край сама
   (комментарий base.css). У «Обращений премиум» кнопки и подарка в CTA_TABLE
   нет вообще — .promo-actions теперь не рендерится (product.detail
   template.php), и заголовку взяться неоткуда для отступа. Добавляем
   padding-block-end карточке на этот случай — .promo-title остаётся
   последним ребёнком, только когда .promo-actions отсутствует. */
.promo-card:has(> .promo-title:last-child) {
	padding-block-end: 30px;
}

@media (max-width: 767.98px) {
	.promo-card:has(> .promo-title:last-child) {
		padding-block-end: 20px;
	}
}

/* Баг 6 (десктоп): .maps-media img — фиксированный box 352×336, подогнан под
   соотношение сторон картинки «Основных пациентов» (704×672). У «Журнал+сайт»
   (secondary-patients, 620×421) и «Лендинги и квиз» (premium, 1024×602)
   соотношение шире — при object-fit: contain они не дотягивают до высоты
   бокса и выглядят мельче. Вместо фиксированных px даём картинке тянуться по
   реальной высоте фрейма (.maps-media стоит на align-self: stretch и получает
   высоту от текстовой колонки) — так каждая картинка использует доступную
   высоту по своим пропорциям, не только «Основные пациенты». Мобильная версия
   (268×197, DMTSITES-1921) не тронута — под max-width: 767.98px не попадает. */
@media (min-width: 768px) {
	.maps-media img {
		width: auto;
		height: 100%;
		max-width: 100%;
	}
}

/* Мобильная версия .maps-media img (DMTSITES-1921): 204×195 из вёрстки смотрелась
   мелкой на карточках продуктов — подняли до размера, каким «Журнал + сайт
   клиники» задан в вёрстке (product-extra.html). Десктоп не трогаем — там свой
   фикс чуть выше (бага 6). */
@media (max-width: 767.98px) {
	.maps-media img {
		width: 268px;
		height: 197px;
	}
}

/* ==========================================================================
   Ниже — не баги s4, а бэкенд-патчи, которых нет в репозитории вёрстки:
   при сверке 09.09.2026 найдены вписанными напрямую в base.css (годами,
   в обход правила «base.css не трогаем»). Перенесены сюда без изменения
   поведения — просто отделены от копии вёрстки. См. DMTSITES-1965.
   ========================================================================== */

/* DMTSITES-1963: заголовок продукта (на главной/в about) ведёт на страницу
   продукта. <a> — display: contents, чтобы не сломать колонку-перенос строк
   .product-title. */
.product-title > a {
	display: contents;
	color: inherit;
	text-decoration: inherit;
}

/* DMTSITES-1924: та же стилизация ссылки, что у .link-accent, но БЕЗ явного
   класса — чтобы ссылки, вставленные редактором прямо в WYSIWYG-тексте
   (без class="link-accent"), тоже подсвечивались. :not([class]) — чтобы не
   перебивать кнопочные стили (.btn-accent и т.п.). */
.unit-text a:not([class]) {
	color: var(--link);
	text-decoration: underline;
	text-underline-position: from-font;
}

/* Ошибка 404 / Политика / Контакты — юнит текста без своей вёрстки (в макете
   404 закрыт без него): ссылка «Главная» — подчёркнутая, как .sitemap-group a
   / .footer-links a, без оформления кнопкой. */
.text-unit a {
	text-decoration: underline;
	text-underline-position: from-font;
}

/* DMTSITES-1815: подсветка невалидного поля формы после неудачной отправки —
   состояния ошибки в макете нет, --field-error задан в theme-dark/theme-light
   отдельно от палитры вёрстки. Атрибут aria-invalid ставит js/main.js ПОСЛЕ
   неудачной отправки, не :invalid, иначе поле подсвечено ещё до того, как
   посетитель его тронул. */
.form-fields input[aria-invalid="true"],
.form-fields input[aria-invalid="true"]:focus {
	border-bottom-color: var(--field-error);
}

.form-fields input[aria-invalid="true"]::placeholder {
	color: var(--field-error);
}

.form-error {
	margin: 0;
	color: var(--field-error);
	font-size: 16px;
	text-align: center;
}

/* Видимый фокус на поле формы — в вёрстке .form-fields input:focus гасит только
   outline, замены нет; добавляем цветную нижнюю линию (доступность). */
.form-fields input:focus {
	border-bottom-color: var(--accent);
}

/* Контакты — оверлей-кнопка поверх iframe Яндекс.Карт («Нажмите, чтобы
   взаимодействовать с картой», contacts/index.php): в статичном скриншоте
   вёрстки интерактивной карты нет, кнопка — только у боевого виджета. */
.map-unit__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	background: rgba(0, 0, 0, .15);
	color: #fff;
	cursor: pointer;
}

/* DMTSITES-1918: .article-media .maps-media img в вёрстке центрируется только
   по вертикали (margin-block: auto) — на резиновой мобильной рамке ширина по
   ratio не равна «рамка + 24», и картинку прижимало к левому краю. Добавляем
   центрирование и по горизонтали. */
.article-media .maps-media img {
	margin: auto;
}

/* DMTSITES-1961: модалка «Чем вам помочь?», мобилка — карточки продукта
   горизонтальным скроллом со свесом за поля модалки (тот же приём full-bleed,
   что у .promo-card), вместо колонки из вёрстки — так следующая карточка
   выглядывает краем и подсказывает, что можно пролистать. Скроллбар прячем:
   свайп на тач-устройствах и так очевиден, а нативная полоса на десктопе
   в макете не нарисована. */
@media (max-width: 767.98px) {
	.offers {
		flex-wrap: nowrap;
		flex-direction: row;
		gap: 20px;
		margin-inline: -20px;
		padding-inline: 20px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.offers::-webkit-scrollbar {
		display: none;
	}

	.offers .offer {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}

	/* кликабельный номер на мобилке встаёт выше текста согласия, сразу под
	   кнопкой «Перезвоните мне» — order меняет только визуальный порядок,
	   за DOM-порядком (важным для скринридера и Tab) не идёт. */
	.modal-lead__consent a {
		order: -1;
	}
}

/* ==========================================================================
   DMTSITES-1969 — правки s5 (замечания Натальи, 10.09.2026)
   ========================================================================== */

/* Заголовки: слово не делится переносом — но только НЕ на мобилке.
   base.css задаёт всем .section-title hyphens: auto + overflow-wrap: anywhere,
   и длинное слово рвалось по слогам с дефисом («ДОПОЛНИТЕЛЬ-/НЫЕ» на
   /solutions-and-pricing/secondary-patients/) на любой ширине. Наталья: заголовок
   может быть шире колонки, но слова делиться не должны (UPD к замечанию: переносы
   рисовались под ширину мобильной версии — там их и оставляем).
   overflow-wrap: normal обязателен вместе с hyphens: none: anywhere рвёт слово
   и без дефиса, одного hyphens мало.
   ПРИНЯТЫЙ РИСК: правило общее на все .section-title, включая заголовки, которые
   контент-менеджеры вводят в админке (заголовки юнитов, CTA). Слово или URL без
   пробелов длиннее колонки теперь на десктопе не перенесётся вообще и вылезет за
   колонку — раньше это подстраховывал overflow-wrap: anywhere. Так и просил
   клиент («ширина заголовка может быть длиннее ширины колонки»), но если такой
   заголовок появится в контенте — это не баг вёрстки, а следствие этого решения.
   .hero--plain .hero-title (политика, 404, контакты, карта сайта) не задет ни
   здесь, ни на мобилке: у него собственные правила с большей специфичностью
   (base.css) — на десктопе переносы там и так выключены, на мобилке слово
   намеренно рвётся посимвольно, иначе «КОНФИДЕНЦИАЛЬНОСТИ» в 40px не влезает
   в экран и будет срезано body { overflow-x: hidden }. */
.section-title {
	-webkit-hyphens: none;
	hyphens: none;
	overflow-wrap: normal;
}

/* Мобилка — как было в base.css: перенос по слогам с дефисом (так нарисовано
   в мобильных фреймах, под их ширину заголовки и ломали). Возврат отдельным
   медиазапросом, а не min-width у правила выше, чтобы держаться desktop-first
   манеры base.css: там везде max-width: 767.98px. */
@media (max-width: 767.98px) {
	.section-title {
		-webkit-hyphens: auto;
		hyphens: auto;
		overflow-wrap: anywhere;
	}

	/* Следом — исключение из base.css: в заголовке баннера макет ломает строки по
	   пробелам, и hyphens рвал бы «при-ведет» и «об-ращения». Повторить его здесь
	   обязательно — у .promo-title та же специфичность, что у .section-title выше,
	   и без этого блока правило из fixes.css (файл подключается последним) перебило
	   бы базовое исключение и вернуло переносы туда, где их быть не должно.
	   Второе исключение base.css, .team .section-title, дублировать не нужно:
	   у него два класса против одного, оно выигрывает по специфичности при любом
	   порядке файлов. */
	.promo-title {
		-webkit-hyphens: none;
		hyphens: none;
		overflow-wrap: normal;
	}
}

/* Ссылка на политику в модалке «Чем вам помочь?» — обычным начертанием.
   В вёрстке (main.html) внутри .modal-lead__consent ссылка ровно одна — телефон,
   поэтому base.css стилизует её потомковым селектором .modal-lead__consent a
   (20px/600, своя колонка). Ссылку на политику бэкенд добавил позже
   (DMTSITES-1913/1940) ВНУТРЬ абзаца согласия — и она подхватила стиль телефона,
   отсюда жирный шрифт (замечание Натальи). Возвращаем ей параметры абзаца;
   подчёркивание оставляем — это ссылка. */
.modal-lead__consent p a {
	font-size: inherit;
	font-weight: inherit;
	text-align: inherit;
}

/* ==========================================================================
   Правки s6 (замечания Натальи, 17.09.2026)
   ========================================================================== */

/* Модалка «Чем вам помочь?»: первая карточка («Основные пациенты») не получала
   цветного ореола при наведении, пока по карточкам не кликнут.
   Причина — не в самой карточке, а в связке двух вещей. (1) Fancybox при
   открытии окна сам ставит фокус на первый фокусируемый элемент содержимого
   (autoFocus: true, main.js; в бандле — первый элемент, не являющийся
   .carousel__button), а это и есть кнопка «Основные пациенты». (2) fancybox.css
   гасит тени всему, что внутри окна под фокусом:
   `.fancybox__content :focus:not(.carousel__button.is-close) { box-shadow: none }`
   — специфичность 0,4,0 (два класса внутри :not() считаются), она перебивает
   `.offer:hover` (0,2,0). Рамка ховера появлялась (её это правило не трогает),
   а свечение — нет. После первого клика фокус уезжает на нажатую карточку,
   и первая начинает подсвечиваться как обычно — отсюда «если покликать,
   то потом подсвечивается».
   base.css уже возвращает свечение для фокуса с клавиатуры (.offer:focus-visible)
   и для выбранной карточки (.offer[aria-pressed="true"]:focus) — не хватало
   ровно случая «карточка под фокусом, наведён курсор». Добиваем его тем же
   приёмом: 0,4,0 против 0,4,0, fixes.css подключается последним и выигрывает
   по порядку. */
.modal.fancybox__content .offer:hover {
	box-shadow: 0 0 48px var(--offer-glow);
}

/* Мобилка, «Юнит с иллюстрацией» в статьях /how-it-works/ — картинка обрезалась
   сверху и снизу (скрины Натальи, 18.09.2026: /kontekstnaya-reklama-yandex-direkt/,
   на десктопе таблица видна целиком, на мобилке срезаны шапка таблицы и нижние
   строки).
   Причина — кадр из мобильного фрейма макета (360×195) рассчитан на картинку
   «шире неба» (1,85), а в статьи контент-менеджер грузит скриншоты 4:3–3:2
   (замерено на стенде: 1024×668, 1024×768, 787×488 — 1,33…1,61). Режет дважды:
   object-fit: cover подгоняет картинку под элемент 374×220, а кадр 195px
   срезает с этого элемента ещё по 12,5px сверху и снизу. Для фото это было бы
   незаметно, но здесь в картинках таблицы и графики — теряются строки.
   На десктопе (кадр 644×379, 1,70) потери около 10% и приходятся на белые поля
   скриншота, поэтому там жалоб нет — правим только мобильную версию.
   Фикс: на мобилке картинка перестаёт быть абсолютной и кадрируемой — занимает
   всю ширину кадра (кадр и так вынесен под края экрана, .maps-media
   margin-inline) и берёт высоту по своим пропорциям. Кроп пропадает совсем,
   вместо него меняется высота блока — для скриншотов из CMS это правильный
   размен: формат картинки заранее не известен, а содержимое важно целиком.
   Свес -7px убираем вместе с кропом: он существовал ради обрезки «со всех
   сторон», а так съедал бы по 7px слева и справа. */
@media (max-width: 767.98px) {
	.article-media .maps-media {
		height: auto;
	}

	.article-media .maps-media img {
		position: static;
		width: 100%;
		height: auto;
		margin-block: 0;
		object-fit: contain;
	}
}

/* End */
/* /local/templates/dmtlab/css/bootstrap-grid.min.css?178972777651789 */
/* /local/templates/dmtlab/css/fancybox.css?178972777615598 */
/* /local/templates/dmtlab/css/carousel.css?17897277762112 */
/* /local/templates/dmtlab/css/normalize.css?17897277766132 */
/* /local/templates/dmtlab/css/api.css?17897277761629 */
/* /local/templates/dmtlab/css/base.css?1789727776125784 */
/* /local/templates/dmtlab/css/theme-dark.css?17897277766382 */
/* /local/templates/dmtlab/css/theme-light.css?17897277765739 */
/* /local/templates/dmtlab/css/fixes.css?178973521522298 */
