@font-face {
    font-family: "wpf5b8dd4";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/52910d/fonts/open-sans-700.latin.woff2) format("woff2");
    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: "wpf5b8dd4";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/52910d/fonts/open-sans-700.latin-ext.woff2) format("woff2");
    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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "wpfa7a94c";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/52910d/fonts/lato-400.latin.woff2) format("woff2");
    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: "wpfa7a94c";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/52910d/fonts/lato-400.latin-ext.woff2) format("woff2");
    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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "wpfa7a94c";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/52910d/fonts/lato-700.latin.woff2) format("woff2");
    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: "wpfa7a94c";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/52910d/fonts/lato-700.latin-ext.woff2) format("woff2");
    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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
    --dwva: rgb(99,121,12);
    --lse4: rgb(58,73,1);
    --gnzj: rgb(81,188,99);
    --lhc9: rgb(247,249,243);
    --zdm8: rgb(255,255,255);
    --twkq: rgb(37,40,29);
    --l0md: rgb(107,114,94);
    --bitj: rgb(223,227,215);
    --lph8: rgb(255,255,255);
    --t0ka: rgb(17,17,17);
    --yc7k: rgb(236,239,226);
    --gvv4: rgb(234,247,236);
    --jwl4: "wpf5b8dd4", "Segoe UI", Roboto, Arial, sans-serif;
    --sg34: "wpfa7a94c", Arial, Helvetica, sans-serif;
    --d256: 700;
    --h6hj: 0;
    --j4ik: 0;
    --wzgk: 0;
    --ktz8: 0;
    --rh05: 0;
    --z4qz: 62rem;
    --j58g: 46rem;
    --odow: 15px;
    --ncbq: 2.4rem;
    --x3s1: 1.5rem;
    --fz2r: 2.1rem;
    --v7tr: 0 1px 2px rgba(17, 34, 39, .05);
    --b5b6: 0 8px 24px rgba(17, 34, 39, .07);
    --h3or: 0 20px 52px rgba(17, 34, 39, .12);
    --vcvh: 24px;
    --dok9: 0.8
}

*, *::before, *::after {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--jwl4);
    font-weight: var(--d256);
    letter-spacing: var(--h6hj);
    line-height: 1.22
}

p {
    margin: 0
}

ul, ol {
    list-style: none;
    padding: 0;
    margin: 0
}

a {
    text-decoration: none;
    color: inherit
}

svg {
    flex: none;
    display: block
}

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

[hidden] {
    display: none !important
}

.ui_page {
    margin: 0;
    background: var(--lhc9);
    color: var(--twkq);
    font-family: var(--sg34);
    font-size: var(--odow);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased
}

.ui_main {
    display: block
}

.ui_frame {
    max-width: var(--z4qz);
    padding: 0 22px;
    margin: 0 auto;
    width: 100%
}

.ui_frame__sm {
    padding: 0 22px;
    width: 100%;
    max-width: var(--j58g);
    margin: 0 auto
}

.ui_block {
    padding: calc(var(--fz2r) + 1.5rem) 0
}

.ui_block__tint {
    background: var(--yc7k)
}

.ui_block__head {
    margin: 0 auto 38px;
    max-width: 640px;
    text-align: center
}

.ui_block__head-left {
    text-align: left;
    margin: 0
}

.ui_block__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--dwva);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase
}

.ui_block__caption {
    font-size: calc(var(--x3s1) * 1.15)
}

.ui_block__opening {
    color: var(--l0md);
    margin-top: 14px
}

/* buttons */

.ui_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--jwl4);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease
}

.ui_btn:hover {
    transform: translateY(-1px)
}

.ui_btn:active {
    transform: translateY(0)
}

.ui_btn__primary {
    color: var(--lph8);
    background: var(--dwva);
    box-shadow: var(--b5b6)
}

.ui_btn__primary:hover {
    background: var(--lse4)
}

.ui_btn__ghost {
    border-color: var(--bitj);
    background: var(--zdm8);
    color: var(--dwva)
}

.ui_btn__ghost:hover {
    border-color: var(--dwva);
    background: var(--yc7k)
}

.ui_btn__lg {
    font-size: 18px;
    padding: 16px 34px
}

/* header */

.ui_hdr {
    border-bottom: 1px solid var(--bitj);
    z-index: 2;
    background: var(--zdm8);
    position: relative
}

.ui_hdr__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 78px;
    padding-top: 12px;
    padding-bottom: 12px
}

.ui_hdr__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px
}

.ui_hdr__badge {
    color: var(--dwva);
    display: inline-flex;
    align-items: center
}

.ui_hdr__words {
    display: flex;
    flex-direction: column
}

.ui_hdr__name {
    font-family: var(--jwl4);
    font-size: 20px;
    font-weight: var(--d256);
    letter-spacing: var(--h6hj);
    color: var(--twkq)
}

.ui_hdr__chip {
    color: var(--l0md);
    max-width: 320px;
    overflow: hidden;
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35
}

.ui_hdr__nav {
    gap: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.ui_hdr__ref {
    border-radius: var(--j4ik);
    color: var(--l0md);
    transition: color .15s ease, background-color .15s ease;
    padding: 8px 12px;
    font-size: 15px
}

.ui_hdr__ref:hover {
    color: var(--dwva);
    background: var(--yc7k)
}

.ui_hdr__cta {
    padding: 10px 20px;
    font-size: 15px;
    margin-left: 8px
}

/* header, варіант зі стеком */

.ui_hdr__stack .ui_hdr__inner {
    flex-direction: column;
    gap: 14px;
    padding-top: 22px;
    padding-bottom: 6px
}

.ui_hdr__stack .ui_hdr__nav {
    padding: 6px 0 14px;
    width: 100%;
    justify-content: center;
    border-top: 1px solid var(--bitj)
}

.ui_hdr__stack .ui_hdr__name {
    font-size: 24px
}

.ui_hdr__strip {
    background: var(--dwva);
    text-align: center;
    color: var(--lph8)
}

.ui_hdr__strip-words {
    padding: 7px 0;
    display: inline-block;
    font-size: 13px;
    opacity: .92
}

/* hero */

.ui_banner {
    padding: 76px 0 64px
}

.ui_banner__body {
    display: block
}

.ui_banner__eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--gvv4);
    color: var(--twkq);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em
}

.ui_banner__caption {
    font-size: min(calc(var(--ncbq) * 1.1), 56px)
}

.ui_banner__sub {
    font-size: 19px;
    margin-top: 18px;
    color: var(--l0md)
}

.ui_banner__actions {
    align-items: center;
    gap: 18px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px
}

.ui_banner__small {
    gap: 8px;
    color: var(--l0md);
    align-items: center;
    font-size: 14.5px;
    display: inline-flex;
    margin-top: 16px
}

.ui_banner__small-glyph {
    display: inline-flex;
    color: var(--dwva)
}

.ui_banner__bullets {
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
    display: flex
}

