

/* 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?1791976539132532*/
/*	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);
}

/* Пятна 4–7 и 11 (.blob-*): контур пятна из макета — на внутреннем <i>
   через clip-path, градиент тоже на нём; размытие и прозрачность — на самом
   span. Сняты с SVG-экспорта нод «Объекты фона» страницы «О компании»
   (десктоп 687:5711, мобилка 790:6660); смещение экспорта относительно фрейма
   проверено корреляцией с рендером (≤4px). Позиция — от якоря ближайшей
   секции (--decor-*, ставит setDecorAnchors() в main.js), фолбэк — y секции
   в макете «О компании». Десктоп: фрейм 1920 × 5721, x от центра страницы. */
.bg-decor span[class^="blob-"] {
	border-radius: 0;
	background: none;
}

.bg-decor span[class^="blob-"] > i {
	position: absolute;
	inset: 0;
	display: block;
}

/* жёлтый → фиолетовый: bbox x 1355..3491, y 1712..3473 */
.bg-decor .blob-1 {
	inset-inline-start: calc(50% + 1463px);
	top: calc(var(--decor-banner, 2527px) + 66px);
	width: 2135px;
	height: 1760px;
	opacity: var(--decor-o-soft);
	filter: blur(196px);
}
.bg-decor .blob-1 > i {
	background: linear-gradient(187.1deg, var(--decor-blob-1-from) 14.4%, var(--decor-blob-1-to) 100.5%);
	clip-path: path("M1070.8 167.2C1216.9 149.5 1322.6 -18.7 1468.3 1.7C1621.2 23.1 1728.8 156.1 1829.3 273.3C1941.1 403.8 2176.4 574.4 2129.4 739.7C2079.3 915.4 1994.8 1012 1838 1105.7C1749.1 1158.9 1436.4 1073.5 1357.8 1141C1183.6 1290.7 784.9 1739.9 556.1 1758.6C352.4 1775.2 6.1 1677.1 0 1367.2C-6.1 1057.3 344.4 1004.9 349.9 817.4C355.3 630.2 339.8 236.2 487.1 120.7C644.6 -2.8 872.2 191.3 1070.8 167.2Z");
}

/* синий → песочный: bbox x -1257..167, y 596..2231 */
.bg-decor .blob-2 {
	inset-inline-start: calc(50% - 1505px);
	top: calc(var(--decor-products, 1231px) + 182px);
	width: 1424px;
	height: 1635px;
	opacity: var(--decor-o-strong);
	filter: blur(196px);
}
.bg-decor .blob-2 > i {
	background: linear-gradient(171.0deg, var(--decor-blob-2-from) -1.7%, var(--decor-blob-2-to) 87.4%);
	clip-path: path("M945.1 272.8C851.6 207.5 840.4 54 733.3 14.9C620.9 -26.1 498.9 25.8 387.6 69.5C263.5 118.1 40.5 149.2 12.6 279.4C-17 417.8 5.6 514.7 78.8 635.8C120.3 704.5 365.3 759.9 394.5 834.7C459.3 1000.4 644.3 1509.1 794.1 1605.1C927.4 1690.6 1114 1577.5 1241.3 1483.2C1358.1 1396.7 1093.3 1051.2 1157.7 921C1222.1 790.9 1562.2 736.5 1361.4 453.2C1160.5 169.9 1072.2 361.5 945.1 272.8Z");
}

/* бирюза → лайм: bbox x 1619..3218, y 3847..5307 */
.bg-decor .blob-3 {
	inset-inline-start: calc(50% + 1458px);
	top: calc(var(--decor-office, 4554px) + 23px);
	width: 1599px;
	height: 1460px;
	opacity: var(--decor-o-soft);
	filter: blur(196px);
}
.bg-decor .blob-3 > i {
	background: linear-gradient(210.5deg, var(--decor-blob-3-from) 5.9%, var(--decor-blob-3-to) 85.0%);
	clip-path: path("M732 162.1C842.9 135.8 909.7 -3 1023.6 0C1143.2 3.1 1237.6 96.2 1325.2 177.7C1422.7 268.4 1618.8 379.2 1596.9 510.6C1573.7 650.2 1517.1 732 1404.5 817.8C1340.7 866.5 1092.5 828.1 1037.9 886.9C916.8 1017.3 557.9 1422.5 383.4 1456.9C228 1487.4 95.9 1313.8 12.2 1179.4C-64.7 1056 245.8 870.4 233.6 725.5C221.5 580.9 175.1 278.9 278.5 177.1C389 68.4 581.2 198 732 162.1Z");
}

