@font-face {
    font-family: "wpf6eb6e6";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/dee918/fonts/inter-700.woff2) format("woff2");
}

@font-face {
    font-family: "wpf6dd572";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/dee918/fonts/source-serif-4-400.woff2) format("woff2");
}

@font-face {
    font-family: "wpf6dd572";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/dee918/fonts/source-serif-4-700.woff2) format("woff2");
}
:root {
    --ye0m:#12798f;
    --c998:#0c5768;
    --w3ee:#e78c46;
    --subf:#f3fafb;
    --jfdj:#ffffff;
    --hn0m:#0f2c33;
    --oi8t:#55787f;
    --d0ae:#d2e8ec;
    --lehb:#ffffff;
    --xf5n:#111111;
    --oddr:#e3eff2;
    --d0r5:#fcf1e9;
    --s822:"wpf6eb6e6", "Segoe UI", Roboto, Arial, sans-serif;
    --a3z2:"wpf6dd572", Georgia, "Times New Roman", serif;
    --g998:700;
    --c64o:-0.02em;
    --kzmr:4px;
    --qg0n:10px;
    --r86k:16px;
    --hddz:22px;
    --z2t2:#ffffff;
    --zuqm:rgba(255, 255, 255, .74);
    --nla4:rgba(255, 255, 255, .16);
    --q6q8:0 1px 2px rgba(16, 24, 32, .05);
    --zho6:0 10px 30px rgba(16, 24, 32, .09);
    --suao:0 26px 60px rgba(16, 24, 32, .16);
    --spr0:26px
}

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

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

body {
    margin:0
}

h1, h2, h3 {
    margin:0;
    font-family:var(--s822);
    font-weight:var(--g998);
    letter-spacing:var(--c64o);
    line-height:1.2
}

p {
    margin:0
}

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

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

svg {
    display:block;
    flex:none
}

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

i {
    font-style:normal
}

[hidden] {
    display:none !important
}

.or_page {
    margin:0;
    background:var(--subf);
    color:var(--hn0m);
    font-family:var(--a3z2);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased
}

.or_main {
    display:block
}

/* сітка */

.or_hull {
    margin:0 auto;
    width:100%;
    max-width:1160px;
    padding:0 24px
}

.or_hull__narrow {
    width:100%;
    margin:0 auto;
    padding:0 24px;
    max-width:780px
}

.or_belt {
    padding:74px 0
}

.or_belt__soft {
    background:var(--jfdj);
    border-top:1px solid var(--d0ae);
    border-bottom:1px solid var(--d0ae)
}

.or_belt__tight {
    padding:34px 0 54px
}

.or_belt__upper {
    margin-bottom:40px;
    max-width:620px
}

.or_belt__upper-wide {
    max-width:760px
}

.or_belt__upper-side {
    margin-bottom:0
}

.or_eyebrow {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
    color:var(--ye0m);
    font-family:var(--s822);
    font-size:12px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase
}

.or_eyebrow::before {
    width:26px;
    content:"";
    background:var(--ye0m);
    display:block;
    flex:none;
    height:2px
}

.or_belt__heading {
    font-size:32px
}

.or_belt__top {
    margin-top:16px;
    color:var(--oi8t);
    font-size:17px
}

/* кнопки */

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

.or_act__solid {
    background:var(--ye0m);
    color:var(--lehb)
}

.or_act__solid:hover {
    background:var(--c998)
}

.or_act__lg {
    padding:15px 32px;
    font-size:17px
}

/* поява секцій; клас ready ставить скрипт, тому без JS усе лишається видимим */

.or_ready .or_reveal {
    opacity:0;
    transition:opacity .5s ease, transform .5s ease;
    transform:translateY(16px)
}

.or_ready .or_reveal__on {
    transform:none;
    opacity:1
}

/* шапка */

.or_top-2 {
    background:var(--jfdj);
    border-bottom:1px solid var(--d0ae)
}

.or_top__inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    min-height:74px;
    padding-top:14px;
    padding-bottom:14px
}

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

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

.or_top__name {
    font-family:var(--s822);
    font-size:19px;
    font-weight:var(--g998);
    letter-spacing:var(--c64o)
}

.or_top__bar {
    flex-wrap:wrap;
    display:flex;
    align-items:center;
    gap:4px
}

.or_top__ref {
    padding:9px 12px;
    transition:color .15s ease, background-color .15s ease;
    color:var(--oi8t);
    border-radius:var(--kzmr);
    font-size:15px
}

.or_top__ref:hover {
    background:var(--subf);
    color:var(--hn0m)
}

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

/* шапка, варіант із рядком-нотаткою і нижнім рядом посилань */

.or_top__strip {
    color:var(--z2t2);
    background:var(--hn0m)
}

.or_top__strip-para {
    opacity:.88;
    font-size:13px;
    letter-spacing:.01em;
    padding:8px 0;
    display:inline-block
}