.ui_banner__bullet {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border: 1px solid var(--bitj);
    border-radius: 999px;
    background: var(--zdm8);
    box-shadow: var(--v7tr);
    font-size: 14.5px
}

.ui_banner__bullet-glyph {
    color: var(--dwva);
    display: inline-flex
}

/* hero - центрований */

.ui_banner__center {
    text-align: center
}

.ui_banner__center .ui_banner__actions {
    justify-content: center
}

.ui_banner__center .ui_banner__bullets {
    justify-content: center
}

/* hero - двоколонковий */

.ui_banner__split {
    background: linear-gradient(180deg, var(--yc7k) 0%, var(--lhc9) 72%)
}

.ui_banner__columns {
    gap: 52px;
    grid-template-columns: 1.05fr .95fr;
    display: grid;
    align-items: center
}

.ui_banner__art {
    display: block;
    padding: 32px 30px;
    border: 1px solid var(--bitj);
    border-radius: var(--rh05);
    background: var(--zdm8);
    box-shadow: var(--h3or)
}

.ui_banner__art-badge {
    width: 66px;
    display: inline-flex;
    color: var(--dwva);
    border-radius: 50%;
    justify-content: center;
    background: var(--yc7k);
    align-items: center;
    height: 66px
}

.ui_banner__art-caption {
    display: block;
    margin-top: 18px;
    font-family: var(--jwl4);
    font-size: 21px;
    font-weight: var(--d256);
    letter-spacing: var(--h6hj)
}

.ui_banner__art-series {
    display: grid;
    gap: 12px;
    margin-top: 18px
}

.ui_banner__art-item {
    align-items: flex-start;
    border-top: 1px solid var(--bitj);
    font-size: 15px;
    color: var(--l0md);
    padding-top: 12px;
    gap: 10px;
    display: flex
}

.ui_banner__art-item:first-child {
    padding-top: 0;
    border-top: 0
}

/* hero - з картками */

.ui_banner__cards {
    text-align: left
}

.ui_banner__cols {
    margin-top: 42px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    display: grid
}

.ui_banner__card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--bitj);
    border-radius: var(--ktz8);
    background: var(--zdm8);
    box-shadow: var(--v7tr)
}

.ui_banner__card-glyph {
    background: var(--gvv4);
    justify-content: center;
    color: var(--twkq);
    display: inline-flex;
    align-items: center;
    border-radius: var(--wzgk);
    width: 44px;
    height: 44px
}

.ui_banner__card-words {
    font-size: 15px;
    color: var(--l0md)
}

.ui_banner__cards .ui_banner__eyebrow {
    padding: 0;
    background: none;
    margin: 34px 0 0;
    color: var(--l0md)
}

/* quiz */

.ui_survey {
    scroll-margin-top: 20px
}

.ui_survey__head {
    max-width: 640px;
    margin: 0 auto 30px;
    text-align: center
}

.ui_survey__caption {
    font-size: calc(var(--x3s1) * 1.15)
}

.ui_survey__small {
    margin-top: 12px;
    color: var(--l0md)
}

.ui_survey__crate {
    position: relative;
    padding: 30px;
    border: 1px solid var(--bitj);
    border-radius: var(--rh05);
    background: var(--zdm8);
    box-shadow: var(--h3or)
}

.ui_survey__crate-flat {
    padding: 34px 30px 30px;
    box-shadow: var(--b5b6);
    border-radius: var(--ktz8)
}

.ui_survey__crate-flat .ui_survey__head {
    margin-bottom: 22px
}

.ui_survey__top {
    margin-bottom: 26px;
    display: flex;
    gap: 14px;
    align-items: center
}

.ui_survey__bar {
    position: relative;
    height: 7px;
    border-radius: 999px;
    background: var(--bitj);
    flex: 1 1 auto;
    overflow: hidden;
    display: block
}

.ui_survey__bar-fill {
    background: var(--dwva);
    transition: width .35s ease;
    height: 100%;
    border-radius: 999px;
    width: 0;
    display: block
}

.ui_survey__counter {
    flex: none;
    color: var(--l0md);
    font-family: var(--jwl4);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em
}

.ui_survey__dots {
    display: flex;
    flex: none;
    align-items: center;
    gap: 7px
}

.ui_survey__dot {
    border-radius: 50%;
    background: var(--bitj);
    height: 9px;
    display: block;
    width: 9px;
    transition: background-color .2s ease, transform .2s ease
}

.ui_survey__dot-on {
    transform: scale(1.15);
    background: var(--dwva)
}

.ui_survey__plain .ui_survey__bar {
    height: 4px;
    flex: 1 1 auto
}

.ui_survey__move {
    display: block
}

.ui_survey__move-on {
    animation: rwy0h1 .32s ease both
}

@keyframes rwy0h1 {
    from {
    transform: translateY(8px);
    opacity: 0
}
    to {
    transform: translateY(0);
    opacity: 1
}
}

.ui_survey__kicker {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--dwva);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em
}

.ui_survey__q {
    font-size: 24px
}

.ui_survey__opts {
    margin-top: 24px;
    gap: 12px;
    display: grid
}

.ui_survey__opt {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 20px;
    border: 1.5px solid var(--bitj);
    border-radius: var(--ktz8);
    background: var(--zdm8);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease
}

.ui_survey__opt:hover {
    border-color: var(--dwva);
    background: var(--yc7k);
    transform: translateY(-1px)
}

.ui_survey__opt-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--bitj);
    border-radius: 50%;
    color: var(--l0md);
    font-family: var(--jwl4);
    font-size: 12px;
    font-weight: 700;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease
}

.ui_survey__opt-label {
    line-height: 1.45;
    font-size: 16.5px
}

.ui_survey__opt-on {
    box-shadow: var(--b5b6);
    background: var(--yc7k);
    border-color: var(--dwva)
}

.ui_survey__opt-on .ui_survey__opt-badge {
    border-color: var(--dwva);
    color: var(--lph8);
    background: var(--dwva)
}

/* quiz - компактні рядки */

.ui_survey__rows {
    gap: 8px
}

.ui_survey__opt-bar {
    padding: 13px 16px;
    border-width: 1px;
    border-radius: var(--wzgk)
}

.ui_survey__opt-bar .ui_survey__opt-badge {
    border-radius: var(--j4ik);
    width: 26px;
    height: 26px
}

.ui_survey__opt-bar .ui_survey__opt-label {
    font-size: 15.5px
}

/* quiz - обробка */

.ui_survey__analyzing {
    display: flex;
    align-items: center;
    padding: 26px 0 12px;
    gap: 22px;
    text-align: center;
    flex-direction: column
}

.ui_survey__spin {
    display: block;
    width: 44px;
    height: 44px;
    border: 3px solid var(--bitj);
    border-top-color: var(--dwva);
    border-radius: 50%;
    animation: ay3rvo 1s linear infinite
}

@keyframes ay3rvo {
    to {
    transform: rotate(360deg)
}
}

.ui_survey__lines {
    gap: 10px;
    width: 100%;
    max-width: 420px;
    display: grid
}

