/* =========================================================
   Zellvorra — оформлення сторінок документів
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --zv-slate: #3f4a5a;
    --zv-deep: #262f3b;
    --zv-rose: #e05c78;
    --zv-back: #f5f6f9;
    --zv-panel: #ffffff;
    --zv-ink: #1e242d;
    --zv-mute: #6c7788;
    --zv-line: #dfe3ea;
    --zv-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --zv-soft: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
    --zv-r1: 16px;
    --zv-r2: 22px;
    --zv-r3: 28px;
    --zv-up1: 6px 6px 16px rgba(38, 47, 59, .08), -6px -6px 16px rgba(255, 255, 255, .92);
    --zv-up2: 10px 12px 28px rgba(38, 47, 59, .11), -8px -8px 22px rgba(255, 255, 255, .95);
    --zv-up3: 16px 20px 44px rgba(38, 47, 59, .14), -12px -12px 30px rgba(255, 255, 255, .9);
    --zv-in1: inset 5px 5px 12px rgba(38, 47, 59, .13), inset -5px -5px 12px rgba(255, 255, 255, .94);
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--zv-back);
    font-family: var(--zv-sans);
    color: var(--zv-ink);
    font-size: 16px;
    line-height: 1.74;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--zv-slate);
    text-decoration: none;
    transition: color .2s ease;
}

a:hover {
    color: var(--zv-rose);
}

/* ---------------------------------------------------------
   Спільна шапка й підвал
   --------------------------------------------------------- */

.zv_head {
    padding: 22px 20px;
    background: var(--zv-back);
    border-bottom: 1px solid var(--zv-line);
}
.zv_head-inner {
    max-width: 1160px;
    margin: 0 auto;
    text-align: center;
}
.zv_head-name {
    display: inline-block;
    font-family: var(--zv-soft);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--zv-slate);
    padding: 10px 26px;
    border-radius: 999px;
    background: var(--zv-back);
    box-shadow: var(--zv-up1);
}
.zv_head-name:hover {
    color: var(--zv-slate);
    box-shadow: var(--zv-in1);
}

.zv_foot {
    margin-top: 46px;
    padding: 30px 20px 26px;
    background: var(--zv-back);
    border-top: 1px solid var(--zv-line);
}
.zv_foot-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.zv_foot-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    margin-bottom: 16px;
}
.zv_foot-nav a {
    font-size: 12px;
    letter-spacing: .04em;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--zv-back);
    box-shadow: var(--zv-up1);
    transition: box-shadow .2s ease, color .2s ease;
}
.zv_foot-nav a:hover {
    color: var(--zv-rose);
    box-shadow: var(--zv-in1);
}
.zv_foot-copy {
    font-size: 12px;
    color: var(--zv-mute);
    margin-bottom: 12px;
}
.zv_foot-note {
    font-size: 11px;
    line-height: 1.75;
    color: #8d96a3;
    max-width: 720px;
    margin: 0 auto;
}

/* =========================================================
   1. privacy-statement.html — «м'які панелі»
   ========================================================= */

.zv_pvhero {
    max-width: 1120px;
    margin: 34px auto 0;
    padding: 62px 46px 56px;
    border-radius: 44px;
    background: linear-gradient(140deg, #ffffff 0%, #eef1f6 100%);
    box-shadow: var(--zv-up3);
    text-align: center;
}
.zv_pvhero-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--zv-rose);
    padding: 9px 20px;
    border-radius: 999px;
    background: var(--zv-back);
    box-shadow: var(--zv-up1);
    margin-bottom: 22px;
}
.zv_pvhero-title {
    max-width: 800px;
    margin: 0 auto 18px;
    font-family: var(--zv-soft);
    font-size: clamp(30px, 4.6vw, 52px);
    line-height: 1.14;
    font-weight: 700;
    color: var(--zv-slate);
}
.zv_pvhero-lede {
    max-width: 660px;
    margin: 0 auto 24px;
    font-size: 17px;
    color: var(--zv-mute);
}
.zv_pvhero-stamp {
    display: inline-block;
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--zv-slate);
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--zv-back);
    box-shadow: var(--zv-in1);
}