.or_top__stack-2 .or_top__inner {
    min-height:0;
    align-items:flex-end;
    padding-bottom:10px
}

.or_top__stack-2 .or_top__name {
    font-size:23px
}

.or_top__bar-bar {
    border-top:1px solid var(--d0ae)
}

.or_top__bar-bar .or_top__bar {
    gap:2px;
    padding:4px 0
}

.or_top__bar-bar .or_top__ref {
    padding:10px 14px 10px 0;
    border-radius:0;
    margin-right:14px
}

/* екран знайомства */

.or_top {
    padding:78px 0 76px;
    background:linear-gradient(155deg, var(--hn0m) 0%, var(--c998) 68%, var(--ye0m) 168%);
    color:var(--z2t2);
    overflow:hidden;
    position:relative
}

.or_top::after {
    right:-12%;
    top:-30%;
    pointer-events:none;
    border-radius:50%;
    content:"";
    height:140%;
    position:absolute;
    width:52%;
    background:rgba(255, 255, 255, .05)
}

.or_top__grid {
    display:grid;
    gap:56px;
    align-items:center;
    z-index:1;
    grid-template-columns:1.08fr .92fr;
    position:relative
}

.or_top__copy {
    position:relative;
    z-index:1
}

.or_top__kicker {
    display:inline-block;
    margin-bottom:18px;
    padding:6px 14px;
    border:1px solid var(--nla4);
    border-radius:999px;
    color:var(--zuqm);
    font-family:var(--s822);
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase
}

.or_top__heading {
    line-height:1.05;
    font-size:52px
}

.or_top__heading-xl {
    font-size:64px
}

.or_top__promise {
    line-height:1.55;
    color:var(--zuqm);
    font-size:19px;
    max-width:620px;
    margin-top:20px
}

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

.or_top .or_act__solid {
    background:var(--jfdj);
    color:var(--hn0m)
}

.or_top .or_act__solid:hover {
    color:var(--xf5n);
    background:var(--w3ee)
}

.or_top__aside {
    display:block;
    color:var(--zuqm);
    font-size:14.5px
}

.or_top__center .or_top__aside {
    margin-top:14px
}

.or_top__stack {
    display:grid;
    gap:10px;
    margin-top:28px
}

.or_top__stack-thing {
    align-items:flex-start;
    line-height:1.45;
    font-size:15.5px;
    color:var(--zuqm);
    display:flex;
    gap:11px
}

.or_top__stack-sign {
    margin-top:3px;
    display:inline-flex;
    color:var(--w3ee)
}

.or_top__stack-bar {
    justify-content:center;
    display:flex;
    gap:10px 26px;
    flex-wrap:wrap
}

.or_top__stack-tight {
    gap:12px;
    margin-top:0
}

.or_top__visual {
    position:relative;
    z-index:1;
    display:flex;
    justify-content:center
}

.or_top__visual-under {
    margin-top:52px
}

.or_top__center {
    text-align:center
}

.or_top__center .or_top__copy {
    margin:0 auto;
    max-width:760px
}

.or_top__center .or_top__promise {
    margin-left:auto;
    margin-right:auto
}

.or_top__center .or_top__actions {
    justify-content:center
}

.or_top__center .or_top__stack-thing {
    text-align:left
}

.or_top__plain {
    padding-bottom:0
}

.or_top__plate {
    position:relative;
    z-index:1;
    margin-top:48px;
    display:grid;
    padding:34px 0 46px;
    gap:40px;
    border-top:1px solid var(--nla4);
    grid-template-columns:1.1fr .9fr
}

.or_top__plate-measure {
    display:block
}

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

.or_avail {
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-top:26px;
    padding:16px 18px;
    border:1px solid var(--d0ae);
    border-left:3px solid var(--ye0m);
    border-radius:var(--qg0n);
    background:var(--oddr)
}

.or_avail__sign {
    display:inline-flex;
    color:var(--ye0m);
    flex:none;
    margin-top:2px
}

.or_avail__para {
    font-size:15.5px;
    line-height:1.5
}

.or_avail__wide {
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
    text-align:left
}

.or_top .or_avail {
    border-color:var(--nla4);
    border-left-color:var(--w3ee);
    background:rgba(255, 255, 255, .08)
}

.or_top .or_avail__sign {
    color:var(--w3ee)
}

.or_top .or_avail__para {
    color:var(--z2t2)
}

/* рамка телефона */

.or_phone {
    max-width:268px;
    width:100%;
    margin:0 auto
}