.ui_survey__line {
    gap: 10px;
    transition: opacity .3s ease, color .3s ease;
    color: var(--l0md);
    opacity: .45;
    text-align: left;
    font-size: 15px;
    display: flex;
    align-items: center
}

.ui_survey__line-dot {
    height: 8px;
    flex: none;
    width: 8px;
    transition: background-color .3s ease;
    display: block;
    background: var(--bitj);
    border-radius: 50%
}

.ui_survey__line-on {
    opacity: 1;
    color: var(--twkq)
}

.ui_survey__line-on .ui_survey__line-dot {
    background: var(--dwva)
}

/* quiz - результат */

.ui_survey__result {
    display: block;
    animation: rwy0h1 .4s ease both
}

.ui_survey__result-head {
    align-items: center;
    display: flex;
    gap: 14px
}

.ui_survey__result-glyph {
    width: 58px;
    align-items: center;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--yc7k);
    flex: none;
    color: var(--dwva);
    height: 58px;
    display: inline-flex;
    justify-content: center
}

.ui_survey__result-head .ui_survey__result-glyph {
    width: 48px;
    margin-bottom: 0;
    height: 48px
}

.ui_survey__result-caption {
    font-size: 26px
}

.ui_survey__result-sum {
    color: var(--l0md);
    margin-top: 14px
}

.ui_survey__tips {
    padding-top: 24px;
    display: grid;
    margin-top: 24px;
    border-top: 1px solid var(--bitj);
    gap: 12px
}

.ui_survey__tip {
    align-items: flex-start;
    font-size: 16px;
    display: flex;
    gap: 11px
}

.ui_survey__tip-glyph {
    display: inline-flex;
    margin-top: 4px;
    color: var(--dwva)
}

.ui_survey__tips-num {
    counter-reset: wptip
}

.ui_survey__tips-num .ui_survey__tip {
    position: relative;
    padding-left: 38px
}

.ui_survey__tips-num .ui_survey__tip::before {
    counter-increment: wptip;
    content: counter(wptip);
    position: absolute;
    left: 0;
    top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gvv4);
    color: var(--twkq);
    font-family: var(--jwl4);
    font-size: 13px;
    font-weight: 700
}

.ui_survey__actions {
    margin-top: 26px
}

.ui_survey__restart {
    font-size: 15px;
    padding: 11px 22px
}

.ui_survey__foot {
    text-align: center;
    margin-top: 18px;
    font-size: 14px;
    color: var(--l0md)
}

/* highlights */

.ui_feats {
    padding-bottom: 58px
}

.ui_feats__cols {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
}

.ui_point {
    display: block;
    padding: 26px 24px;
    border: 1px solid var(--bitj);
    border-radius: var(--ktz8);
    background: var(--zdm8);
    box-shadow: var(--v7tr);
    transition: box-shadow .2s ease, transform .2s ease
}

.ui_point:hover {
    transform: translateY(-2px);
    box-shadow: var(--b5b6)
}

.ui_point__glyph {
    border-radius: var(--wzgk);
    align-items: center;
    height: 50px;
    color: var(--dwva);
    display: inline-flex;
    margin-bottom: 16px;
    justify-content: center;
    width: 50px;
    background: var(--yc7k)
}

.ui_point__glyph-inline {
    width: auto;
    height: auto;
    vertical-align: middle;
    background: none;
    margin: 0 8px 0 0;
    padding: 0
}

.ui_point__caption {
    display: flex;
    align-items: center;
    font-size: 20px
}

.ui_point__words {
    font-size: 15.5px;
    margin-top: 10px;
    color: var(--l0md)
}

.ui_feats__rows {
    gap: 14px;
    display: grid
}

.ui_point__bar {
    gap: 20px;
    align-items: flex-start;
    padding: 22px 24px;
    display: flex
}

.ui_point__bar:hover {
    transform: none
}

.ui_point__num {
    flex: none;
    color: var(--dwva);
    font-family: var(--jwl4);
    font-size: 26px;
    font-weight: var(--d256);
    letter-spacing: var(--h6hj);
    opacity: .55
}

.ui_point__body {
    flex: 1 1 auto
}

/* steps */

.ui_steps {
    padding-bottom: 58px
}

.ui_steps__bar {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr))
}

.ui_move {
    display: block;
    padding: 26px 22px;
    border: 1px solid var(--bitj);
    border-radius: var(--ktz8);
    background: var(--zdm8);
    box-shadow: var(--v7tr)
}

.ui_move__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--dwva);
    color: var(--lph8);
    font-family: var(--jwl4);
    font-size: 18px;
    font-weight: 700
}

.ui_move__words {
    color: var(--l0md);
    font-size: 15.5px
}

.ui_steps__split {
    align-items: start;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 52px
}

.ui_steps__line {
    display: grid;
    gap: 0
}

.ui_move__line {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 0 0 26px 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none
}

.ui_move__line::before {
    bottom: 0;
    left: 16px;
    content: "";
    width: 2px;
    position: absolute;
    top: 34px;
    background: var(--bitj)
}

.ui_move__line:last-child {
    padding-bottom: 0
}

.ui_move__line:last-child::before {
    display: none
}

.ui_move__num-sm {
    font-size: 15px;
    margin-bottom: 0;
    width: 34px;
    height: 34px
}

/* about-teaser */

.ui_teaser {
    padding-top: 58px
}

.ui_teaser__card {
    position: relative;
    padding: 34px 32px;
    border: 1px solid var(--bitj);
    border-left: 4px solid var(--dwva);
    border-radius: var(--ktz8);
    background: var(--zdm8);
    box-shadow: var(--b5b6)
}

.ui_teaser__glyph {
    border-radius: 50%;
    width: 52px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    color: var(--twkq);
    margin-bottom: 16px;
    height: 52px;
    background: var(--gvv4)
}

.ui_teaser__caption {
    font-size: 25px
}

.ui_teaser__words {
    color: var(--l0md);
    margin-top: 14px
}

.ui_teaser__ref {
    transition: border-color .15s ease;
    color: var(--dwva);
    border-bottom: 2px solid transparent
}

.ui_teaser__ref:hover {
    border-bottom-color: var(--dwva)
}

.ui_teaser__ref-btn {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    padding: 10px 20px;
    border: 1px solid var(--dwva);
    border-radius: 999px;
    font-family: var(--jwl4);
    font-size: 15px;
    font-weight: 600
}

.ui_teaser__ref-btn:hover {
    color: var(--lph8);
    border-bottom-color: var(--dwva);
    background: var(--dwva)
}

.ui_teaser__split {
    gap: 44px;
    align-items: start;
    grid-template-columns: .85fr 1.15fr;
    display: grid
}

.ui_teaser__side {
    display: block
}

.ui_teaser__main {
    padding-left: 34px;
    border-left: 1px solid var(--bitj)
}

/* faq */

.ui_faq {
    padding-bottom: 58px
}

.ui_faq__plain {
    padding-top: 58px
}