.zv_pvstack {
    max-width: 1120px;
    margin: 0 auto;
    padding: 34px 20px 20px;
    display: grid;
    gap: 26px;
}
.zv_pvpanel {
    width: 100%;
    background: var(--zv-panel);
    border: 1px solid var(--zv-line);
    border-radius: var(--zv-r3);
    padding: 46px 52px;
    box-shadow: var(--zv-up2);
}
.zv_pvpanel-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--zv-r1);
    background: var(--zv-back);
    box-shadow: var(--zv-up1);
    font-family: var(--zv-soft);
    font-size: 18px;
    font-weight: 700;
    color: var(--zv-rose);
    margin-bottom: 18px;
}
.zv_pvpanel-title {
    font-family: var(--zv-soft);
    font-size: clamp(23px, 3vw, 34px);
    line-height: 1.2;
    font-weight: 700;
    color: var(--zv-slate);
    margin-bottom: 18px;
}
.zv_pvpanel-text {
    color: var(--zv-mute);
    margin-bottom: 16px;
}
.zv_pvpanel-text strong {
    color: var(--zv-ink);
}
.zv_pvpanel-list {
    list-style: none;
    margin: 0 0 16px;
    display: grid;
    gap: 10px;
}
.zv_pvpanel-list li {
    position: relative;
    padding-left: 28px;
    color: var(--zv-mute);
}
.zv_pvpanel-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 12px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--zv-rose);
    box-shadow: 0 0 0 4px rgba(224, 92, 120, .14);
}
.zv_pvpanel-list li strong {
    color: var(--zv-ink);
}

.zv_pvgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 18px;
    margin: 24px 0 8px;
}
.zv_pvcell {
    background: var(--zv-back);
    border-radius: var(--zv-r2);
    padding: 24px 22px;
    box-shadow: var(--zv-up1);
}
.zv_pvcell-title {
    font-family: var(--zv-soft);
    font-size: 16px;
    font-weight: 700;
    color: var(--zv-slate);
    margin-bottom: 8px;
}
.zv_pvcell-text {
    font-size: 14px;
    line-height: 1.68;
    color: var(--zv-mute);
}

.zv_pvtable {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0 8px;
    border-radius: var(--zv-r2);
    overflow: hidden;
    box-shadow: var(--zv-up1);
    background: var(--zv-panel);
}
.zv_pvtable th {
    background: linear-gradient(135deg, var(--zv-slate), var(--zv-deep));
    color: #ffffff;
    text-align: left;
    padding: 15px 18px;
    font-family: var(--zv-soft);
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.zv_pvtable td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--zv-line);
    color: var(--zv-mute);
    font-size: 15px;
}
.zv_pvtable tr:nth-child(even) td {
    background: #fafbfd;
}
.zv_pvtable tr:last-child td {
    border-bottom: none;
}

.zv_pvquote {
    margin: 24px 0 8px;
    padding: 24px 26px;
    border-radius: var(--zv-r2);
    background: var(--zv-back);
    box-shadow: var(--zv-in1);
    border-left: 4px solid var(--zv-rose);
}
.zv_pvquote p {
    margin: 0;
    color: var(--zv-ink);
    font-size: 15px;
}

@media (max-width: 900px) {
    .zv_pvhero {
        margin: 20px 16px 0;
        padding: 46px 24px 42px;
        border-radius: 32px;
    }
    .zv_pvstack {
        padding: 26px 16px 14px;
    }
    .zv_pvpanel {
        padding: 30px 22px;
        border-radius: 24px;
    }
    .zv_pvtable th,
    .zv_pvtable td {
        padding: 12px 13px;
        font-size: 14px;
    }
}

/* =========================================================
   2. use-conditions.html — дві колонки з липким змістом
   ========================================================= */

.zv_tcbar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 44px 24px 10px;
}
.zv_tcbar-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--zv-rose);
    margin-bottom: 12px;
}
.zv_tcbar-title {
    font-family: var(--zv-soft);
    font-size: clamp(29px, 4.4vw, 48px);
    line-height: 1.16;
    font-weight: 700;
    color: var(--zv-slate);
    max-width: 760px;
    margin-bottom: 14px;
}
.zv_tcbar-lede {
    max-width: 640px;
    color: var(--zv-mute);
    font-size: 17px;
}

.zv_tcwrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 26px 24px 20px;
    display: grid;
    grid-template-columns: 274px minmax(0, 1fr);
    gap: 38px;
    align-items: start;
}

.zv_tcnav {
    position: sticky;
    top: 24px;
    background: var(--zv-panel);
    border: 1px solid var(--zv-line);
    border-radius: var(--zv-r3);
    padding: 24px 20px;
    box-shadow: var(--zv-up2);
}
.zv_tcnav-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--zv-mute);
    margin-bottom: 14px;
    padding-left: 6px;
}
.zv_tcnav-list {
    list-style: none;
    display: grid;
    gap: 8px;
}
.zv_tcnav-pill {
    display: block;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--zv-back);
    box-shadow: var(--zv-up1);
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--zv-slate);
    transition: box-shadow .2s ease, color .2s ease;
}
.zv_tcnav-pill:hover {
    color: var(--zv-rose);
    box-shadow: var(--zv-in1);
}
.zv_tcnav-stamp {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--zv-line);
    font-size: 12px;
    color: var(--zv-mute);
    text-align: center;
}