.or_phone__frame {
    position:relative;
    padding:11px;
    border:1px solid rgba(255, 255, 255, .1);
    border-radius:38px;
    background:linear-gradient(158deg, #3b424b 0%, #171b20 46%, #272d34 100%);
    box-shadow:var(--suao)
}

.or_phone__island {
    top:20px;
    position:absolute;
    margin-left:-37px;
    z-index:2;
    height:19px;
    width:74px;
    left:50%;
    border-radius:999px;
    background:#14181d
}

.or_phone__screen {
    min-height:402px;
    flex-direction:column;
    overflow:hidden;
    border-radius:29px;
    display:flex;
    background:var(--jfdj)
}

.or_phone__bar {
    display:flex;
    justify-content:space-between;
    padding:11px 18px 0;
    color:var(--hn0m);
    align-items:center
}

.or_phone__clock {
    font-family:var(--s822);
    font-size:11.5px;
    font-weight:700;
    font-variant-numeric:tabular-nums
}

.or_phone__icons {
    display:inline-flex;
    gap:2px;
    align-items:flex-end
}

.or_phone__sig {
    width:3px;
    border-radius:1px;
    background:var(--hn0m);
    display:block
}

.or_phone__icons .or_phone__sig:nth-child(1) {
    height:4px
}

.or_phone__icons .or_phone__sig:nth-child(2) {
    height:7px
}

.or_phone__icons .or_phone__sig:nth-child(3) {
    height:10px
}

.or_phone__batt {
    position:relative;
    display:block;
    width:17px;
    height:9px;
    margin-left:5px;
    border:1.4px solid var(--hn0m);
    border-radius:2px;
    background:linear-gradient(to right, var(--hn0m) 62%, transparent 62%)
}

.or_phone__batt::after {
    background:var(--hn0m);
    top:2px;
    width:2px;
    right:-3px;
    height:3px;
    content:"";
    position:absolute;
    border-radius:0 1px 1px 0
}

.or_phone__app {
    padding:22px 18px 20px;
    flex-direction:column;
    display:flex;
    gap:14px
}

.or_phone__app-upper {
    display:flex;
    flex-direction:column;
    gap:3px
}

.or_phone__app-name {
    color:var(--ye0m);
    font-family:var(--s822);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.or_phone__app-heading {
    font-family:var(--s822);
    font-size:20px;
    font-weight:var(--g998);
    letter-spacing:var(--c64o);
    line-height:1.15
}

/* макет: чеклист */

.or_shot__stack {
    display:grid;
    gap:9px
}

.or_shot__bar {
    display:flex;
    align-items:center;
    gap:11px;
    padding:11px 12px;
    border:1px solid var(--d0ae);
    border-radius:var(--qg0n);
    background:var(--subf)
}

.or_shot__bar-on {
    border-color:var(--ye0m);
    background:var(--oddr)
}

.or_shot__case {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:20px;
    height:20px;
    border:1.5px solid var(--d0ae);
    border-radius:var(--kzmr);
    background:var(--jfdj);
    color:var(--lehb)
}

.or_shot__bar-on .or_shot__case {
    border-color:var(--ye0m);
    background:var(--ye0m)
}

.or_shot__label {
    line-height:1.35;
    font-size:13px
}

.or_shot__bar-on .or_shot__label {
    color:var(--c998)
}

.or_shot__bar-2 {
    border-radius:999px;
    background:var(--d0ae);
    height:6px;
    overflow:hidden;
    display:block
}

.or_shot__bar-fill {
    background:var(--ye0m);
    height:100%;
    display:block;
    border-radius:999px
}

/* макет: числа */

.or_shot__stats {
    gap:10px;
    display:grid
}

.or_shot__stat {
    display:flex;
    align-items:baseline;
    gap:10px;
    padding:12px 14px;
    border:1px solid var(--d0ae);
    border-radius:var(--qg0n);
    background:var(--subf)
}

.or_shot__stat-top {
    background:var(--oddr);
    align-items:flex-start;
    border-color:var(--ye0m);
    gap:2px;
    flex-direction:column
}

.or_shot__stat-num {
    color:var(--ye0m);
    font-family:var(--s822);
    font-size:22px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    line-height:1
}

.or_shot__stat-top .or_shot__stat-num {
    font-size:38px
}

.or_shot__stat-label {
    font-size:12px;
    line-height:1.3;
    color:var(--oi8t)
}

.or_shot__dots {
    justify-content:space-between;
    gap:5px;
    align-items:center;
    display:flex
}

.or_shot__dot {
    height:6px;
    background:var(--d0ae);
    border-radius:999px;
    display:block;
    flex:1 1 auto
}

.or_shot__dot-on {
    background:var(--ye0m)
}

/* макет: стрічка записів */

.or_shot__feed {
    display:grid;
    gap:2px
}

.or_shot__entry {
    display:flex;
    position:relative;
    padding:0 0 16px 0;
    gap:12px;
    align-items:flex-start
}

.or_shot__entry::before {
    content:"";
    bottom:0;
    position:absolute;
    background:var(--d0ae);
    top:6px;
    left:41px;
    width:1px
}

.or_shot__entry::after {
    height:7px;
    width:7px;
    background:var(--ye0m);
    left:38px;
    position:absolute;
    top:4px;
    content:"";
    border-radius:50%
}

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

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

.or_shot__time {
    flex:none;
    width:34px;
    color:var(--oi8t);
    font-family:var(--s822);
    font-size:11.5px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    line-height:1.3
}

.or_shot__entry-para {
    line-height:1.35;
    padding-left:14px;
    font-size:13px
}

/* макет: нагадування */

.or_shot__brick {
    background:var(--ye0m);
    display:flex;
    color:var(--lehb);
    padding:14px 16px;
    gap:10px;
    border-radius:var(--qg0n);
    align-items:center
}

.or_shot__brick-sign {
    opacity:.8;
    display:inline-flex
}

.or_shot__brick-time {
    font-family:var(--s822);
    font-size:24px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    line-height:1
}

.or_shot__switches {
    display:grid;
    gap:4px
}

.or_shot__switch-bar {
    padding:11px 0;
    align-items:center;
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid var(--d0ae);
    gap:12px
}

.or_shot__switch-bar:last-child {
    border-bottom:0
}

.or_shot__switch-label {
    line-height:1.3;
    font-size:13px
}

.or_shot__switch {
    background:var(--d0ae);
    width:34px;
    display:block;
    flex:none;
    height:20px;
    position:relative;
    border-radius:999px
}

.or_shot__knob {
    background:var(--jfdj);
    height:14px;
    left:3px;
    position:absolute;
    width:14px;
    border-radius:50%;
    box-shadow:var(--q6q8);
    display:block;
    top:3px
}

.or_shot__switch-on {
    background:var(--ye0m)
}

.or_shot__switch-on .or_shot__knob {
    right:3px;
    left:auto
}

/* макет: діаграма */

.or_shot__chart {
    align-items:flex-end;
    display:flex;
    gap:10px
}

.or_shot__measure {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    flex:1 1 0;
    min-width:0
}

.or_shot__measure-track {
    background:var(--subf);
    border-radius:var(--kzmr);
    align-items:flex-end;
    height:128px;
    display:flex;
    width:100%;
    justify-content:center
}

.or_shot__measure-bar {
    width:100%;
    display:block;
    background:linear-gradient(180deg, var(--ye0m), var(--c998));
    border-radius:var(--kzmr);
    min-height:8px
}

.or_shot__measure-cap {
    max-width:100%;
    color:var(--oi8t);
    font-size:10.5px;
    line-height:1.2;
    text-align:center;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

/* секція макетів: ряд телефонів */

.or_shots {
    scroll-margin-top:16px
}

.or_shots__rail {
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(228px, 1fr);
    gap:30px;
    padding-bottom:10px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch
}

.or_shots__thing {
    margin:0;
    scroll-snap-align:start;
    display:block
}

.or_shots__cap {
    margin-top:24px
}

.or_shots__index {
    display:block;
    margin-bottom:8px;
    color:var(--ye0m);
    font-family:var(--s822);
    font-size:13px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    letter-spacing:.12em
}

.or_shots__heading {
    font-size:19px
}

.or_shots__para {
    color:var(--oi8t);
    margin-top:8px;
    font-size:15px
}

/* секція макетів: один телефон і вкладки */

.or_single__grid {
    display:grid;
    align-items:start;
    gap:46px;
    grid-template-columns:300px 1fr
}

.or_single__tabs {
    display:grid;
    gap:8px
}

.or_single__tab {
    display:flex;
    align-items:baseline;
    gap:12px;
    width:100%;
    padding:15px 16px;
    border:1px solid var(--d0ae);
    border-radius:var(--qg0n);
    background:var(--subf);
    text-align:left;
    cursor:pointer;
    transition:border-color .16s ease, background-color .16s ease, color .16s ease
}

.or_single__tab:hover {
    border-color:var(--ye0m)
}

.or_single__tab-num {
    flex:none;
    color:var(--oi8t);
    font-family:var(--s822);
    font-size:12px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    letter-spacing:.1em
}

.or_single__tab-label {
    font-family:var(--s822);
    font-size:16px;
    font-weight:600;
    line-height:1.3
}

.or_single__tab-on {
    border-color:var(--ye0m);
    background:var(--ye0m);
    color:var(--lehb)
}

.or_single__tab-on .or_single__tab-num {
    opacity:.75;
    color:var(--lehb)
}

.or_single__stage {
    display:block
}

.or_single__pane {
    display:grid;
    align-items:center;
    gap:40px;
    grid-template-columns:268px 1fr
}

.or_single__pane + .or_single__pane {
    margin-top:44px
}

.or_single__cap {
    display:block
}

.or_single__cap .or_shots__heading {
    font-size:24px
}

.or_single__cap .or_shots__para {
    font-size:16px;
    margin-top:12px
}

/* можливості: картки */

.or_feature__grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:1px;
    background:var(--d0ae);
    border:1px solid var(--d0ae);
    border-radius:var(--r86k);
    overflow:hidden
}

.or_feature {
    display:block;
    padding:var(--spr0);
    transition:background-color .2s ease;
    background:var(--jfdj)
}

.or_feature:hover {
    background:var(--oddr)
}

.or_feature__sign {
    width:44px;
    color:var(--hn0m);
    margin-bottom:18px;
    background:var(--d0r5);
    border-radius:var(--qg0n);
    justify-content:center;
    align-items:center;
    display:inline-flex;
    height:44px
}

.or_feature__heading {
    font-size:19px
}

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

/* можливості: рядки */

.or_feature__rows {
    display:grid;
    gap:0
}

.or_feature__bar {
    grid-template-columns:58px minmax(180px, 1fr) 1.5fr;
    border-top:1px solid var(--d0ae);
    display:grid;
    padding:26px 0;
    gap:24px;
    align-items:start
}

.or_feature__bar:last-child {
    border-bottom:1px solid var(--d0ae)
}

.or_feature__bar-num {
    color:var(--ye0m);
    font-family:var(--s822);
    font-size:15px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    letter-spacing:.1em;
    line-height:1.6
}

.or_feature__bar-heading {
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-size:19px
}

.or_feature__bar-sign {
    margin-top:4px;
    display:inline-flex;
    color:var(--ye0m)
}

.or_feature__bar-para {
    font-size:15.5px;
    color:var(--oi8t)
}

/* кроки */

.or_flow__bar {
    display:grid;
    gap:24px;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))
}