.ui_faq__series {
    gap: 12px;
    display: grid
}

.ui_faq__item {
    border: 1px solid var(--bitj);
    border-radius: var(--ktz8);
    background: var(--zdm8);
    box-shadow: var(--v7tr);
    overflow: hidden
}

.ui_faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    font-family: var(--jwl4);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    list-style: none
}

.ui_faq__q::-webkit-details-marker {
    display: none
}

.ui_faq__q:hover {
    color: var(--dwva)
}

.ui_faq__sign {
    width: 30px;
    height: 30px;
    display: inline-flex;
    border-radius: 50%;
    color: var(--dwva);
    flex: none;
    align-items: center;
    background: var(--yc7k);
    justify-content: center;
    transition: transform .2s ease
}

.ui_faq__item[open] .ui_faq__sign {
    transform: rotate(180deg)
}

.ui_faq__a {
    color: var(--l0md);
    font-size: 15.5px;
    padding: 0 22px 20px
}

.ui_faq__cols {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    display: grid;
    gap: 28px 34px
}

.ui_faq__block {
    display: block
}

.ui_faq__block-q {
    display: flex;
    font-size: 18px;
    align-items: flex-start;
    gap: 10px
}

.ui_faq__block-q .ui_faq__sign {
    margin-top: 1px;
    background: none;
    height: 26px;
    width: 26px
}

.ui_faq__block-a {
    margin-top: 10px;
    font-size: 15.5px;
    color: var(--l0md)
}

/* disclaimer */

.ui_disc {
    padding-top: 10px
}

.ui_disc__inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    border: 1px dashed var(--bitj);
    border-radius: var(--ktz8);
    background: var(--zdm8)
}

.ui_disc__glyph {
    flex: none;
    display: inline-flex;
    color: var(--l0md)
}

.ui_disc__words {
    line-height: 1.6;
    font-size: 14.5px;
    color: var(--l0md)
}

.ui_disc__strip {
    background: var(--zdm8);
    padding: 20px 0;
    border-top: 1px solid var(--bitj)
}

.ui_disc__strip .ui_disc__words {
    align-items: flex-start;
    display: flex;
    gap: 12px
}

.ui_disc__strip .ui_disc__glyph {
    margin-top: 2px
}

/* page-head */

.ui_phead {
    border-bottom: 1px solid var(--bitj);
    padding: 54px 0 44px;
    background: var(--yc7k)
}

.ui_phead__inner {
    display: block
}

.ui_phead__back {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--dwva);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em
}

.ui_phead__back:hover {
    text-decoration: underline
}

.ui_phead__caption {
    font-size: 36px
}

.ui_phead__sub {
    margin-top: 12px;
    color: var(--l0md)
}

.ui_phead__plain {
    background: var(--zdm8)
}

.ui_phead__plain .ui_phead__inner {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    display: grid;
    gap: 30px
}

.ui_phead__plain .ui_phead__back {
    margin: 14px 0 0
}

.ui_phead__inner-2 {
    display: block
}

/* footer */

.ui_foot {
    padding: 46px 0 26px;
    background: var(--zdm8);
    margin-top: 20px;
    border-top: 1px solid var(--bitj)
}

.ui_foot__inner-2 {
    justify-content: space-between;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    align-items: flex-start
}

.ui_foot__brand {
    max-width: 360px
}

.ui_foot__name {
    display: block;
    margin-top: 10px;
    font-family: var(--jwl4);
    font-size: 19px;
    font-weight: var(--d256);
    letter-spacing: var(--h6hj)
}

.ui_foot__small {
    margin-top: 8px;
    color: var(--l0md);
    font-size: 14.5px
}

.ui_foot__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px
}

.ui_foot__ref {
    color: var(--l0md);
    font-size: 14.5px
}

.ui_foot__ref:hover {
    text-decoration: underline;
    color: var(--dwva)
}

.ui_foot__nav-stack {
    flex-direction: column;
    gap: 8px
}

.ui_foot__wide {
    padding-top: 52px
}

.ui_foot__cols {
    display: grid;
    gap: 34px;
    grid-template-columns: 1.4fr 1fr 1fr
}

.ui_foot__inner {
    display: block
}

.ui_foot__inner-brand {
    max-width: 420px
}

.ui_foot__inner-caption {
    display: block;
    margin-bottom: 14px;
    font-family: var(--jwl4);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--twkq)
}

.ui_foot__bottom {
    display: flex;
    margin-top: 34px;
    padding-top: 20px;
    flex-wrap: wrap;
    border-top: 1px solid var(--bitj);
    justify-content: space-between;
    gap: 14px
}

.ui_foot__legal {
    font-size: 13.5px;
    color: var(--l0md)
}

/* контентні сторінки */

.ui_doc {
    display: block
}

.ui_prose {
    margin-bottom: 18px;
    color: var(--twkq);
    font-size: 16.5px
}

.ui_prose:last-child {
    margin-bottom: 0
}

.ui_contact__cols {
    display: grid;
    gap: 26px
}

.ui_contact__card {
    display: grid;
    gap: 4px;
    padding: 26px 28px;
    border: 1px solid var(--bitj);
    border-radius: var(--ktz8);
    background: var(--zdm8);
    box-shadow: var(--b5b6)
}

.ui_contact__bar {
    align-items: flex-start;
    gap: 14px;
    border-bottom: 1px solid var(--bitj);
    padding: 14px 0;
    display: flex
}

.ui_contact__bar:last-child {
    border-bottom: 0
}

.ui_contact__glyph {
    display: inline-flex;
    color: var(--dwva);
    margin-top: 3px;
    flex: none
}

.ui_contact__value {
    font-size: 16.5px;
    display: block
}

.ui_contact__label {
    display: block;
    margin-top: 2px;
    font-size: 14.5px;
    color: var(--l0md)
}

a.ui_contact__value:hover {
    text-decoration: underline;
    color: var(--dwva)
}

.ui_contact__opening {
    font-size: 14.5px;
    color: var(--l0md)
}

/* дата ревізії і реквізити */

.ui_rev {
    margin-top: 30px;
    color: var(--l0md);
    font-size: 13.5px;
    padding-top: 14px;
    border-top: 1px solid var(--bitj)
}

.ui_foot__reg {
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums
}

/* cookie-банер: варіант a - смуга, варіант b - картка в кутку */

.ui_consent {
    position: fixed;
    border: 1px solid var(--bitj);
    z-index: 40;
    box-shadow: var(--h3or);
    background: var(--zdm8)
}

.ui_consent__bar {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0
}

.ui_consent__inner {
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    display: flex;
    flex-wrap: wrap
}

.ui_consent__card {
    right: 22px;
    padding: 20px 22px;
    bottom: 22px;
    border-radius: var(--ktz8);
    width: 330px;
    max-width: calc(100vw - 44px)
}

.ui_consent__stack {
    justify-items: start;
    gap: 12px;
    display: grid
}

.ui_consent__glyph {
    display: inline-flex;
    color: var(--dwva)
}