/* оранжевый → голубой: bbox x -910..179, y 2804..4324 */
.bg-decor .blob-4 {
	inset-inline-start: calc(50% - 1326px);
	top: calc(var(--decor-tech, 3073px) + 491px);
	width: 1089px;
	height: 1520px;
	opacity: var(--decor-o-soft);
	filter: blur(196px);
}
.bg-decor .blob-4 > i {
	background: linear-gradient(5.9deg, var(--decor-blob-4-from) 15.8%, var(--decor-blob-4-to) 105.2%);
	clip-path: path("M253.5 1091.5C300.2 1181.8 245.3 1307.6 313.6 1382.8C385.3 1461.8 503.1 1471.5 609 1483.2C727 1496.3 915.9 1564.3 991.9 1473.2C1072.7 1376.3 1095.1 1290.5 1087.6 1164.5C1083.3 1093.1 790.8 944.4 745.8 776.5C700.8 608.5 1003.7 241 925.4 103.1C855.7 -19.6 661.6 -7.9 522.1 13.7C394.1 33.5 449.2 351.2 344.3 427.2C239.6 503.1 8.6 647.4 0 776.5C-9.2 914.4 190.1 968.8 253.5 1091.5Z");
}

/* бирюза → оранжевый: bbox x -583..93, y 5571..6440 */
.bg-decor .blob-5 {
	inset-inline-start: calc(50% - 1205px);
	top: calc(var(--decor-footer, 5205px) + 800px);
	width: 676px;
	height: 869px;
	opacity: var(--decor-o-strong);
	filter: blur(196px);
}
.bg-decor .blob-5 > i {
	background: linear-gradient(187.1deg, var(--decor-blob-5-from) 2.0%, var(--decor-blob-5-to) 84.4%);
	clip-path: path("M508.4 217.5C474.3 175.3 489.5 103.5 445.6 71.4C399.5 37.8 336.8 45.4 280 50.7C216.8 56.6 57.6 -38.3 27.6 17.6C-4.2 77.1 -6.7 124.4 10.8 189.6C20.8 226.5 178.6 363.9 182 402C189.8 486.5 67.6 661.3 149.5 780.8C231.4 900.2 439 888.6 535.9 805C632.8 721.4 485.8 626.4 532.6 575.2C579.2 524.2 684.6 423.7 675.2 355.2C665.2 282 554.9 274.9 508.4 217.5Z");
}

/* синее свечение из левого верхнего угла — единственный декор первого экрана.
   Селекторы декора с собственным 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 вверх и обрезается.
   flex-shrink: 0 — подпись/кнопка под кадром выше 80px не должна сжимать кадр:
   фото съезжало бы и вылезало за линию */
.hero-media {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	height: 520px;
}

.hero-media__frame {
	position: absolute;
	top: -60px;
	inset-inline-start: 0;
	overflow: hidden;
	width: 100%;
	height: 580px;                         /* низ кадра = низ .hero-media = линия подписи (-60 + 580 = 520) */
}