.or_flow__thing {
    position:relative;
    display:block;
    padding:28px 24px 26px;
    border:1px solid var(--d0ae);
    border-top:3px solid var(--ye0m);
    border-radius:0 0 var(--r86k) var(--r86k);
    background:var(--jfdj)
}

.or_flow__num {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    margin-bottom:16px;
    border-radius:var(--qg0n);
    background:var(--hn0m);
    color:var(--jfdj);
    font-family:var(--s822);
    font-size:17px;
    font-weight:700;
    font-variant-numeric:tabular-nums
}

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

.or_flow__heading {
    font-size:19px
}

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

.or_flow__split {
    gap:56px;
    grid-template-columns:.78fr 1.22fr;
    display:grid;
    align-items:start
}

.or_flow__row {
    display:grid;
    gap:0
}

.or_flow__row-thing {
    display:flex;
    position:relative;
    align-items:flex-start;
    gap:20px;
    padding:0 0 28px 0
}

.or_flow__row-thing::before {
    background:var(--d0ae);
    position:absolute;
    content:"";
    top:40px;
    left:15px;
    width:2px;
    bottom:4px
}

.or_flow__row-thing:last-child {
    padding-bottom:0
}

.or_flow__row-thing:last-child::before {
    display:none
}

.or_flow__row-body {
    flex:1 1 auto
}

