/* v18 · 1) the condition tile opens into a big card; 2) a proper little house; 3) «Как это работает» as looping cards */

/* ---------- 1 · the big card ---------- */
.j17-cond { transition: transform .2s ease, box-shadow .2s ease; }
.j17-cond:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -28px rgba(60, 40, 20, .6); }
.j17-more { display: inline-flex; align-items: center; gap: 6px; }
.j17-more::after { content: ''; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; rotate: 45deg; margin-left: 2px; }
.j17-more__close, .j17-note { display: none !important; }
.c18 { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.c18[hidden] { display: none; }
.c18-back { position: absolute; inset: 0; background: rgba(15, 25, 35, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.c18-card { position: relative; display: grid; justify-items: start; gap: 6px; width: min(560px, 100%); max-height: calc(100svh - 40px); overflow-y: auto; padding: 28px 28px 22px;
    border-radius: 24px; background: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55); transform-origin: center; will-change: transform; }
.c18-x { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #F3F4F6; cursor: pointer; transition: background .2s, rotate .2s; }
.c18-x:hover { background: #FEE2E2; rotate: 90deg; }
.c18-x svg { width: 18px; height: 18px; fill: none; stroke: #0F1923; stroke-width: 2.4; stroke-linecap: round; }
.c18-art, .c18-art.j17-conds { width: 100%; margin: 0; display: grid; place-items: center; padding: 10px 0 6px; border-radius: 16px; background: #FDF6E3; }
.c18-card:focus { outline: none; }
.c18-art svg { display: block; width: auto; height: 190px; max-width: 100%; margin: 0; overflow: visible; }
.c18-k { margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; }
.c18-v { font-family: 'Unbounded', system-ui, sans-serif; font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.1; letter-spacing: -.03em; color: #0F1923; }
.c18-t { margin-top: 4px; font-size: 17px; line-height: 1.6; color: #374151; }
.c18-nav { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #F3F4F6; }
.c18-arrow { width: 48px; height: 48px; display: grid; place-items: center; border: 1.5px solid #E5E7EB; border-radius: 50%; background: #fff; cursor: pointer; transition: border-color .2s, background .2s; }
.c18-arrow:hover { border-color: #E31837; background: #FEF2F2; }
.c18-arrow svg { width: 20px; height: 20px; fill: none; stroke: #0F1923; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.c18-count { font-size: 14px; color: #6B7280; }
.c18-count b { font-size: 18px; color: #E31837; }
@media (max-width: 900px) {
    .c18 { padding: 12px; place-items: end center; }
    .c18-card { width: 100%; padding: 22px 18px 16px; border-radius: 22px; }
    .c18-art svg { height: 150px; }
    .c18-t { font-size: 16px; }
}

/* ---------- 2 · the little house ---------- */
.j17-conds .h18-house .h18-shadow { fill: rgba(15, 25, 35, .1); }
.j17-conds .h18-trunk { fill: #8B5A3C; }
.j17-conds .h18-crown { fill: #2F8F5B; stroke: #0F1923; stroke-width: 2; }
.j17-conds .h18-wall { fill: #FFFDF8; stroke: #0F1923; stroke-width: 2.6; }
.j17-conds .h18-roof { fill: #E31837; stroke: #0F1923; stroke-width: 2.6; stroke-linejoin: round; }
.j17-conds .h18-tiles { stroke: rgba(255, 255, 255, .45); stroke-width: 2; stroke-linecap: round; }
.j17-conds .h18-attic { fill: #FFD34E; stroke: #0F1923; stroke-width: 2; }
.j17-conds .h18-chim, .j17-conds .h18-chimcap { fill: #8B5A3C; stroke: #0F1923; stroke-width: 2; }
.j17-conds .h18-smoke circle { fill: #C3CAD2; transform-box: fill-box; transform-origin: center; animation: h18Smoke 3s ease-out infinite; }
.j17-conds .h18-smoke circle:nth-child(2) { animation-delay: -1s; } .j17-conds .h18-smoke circle:nth-child(3) { animation-delay: -2s; }
.j17-conds .h18-win { fill: #FFD34E; stroke: #0F1923; stroke-width: 2; animation: cdWin 3.2s ease-in-out infinite; }
.j17-conds .h18-mull { stroke: #0F1923; stroke-width: 1.6; }
.j17-conds .h18-door { fill: #2F5D50; stroke: #0F1923; stroke-width: 2.4; }
.j17-conds .h18-knob { fill: #FFD34E; }
.j17-conds .h18-step { fill: #9CA3AF; }
.j17-conds .h18-keyhole { fill: #0F1923; }
@keyframes h18Smoke { 0% { opacity: 0; translate: 0 6px; scale: .6; } 30% { opacity: .9; } 100% { opacity: 0; translate: 5px -10px; scale: 1.4; } }
@media (prefers-reduced-motion: reduce) { .j17-conds .h18-smoke circle { animation: none; } }

/* ---------- 3 · «Как это работает»: five steps, each picture plays its own short loop ---------- */
.pr18 { --font-display: 'Unbounded', system-ui, sans-serif; }
.pr18 .w12-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pr18-h { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3vw, 44px); line-height: 1.08; letter-spacing: -.04em; }
.pr18 .w12-text { font-size: 17px; }
.pr18 .w12-viz > svg { max-width: 440px; max-height: 420px; }
.pr18 svg * { transform-box: fill-box; }
.pr18 .pr-shadow { fill: rgba(15, 25, 35, .12); }
.pr18 .w12--ink .pr-shadow, .pr18 .w12--pine .pr-shadow { fill: rgba(0, 0, 0, .25); }
.pr18 .cv-line { fill: rgba(15, 25, 35, .14); }
/* 1 · chat */
.pr18 .cv-phone { fill: var(--ink); }
.pr18 .cv-screen { fill: #F4EFE7; }
.pr18 .cv-notch { fill: #2A3440; }
.pr18 .cv-bub--us rect:first-child { fill: #fff; stroke: rgba(15, 25, 35, .12); }
.pr18 .cv-bub--me rect:first-child { fill: var(--red); }
.pr18 .cv-bubline { fill: rgba(15, 25, 35, .18); }
.pr18 .cv-bub--me .cv-bubline { fill: rgba(255, 255, 255, .6); }
.pr18 .cv-bub--us { transform-origin: 0% 100%; } .pr18 .cv-bub--me { transform-origin: 100% 100%; }
.pr18 .cv-typing circle { fill: rgba(15, 25, 35, .35); }
.is-on .pr18-viz--chat .pr-phone { animation: prFloat 5s ease-in-out infinite; }
.is-on .pr18-viz--chat .cv-bub { animation: prBub 6s cubic-bezier(.3, 1.5, .5, 1) infinite backwards; animation-delay: calc(var(--k) * .7s); }
.is-on .pr18-viz--chat .cv-typing circle { animation: prType 1s ease-in-out infinite; }
.is-on .pr18-viz--chat .cv-typing circle:nth-child(2) { animation-delay: .15s; } .is-on .pr18-viz--chat .cv-typing circle:nth-child(3) { animation-delay: .3s; }
/* 2 · contract */
.pr18 .cv-sheet { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.pr18 .pr-head { fill: var(--red); }
.pr18 .pr-headleaf { color: #fff; }
.pr18 .cv-sign { fill: none; stroke: #1E4FBF; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pr18 .cv-signline { stroke: rgba(15, 25, 35, .3); stroke-width: 2; }
.pr18 .pr-seal circle { fill: none; stroke: var(--red); stroke-width: 3.5; stroke-dasharray: 5 4; }
.pr18 .pr-sealleaf { color: var(--red); }
.pr18 .pr-seal { transform-origin: center; opacity: 0; }
.pr18 .cv-penbody { fill: var(--ink); }
.pr18 .cv-pentip { fill: var(--amber); }
.pr18 .pr18-viz--sign .cv-line { transform-origin: 0% 50%; }
.is-on .pr18-viz--sign .cv-line { animation: prLine 6s ease-out infinite backwards; animation-delay: calc(var(--k) * .12s); }
.is-on .pr18-viz--sign .cv-sign { animation: prSign 6s ease-in-out infinite; }
.is-on .pr18-viz--sign .cv-pen { animation: prPen 6s ease-in-out infinite; }
.is-on .pr18-viz--sign .pr-seal { animation: prStamp 6s cubic-bezier(.5, 0, .7, 1) infinite; }
/* 3 · papers */
.pr18 .cv-ppsheet { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.pr18 .cv-folder { fill: var(--amber); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.pr18 .cv-lmia rect { fill: rgba(227, 24, 55, .05); stroke: var(--red); stroke-width: 4.5; }
.pr18 .cv-lmia text { font-family: var(--font-display); font-weight: 700; font-size: 27px; letter-spacing: .08em; text-anchor: middle; fill: var(--red); }
.pr18 .cv-pp { transform-origin: 50% 116.7%; rotate: var(--r); }
.pr18 .cv-lmia { transform-origin: center; }
.is-on .pr18-viz--papers .cv-pps { animation: prRise 6s cubic-bezier(.3, 1.2, .5, 1) infinite; }
.is-on .pr18-viz--papers .cv-pp { animation: prFan 6s cubic-bezier(.3, 1.4, .5, 1) infinite; }
.is-on .pr18-viz--papers .cv-lmia { animation: prStamp 6s cubic-bezier(.5, 0, .7, 1) infinite; }
/* 4 · visa */
.pr18 .cv-passpage { fill: #FFFDF8; stroke: rgba(15, 25, 35, .25); stroke-width: 2; }
.pr18 .cv-visa rect:first-child { fill: #FCE3E7; stroke: var(--red); stroke-width: 3; }
.pr18 .cv-visaleaf { color: var(--red); }
.pr18 .cv-coverb { fill: #7E1B2B; stroke: #F5C451; stroke-width: 2; }
.pr18 .cv-coverleaf { color: var(--amber); }
.pr18 .cv-coverline { fill: var(--amber); }
.pr18 .cv-cover { transform-origin: 100% 50%; }
.pr18 .cv-visa { transform-origin: center; }
.pr18 .cv-env { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.pr18 .cv-envflap { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.pr18 .cv-offertxt { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-anchor: middle; fill: var(--red); }
.is-on .pr18-viz--visa .cv-cover { animation: prCover 6s ease-in-out infinite; }
.is-on .pr18-viz--visa .cv-visa { animation: prVisa 6s cubic-bezier(.3, 1.5, .5, 1) infinite; }
.is-on .pr18-viz--visa .cv-offer { animation: prOffer 6s cubic-bezier(.2, .8, .2, 1) infinite; }
/* 5 · flight */
.pr18 .cv-hsun { fill: #FFD27A; }
.pr18 .cv-cloud circle, .pr18 .cv-cloud rect { fill: #FFF8EE; }
.pr18 .cv-ftrail { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pr18 .cv-pbody { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.pr18 .cv-pstripe, .pr18 .cv-pfin, .pr18 .cv-pstab { fill: var(--red); }
.pr18 .cv-pfin, .pr18 .cv-pstab { stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.pr18 .cv-pfinleaf { color: #fff; }
.pr18 .cv-pcock { fill: var(--ink); }
.pr18 .cv-pwin { fill: #3F5A73; }
.pr18 .cv-pdoor { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.pr18 .cv-pwing { fill: #C9D2DA; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.pr18 .cv-peng { fill: #E6EBEF; stroke: var(--ink); stroke-width: 3; }
.pr18 .cv-plogo { font-family: var(--font-display); font-size: 15px; font-weight: 700; fill: var(--ink); text-anchor: start; letter-spacing: -.02em; }
.pr18 .cv-plogo__r { fill: var(--red); }
.pr18 .pr-pinbody { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.pr18 .pr-pinleaf { color: var(--red); }
.pr18 .pr-pinring { fill: none; stroke: #fff; stroke-width: 3; transform-origin: center; }
.pr18 .pr-pin { transform-origin: 50% 100%; }
.is-on .pr18-viz--flight .cv-fplane { animation: prFly 7s cubic-bezier(.3, .7, .4, 1) infinite; }
.is-on .pr18-viz--flight .cv-ftrail { animation: prTrail 7s cubic-bezier(.3, .7, .4, 1) infinite; }
.is-on .pr18-viz--flight .cv-cloud { animation: prDrift 9s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -2s); }
.is-on .pr18-viz--flight .cv-hsun { animation: prSun 4s ease-in-out infinite; transform-origin: center; }
.is-on .pr18-viz--flight .pr-pin { animation: prPin 7s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.is-on .pr18-viz--flight .pr-pinring { animation: prRing 1.8s ease-out infinite; }

@keyframes prFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes prBub { 0% { scale: 0; opacity: 0; } 8%, 72% { scale: 1; opacity: 1; } 82%, 100% { scale: 1; opacity: 0; } }
@keyframes prType { 0%, 100% { translate: 0 0; opacity: .5; } 40% { translate: 0 -6px; opacity: 1; } }
@keyframes prLine { 0% { scale: 0 1; } 10%, 88% { scale: 1 1; } 96%, 100% { scale: 0 1; } }
@keyframes prSign { 0%, 18% { stroke-dashoffset: 1; } 52%, 88% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 1; } }
@keyframes prPen { 0%, 14% { translate: -20px -30px; rotate: 0deg; } 18% { translate: 0 0; } 26% { translate: 40px -16px; } 34% { translate: 85px 4px; } 43% { translate: 130px -14px; } 52% { translate: 174px -6px; }
    62%, 88% { translate: 200px -60px; rotate: 10deg; } 100% { translate: -20px -30px; rotate: 0deg; } }
@keyframes prStamp { 0%, 52% { scale: 2.4; opacity: 0; rotate: -30deg; } 60% { scale: 1; opacity: 1; rotate: -8deg; } 64% { scale: 1.08; } 68%, 88% { scale: 1; opacity: 1; rotate: -8deg; } 96%, 100% { scale: 1; opacity: 0; rotate: -8deg; } }
@keyframes prRise { 0% { translate: 0 150px; } 16%, 86% { translate: 0 0; } 100% { translate: 0 150px; } }
@keyframes prFan { 0%, 14% { rotate: 0deg; } 32%, 84% { rotate: var(--r); } 96%, 100% { rotate: 0deg; } }
@keyframes prCover { 0%, 8% { scale: -1 1; } 30%, 86% { scale: 1 1; } 98%, 100% { scale: -1 1; } }
@keyframes prVisa { 0%, 32% { translate: 0 -90px; rotate: -12deg; opacity: 0; } 44%, 84% { translate: 0 0; rotate: 0deg; opacity: 1; } 92%, 100% { translate: 0 0; opacity: 0; } }
@keyframes prOffer { 0%, 48% { translate: 240px 0; rotate: 40deg; opacity: 0; } 62%, 86% { translate: 0 0; rotate: 0deg; opacity: 1; } 96%, 100% { translate: 240px 0; rotate: 40deg; opacity: 0; } }
@keyframes prFly { 0% { translate: -320px 110px; } 30% { translate: 0 0; } 45% { translate: 0 -8px; } 60% { translate: 0 4px; } 76% { translate: 0 -4px; } 90% { translate: 380px -120px; opacity: 1; } 91%, 100% { translate: 380px -120px; opacity: 0; } }
@keyframes prTrail { 0% { stroke-dashoffset: 1; opacity: 1; } 30%, 80% { stroke-dashoffset: 0; opacity: 1; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes prDrift { 0% { translate: -14px 0; } 100% { translate: 18px 0; } }
@keyframes prSun { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes prPin { 0%, 78% { translate: 0 -40px; opacity: 0; scale: .6; } 84%, 96% { translate: 0 0; opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes prRing { 0% { scale: .5; opacity: 1; } 100% { scale: 2.2; opacity: 0; } }
/* every step is its own card, one under another — on every screen, so nobody misses a step */
.pr18 .w12-stage { display: grid; gap: 20px; border-radius: 0; overflow: visible; box-shadow: none; isolation: auto; }
.pr18 .w12-slide { grid-area: auto; opacity: 1; visibility: visible; transition: none; min-height: 0; padding: 40px 56px; gap: 48px; border-radius: 24px; overflow: hidden;
    box-shadow: 0 24px 48px -36px rgba(17, 24, 39, .5); }
.pr18 .w12-slide:nth-child(even) { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.pr18 .w12-slide:nth-child(even) .w12-viz { order: -1; }
.pr18 .w12-viz > svg { max-height: 320px; }
.pr18 .w12-tabs { display: none; }
@media (max-width: 900px) {
    .pr18 .w12-stage { gap: 16px; }
    .pr18 .w12-slide, .pr18 .w12-slide:nth-child(even) { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 28px; gap: 16px; border-radius: 20px; }
    .pr18-h { font-size: 26px; }
    .pr18 .w12-text { font-size: 16px; }
    .pr18 .w12-viz { height: 240px; }
    .pr18 .w12-viz > svg { height: 240px; max-height: 240px; width: auto; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .pr18 svg * { animation: none !important; } .pr18 .cv-sign, .pr18 .cv-ftrail { stroke-dashoffset: 0; } .pr18 .pr-seal { opacity: 1; } }