.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);
	}

	/* Мобилка: фрейм 360 × 7576, пятна от якорей секций (см. десктопный блок) */
	/* жёлтый → фиолетовый: bbox x 175..1160, y 3530..4342 */
	.bg-decor .blob-1 {
		inset-inline-start: calc(50% + 487px);
		top: calc(var(--decor-tech, 3745px) + 191px);
		width: 985px;
		height: 812px;
		opacity: var(--decor-o-soft);
		filter: blur(91px);
	}
	.bg-decor .blob-1 > i {
		background: linear-gradient(187.1deg, var(--decor-blob-1-from) 14.4%, var(--decor-blob-1-to) 100.5%);
		clip-path: path("M493.9 77.1C561.3 69 610.1 -8.6 677.3 0.8C747.8 10.6 797.4 72 843.8 126.1C895.4 186.3 1003.9 264.9 982.2 341.2C959.1 422.2 920.1 466.8 847.8 510C806.8 534.5 662.5 495.2 626.3 526.3C546 595.3 362 802.6 256.5 811.2C162.5 818.8 2.8 773.6 0 630.6C-2.8 487.7 158.9 463.5 161.4 377C163.9 290.7 156.7 108.9 224.7 55.7C297.3 -1.3 402.3 88.2 493.9 77.1Z");
	}

	/* синий → песочный: bbox x -910..153, y 864..2086 */
	.bg-decor .blob-2 {
		inset-inline-start: calc(50% - 558px);
		top: calc(var(--decor-products, 1421px) + 54px);
		width: 1063px;
		height: 1221px;
		opacity: var(--decor-o-strong);
		filter: blur(147px);
	}
	.bg-decor .blob-2 > i {
		background: linear-gradient(171.0deg, var(--decor-blob-2-from) -1.7%, var(--decor-blob-2-to) 87.4%);
		clip-path: path("M705.7 203.7C635.9 154.9 627.6 40.3 547.6 11.1C463.7 -19.5 372.5 19.3 289.4 51.9C196.8 88.2 30.3 111.4 9.4 208.6C-12.7 312 4.2 384.3 58.8 474.8C89.8 526.1 272.8 567.4 294.6 623.2C342.9 747 481.1 1126.8 593 1198.5C692.5 1262.3 831.8 1177.9 926.9 1107.5C1014.1 1042.9 816.3 785 864.5 687.7C912.5 590.6 1166.5 549.9 1016.5 338.4C866.5 126.8 800.6 269.9 705.7 203.7Z");
	}

	/* бирюза → лайм: bbox x 327..1156, y 6836..7593 */
	.bg-decor .blob-3 {
		inset-inline-start: calc(50% + 561px);
		top: calc(var(--decor-footer, 6848px) + 367px);
		width: 829px;
		height: 757px;
		opacity: var(--decor-o-soft);
		filter: blur(196px);
	}
	.bg-decor .blob-3 > i {
		background: linear-gradient(210.5deg, var(--decor-blob-3-from) 5.9%, var(--decor-blob-3-to) 85.0%);
		clip-path: path("M379.7 84.1C437.3 70.4 471.9 -1.6 531 0C593 1.6 642 49.9 687.5 92.2C738.1 139.2 839.8 196.7 828.4 264.9C816.4 337.3 787 379.7 728.6 424.3C695.5 449.5 566.7 429.6 538.4 460.1C475.6 527.7 289.4 738 198.9 755.8C118.3 771.6 49.8 681.5 6.3 611.8C-33.6 547.8 127.5 451.5 121.2 376.4C114.9 301.4 90.9 144.7 144.5 91.9C201.8 35.5 301.5 102.7 379.7 84.1Z");
	}

	/* оранжевый → голубой: bbox x -458..267, y 4396..5406 */
	.bg-decor .blob-4 {
		inset-inline-start: calc(50% - 275px);
		top: calc(var(--decor-team, 5064px) - 163px);
		width: 724px;
		height: 1011px;
		opacity: var(--decor-o-soft);
		filter: blur(196px);
	}
	.bg-decor .blob-4 > i {
		background: linear-gradient(5.9deg, var(--decor-blob-4-from) 15.8%, var(--decor-blob-4-to) 105.2%);
		clip-path: path("M168.6 725.9C199.7 785.9 163.1 869.5 208.6 919.6C256.2 972.1 334.6 978.5 405 986.4C483.5 995.1 609.1 1040.3 659.6 979.7C713.4 915.2 728.2 858.2 723.3 774.4C720.4 726.9 525.9 628.1 496 516.4C466.1 404.7 667.5 160.3 615.4 68.6C569.1 -13.1 440 -5.2 347.2 9.1C262.1 22.3 298.8 233.5 229 284.1C159.3 334.6 5.7 430.6 0 516.4C-6.1 608.1 126.4 644.3 168.6 725.9Z");
	}

	/* бирюза → оранжевый: bbox x -247..159, y 8076..8598 */
	.bg-decor .blob-5 {
		inset-inline-start: calc(50% - 224px);
		top: calc(var(--decor-footer, 6848px) + 1489px);
		width: 406px;
		height: 522px;
		opacity: var(--decor-o-strong);
		filter: blur(196px);
	}
	.bg-decor .blob-5 > i {
		background: linear-gradient(187.1deg, var(--decor-blob-5-from) 2.0%, var(--decor-blob-5-to) 84.4%);
		clip-path: path("M305.6 130.7C285.1 105.4 294.2 62.2 267.8 42.9C240.2 22.7 202.4 27.3 168.3 30.5C130.3 34 34.6 -23.1 16.6 10.6C-2.6 46.3 -4 74.8 6.5 113.9C12.5 136.2 107.3 218.8 109.4 241.7C114.1 292.4 40.6 397.5 89.8 469.3C139.1 541.1 263.9 534.1 322.1 483.9C380.4 433.6 292 376.5 320.1 345.8C348.2 315.1 411.5 254.7 405.9 213.5C399.8 169.5 333.6 165.3 305.6 130.7Z");
	}

	.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?17919765396442*/