/* принципи */

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

.or_creed__thing {
    border-top:2px solid var(--hn0m);
    display:block;
    padding-top:22px
}

.or_creed__flag {
    margin-bottom:14px;
    display:inline-flex;
    color:var(--ye0m)
}

.or_creed__heading {
    font-size:18px
}

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

.or_creed__stack {
    gap:0;
    display:grid
}

.or_creed__block {
    display:block;
    border-left:2px solid var(--d0ae);
    padding:24px 0 24px 28px
}

.or_creed__block:hover {
    border-left-color:var(--ye0m)
}

.or_creed__index {
    display:block;
    margin-bottom:8px;
    color:var(--ye0m);
    font-family:var(--s822);
    font-size:12px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    letter-spacing:.16em
}

.or_creed__ref {
    display:inline-block;
    margin-top:30px;
    padding-bottom:3px;
    border-bottom:2px solid var(--ye0m);
    color:var(--ye0m);
    font-family:var(--s822);
    font-size:15px;
    font-weight:600
}

.or_creed__ref:hover {
    color:var(--c998);
    border-bottom-color:var(--c998)
}

/* питання */

.or_ask__stack {
    gap:0;
    display:grid
}

.or_ask__thing {
    border-bottom:1px solid var(--d0ae)
}

.or_ask__thing:first-child {
    border-top:1px solid var(--d0ae)
}

.or_ask__q {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:20px 4px;
    font-family:var(--s822);
    font-size:17px;
    font-weight:600;
    line-height:1.35;
    cursor:pointer;
    list-style:none
}

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

.or_ask__q:hover {
    color:var(--ye0m)
}

.or_ask__sign {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:28px;
    height:28px;
    border:1px solid var(--d0ae);
    border-radius:var(--kzmr);
    color:var(--ye0m);
    transition:transform .2s ease, background-color .2s ease
}

.or_ask__thing[open] .or_ask__sign {
    transform:rotate(180deg);
    background:var(--oddr)
}

.or_ask__a {
    font-size:15.5px;
    padding:0 4px 22px;
    color:var(--oi8t)
}

.or_ask__cols {
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    display:grid;
    gap:30px 40px
}