.ui_consent__words {
    max-width: 62ch;
    font-size: 14.5px;
    color: var(--l0md)
}

.ui_consent__actions {
    align-items: center;
    display: flex;
    gap: 18px;
    flex-wrap: wrap
}

.ui_consent__accept {
    font-size: 15px;
    padding: 10px 22px
}

.ui_consent__more {
    color: var(--dwva);
    font-size: 14.5px;
    text-decoration: underline;
    text-underline-offset: 3px
}

.ui_consent__more:hover {
    color: var(--lse4)
}

/* джерела */

.ui_source {
    border-top: 1px solid var(--bitj)
}

.ui_source__bar {
    gap: 10px 28px;
    flex-wrap: wrap;
    display: flex
}

.ui_source__ref {
    color: var(--dwva);
    font-size: 15.5px;
    text-decoration: underline;
    text-underline-offset: 3px
}

.ui_source__ref:hover {
    color: var(--lse4)
}

.ui_source__cards {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
}

.ui_source__card {
    display: grid;
    gap: 8px;
    padding: 18px 20px;
    background: var(--zdm8);
    border: 1px solid var(--bitj);
    border-radius: var(--wzgk)
}

.ui_source__card-glyph {
    color: var(--dwva);
    display: inline-flex
}

.ui_source__card-caption {
    font-family: var(--jwl4);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35
}

.ui_source__card-caption:hover {
    color: var(--dwva);
    text-decoration: underline
}

.ui_source__card-host {
    color: var(--l0md);
    font-size: 13.5px
}

/* сторінка 404 */

.ui_nf {
    padding: 92px 0 100px
}

.ui_nf__inner {
    text-align: center
}

.ui_nf__caption {
    font-size: 32px
}

.ui_nf__words {
    margin-top: 14px;
    color: var(--l0md)
}

.ui_nf__cta {
    margin-top: 28px
}

/* адаптив */

@media (max-width: 960px) {
    .ui_banner__columns {
    gap: 36px;
    grid-template-columns: 1fr
}
    .ui_steps__split {
    gap: 28px;
    grid-template-columns: 1fr
}
    .ui_teaser__split {
    gap: 26px;
    grid-template-columns: 1fr
}
    .ui_teaser__main {
    padding-left: 0;
    border-left: 0
}
    .ui_foot__cols {
    grid-template-columns: 1fr 1fr
}
    .ui_foot__inner-brand {
    grid-column: 1 / -1
}
    .ui_phead__plain .ui_phead__inner {
    gap: 14px;
    grid-template-columns: 1fr
}
}

@media (max-width: 720px) {
    .ui_page {
    font-size: 16px
}
    .ui_block {
    padding: 48px 0
}
    .ui_banner {
    padding: 46px 0 40px
}
    .ui_banner__caption {
    font-size: 32px
}
    .ui_banner__sub {
    font-size: 17px
}
    .ui_banner__actions {
    gap: 12px
}
    .ui_btn__lg {
    font-size: 17px;
    padding: 15px 24px;
    width: 100%
}
    .ui_hdr__inner {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
    gap: 12px
}
    .ui_hdr__chip {
    display: none
}
    .ui_hdr__nav {
    width: 100%
}
    .ui_hdr__cta {
    margin-left: 0
}
    .ui_hdr__stack .ui_hdr__inner {
    align-items: center
}
    .ui_block__caption {
    font-size: 25px
}
    .ui_survey__caption {
    font-size: 25px
}
    .ui_survey__q {
    font-size: 20px
}
    .ui_survey__crate {
    padding: 22px 18px;
    border-radius: var(--ktz8)
}
    .ui_survey__crate-flat {
    padding: 24px 18px
}
    .ui_survey__opt {
    padding: 14px 16px;
    gap: 12px
}
    .ui_survey__opt-label {
    font-size: 15.5px
}
    .ui_survey__dots {
    display: none
}
    .ui_survey__result-caption {
    font-size: 22px
}
    .ui_survey__result-head {
    align-items: flex-start;
    gap: 12px
}
    .ui_phead {
    padding: 38px 0 32px
}
    .ui_phead__caption {
    font-size: 28px
}
    .ui_point__bar {
    padding: 20px;
    gap: 14px
}
    .ui_foot__cols {
    grid-template-columns: 1fr;
    gap: 26px
}
    .ui_foot__inner-2 {
    flex-direction: column;
    gap: 22px
}
    .ui_contact__card {
    padding: 20px
}
    .ui_nf {
    padding: 60px 0 68px
}
    .ui_nf__caption {
    font-size: 26px
}
    .ui_consent__inner {
    align-items: flex-start;
    gap: 12px;
    flex-direction: column
}
    .ui_consent__card {
    right: 12px;
    left: 12px;
    bottom: 12px;
    max-width: none;
    width: auto
}
    .ui_consent__accept {
    width: 100%
}
    .ui_source__cards {
    grid-template-columns: 1fr
}
}

@media (prefers-reduced-motion: reduce) {
    html {
    scroll-behavior: auto
}
    .ui_survey__move-on,
    .ui_survey__result {
    animation: none
}
    .ui_survey__spin {
    animation-duration: 3s
}
    .ui_btn:hover,
    .ui_survey__opt:hover,
    .ui_point:hover {
    transform: none
}
}

/* Декоративна смуга. Зображення генерується програмно і вставляється інлайном,
   тому окремих запитів на картинку немає. */
.ui_artband {
    line-height: 0;
    overflow: hidden
}
.ui_artband svg {
    height: clamp(120px, 18vw, 220px);
    width: 100%;
    display: block
}

.ui_artpanel__frame {
    padding: 8px 0 4px
}
.ui_artpanel {
    line-height: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--bitj)
}
.ui_artpanel svg {
    width: 100%;
    display: block;
    height: clamp(150px, 22vw, 280px)
}

/* тло сторінки і блоків

   Знімки тут не тільки картинками, а й фоном блоків - так роблять живі сайти, і це
   дає сторінці ще один-два запити по зображення. Накладка градієнтом обовʼязкова:
   без неї читабельність тексту залежала б від того, який кадр випав. */

.ui_banner {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.86), var(--lhc9) 92%),
        url(/52910d/img/IMG_5288.jpg?v=c8d47);
    background-size: cover;
    background-position: center
}

.ui_block__tint {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.96)),
        url(/52910d/img/photo43.jpg?v=c8d47);
    background-size: cover;
    background-position: center
}

/* знімок */

.ui_shot {
    margin: 0
}

/* Пропорція задана атрибутами width і height у розмітці, тому місце під картинку
   тримається до її завантаження і сторінка не стрибає. */
.ui_shot__img {
    display: block;
    height: auto;
    width: 100%
}

/* Кадр 3:2 на всю ширину займав би півекрана, тому підрізаємо по висоті. */
.ui_shot__belt .ui_shot__img {
    object-fit: cover;
    height: clamp(calc(180px * var(--dok9)), calc(26vw * var(--dok9)), calc(320px * var(--dok9)))
}

