/* v20 · comparison as a diagram · «Откуда вы?» with the globe · services made anew */
.vs20, .wh20, .inc20 { --ink: #0F1923; --ink-soft: #4A5560; --ink-faint: rgba(15, 25, 35, .1); --red: #E31837; --amber: #F5C451; --go: #16A34A; --pine: #2F5D50; --cream: #FBF6EE; --display: 'Unbounded', system-ui, sans-serif; }
.dot { display: inline-block; flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; }
.dot--green { background: #16A34A; } .dot--yellow { background: #F5A524; } .dot--red { background: #E31837; }

/* ---------- 1 · comparison ---------- */
.vs20 { max-width: 1120px; margin: 0 auto; }
.vs20-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vs20-btn { padding: 10px 16px; border: 1.5px solid #E5E7EB; border-radius: 999px; background: #fff; font: 600 14.5px/1.2 inherit; color: #374151; cursor: pointer; transition: background .2s, color .2s, border-color .2s, translate .2s; }
.vs20-btn:hover { translate: 0 -2px; border-color: var(--red); color: var(--red); }
.vs20-btn[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.vs20-dash { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 32px; margin-top: 20px; padding: 32px; border-radius: 24px; background: #fff; border: 1px solid #F0F1F3; box-shadow: 0 30px 60px -44px rgba(17, 24, 39, .45); }
.radar20 { display: block; width: 100%; height: auto; overflow: visible; }
.rad-ring { fill: none; stroke: rgba(15, 25, 35, .09); stroke-width: 1.5; }
.rad-ring--mid { stroke-dasharray: 4 7; }
.rad-axis { stroke: rgba(15, 25, 35, .08); stroke-width: 1.5; }
.rad-poly--ca { fill: rgba(227, 24, 55, .16); stroke: var(--red); stroke-width: 3.5; stroke-linejoin: round; }
.rad-poly--ot { fill: rgba(15, 25, 35, .1); stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 9 7; stroke-linejoin: round; }
.rad-dot--ca { fill: var(--red); stroke: #fff; stroke-width: 2.5; }
.rad-dot--ot { fill: var(--ink); stroke: #fff; stroke-width: 2; }
.rad-label { font: 600 18px Inter, system-ui, sans-serif; fill: var(--ink-soft); transition: fill .4s; }
.rad-label.is-win { fill: var(--red); }
.vs20-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 4px; font-size: 14px; font-weight: 600; }
.lg::before { content: ''; display: inline-block; width: 22px; height: 4px; margin-right: 8px; border-radius: 4px; vertical-align: middle; background: var(--red); }
.lg--ot::before { background: repeating-linear-gradient(90deg, var(--ink) 0 7px, transparent 7px 11px); }
.vs20-side { display: grid; justify-items: center; gap: 8px; text-align: center; }
.vs20-kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.vs20-big { display: flex; align-items: flex-end; justify-content: center; gap: 14px; font-family: var(--display); font-weight: 700; line-height: .9; }
.vs20-big.is-pop { animation: vsPop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes vsPop { from { scale: .92; } }
.vs20-big > span { display: grid; justify-items: center; gap: 6px; }
.vs20-big small { font-size: 26px; line-height: 1; }
.vs20-big b { min-width: 1.2em; font-size: clamp(64px, 7vw, 112px); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.vs20-bigca b { color: var(--red); }
.vs20-big i { padding-bottom: .2em; font-style: normal; font-size: clamp(36px, 4vw, 60px); color: rgba(15, 25, 35, .2); }
.balance20 { display: block; width: min(100%, 380px); height: auto; margin: 4px auto 0; overflow: visible; }
.bal-post { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; }
.bal-bar { stroke: var(--ink); stroke-width: 9; stroke-linecap: round; }
.bal-pin { fill: var(--red); }
.bal-beam { transform-box: view-box; transform-origin: 300px 70px; }
.bal-pan { transform-box: view-box; transform-origin: 0 0; }
.bal-rope { fill: none; stroke: var(--ink-soft); stroke-width: 2.5; }
.bal-dish { fill: var(--red); }
.bal-dish--ot { fill: var(--ink); }
.bal-txt { font: 700 24px 'Unbounded', system-ui, sans-serif; fill: var(--ink); }
.vs20-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 13px; color: var(--ink-soft); }
.vs20-keys > span { display: inline-flex; align-items: center; gap: 6px; }
.vs20-keys .dot { margin-top: 0; }
.duel20 { margin-top: 16px; border-radius: 24px; background: #fff; border: 1px solid #F0F1F3; box-shadow: 0 30px 60px -44px rgba(17, 24, 39, .45); overflow: hidden; }
.duel20-head { display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 26vw, 320px) minmax(0, 1fr); align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--ink-faint); font-family: var(--display); font-weight: 700; font-size: 16px; }
.duel20-head span:nth-child(2) { font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 600; color: var(--ink-soft); text-align: center; }
.duel20-head span:last-child { text-align: right; }
.drow { border-bottom: 1px solid var(--ink-faint); }
.drow:last-child { border-bottom: 0; }
.drow__btn { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 26vw, 320px) minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 22px; border: 0; background: transparent; text-align: center; cursor: pointer; font: inherit; color: var(--ink); transition: background .2s; }
.drow__btn:hover { background: rgba(15, 25, 35, .03); }
.drow__label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.drow__label svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ink-soft); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: rotate .35s; }
.drow.is-open .drow__label svg { rotate: 180deg; stroke: var(--red); }
.dbar { display: flex; height: 12px; border-radius: 12px; background: rgba(15, 25, 35, .06); overflow: hidden; }
.dbar--ca { justify-content: flex-end; }
.dbar i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; transition: width .8s cubic-bezier(.2, .8, .2, 1), background-color .4s; }
.dbar i.is-green { background: var(--go); } .dbar i.is-yellow { background: #F5A524; } .dbar i.is-red { background: var(--red); }
.drow__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.drow.is-open .drow__more { grid-template-rows: 1fr; }
.drow__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; min-height: 0; overflow: hidden; padding: 0 22px; }
.drow__in > div { display: flex; gap: 10px; padding-bottom: 16px; font-size: 14px; line-height: 1.5; color: #374151; }
.drow__in > div:first-child { flex-direction: row-reverse; text-align: right; }
.heat20 { margin-top: 16px; padding: 28px; border-radius: 24px; background: var(--ink); color: var(--cream); }
.heat20-title { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.03em; }
.heat20-sub { margin-top: 6px; font-size: 14px; color: rgba(251, 246, 238, .7); }
.heat20-scroll { margin-top: 16px; overflow-x: auto; scrollbar-width: none; }
.heat20-scroll::-webkit-scrollbar { display: none; }
.heat20-table { width: 100%; min-width: 660px; border-collapse: separate; border-spacing: 5px; table-layout: fixed; }
.heat20-table th { padding: 0; font-weight: 600; font-size: 12.5px; color: rgba(251, 246, 238, .75); }
.heat20-table thead th:first-child { width: 120px; }
.heat20-table thead button { width: 100%; padding: 8px 4px 7px; border: 0; border-radius: 12px; background: rgba(251, 246, 238, .07); color: inherit; font-size: 20px; line-height: 1; cursor: pointer; transition: background .25s, translate .25s; }
.heat20-table thead button small { display: block; margin-top: 4px; font: 600 10.5px Inter, sans-serif; color: rgba(251, 246, 238, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat20-table thead button:hover { translate: 0 -2px; background: rgba(251, 246, 238, .14); }
.heat20-table thead .is-ca button { background: var(--red); cursor: default; }
.heat20-table thead .is-sel button { background: var(--cream); color: var(--ink); }
.heat20-table thead .is-sel button small { color: var(--ink-soft); }
.heat20-table tbody th { position: sticky; left: 0; z-index: 1; padding-right: 8px; background: var(--ink); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat20-table td { height: 26px; border-radius: 7px; }
.heat20-table td::after { content: ''; display: block; height: 100%; border-radius: inherit; background: var(--ink); opacity: 0; transition: opacity .3s; }
.heat20-table td.is-dim::after { opacity: .62; }
.heat20-table td.g { background: var(--go); } .heat20-table td.y { background: #F5A524; } .heat20-table td.r { background: var(--red); }
.vs20:not(.is-in) .heat20-table td { scale: .3; opacity: 0; }
.vs20.is-in .heat20-table td { transition: scale .45s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; }
@media (max-width: 900px) {
    .vs20-picker { gap: 6px; }
    .vs20-btn { padding: 9px 13px; font-size: 14px; white-space: nowrap; }
    .vs20-dash { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 12px 20px; border-radius: 20px; }
    .rad-label { font-size: 22px; }
    .vs20-big b { font-size: 72px; }
    .duel20 { border-radius: 20px; }
    .duel20-head { grid-template-columns: 1fr 1fr; padding: 14px 16px; font-size: 14px; }
    .duel20-head span:nth-child(2) { display: none; }
    .drow__btn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 12px 16px; }
    .drow__label { grid-column: 1 / -1; order: -1; font-size: 14px; }
    .drow__in { gap: 0 14px; padding: 0 16px; }
    .drow__in > div { font-size: 13px; }
    .heat20 { padding: 20px 14px; border-radius: 20px; }
    .heat20-table thead th:first-child { width: 92px; }
}

/* ---------- 2 · «Откуда вы?» ---------- */
.wh20 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; max-width: 1120px; margin: 0 auto; }
.wh20-ask { font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.wh20-ask b { display: block; margin-bottom: 4px; font-family: var(--display); font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.03em; color: var(--ink); }
.wh20-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.wh20-chip { padding: 10px 16px; border: 1.5px solid #E5E7EB; border-radius: 999px; background: #fff; font: 600 15px/1.2 inherit; color: #1F2937; cursor: pointer; transition: background .2s, color .2s, border-color .2s, translate .2s; }
.wh20-chip:hover { translate: 0 -2px; border-color: var(--red); color: var(--red); }
.wh20-chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.wh20-chip--other { border-style: dashed; }
.wh20-result { margin-top: 22px; padding: 20px; border-radius: 20px; background: #FFF5F6; border: 1px solid #FBD5DB; }
.wh20-result.is-in { animation: c19Up .5s cubic-bezier(.2, .8, .2, 1); }
.wh20-route { display: grid; gap: 4px; }
.wh20-route b { font-family: var(--display); font-size: 20px; letter-spacing: -.02em; color: var(--ink); }
.wh20-route span { font-size: 15px; color: var(--ink-soft); }
.wh20-pre { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--go); }
.wh20-pre::before { content: '✓ '; }
.wh20 .j17-cta { margin-top: 14px; }
.wh20-globe { position: relative; display: grid; place-items: center; }
#globe20 { display: block; width: 100%; max-width: 480px; aspect-ratio: 1; touch-action: pan-y; cursor: grab; }
#globe20:active { cursor: grabbing; }
.wh20-hint { position: absolute; top: 8px; right: 8px; padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: 0 6px 18px -8px rgba(15, 25, 35, .35); font-size: 13px; font-weight: 600; color: #374151; pointer-events: none; transition: opacity .3s; }
.wh20-hint::before { content: '↔ '; color: var(--red); }
.wh20.is-touched .wh20-hint { opacity: 0; }
@media (max-width: 900px) {
    .wh20 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .wh20-copy { display: contents; }
    .wh20-ask { order: 1; } .wh20-chips { order: 2; margin-top: 4px; } .wh20-globe { order: 3; } .wh20-result { order: 4; margin-top: 0; }
    #globe20 { max-width: 340px; }
    .wh20-chip { padding: 9px 13px; font-size: 14px; }
}

/* ---------- 3 · services ---------- */
.inc20 { display: grid; gap: 20px; max-width: 1120px; margin: 0 auto; }
.inc20-do { padding: 32px; border-radius: 24px; background: #fff; border: 1px solid #F0F1F3; box-shadow: 0 30px 60px -44px rgba(17, 24, 39, .45); }
.inc20-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.inc20-ok { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #DCFCE7; fill: none; stroke: var(--go); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.inc20-head h3 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.03em; color: var(--ink); }
.inc20-count { font-size: 14px; color: var(--ink-soft); }
.inc20-count b { font-family: var(--display); font-size: 22px; color: var(--red); }
.inc20-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: none; }
.inc20-item { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; align-items: start; padding: 16px; border-radius: 16px; background: #F9FAFB; transition: background .25s, translate .25s; }
.inc20-item:hover { background: #FFF5F6; translate: 0 -2px; }
.inc20-ic { grid-row: 1 / 3; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: #fff; box-shadow: 0 8px 18px -12px rgba(15, 25, 35, .35); }
.inc20-svg { width: 48px; height: 48px; overflow: visible; }
.inc20-num { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #9CA3AF; }
.inc20-item p { margin-top: 2px; padding-right: 22px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.inc20-check { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; fill: none; stroke: var(--go); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.inc20-check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
/* each tile rises in turn, then its tick draws */
.inc20-do .inc20-item { opacity: 0; translate: 0 16px; }
.inc20-do.is-in .inc20-item { opacity: 1; translate: 0 0; transition: opacity .5s ease, translate .5s cubic-bezier(.2, .8, .2, 1), background .25s; transition-delay: calc(var(--i) * 70ms), calc(var(--i) * 70ms), 0s; }
.inc20-do.is-in .inc20-check path { stroke-dashoffset: 0; transition: stroke-dashoffset .4s ease-out; transition-delay: calc(var(--i) * 70ms + .45s); }
/* the icons */
.inc20-svg * { transform-box: fill-box; }
.inc20-svg .i-card { fill: #fff; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.inc20-svg .i-card--b { fill: #E5E7EB; } .inc20-svg .i-card--m { fill: #F3F4F6; }
.inc20-svg .i-ln { fill: rgba(15, 25, 35, .16); }
.inc20-svg .i-ln--r { fill: var(--red); }
.inc20-svg .i-lens { fill: rgba(227, 24, 55, .12); stroke: var(--red); stroke-width: 3; }
.inc20-svg .i-stroke { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.inc20-svg .i-red, .inc20-svg .i-redfill { fill: var(--red); }
.inc20-svg .i-wleaf { color: #fff; }
.inc20-svg .i-inkfill { fill: var(--ink); }
.inc20-svg .i-dotw { fill: #fff; }
.inc20-svg .i-wstroke { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.inc20-svg .i-green { fill: var(--go); }
.inc20-svg .i-pass { fill: #7E1B2B; stroke: var(--ink); stroke-width: 2.5; }
.inc20-svg .i-gleaf { color: #F5C451; } .inc20-svg .i-gold { fill: #F5C451; }
.inc20-svg .i-stampc { fill: #fff; stroke: var(--red); stroke-width: 3; stroke-dasharray: 4 3; }
.inc20-svg .i-stampt { stroke: var(--red); stroke-width: 3; stroke-linecap: round; }
.inc20-svg .i-env { fill: #FDF6E3; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.inc20-svg .i-envline { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.inc20-svg .i-face { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.inc20-svg .i-tick { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.inc20-svg .i-pin { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.inc20-svg .i-roof { fill: none; stroke: var(--red); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.inc20-svg .i-win { fill: #F5C451; stroke: var(--ink); stroke-width: 2; }
.inc20-svg .i-door { fill: var(--pine); stroke: var(--ink); stroke-width: 2; }
.inc20-svg .i-goldc { fill: #F5C451; stroke: var(--ink); stroke-width: 2; }
.inc20-svg .i-heart { fill: #FDE2E6; stroke: var(--red); stroke-width: 3; stroke-linejoin: round; }
.inc20-svg .i-pulse { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.inc20-svg .i-mag, .inc20-svg .i-top, .inc20-svg .i-ok, .inc20-svg .i-stamp, .inc20-svg .i-letter, .inc20-svg .i-bub, .inc20-svg .i-key, .inc20-svg .i-heart { transform-origin: center; }
.inc20-svg .i-grow { transform-origin: 0 50%; }
.inc20-svg .i-needle { transform-origin: 50% 50%; }
.inc20-svg .i-key { transform-origin: 50% 0; }
.is-live .inc20-svg .i-mag { animation: iScan 3.4s ease-in-out infinite; }
.is-live .inc20-svg .i-grow { animation: iGrow 3.4s ease-out infinite backwards; animation-delay: calc(var(--k) * .2s); }
.is-live .inc20-svg .i-bub--a { animation: iBub 3.6s cubic-bezier(.3, 1.5, .5, 1) infinite backwards; }
.is-live .inc20-svg .i-bub--b { animation: iBub 3.6s cubic-bezier(.3, 1.5, .5, 1) .6s infinite backwards; }
.is-live .inc20-svg .i-top { animation: iSlide 3.6s ease-in-out infinite; }
.is-live .inc20-svg .i-ok { animation: iStamp 3.6s cubic-bezier(.5, 0, .7, 1) infinite; }
.is-live .inc20-svg .i-stamp { animation: iStamp 3.2s cubic-bezier(.5, 0, .7, 1) infinite; }
.is-live .inc20-svg .i-letter { animation: iLetter 3.4s cubic-bezier(.3, 1.3, .5, 1) infinite; }
.is-live .inc20-svg .i-needle { animation: iNeedle 4s ease-in-out infinite; }
.is-live .inc20-svg .i-win { animation: iWin 3s ease-in-out infinite; }
.is-live .inc20-svg .i-key { animation: iKey 2.6s ease-in-out infinite; }
.is-live .inc20-svg .i-heart { animation: iBeat 1.4s ease-in-out infinite; }
.is-live .inc20-svg .i-pulse { animation: iPulse 1.4s linear infinite; }
@keyframes iScan { 0%, 100% { translate: -12px 6px; } 33% { translate: 0 -4px; } 66% { translate: -18px -8px; } }
@keyframes iGrow { 0% { scale: 0 1; } 25%, 85% { scale: 1 1; } 100% { scale: 0 1; } }
@keyframes iBub { 0% { scale: 0; opacity: 0; } 12%, 80% { scale: 1; opacity: 1; } 92%, 100% { scale: .9; opacity: 0; } }
@keyframes iSlide { 0%, 20% { translate: 0 0; } 40%, 80% { translate: -4px -6px; rotate: -4deg; } 100% { translate: 0 0; } }
@keyframes iStamp { 0%, 40% { scale: 2; opacity: 0; } 50% { scale: 1; opacity: 1; } 55% { scale: 1.1; } 60%, 88% { scale: 1; opacity: 1; } 100% { opacity: 0; } }
@keyframes iLetter { 0%, 15% { translate: 0 16px; } 45%, 80% { translate: 0 -2px; } 100% { translate: 0 16px; } }
@keyframes iNeedle { 0% { rotate: -40deg; } 30% { rotate: 25deg; } 50% { rotate: -10deg; } 65%, 100% { rotate: 0deg; } }
@keyframes iWin { 0%, 40% { fill: #D1D5DB; } 55%, 100% { fill: #F5C451; } }
@keyframes iKey { 0%, 100% { rotate: -14deg; } 50% { rotate: 14deg; } }
@keyframes iBeat { 0%, 100% { scale: 1; } 15% { scale: 1.1; } 30% { scale: 1; } 45% { scale: 1.06; } }
@keyframes iPulse { from { stroke-dashoffset: 1; } to { stroke-dashoffset: -1; } }

.inc20-svg .i-perf { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 3; }
.inc20-svg .i-wln { fill: rgba(255, 255, 255, .8); }
.inc20-svg .i-rleaf { color: var(--red); }
.inc20-svg .i-plane, .inc20-svg .i-sign { transform-origin: 50% 100%; }
.is-live .inc20-svg .i-plane { animation: iFly 3s ease-in-out infinite; }
.is-live .inc20-svg .i-sign { animation: iWave 2.4s ease-in-out infinite; }
@keyframes iFly { 0% { translate: -6px 4px; opacity: 0; } 20% { opacity: 1; } 60% { translate: 8px -2px; opacity: 1; } 80%, 100% { translate: 14px -6px; opacity: 0; } }
@keyframes iWave { 0%, 100% { rotate: -7deg; } 50% { rotate: 7deg; } }

/* what we never charge for */
.inc20-no { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -44px rgba(17, 24, 39, .55); }
.inc20-zero { display: grid; justify-items: center; align-content: center; padding: 28px 24px 32px; background: var(--red); color: #fff; text-align: center; }
.tg20-svg { width: min(100%, 300px); height: auto; overflow: visible; }
.tg20-rail { stroke: rgba(255, 255, 255, .5); stroke-width: 4; stroke-linecap: round; }
.tg20-str { stroke: rgba(255, 255, 255, .7); stroke-width: 2.5; }
.tg20-card { fill: #fff; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.tg20-hole { fill: var(--red); }
.tg20-price { font: 700 24px 'Unbounded', system-ui, sans-serif; text-anchor: middle; fill: var(--ink); }
.tg20-x { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.tg20 { transform-box: view-box; transform-origin: 0 -34px; }
.is-live .tg20 { animation: tgSwing 3.4s ease-in-out infinite; animation-delay: calc(var(--k) * -.6s); }
.is-in .tg20-x { stroke-dashoffset: 0; transition: stroke-dashoffset .5s ease-out; transition-delay: calc(var(--k) * .25s + .4s); }
@keyframes tgSwing { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
.inc20-big { display: block; margin-top: 6px; font-family: 'Unbounded', system-ui, sans-serif; font-weight: 700; font-size: clamp(72px, 8vw, 112px); line-height: .9; letter-spacing: -.06em; }
.inc20-zl { margin-top: 8px; font-size: 17px; font-weight: 600; opacity: .9; }
.inc20-nobody { padding: 32px; background: var(--ink); color: var(--cream); }
.inc20-nobody h3 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -.03em; }
.inc20-nos { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.inc20-nos li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.45; }
.inc20-nos svg { flex: none; width: 24px; height: 24px; fill: none; stroke: #FF6B81; stroke-width: 2.4; stroke-linecap: round; }
.inc20-nos path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.inc20-no .inc20-nos li { opacity: 0; translate: 12px 0; }
.inc20-no.is-in .inc20-nos li { opacity: 1; translate: 0 0; transition: opacity .45s, translate .45s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 90ms + .2s); }
.inc20-no.is-in .inc20-nos path { stroke-dashoffset: 0; transition: stroke-dashoffset .4s ease-out; transition-delay: calc(var(--i) * 90ms + .55s); }
.inc20-law { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 14px 16px; border-radius: 16px; background: rgba(251, 246, 238, .08); }
.inc20-law p { font-size: 13.5px; line-height: 1.5; color: rgba(251, 246, 238, .8); }
.inc20-seal { flex: none; width: 52px; height: 52px; }
.inc20-sealr { fill: none; stroke: #F5C451; stroke-width: 2.5; stroke-dasharray: 3 4; transform-box: fill-box; transform-origin: center; }
.inc20-sealr2 { fill: rgba(245, 196, 81, .12); stroke: #F5C451; stroke-width: 2; }
.inc20-sealleaf { color: #F5C451; }
.is-live .inc20-sealr { animation: cdSpin 14s linear infinite; }
@media (max-width: 1000px) { .inc20-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
    .inc20-do { padding: 20px 14px; border-radius: 20px; }
    .inc20-head { grid-template-columns: auto 1fr; }
    .inc20-count { grid-column: 1 / -1; }
    .inc20-list { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 14px; }
    .inc20-item { grid-template-columns: 56px minmax(0, 1fr); padding: 12px; }
    .inc20-ic { width: 56px; height: 56px; }
    .inc20-svg { width: 42px; height: 42px; }
    .inc20-no { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
    .inc20-nobody { padding: 22px 18px; }
    .inc20-nos li { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .inc20 *, .vs20 * { animation: none !important; }
    .inc20-do .inc20-item, .inc20-no .inc20-nos li { opacity: 1; translate: none; }
    .inc20-check path, .inc20-nos path, .tg20-x { stroke-dashoffset: 0; }
}
/* v22 · on phones the all-countries map fits the screen: flags only in the head, no sideways scroll */
@media (max-width: 900px) {
    .heat20-scroll { overflow: visible; }
    .heat20-table { min-width: 0; border-spacing: 3px; }
    .heat20-table thead th:first-child { width: 78px; }
    .heat20-table thead button { padding: 6px 0; font-size: 16px; border-radius: 8px; }
    .heat20-table thead button small { display: none; }
    .heat20-table tbody th { font-size: 10.5px; line-height: 1.1; padding-right: 4px; white-space: normal; overflow: visible; text-overflow: clip; hyphens: auto; -webkit-hyphens: auto; }
    .heat20-table td { height: 20px; border-radius: 5px; }
}