.or_ask__block {
    display:block
}

.or_ask__block-q {
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-family:var(--s822);
    font-size:17.5px;
    font-weight:600;
    line-height:1.35
}

.or_ask__block-sign {
    margin-top:4px;
    display:inline-flex;
    color:var(--ye0m)
}

.or_ask__block-a {
    color:var(--oi8t);
    margin:10px 0 0;
    font-size:15.5px
}

/* застереження */

.or_warn__case {
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:22px 24px;
    border:1px solid var(--d0ae);
    border-radius:var(--r86k);
    background:var(--jfdj)
}

.or_warn__sign {
    margin-top:2px;
    flex:none;
    color:var(--oi8t);
    display:inline-flex
}

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

.or_warn__strip {
    padding:24px 0;
    background:var(--hn0m)
}

.or_warn__strip .or_warn__para {
    gap:14px;
    display:flex;
    color:var(--zuqm);
    align-items:flex-start
}

.or_warn__strip .or_warn__sign {
    color:var(--w3ee)
}

/* заголовок внутрішньої сторінки */

.or_cap {
    padding:56px 0 46px;
    background:var(--hn0m);
    color:var(--z2t2)
}

.or_cap__inner {
    display:block
}

.or_cap__back {
    display:inline-block;
    margin-bottom:16px;
    color:var(--zuqm);
    font-family:var(--s822);
    font-size:13px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase
}

.or_cap__back:hover {
    color:var(--z2t2)
}

.or_cap__heading {
    font-size:38px
}

.or_cap__sub {
    font-size:16.5px;
    max-width:660px;
    color:var(--zuqm);
    margin-top:14px
}

.or_cap__plain {
    border-bottom:1px solid var(--d0ae);
    background:var(--jfdj);
    color:var(--hn0m)
}

.or_cap__plain .or_cap__inner {
    grid-template-columns:1fr 1fr;
    display:grid;
    align-items:end;
    gap:34px
}

.or_cap__plain .or_cap__sub {
    color:var(--oi8t)
}

.or_cap__plain .or_cap__back {
    color:var(--ye0m);
    margin:16px 0 0
}

.or_cap__measure {
    display:block
}

/* підвал */

.or_core {
    padding:48px 0 26px;
    background:var(--jfdj);
    border-top:1px solid var(--d0ae)
}

.or_core__inner {
    gap:34px;
    justify-content:space-between;
    flex-wrap:wrap;
    display:flex;
    align-items:flex-start
}

.or_core__brand {
    max-width:400px
}

.or_core__name {
    display:block;
    margin-top:10px;
    font-family:var(--s822);
    font-size:19px;
    font-weight:var(--g998);
    letter-spacing:var(--c64o)
}

.or_core__aside {
    color:var(--oi8t);
    font-size:14.5px;
    margin-top:10px
}

.or_core__bar {
    flex-wrap:wrap;
    gap:8px 22px;
    display:flex
}

.or_core__ref {
    color:var(--oi8t);
    font-size:14.5px
}

.or_core__ref:hover {
    color:var(--ye0m)
}

.or_core__bar-stack {
    gap:9px;
    flex-direction:column
}

.or_core__wide {
    padding-top:54px
}

.or_core__cols {
    display:grid;
    gap:38px;
    grid-template-columns:1.5fr 1fr 1fr
}

.or_core__measure {
    display:block
}

.or_core__measure-brand {
    max-width:440px
}

.or_core__measure-heading {
    display:block;
    margin-bottom:16px;
    font-family:var(--s822);
    font-size:13px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase
}

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

.or_core__legal {
    font-size:13.5px;
    color:var(--oi8t)
}

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

.or_doc {
    display:block
}

.or_para {
    margin-bottom:20px;
    font-size:16.5px
}

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

.or_brick__grid {
    gap:32px;
    align-items:start;
    display:grid;
    grid-template-columns:1.05fr .95fr
}

.or_detail__brick {
    display:grid;
    gap:0;
    padding:8px 26px;
    border:1px solid var(--d0ae);
    border-radius:var(--r86k);
    background:var(--jfdj)
}

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

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

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

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

a.or_detail__value:hover {
    color:var(--ye0m)
}

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

.or_detail__side {
    display:block
}

.or_detail__side .or_avail {
    margin-top:0
}

.or_detail__aside {
    color:var(--oi8t);
    font-size:14.5px;
    margin-top:20px
}

/* дата ревізії юридичної сторінки */

.or_doc__stamp {
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:26px;
    padding-bottom:16px;
    border-bottom:1px solid var(--d0ae);
    color:var(--oi8t);
    font-family:var(--s822);
    font-size:13px;
    font-weight:600;
    font-variant-numeric:tabular-nums;
    letter-spacing:.06em
}

/* джерела: заголовок збоку і список hairline-рядків */

.or_quote__split {
    gap:46px;
    align-items:start;
    display:grid;
    grid-template-columns:.82fr 1.18fr
}