/*	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-blob-5-from: #00ffc4;
	--decor-blob-5-to: #ff8833;
	--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?17919765395799*/
/*	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-blob-5-from: #00ffc4;
	--decor-blob-5-to: #ff8833;
	--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?179215945532902*/
/* 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;
	}
}

/* DMTSITES-1982. Новые фото первых экранов (главная, «Продукты и цены»,
   «О компании») заказчик прислал уже обрезанными ровно под кадр — 510×617.
   В base.css картинка внутри кадра позиционируется вручную: на каждом
   брейкпоинте свои width/height и отрицательный margin-inline-start,
   подобранные под СТАРЫЕ фото (они были крупнее кадра и кадрировались).
   С новым кропом эта подгонка лишняя — гасим её разом для всех трёх первых
   экранов и всех брейкпоинтов.
   Ширина именно 510px, а не 100% кадра (правка по второму кругу замечаний,
   24.09.2026): колонка .hero-aside резиновая (flex: 510 1 0) и на широком
   экране шире 510 — на 100% фото раздувалось и кадр «вставал криво».
   max-width: 100% оставляет мобильный кадр уже 510 работать по-старому,
   центрирование — логическое (inset-inline: 0 + margin-inline: auto), под
   будущий RTL.
   transform: none снимает зеркало (scaleX(-1)) главной из base.css: оно было
   рассчитано на старое фото, на новом заказчик зеркало забраковал. */
.hero-media img,
.products-hero .hero-media img,
.about-hero .hero-media img {
	inset-inline: 0;
	width: 510px;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	object-fit: contain;
	transform: none;
}

/* DMTSITES-1982. Примечание под названием продукта в юните «Наши продукты»
   (главная и «О компании»): заказчик просит его «радужным, как на страницах
   продуктов», а не врезкой выделенного текста. На странице продукта тот же
   ACCENT_TEXT выводится как .hero-lead — градиент var(--lead-from) →
   var(--lead-to); повторяем его модификатором поверх .note.
   Класс .note с элемента не снят намеренно: в нём живёт кегль (26px, на узких
   20px) — он совпадает с .hero-lead, и дублировать брейкпоинты незачем.
   Снимаем от .note только то, что делало его врезкой: линии и поля. */