.ui_shot__card {
    overflow: hidden;
    border-radius: 18px
}

.ui_shot__card .ui_shot__img {
    height: clamp(calc(200px * var(--dok9)), calc(30vw * var(--dok9)), calc(380px * var(--dok9)));
    object-fit: cover
}

/* журнал правок */

.ui_log__series {
    grid-template-columns: minmax(6.5rem, auto) 1fr;
    gap: 10px 22px;
    margin: 18px 0 0;
    display: grid
}

.ui_log__date {
    font-size: 13px;
    color: var(--l0md);
    letter-spacing: 0.04em
}

.ui_log__small {
    font-size: 15px;
    margin: 0
}

.ui_log__rows {
    list-style: none;
    margin: 18px 0 0;
    padding: 0
}

.ui_log__bar {
    padding: 14px 0;
    border-top: 1px solid var(--bitj)
}

.ui_log__rows .ui_log__bar:first-child {
    border-top: 0
}

.ui_log__stamp {
    display: block;
    font-size: 13px;
    color: var(--l0md)
}

.ui_log__words {
    margin: 5px 0 0;
    font-size: 15px
}

@media (max-width: 640px) {
    .ui_log__series {
    grid-template-columns: 1fr;
    gap: 3px 0
}
    .ui_log__small {
    margin-bottom: 13px
}
}

.ui_shot__pair {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr 1fr
}

.ui_shot__pair .ui_shot__img {
    height: clamp(calc(160px * var(--dok9)), calc(22vw * var(--dok9)), calc(260px * var(--dok9)));
    object-fit: cover
}

@media (max-width: 560px) {
    .ui_shot__pair {
    grid-template-columns: 1fr
}
}

/* назва бренду поруч зі знаком: коли логотип це знак від моделі, тексту в ньому
   немає принципово, тому назву друкує рендерер */

.logo-name {
    font-family: var(--jwl4);
    font-size: 1.15rem;
    font-weight: var(--d256);
    letter-spacing: var(--h6hj);
    white-space: nowrap
}

/* нові варіанти середини: квіз у дві колонки, плитки, шкала кроків, тизер зі
   знімком, знімок на всю ширину, примітки. Кольорові панелі беруть змінні зони з
   напряму оформлення, тому все всередині них інвертується саме. Зону беремо ту, якої
   немає в героєві, щоб середина не повторювала перший екран. */

.ui_survey__duo {
    overflow: hidden;
    padding: 0;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    display: grid
}

.ui_survey__side {
    --lhc9: rgb(99,121,12);
    --zdm8: rgb(115,134,36);
    --twkq: rgb(255,255,255);
    --l0md: rgb(208,215,182);
    --bitj: rgb(133,150,65);
    --dwva: rgb(255,255,255);
    --lph8: rgb(99,121,12);
    --yc7k: rgb(121,140,46);
    --gnzj: rgb(255,255,255);
    --t0ka: rgb(99,121,12);
    --gvv4: rgb(121,140,46);
    --lse4: rgb(208,215,182);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px 34px;
    background: var(--lhc9);
    color: var(--twkq)
}

.ui_survey__side-glyph {
    color: var(--dwva);
    width: 48px;
    place-items: center;
    background: var(--zdm8);
    height: 48px;
    display: inline-grid;
    border-radius: var(--wzgk)
}

.ui_survey__side .ui_survey__caption {
    font-size: var(--x3s1)
}

.ui_survey__side .ui_survey__small {
    font-size: 15.5px;
    margin-top: 0
}

.ui_survey__meter {
    padding-top: 18px;
    gap: 10px;
    display: grid;
    margin-top: auto
}

.ui_survey__meter .ui_survey__counter {
    color: var(--twkq);
    font-size: 30px;
    font-weight: var(--d256);
    letter-spacing: 0
}

.ui_survey__track {
    gap: 6px;
    flex-wrap: wrap;
    display: flex
}

.ui_survey__track-dot {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--bitj);
    border-radius: var(--j4ik);
    background: transparent;
    color: var(--l0md);
    font-family: var(--jwl4);
    font-size: 13px;
    font-variant-numeric: tabular-nums
}

.ui_survey__track .ui_survey__dot-on {
    background: var(--dwva);
    transform: none;
    color: var(--lph8);
    border-color: var(--dwva)
}

.ui_survey__main {
    min-width: 0;
    padding: 40px 42px
}

.ui_survey__main .ui_survey__q {
    font-size: calc(var(--x3s1) * 0.95)
}

.ui_survey__tiles {
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr))
}

.ui_survey__opt-tile {
    justify-content: space-between;
    min-height: 108px;
    gap: 16px;
    padding: 16px 18px;
    border-radius: var(--wzgk);
    align-items: flex-start;
    flex-direction: column
}

.ui_survey__opt-tile .ui_survey__opt-badge {
    width: 20px;
    height: 20px
}

.ui_survey__tips-cols {
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
}

.ui_survey__tips-cols .ui_survey__tip {
    font-size: 15px;
    padding: 14px 16px;
    background: var(--yc7k);
    border-radius: var(--wzgk)
}

/* плитки переваг */

.ui_bento {
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid
}

.ui_bento__head {
    display: flex;
    padding: 8px 8px 8px 0;
    align-items: flex-end
}

.ui_bento__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px;
    border: 1px solid var(--bitj);
    border-radius: var(--rh05);
    background: var(--zdm8)
}

.ui_bento__big {
    --lhc9: rgb(58,73,1);
    --zdm8: rgb(78,91,26);
    --twkq: rgb(255,255,255);
    --l0md: rgb(196,200,179);
    --bitj: rgb(101,113,57);
    --dwva: rgb(255,255,255);
    --lph8: rgb(58,73,1);
    --yc7k: rgb(86,98,37);
    --gnzj: rgb(255,255,255);
    --t0ka: rgb(58,73,1);
    --gvv4: rgb(86,98,37);
    --lse4: rgb(196,200,179);
    grid-column: span 2;
    justify-content: flex-end;
    min-height: 240px;
    padding: 34px 32px;
    border-color: transparent;
    background: var(--lhc9);
    color: var(--twkq)
}


.ui_bento__item:nth-child(4):last-child {
    grid-column: span 2
}

.ui_bento__glyph {
    display: inline-flex;
    color: var(--dwva)
}

.ui_bento__caption {
    font-size: 19px
}

.ui_bento__big .ui_bento__caption {
    font-size: calc(var(--x3s1) * 1.05)
}

.ui_bento__words {
    color: var(--l0md);
    font-size: 15.5px
}

/* шкала кроків на кольоровій смузі */

.ui_steps__belt {
    --lhc9: rgb(99,121,12);
    --zdm8: rgb(115,134,36);
    --twkq: rgb(255,255,255);
    --l0md: rgb(208,215,182);
    --bitj: rgb(133,150,65);
    --dwva: rgb(255,255,255);
    --lph8: rgb(99,121,12);
    --yc7k: rgb(121,140,46);
    --gnzj: rgb(255,255,255);
    --t0ka: rgb(99,121,12);
    --gvv4: rgb(121,140,46);
    --lse4: rgb(208,215,182);
    background: var(--lhc9);
    color: var(--twkq)
}