.zv_tcbody {
    background: var(--zv-panel);
    border: 1px solid var(--zv-line);
    border-radius: var(--zv-r3);
    padding: 46px 52px;
    box-shadow: var(--zv-up2);
}
.zv_tcbody-part {
    padding-top: 8px;
    margin-bottom: 34px;
    scroll-margin-top: 24px;
}
.zv_tcbody-part:last-child {
    margin-bottom: 0;
}
.zv_tcbody-title {
    font-family: var(--zv-soft);
    font-size: clamp(21px, 2.6vw, 29px);
    line-height: 1.24;
    font-weight: 700;
    color: var(--zv-slate);
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--zv-line);
}
.zv_tcbody-text {
    color: var(--zv-mute);
    margin-bottom: 14px;
}
.zv_tcbody-text strong {
    color: var(--zv-ink);
}
.zv_tcbody-list {
    list-style: none;
    margin: 0 0 14px;
    display: grid;
    gap: 9px;
}
.zv_tcbody-list li {
    position: relative;
    padding-left: 26px;
    color: var(--zv-mute);
}
.zv_tcbody-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 11px;
    width: 12px;
    height: 3px;
    border-radius: 2px;
    background: var(--zv-rose);
}
.zv_tcbody-list li strong {
    color: var(--zv-ink);
}

.zv_tcaside {
    margin: 22px 0;
    padding: 22px 26px;
    border-radius: var(--zv-r2);
    background: var(--zv-back);
    box-shadow: var(--zv-in1);
    border-left: 4px solid var(--zv-rose);
}
.zv_tcaside_calm {
    border-left-color: var(--zv-slate);
}
.zv_tcaside-title {
    font-family: var(--zv-soft);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--zv-rose);
    margin-bottom: 8px;
}
.zv_tcaside_calm .zv_tcaside-title {
    color: var(--zv-slate);
}
.zv_tcaside-text {
    font-size: 15px;
    color: var(--zv-ink);
}

.zv_tcflow {
    display: grid;
    gap: 14px;
    margin: 22px 0;
}
.zv_tcflow-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 20px 22px;
    border-radius: var(--zv-r2);
    background: var(--zv-back);
    box-shadow: var(--zv-up1);
}
.zv_tcflow-num {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--zv-soft);
    font-size: 19px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(140deg, var(--zv-slate), var(--zv-deep));
    box-shadow: 6px 8px 16px rgba(38, 47, 59, .2);
}
.zv_tcflow-title {
    font-family: var(--zv-soft);
    font-size: 16px;
    font-weight: 700;
    color: var(--zv-slate);
    margin-bottom: 4px;
}
.zv_tcflow-text {
    font-size: 15px;
    color: var(--zv-mute);
}

@media (max-width: 980px) {
    .zv_tcwrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 20px 16px 14px;
    }
    .zv_tcnav {
        position: static;
        border-radius: 24px;
    }
    .zv_tcnav-list {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    .zv_tcbody {
        padding: 30px 22px;
        border-radius: 24px;
    }
    .zv_tcbar {
        padding: 34px 16px 6px;
    }
}

/* =========================================================
   3. refund-policy.html — «сценарії»
   ========================================================= */

.zv_rftop {
    max-width: 1160px;
    margin: 0 auto;
    padding: 50px 24px 14px;
    text-align: center;
}
.zv_rftop-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--zv-rose);
    margin-bottom: 14px;
}
.zv_rftop-title {
    font-family: var(--zv-soft);
    font-size: clamp(29px, 4.6vw, 50px);
    line-height: 1.14;
    font-weight: 700;
    color: var(--zv-slate);
    max-width: 800px;
    margin: 0 auto 14px;
}
.zv_rftop-lede {
    max-width: 660px;
    margin: 0 auto 16px;
    color: var(--zv-mute);
    font-size: 17px;
}
.zv_rftop-stamp {
    display: inline-block;
    font-size: 13px;
    color: var(--zv-slate);
    padding: 9px 20px;
    border-radius: 999px;
    background: var(--zv-back);
    box-shadow: var(--zv-in1);
}

.zv_rfcases {
    max-width: 1160px;
    margin: 0 auto;
    padding: 30px 24px 8px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}
