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

:root {
    --jn-olive: #4a5320;
    --jn-moss: #7d8b39;
    --jn-teal: #17a2a2;
    --jn-ink: #22261a;
    --jn-mute: #6b7154;
    --jn-edge: #dde2c6;
    --jn-paper: #f8f9f0;
    --jn-tint: #eaeedb;
    --jn-panel: #ffffff;
    --jn-deep: #333a13;
    --jn-ui: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
    --jn-head: Didot, "Bodoni MT", Georgia, serif;
    --jn-r1: 10px;
    --jn-r2: 18px;
    --jn-r3: 26px;
    --jn-r4: 24px;
    --jn-sh1: 0 8px 20px rgba(34, 38, 26, .07);
    --jn-sh2: 0 16px 40px rgba(34, 38, 26, .11);
    --jn-sh3: 0 28px 64px rgba(34, 38, 26, .16);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--jn-head);
    background:
        radial-gradient(circle at 88% 2%, rgba(23, 162, 162, .11), transparent 38%),
        linear-gradient(180deg, #f8f9f0 0%, #eaeedb 100%);
    color: var(--jn-ink);
    line-height: 1.76;
    font-size: 16px;
}

a {
    color: var(--jn-olive);
    text-decoration: none;
    transition: color .2s ease, opacity .2s ease;
}
a:hover { color: var(--jn-teal); }

/* ---- шапка: суцільна оливкова смуга, БЕЗ sticky ---- */
.jn-topbar-1 {
    position: relative;
    z-index: 1;
    padding: 26px 20px 74px;
    background: linear-gradient(160deg, var(--jn-deep) 0%, var(--jn-olive) 62%, var(--jn-moss) 100%);
    border-bottom: 3px solid var(--jn-teal);
}
.jn-topbar-inner-1 {
    max-width: 1160px;
    margin: 0 auto;
    text-align: center;
}
.jn-topbar-name-1 {
    font-family: var(--jn-ui);
    font-size: 21px;
    letter-spacing: .24em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--jn-paper);
}
.jn-topbar-name-1:hover { color: var(--jn-tint); }

/* ---- hero-картка, що наїжджає на шапку ---- */
.jn-doc-hero-4 {
    position: relative;
    z-index: 3;
    max-width: 720px;
    margin: -54px auto 0;
    padding: 34px 40px 32px;
    background: var(--jn-panel);
    border: 1px solid rgba(74, 83, 32, .13);
    border-radius: var(--jn-r3);
    box-shadow: var(--jn-sh3);
    text-align: center;
}
.jn-doc-tag-4 {
    display: inline-block;
    font-family: var(--jn-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--jn-teal);
    margin-bottom: 12px;
}
.jn-doc-title-4 {
    font-size: clamp(26px, 4.4vw, 42px);
    line-height: 1.14;
    font-weight: 400;
    color: var(--jn-olive);
    margin-bottom: 12px;
}
.jn-doc-title-4 em {
    font-family: var(--jn-ui);
    font-style: italic;
    color: var(--jn-teal);
}
.jn-doc-sub-4 {
    font-family: var(--jn-ui);
    color: var(--jn-mute);
    font-size: 14px;
    line-height: 1.78;
}
.jn-doc-date-4 {
    display: block;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--jn-edge);
    font-family: var(--jn-ui);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #99a181;
}

/* ---- вузька колонка контенту ---- */
.jn-doc-hold-6 {
    max-width: 640px;
    margin: 0 auto;
    padding: 44px 20px 80px;
}
.jn-doc-sheet-6 { background: transparent; }

.jn-doc-sheet-6 h2 {
    font-size: clamp(21px, 3vw, 28px);
    line-height: 1.22;
    font-weight: 400;
    color: var(--jn-olive);
    margin: 8px 0 14px;
}
.jn-doc-sheet-6 h2 span {
    display: block;
    font-family: var(--jn-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--jn-moss);
    margin-bottom: 4px;
}
.jn-doc-sheet-6 h3 {
    font-family: var(--jn-ui);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--jn-deep);
    margin: 22px 0 8px;
}
.jn-doc-sheet-6 p {
    color: var(--jn-mute);
    margin-bottom: 14px;
}
.jn-doc-sheet-6 ul,
.jn-doc-sheet-6 ol {
    padding-left: 20px;
    margin: 0 0 16px;
    color: var(--jn-mute);
}
.jn-doc-sheet-6 li { margin-bottom: 8px; }
.jn-doc-sheet-6 li::marker { color: var(--jn-teal); }
.jn-doc-sheet-6 strong { color: var(--jn-ink); }

/* ---- картки-тези ---- */
.jn-claim-grid-8 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 22px 0 26px;
    border-top: 1px solid var(--jn-edge);
}
.jn-claim-box-8 {
    padding: 16px 4px 15px 46px;
    border-bottom: 1px solid var(--jn-edge);
    position: relative;
}
.jn-claim-box-8::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 24px;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--jn-teal) 0 50%, var(--jn-moss) 50% 100%);
}
.jn-claim-title-8 {
    font-family: var(--jn-ui);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--jn-olive);
    margin-bottom: 3px;
}
.jn-claim-text-8 {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--jn-mute);
}

/* ---- покроковий список ---- */
.jn-flow-11 {
    margin: 26px 0;
    display: grid;
    gap: 0;
    counter-reset: jnstep;
}
.jn-flow-step-11 {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px dashed var(--jn-edge);
}
.jn-flow-step-11:last-child { border-bottom: none; }
.jn-flow-num-11 {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-family: var(--jn-ui);
    font-size: 16px;
    font-weight: 700;
    color: var(--jn-paper);
    background: linear-gradient(135deg, var(--jn-olive), var(--jn-moss));
}
.jn-flow-title-11 {
    font-family: var(--jn-ui);
    font-size: 15px;
    font-weight: 700;
    color: var(--jn-deep);
    margin-bottom: 3px;
}
.jn-flow-text-11 {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--jn-mute);
}

/* ---- футер ---- */
.jn-foot-9 {
    margin-top: 40px;
    background: var(--jn-tint);
    color: var(--jn-mute);
    padding: 22px 20px 18px;
    text-align: center;
    border-top: 1px solid rgba(74, 83, 32, .16);
    font-family: var(--jn-ui);
}
.jn-foot-inner-9 {
    max-width: 900px;
    margin: 0 auto;
}
.jn-foot-nav-9 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
    margin-bottom: 12px;
}
.jn-foot-nav-9 a {
    color: #7c8465;
    font-size: 11px;
    letter-spacing: .05em;
    text-decoration: none;
}
.jn-foot-nav-9 a:hover { color: var(--jn-teal); }
.jn-foot-legal-9 {
    font-size: 11px;
    line-height: 1.75;
    color: #8d9476;
    max-width: 720px;
    margin: 0 auto 12px;
}
.jn-foot-biz-9 {
    font-size: 11px;
    color: #8d9476;
    line-height: 1.75;
    margin-bottom: 8px;
}
.jn-foot-note-9 {
    font-size: 11px;
    color: #8d9476;
}

@media (max-width: 640px) {
    .jn-doc-hero-4 { margin: -40px 14px 0; padding: 26px 20px 24px; border-radius: 20px; }
    .jn-topbar-1 { padding: 22px 20px 62px; }
    .jn-doc-hold-6 { padding: 34px 20px 60px; }
}