.ui_steps__track {
    gap: 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))
}

.ui_move__tick {
    position: relative;
    display: grid;
    gap: 16px
}

.ui_move__tick::before {
    height: 2px;
    background: var(--bitj);
    content: "";
    position: absolute;
    right: -20px;
    top: 26px;
    left: 64px
}

.ui_move__tick:last-child::before {
    display: none
}

.ui_move__tick-num {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 2px solid var(--dwva);
    border-radius: 50%;
    color: var(--dwva);
    font-family: var(--jwl4);
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums
}

.ui_move__tick-words {
    font-size: 16.5px;
    color: var(--twkq)
}

/* тизер зі знімком */

.ui_teaser__media {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    display: grid
}

.ui_teaser__shot {
    margin: 0
}

.ui_teaser__img {
    height: clamp(260px, 32vw, 430px);
    object-fit: cover;
    display: block;
    border-radius: var(--rh05);
    width: 100%
}

.ui_teaser__plate {
    position: relative;
    z-index: 1;
    margin-left: -72px;
    padding: 34px 32px;
    border: 1px solid var(--bitj);
    border-radius: var(--rh05);
    background: var(--zdm8);
    box-shadow: var(--h3or)
}

.ui_teaser__media-flip {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr)
}

.ui_teaser__media-flip .ui_teaser__shot {
    order: 2
}

.ui_teaser__media-flip .ui_teaser__plate {
    margin-left: 0;
    margin-right: -72px
}

/* знімок на всю ширину */

.ui_shot__bleed {
    margin: 0
}

.ui_shot__bleed .ui_shot__img {
    height: clamp(calc(220px * var(--dok9)), calc(32vw * var(--dok9)), calc(440px * var(--dok9)));
    object-fit: cover
}

/* примітки */

.ui_notes__cols {
    align-items: start;
    display: grid;
    gap: 48px;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr)
}

.ui_notes__head {
    display: grid;
    justify-items: start;
    gap: 14px
}

.ui_notes__glyph {
    background: var(--gvv4);
    color: var(--twkq);
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    width: 46px;
    height: 46px
}

.ui_notes__words {
    font-size: 18px;
    line-height: 1.6
}

.ui_notes__contact {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin-top: 26px;
    padding: 20px 22px;
    border: 1px dashed var(--bitj);
    border-radius: var(--ktz8)
}

.ui_notes__contact-glyph {
    color: var(--dwva);
    grid-row: span 2;
    display: inline-flex;
    margin-top: 2px
}

.ui_notes__contact-words {
    color: var(--l0md);
    font-size: 15px
}

.ui_notes__ref {
    justify-self: start;
    color: var(--dwva);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px
}

.ui_notes__ref:hover {
    color: var(--lse4)
}

@media (max-width: 960px) {
    .ui_survey__duo {
    grid-template-columns: 1fr
}

    .ui_survey__side {
    padding: 28px 26px
}

    .ui_survey__meter {
    margin-top: 0;
    padding-top: 4px
}

    .ui_bento {
    grid-template-columns: 1fr 1fr
}

    .ui_bento__head {
    grid-column: 1 / -1
}

    .ui_bento__item:nth-child(4):last-child {
    grid-column: auto
}

    .ui_teaser__media,
    .ui_teaser__media-flip {
    grid-template-columns: 1fr
}

    .ui_teaser__media-flip .ui_teaser__shot {
    order: 0
}

    .ui_teaser__plate,
    .ui_teaser__media-flip .ui_teaser__plate {
    margin: -56px 18px 0
}

    .ui_notes__cols {
    gap: 22px;
    grid-template-columns: 1fr
}
}

@media (max-width: 720px) {
    .ui_survey__side {
    gap: 12px;
    padding: 22px 18px
}

    .ui_survey__track {
    display: none
}

    .ui_survey__meter .ui_survey__counter {
    font-size: 22px
}

    .ui_survey__main {
    padding: 24px 18px
}

    .ui_survey__main .ui_survey__q {
    font-size: 20px
}

    .ui_survey__tiles {
    grid-template-columns: 1fr;
    gap: 10px
}

    .ui_survey__opt-tile {
    min-height: 0;
    padding: 14px 16px;
    align-items: center;
    flex-direction: row
}

    .ui_bento {
    grid-template-columns: 1fr
}

    .ui_bento__big {
    padding: 26px 22px;
    min-height: 0;
    grid-column: auto
}

    .ui_steps__track {
    grid-template-columns: 1fr;
    gap: 22px
}

    .ui_move__tick {
    grid-template-columns: auto 1fr;
    align-items: start
}

    .ui_move__tick::before {
    right: auto;
    left: 26px;
    height: auto;
    bottom: -22px;
    top: 54px;
    width: 2px
}

    .ui_move__tick-words {
    padding-top: 12px
}

    .ui_teaser__plate,
    .ui_teaser__media-flip .ui_teaser__plate {
    margin: -40px 10px 0;
    padding: 24px 20px
}

    .ui_notes__words {
    font-size: 16.5px
}
}

/* шапка капсулою і шапка на три частини */

.ui_hdr__float {
    background: transparent;
    padding-top: 14px;
    border-bottom: 0
}

.ui_hdr__pill {
    min-height: 0;
    padding: 8px 10px 8px 20px;
    border: 1px solid var(--bitj);
    border-radius: 999px;
    background: var(--zdm8);
    box-shadow: var(--b5b6)
}

.ui_hdr__three {
    display: grid;
    grid-template-columns: 1fr auto 1fr
}

.ui_hdr__three .ui_hdr__brand {
    justify-self: start
}

.ui_hdr__three .ui_hdr__cta {
    margin-left: 0;
    justify-self: end
}

/* вступ навпіл і вступ-обкладинка */

.ui_banner__half {
    display: grid;
    min-height: clamp(28rem, 44vw, 38rem);
    padding: 0;
    grid-template-columns: 1fr 1fr
}

.ui_half__copy {
    width: 100%;
    padding: 56px clamp(22px, 5vw, 64px);
    align-self: center;
    justify-self: end;
    max-width: 38rem
}

.ui_half__shot {
    margin: 0
}

.ui_half__shot img,
.ui_cover__shot img {
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%
}

.ui_banner__half-flip .ui_half__shot {
    order: -1
}

.ui_banner__half-flip .ui_half__copy {
    justify-self: start
}

.ui_half__copy .ui_banner__caption,
.ui_cover__plate .ui_banner__caption {
    font-size: min(var(--ncbq), 46px)
}

.ui_banner__cover {
    padding: 0;
    display: grid;
    min-height: clamp(30rem, 50vw, 40rem);
    overflow: hidden;
    position: relative
}

.ui_cover__shot {
    position: absolute;
    margin: 0;
    inset: 0
}