.or_quote__heading {
    font-size:26px
}

.or_quote__stack {
    gap:0;
    display:grid
}

.or_quote__thing {
    border-top:1px solid var(--d0ae)
}

.or_quote__thing:last-child {
    border-bottom:1px solid var(--d0ae)
}

.or_quote__ref {
    gap:18px;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding:17px 2px;
    transition:color .15s ease, padding-left .15s ease
}

.or_quote__ref:hover {
    color:var(--ye0m);
    padding-left:8px
}

.or_quote__name {
    font-family:var(--s822);
    font-size:16.5px;
    font-weight:600;
    line-height:1.35
}

.or_quote__host {
    letter-spacing:.02em;
    flex:none;
    color:var(--oi8t);
    font-size:13px
}

/* джерела: темна плита з рядом посилань */

.or_quote__plate {
    padding:46px 0 44px;
    color:var(--z2t2);
    background:var(--hn0m)
}

.or_quote__plate-heading {
    font-size:24px
}

.or_quote__plate-aside {
    color:var(--zuqm);
    margin-top:12px;
    max-width:640px;
    font-size:15.5px
}

.or_quote__bar {
    display:flex;
    margin-top:26px;
    gap:12px 14px;
    flex-wrap:wrap
}

.or_quote__bar-thing {
    display:block
}

.or_quote__bar-ref {
    display:inline-block;
    padding:9px 16px;
    border:1px solid var(--nla4);
    border-radius:999px;
    color:var(--zuqm);
    font-family:var(--s822);
    font-size:14.5px;
    font-weight:600;
    transition:color .16s ease, border-color .16s ease, background-color .16s ease
}

.or_quote__bar-ref:hover {
    color:var(--hn0m);
    border-color:var(--w3ee);
    background:var(--w3ee)
}

/* сторінка, якої немає */

.or_gone {
    display:block
}

.or_gone__code {
    display:block;
    color:var(--d0ae);
    font-family:var(--s822);
    font-size:78px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    letter-spacing:var(--c64o);
    line-height:1
}

.or_gone__para {
    color:var(--oi8t);
    max-width:560px;
    margin:22px 0 30px;
    font-size:17px
}

/* смуга згоди; hidden знімає скрипт, тому без JS банера не видно */

.or_nod {
    position:fixed;
    z-index:40
}

.or_nod__strip {
    border-top:1px solid var(--nla4);
    right:0;
    box-shadow:var(--suao);
    background:var(--hn0m);
    bottom:0;
    left:0
}

.or_nod__strip-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    padding-top:16px;
    padding-bottom:16px
}

.or_nod__para {
    color:var(--zuqm);
    display:flex;
    max-width:720px;
    font-size:14.5px;
    gap:13px;
    line-height:1.55;
    align-items:flex-start
}

.or_nod__sign {
    display:inline-flex;
    color:var(--w3ee);
    margin-top:2px;
    flex:none
}

.or_nod__actions {
    flex-wrap:wrap;
    display:flex;
    align-items:center;
    gap:22px
}

.or_nod__more {
    color:var(--zuqm);
    font-family:var(--s822);
    font-size:14px;
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:4px
}

.or_nod__more:hover {
    color:var(--z2t2)
}

.or_nod__ok {
    padding:11px 24px;
    color:var(--hn0m);
    background:var(--jfdj)
}

.or_nod__ok:hover {
    background:var(--w3ee);
    color:var(--xf5n)
}

/* смуга згоди, варіант карткою збоку */