.zv_rfcase {
    background: var(--zv-panel);
    border: 1px solid var(--zv-line);
    border-radius: var(--zv-r3);
    padding: 30px 28px 28px;
    box-shadow: var(--zv-up2);
    display: flex;
    flex-direction: column;
}
.zv_rfcase-sign {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: var(--zv-back);
    box-shadow: var(--zv-up1);
    margin-bottom: 18px;
}
.zv_rfcase-sign svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: var(--zv-slate);
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.zv_rfcase_yes .zv_rfcase-sign svg {
    stroke: var(--zv-rose);
}
.zv_rfcase_no .zv_rfcase-sign svg {
    stroke: var(--zv-deep);
}
.zv_rfcase-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--zv-mute);
    margin-bottom: 8px;
}
.zv_rfcase_yes .zv_rfcase-tag {
    color: var(--zv-rose);
}
.zv_rfcase-title {
    font-family: var(--zv-soft);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.26;
    color: var(--zv-slate);
    margin-bottom: 12px;
}
.zv_rfcase-text {
    font-size: 15px;
    color: var(--zv-mute);
    margin-bottom: 14px;
}
.zv_rfcase-list {
    list-style: none;
    display: grid;
    gap: 8px;
    margin-top: auto;
}
.zv_rfcase-list li {
    position: relative;
    padding-left: 24px;
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--zv-mute);
}
.zv_rfcase-list li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: var(--zv-rose);
    opacity: .8;
}
.zv_rfcase_no .zv_rfcase-list li::before {
    background: var(--zv-slate);
    opacity: .6;
}

.zv_rfsheet {
    max-width: 1160px;
    margin: 0 auto;
    padding: 22px 24px 10px;
}
.zv_rfsheet-block {
    background: var(--zv-panel);
    border: 1px solid var(--zv-line);
    border-radius: var(--zv-r3);
    padding: 42px 48px;
    box-shadow: var(--zv-up2);
    margin-bottom: 24px;
}
.zv_rfsheet-title {
    font-family: var(--zv-soft);
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.2;
    font-weight: 700;
    color: var(--zv-slate);
    margin-bottom: 16px;
}
.zv_rfsheet-text {
    color: var(--zv-mute);
    margin-bottom: 14px;
}
.zv_rfsheet-text strong {
    color: var(--zv-ink);
}
.zv_rfsheet-list {
    list-style: none;
    display: grid;
    gap: 9px;
    margin-bottom: 14px;
}
.zv_rfsheet-list li {
    position: relative;
    padding-left: 26px;
    color: var(--zv-mute);
}
.zv_rfsheet-list li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 12px;
    width: 10px;
    height: 3px;
    border-radius: 2px;
    background: var(--zv-rose);
}

.zv_rfalert {
    margin: 20px 0;
    padding: 24px 28px;
    border-radius: var(--zv-r2);
    background: var(--zv-back);
    box-shadow: var(--zv-in1);
    border-left: 4px solid var(--zv-rose);
}
.zv_rfalert p {
    margin: 0;
    color: var(--zv-ink);
    font-size: 15px;
}

.zv_rfsteps {
    display: grid;
    gap: 16px;
    margin: 8px 0 6px;
    counter-reset: zvstep;
}
.zv_rfstep {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 22px 24px;
    border-radius: var(--zv-r2);
    background: var(--zv-back);
    box-shadow: var(--zv-up1);
}
.zv_rfstep-num {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-family: var(--zv-soft);
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(140deg, var(--zv-rose), #c94a66);
    box-shadow: 6px 8px 18px rgba(224, 92, 120, .3);
}
.zv_rfstep-title {
    font-family: var(--zv-soft);
    font-size: 17px;
    font-weight: 700;
    color: var(--zv-slate);
    margin-bottom: 5px;
}
.zv_rfstep-text {
    font-size: 15px;
    color: var(--zv-mute);
}

.zv_rfterms {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 6px;
    border-radius: var(--zv-r2);
    overflow: hidden;
    box-shadow: var(--zv-up1);
    background: var(--zv-panel);
}
.zv_rfterms th {
    background: linear-gradient(135deg, var(--zv-slate), var(--zv-deep));
    color: #ffffff;
    text-align: left;
    padding: 15px 18px;
    font-family: var(--zv-soft);
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.zv_rfterms td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--zv-line);
    color: var(--zv-mute);
    font-size: 15px;
}
.zv_rfterms td:first-child {
    color: var(--zv-ink);
}
.zv_rfterms tr:nth-child(even) td {
    background: #fafbfd;
}
.zv_rfterms tr:last-child td {
    border-bottom: none;
}

@media (max-width: 900px) {
    .zv_rftop {
        padding: 36px 16px 10px;
    }
    .zv_rfcases {
        padding: 22px 16px 6px;
        gap: 16px;
    }
    .zv_rfcase {
        padding: 24px 20px;
        border-radius: 24px;
    }
    .zv_rfsheet {
        padding: 16px 16px 6px;
    }
    .zv_rfsheet-block {
        padding: 28px 20px;
        border-radius: 24px;
    }
    .zv_rfstep {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 14px;
        padding: 18px 16px;
    }
    .zv_rfstep-num {
        width: 46px;
        height: 46px;
        font-size: 17px;
        border-radius: 15px;
    }
    .zv_rfterms th,
    .zv_rfterms td {
        padding: 12px 13px;
        font-size: 14px;
    }
}