.product-note {
	padding-block: 0;
	border: 0;
	background: linear-gradient(90deg, var(--lead-from) 0%, var(--lead-to) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

/* DMTSITES-1982, п.7. Полоса якорей в статье на десктопе: одна строка во всю
   ширину страницы вправо, линии слева обрезаны по левому краю текста.
   Было наоборот: линии уходили за ЛЕВЫЙ край экрана, ссылки жались вправо
   и переносились на 2–3 строки.
   Мобильное поведение (прокрутка вбок, вылет вправо) не трогаем — заказчик как
   раз назвал его эталоном, поэтому правила начинаются там, где кончается
   мобильный брейкпоинт base.css, — с 768px. Планшет сюда входит намеренно:
   <nav> вынесен из колонки .product-hero__text в нижний ряд (иначе полоса
   упиралась в 849px колонки), а колоночный .product-hero__bottom в base.css
   задан только до 767.98px — без правила на 768–991.98 полоса встала бы
   В СТРОКУ рядом с текстом.
   Побочный эффект переноса: правило .article-hero .product-hero__text
   { gap: 30px } (base.css, мобильный блок) держало отступ между nav и текстом
   и теперь ни на что не влияет — в колонке остался один абзац. Сам base.css
   не трогаем, он должен совпадать с layout-репозиторием. */
@media (min-width: 768px) {
	.article-hero .product-hero__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
	}

	/* flex-basis у колонки — ширина; в колоночном флексе он стал бы высотой
	   (та же оговорка, что и в мобильных правилах base.css) */
	.article-hero .product-hero__text {
		flex: 0 0 auto;
		width: 849px;                      /* колонка макета 849 при контенте 1280 */
		max-width: 100%;
	}

	.article-hero .anchor-nav {
		width: calc(100% + var(--bleed));
		overflow-x: auto;
		margin-inline: 0 calc(var(--bleed) * -1);
		padding-inline: 0 var(--bleed);
		scrollbar-width: none;
		overscroll-behavior-inline: contain;
	}

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

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

/* DMTSITES-1982, п.3. Вертикальная прокрутка над слайдером «спотыкалась».
   Причина не в нашем коде: в carousel.css самой библиотеки у .carousel__slide
   стоит overflow-y: auto + overscroll-behavior: contain — каждый слайд является
   скролл-контейнером, и contain запрещает передавать прокрутку дальше странице.
   Слайды у нас — карточки фиксированной высоты, своя прокрутка им не нужна.
   Трогаем только вертикальную ось: overflow-x: hidden у библиотеки оставляем.
   Оговорка: при overflow-x: hidden браузер всё равно вычислит overflow-y как
   auto (visible рядом с hidden невозможен) — слайд формально останется скролл-
   контейнером, поэтому решает здесь именно overscroll-behavior: прокрутка снова
   передаётся странице. Горизонтальное листание смахиванием — в скрипте
   слайдеров (footer.php). */
.carousel__slide {
	overflow-y: visible;
	overscroll-behavior: auto;
}

/* DMTSITES-1982, п.8. Под фото первого экрана вместо кнопки «Чем вам помочь?» —
   линия и подпись: ФИО, под ним должность. Линия шириной с бывшую кнопку,
   то есть во всю колонку .hero-aside (у .btn-accent было width: 100%).
   Кегли взяты от соседей по первому экрану: имя — как .hero-lead (26/20),
   должность — как текст .hero-desc (20/18). */
.hero-person {
	position: relative;
	z-index: 1;                            /* иначе низ иллюстрации (кадр свисает
	                                          ниже .hero-media) накрывает подпись —
	                                          у бывшей кнопки в base.css z-index
	                                          стоял ровно за этим */
	width: 100%;
	border-block-start: 1px solid var(--text);
	padding-block-start: 20px;
	text-align: center;                    /* по правке заказчика от 24.09.2026 */
}

.hero-person__name {
	font-size: 26px;
	font-weight: 600;
}

.hero-person__role {
	margin-block-start: 5px;
	font-size: 20px;
}

@media (max-width: 767.98px) {
	.hero-person__name {
		font-size: 20px;
	}

	.hero-person__role {
		font-size: 18px;
	}
}

/* DMTSITES-1982, п.4 — ОТЛОЖЕН, правок здесь намеренно нет (24.09.2026).
   Заказчик просил, чтобы на мобилке фон под текстами был как под центральным
   контентом на десктопе, а не «боковой». Пробовали дважды: сначала гасили пятна
   .blob-* (не устроило — под текстом оставался синий луч .glow-1), потом клали
   контент на непрозрачный var(--bg) (закрывало и «планету» первого экрана, а в
   мобильном макете она есть). Мобильный фрейм макета подтверждает: подсветки на
   мобилке задуманы, вопрос в том, как именно текст должен лежать поверх них, —
   то есть расхождение пришло из вёрстки и решается с верстальщиком, а не
   точечным CSS поверх. До этого решения мобильный фон остаётся как в вёрстке. */

/* Навигация лендингов продуктов по актуальной вёрстке: линия вылетает влево
   до края контейнера, а пункты центрируются в оставшейся ширине. Если все
   пункты не помещаются, сохраняем горизонтальную прокрутку. */
@media (min-width: 768px) {
	.product-hero .anchor-nav {
		width: calc(100% + var(--bleed));
		overflow-x: auto;
		margin-inline-start: calc(var(--bleed) * -1);
		padding-inline-start: var(--bleed);
		padding-inline-end: 12px;
		scrollbar-width: none;
		overscroll-behavior-inline: contain;
	}

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

	.product-hero .anchor-nav ul {
		flex-wrap: nowrap;
		justify-content: center;
		width: 100%;
		min-width: max-content;
		padding-inline: 0;
	}
}

/* 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?1791976539132532 */
/* /local/templates/dmtlab/css/theme-dark.css?17919765396442 */
/* /local/templates/dmtlab/css/theme-light.css?17919765395799 */
/* /local/templates/dmtlab/css/fixes.css?179215945532902 */