.or_nod__brick {
    left:22px;
    bottom:22px;
    width:calc(100% - 44px);
    max-width:316px;
    padding:22px 22px 20px;
    border:1px solid rgba(255, 255, 255, .1);
    border-radius:var(--hddz);
    background:linear-gradient(158deg, #3b424b 0%, #171b20 52%, #272d34 100%);
    box-shadow:var(--suao)
}

.or_nod__eyebrow {
    display:block;
    margin-bottom:12px;
    color:var(--w3ee);
    font-family:var(--s822);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase
}

.or_nod__brick-para {
    color:var(--zuqm);
    font-size:14px;
    line-height:1.55
}

.or_nod__ok-wide {
    width:100%;
    padding:12px 18px;
    font-size:15px;
    margin-top:20px
}

.or_nod__more-brick {
    margin-top:14px;
    display:block;
    text-align:center
}

/* адаптив */

@media (max-width: 1000px) {
    .or_top__grid {
    grid-template-columns:1fr;
    gap:44px
}
    .or_top__visual {
    justify-content:flex-start
}
    .or_top__plate {
    gap:26px;
    grid-template-columns:1fr
}
    .or_single__grid {
    grid-template-columns:1fr;
    gap:30px
}
    .or_single__tabs {
    grid-auto-flow:column;
    grid-auto-columns:minmax(180px, 1fr);
    overflow-x:auto;
    padding-bottom:6px
}
    .or_single__pane {
    grid-template-columns:1fr;
    text-align:center;
    gap:26px;
    justify-items:center
}
    .or_flow__split {
    gap:32px;
    grid-template-columns:1fr
}
    .or_feature__bar {
    gap:10px 18px;
    grid-template-columns:44px 1fr
}
    .or_feature__bar-para {
    grid-column:2
}
    .or_core__cols {
    grid-template-columns:1fr 1fr
}
    .or_core__measure-brand {
    grid-column:1 / -1
}
    .or_cap__plain .or_cap__inner {
    grid-template-columns:1fr;
    gap:16px
}
    .or_brick__grid {
    grid-template-columns:1fr
}
    .or_quote__split {
    grid-template-columns:1fr;
    gap:28px
}
}

@media (max-width: 720px) {
    .or_page {
    font-size:16px
}
    .or_belt {
    padding:52px 0
}
    .or_belt__upper {
    margin-bottom:30px
}
    .or_belt__heading {
    font-size:26px
}
    .or_top {
    padding:52px 0 50px
}
    .or_top__heading {
    font-size:36px
}
    .or_top__heading-xl {
    font-size:40px
}
    .or_top__promise {
    font-size:17px
}
    .or_top__actions {
    gap:14px
}
    .or_top__stack-bar {
    text-align:left;
    flex-direction:column;
    align-items:flex-start
}
    .or_top__center {
    text-align:left
}
    .or_top__center .or_top__actions {
    justify-content:flex-start
}
    .or_act__lg {
    width:100%
}
    .or_top__inner {
    gap:14px;
    align-items:flex-start;
    flex-direction:column;
    min-height:0
}
    .or_top__bar {
    width:100%
}
    .or_top__cta {
    margin-left:0
}
    .or_top__bar-bar .or_top__bar {
    flex-wrap:nowrap;
    overflow-x:auto
}
    .or_top__bar-bar .or_top__ref {
    white-space:nowrap
}
    .or_shots__rail {
    gap:22px
}
    .or_single__cap .or_shots__heading {
    font-size:20px
}
    .or_feature__grid {
    grid-template-columns:1fr
}
    .or_creed__block {
    padding-left:20px
}
    .or_cap {
    padding:40px 0 34px
}
    .or_cap__heading {
    font-size:28px
}
    .or_core__cols {
    grid-template-columns:1fr;
    gap:28px
}
    .or_core__inner {
    gap:26px;
    flex-direction:column
}
    .or_detail__brick {
    padding:6px 20px
}
    .or_quote__heading {
    font-size:22px
}
    .or_quote__ref {
    align-items:flex-start;
    gap:5px;
    flex-direction:column
}
    .or_gone__code {
    font-size:56px
}
    .or_nod__strip-inner {
    gap:16px
}
    .or_nod__actions {
    gap:14px;
    justify-content:space-between;
    width:100%
}
    .or_nod__brick {
    left:12px;
    bottom:12px;
    width:calc(100% - 24px);
    max-width:none
}
}

@media (prefers-reduced-motion: reduce) {
    html {
    scroll-behavior:auto
}
    .or_ready .or_reveal {
    transform:none;
    transition:none;
    opacity:1
}
}

/* тло блоків

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

.or_top {
    background-image:linear-gradient(155deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35)),
        linear-gradient(155deg, var(--hn0m) 0%, var(--c998) 68%, var(--ye0m) 168%),
        url(/dee918/img/IMG_4418.jpg?v=47616);
    background-size:cover;
    background-position:center
}

.or_belt__soft {
    background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.96)),
        url(/dee918/img/lead.jpg?v=47616);
    background-size:cover;
    background-position:center
}

/* знімок */

.or_shot {
    margin:0
}

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

/* Кадр 3:2 на всю ширину займав би півекрана, тому підрізаємо по висоті. */
.or_shot__belt .or_shot__img {
    height:clamp(200px, 28vw, 360px);
    object-fit:cover
}

.or_shot__brick-2 {
    box-shadow:var(--zho6);
    border-radius:var(--r86k);
    overflow:hidden
}

.or_shot__brick-2 .or_shot__img {
    object-fit:cover;
    height:clamp(220px, 32vw, 420px)
}

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

.or_log__stack {
    grid-template-columns:minmax(104px, auto) 1fr;
    margin:20px 0 0;
    gap:10px 24px;
    display:grid
}

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

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

.or_log__rows {
    margin:20px 0 0;
    padding:0;
    list-style:none
}

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

.or_log__rows .or_log__bar:first-child {
    border-top:0
}

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

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

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

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

.shot-pair .shot-img {
    object-fit:cover;
    height:clamp(160px, 22vw, 260px)
}

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

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

.logo-name {
    font-family:var(--s822);
    font-size:1.15rem;
    font-weight:var(--g998);
    letter-spacing:var(--c64o);
    white-space:nowrap
}