.ui_cover__inner {
    position: relative;
    display: flex;
    align-items: center;
    padding-top: 56px;
    padding-bottom: 56px
}

.ui_cover__plate {
    max-width: 38rem;
    padding: 32px 34px;
    background: var(--lhc9);
    box-shadow: var(--h3or);
    border-radius: var(--rh05)
}

/* напрям оформлення: фони зон, тло, заголовки секцій, кнопки, картки, фото */

.ui_hdr {
    border-bottom-color: transparent;
    background: transparent
}

.ui_banner {
    border-bottom: 1px solid var(--bitj);
    background-color: var(--zdm8)
}


.ui_consent {
    --lhc9: rgb(58,73,1);
    --zdm8: rgb(78,91,26);
    --twkq: rgb(255,255,255);
    --l0md: rgb(196,200,179);
    --bitj: rgb(101,113,57);
    --dwva: rgb(255,255,255);
    --lph8: rgb(58,73,1);
    --yc7k: rgb(86,98,37);
    --gnzj: rgb(255,255,255);
    --t0ka: rgb(58,73,1);
    --gvv4: rgb(86,98,37);
    --lse4: rgb(196,200,179);
    border-color: transparent;
    background: var(--lhc9);
    color: var(--twkq)
}

.ui_page {
    background-color: rgb(237,240,227)
}



.ui_survey__crate,
.ui_banner__card,
.ui_banner__art {
    box-shadow: none;
    border-color: transparent
}

.ui_block__head .ui_block__caption {
    align-items: center;
    display: flex;
    gap: 18px
}

.ui_block__head .ui_block__caption::after,
.ui_block__head:not(.ui_block__head-left) .ui_block__caption::before {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--bitj)
}

.ui_btn {
    border-radius: var(--wzgk)
}

.ui_artpanel {
    border-radius: 0
}


@media (max-width: 960px) {
    .ui_banner__half {
    grid-template-columns: 1fr
}

    .ui_half__copy {
    max-width: none;
    justify-self: start
}

    .ui_half__shot img {
    height: 16rem
}

    .ui_banner__half-flip .ui_half__shot {
    order: 0
}

    .ui_hdr__three {
    grid-template-columns: auto 1fr
}

    .ui_hdr__three .ui_hdr__nav {
    justify-content: flex-end
}

    .ui_hdr__three .ui_hdr__cta {
    grid-column: 1 / -1;
    justify-self: start
}
}

@media (max-width: 720px) {
    .ui_half__copy .ui_banner__caption,
    .ui_cover__plate .ui_banner__caption {
    font-size: 32px
}

    .ui_half__copy {
    padding: 40px 22px
}

    .ui_cover__plate {
    padding: 24px 20px
}

    .ui_hdr__pill {
    border-radius: var(--ktz8)
}

    .ui_hdr__three {
    display: flex
}

    .ui_hdr__brand,
    .ui_hdr__badge {
    max-width: 100%
}

    .ui_hdr__badge svg {
    max-width: 100%;
    height: auto
}

    .ui_block__caption,
    .ui_survey__caption {
    font-size: min(calc(var(--x3s1) * 1.15), 25px)
}
}

/* епоха сайту: сучасна лишається як є (для неї тут не друкується жоден рядок),
   CMS-тема - як типова тема WordPress блогу про здоровʼя, саморобна - простий сайт,
   який автор зверстав сам. Стоїть після ручок напряму, щоб перекрити їх, і перед
   темним напрямом, бо той міняє лише кольори. */

.ui_block__eyebrow,
.ui_foot__inner-caption {
    text-transform: none;
    letter-spacing: 0
}

.ui_survey__kicker,
.ui_survey__counter,
.ui_phead__back,
.ui_log__date {
    letter-spacing: 0
}

.ui_btn:hover,
.ui_survey__opt:hover,
.ui_point:hover {
    transform: none
}

:root {
    --v7tr: none;
    --b5b6: none;
    --h3or: none
}


.ui_teaser__ref,
a.ui_contact__value {
    border-bottom: 0;
    color: var(--dwva);
    text-decoration: underline;
    text-underline-offset: 3px
}


.ui_teaser__ref-btn,
.ui_teaser__ref-btn:hover {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--dwva);
    font-family: var(--sg34)
}

.ui_block__head,
.ui_survey__head {
    margin-left: 0;
    margin-right: 0;
    text-align: left
}

.ui_banner__center,
.ui_nf__inner {
    text-align: left
}

.ui_banner__center .ui_banner__actions,
.ui_banner__center .ui_banner__bullets {
    justify-content: flex-start
}

.ui_block__head .ui_block__caption::before {
    content: none
}

.ui_crumbs {
    gap: 4px 8px;
    margin-bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    align-items: baseline;
    color: var(--l0md)
}

.ui_crumbs__home {
    color: var(--dwva);
    text-decoration: underline;
    text-underline-offset: 3px
}

.ui_crumbs__here {
    color: var(--twkq)
}


.ui_faq__sign::before {
    font-size: 22px;
    display: block;
    line-height: 1;
    content: "+"
}

.ui_faq__item[open] .ui_faq__sign {
    transform: rotate(45deg)
}

.ui_banner__art-caption:first-child {
    margin-top: 0
}


.ui_notes__contact-bare {
    grid-template-columns: 1fr
}


.ui_banner__bullets {
    gap: 6px;
    margin-top: 26px;
    display: grid
}

.ui_banner__bullet {
    align-items: flex-start;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 15.5px
}

.ui_banner__bullet .ui_banner__bullet-glyph {
    margin-top: 4px
}

.ui_banner__bullets {
    padding-left: 20px;
    list-style: disc
}

.ui_banner__bullet {
    display: list-item
}


.ui_banner__art-badge,
.ui_banner__card-glyph,
.ui_point__glyph,
.ui_teaser__glyph,
.ui_notes__glyph,
.ui_survey__result-glyph,
.ui_survey__side-glyph {
    height: auto;
    border-radius: 0;
    align-self: flex-start;
    width: auto;
    background: none
}

.ui_hdr__pill {
    border-radius: var(--wzgk)
}

.ui_survey__bar,
.ui_survey__bar-fill {
    border-radius: var(--j4ik)
}

.ui_survey__opt {
    border-width: 1px;
    border-radius: var(--wzgk)
}

.ui_hdr__ref {
    color: var(--twkq);
    font-weight: 500
}


.ui_phead {
    padding: 34px 0 28px
}

.ui_phead__caption {
    font-size: 30px
}


.ui_faq__series {
    gap: 0
}

.ui_faq__item {
    border-radius: 0
}

.ui_faq__item + .ui_faq__item {
    border-top: 0
}

.ui_faq__sign {
    background: none
}

.ui_teaser__card {
    border-radius: var(--wzgk)
}

.ui_foot__bottom {
    font-size: 13.5px
}

/* темний напрям: уся сторінка на темній версії палітри. Стоїть останнім, щоб :root
   перекрив світлі значення; зони шапки й героя перевизначають змінні в собі самі. */