/* v19 · the condition card in the middle of the screen with a little more to read; a nicer plane; the comparison with a globe */

/* ---------- condition card ---------- */
@media (max-width: 900px) {
    .c18 { place-items: center; padding: 16px; }
    .c18-card { max-height: calc(100svh - 32px); padding: 20px 18px 14px; }
    .c18-art svg { height: 130px; }
    .c18-t { font-size: 15.5px; }
}
.c18-card { overflow-x: hidden; }
.c18-art { position: relative; overflow: hidden; }
.c19-leaves { position: absolute; top: 28px; left: 28px; right: 28px; height: 0; pointer-events: none; }
@media (max-width: 900px) { .c19-leaves { top: 20px; left: 18px; right: 18px; } }
.c19-leaves svg { position: absolute; top: 0; width: 18px; height: 18px; color: #E31837; opacity: 0; }
.c19-leaves svg:nth-child(1) { left: 12%; animation: c19Leaf 7s linear infinite; }
.c19-leaves svg:nth-child(2) { left: 78%; width: 14px; height: 14px; color: #F5A524; animation: c19Leaf 8s linear -3s infinite; }
.c19-leaves svg:nth-child(3) { left: 46%; width: 12px; height: 12px; animation: c19Leaf 9s linear -6s infinite; }
@keyframes c19Leaf { 0% { opacity: 0; translate: 0 0; rotate: 0deg; } 10% { opacity: .8; } 50% { translate: 18px 70px; rotate: 160deg; } 85% { opacity: .8; } 100% { opacity: 0; translate: -6px 140px; rotate: 320deg; } }
.c19-pts { display: grid; gap: 10px; width: 100%; margin: 14px 0 0; padding: 0; list-style: none; }
.c19-pts li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: #1F2937; }
.c19-pts svg { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #FEE2E2; fill: none; stroke: #E31837; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.c19-pts path { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* the entrance: words rise one after another, the ticks draw themselves */
.c18-card.is-in .c18-k, .c18-card.is-in .c18-v, .c18-card.is-in .c18-t, .c18-card.is-in .c19-pts li { animation: c19Up .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.c18-card.is-in .c18-v { animation-delay: .05s; } .c18-card.is-in .c18-t { animation-delay: .1s; }
.c18-card.is-in .c19-pts li:nth-child(1) { animation-delay: .18s; } .c18-card.is-in .c19-pts li:nth-child(2) { animation-delay: .26s; } .c18-card.is-in .c19-pts li:nth-child(3) { animation-delay: .34s; }
.c18-card.is-in .c19-pts li:nth-child(1) path { animation: c19Tick .4s ease-out .35s backwards; } .c18-card.is-in .c19-pts li:nth-child(2) path { animation: c19Tick .4s ease-out .43s backwards; }
.c18-card.is-in .c19-pts li:nth-child(3) path { animation: c19Tick .4s ease-out .51s backwards; }
.c18-card.is-in .c18-art svg { animation: c19Pop .55s cubic-bezier(.3, 1.5, .5, 1) backwards; }
@keyframes c19Up { from { opacity: 0; translate: 0 12px; } }
@keyframes c19Tick { from { stroke-dashoffset: 1; } }
@keyframes c19Pop { from { scale: .8; opacity: 0; } }
.c18-count { display: flex; align-items: center; gap: 12px; }
.c19-dots { display: flex; gap: 6px; }
.c19-dots i { width: 8px; height: 8px; border-radius: 4px; background: #E5E7EB; transition: width .3s, background .3s; }
.c19-dots i.is-on { width: 22px; background: #E31837; }
@media (prefers-reduced-motion: reduce) { .c19-leaves { display: none; } .c18-card * { animation: none !important; } }

/* ---------- the plane ---------- */
.pr18 .pl19 .pl-body { fill: #fff; }
.pr18 .pl19 .pl-line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.pr18 .pl19 .pl-belly { fill: #E6EBEF; }
.pr18 .pl19 .pl-cheat { fill: var(--red); }
.pr18 .pl19 .pl-fin, .pr18 .pl19 .pl-stab { fill: var(--red); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.pr18 .pl19 .pl-win { fill: #3F5A73; }
.pr18 .pl19 .pl-door { fill: none; stroke: rgba(15, 25, 35, .55); stroke-width: 2; }
.pr18 .pl19 .pl-cock { fill: var(--ink); }
.pr18 .pl19 .pl-wing { fill: #D5DCE3; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.pr18 .pl19 .pl-wlet { fill: var(--red); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.pr18 .pl19 .pl-eng { fill: #F3F5F7; stroke: var(--ink); stroke-width: 3; }
.pr18 .pl19 .pl-engband { fill: var(--red); }
.pr18 .pl19 .pl-intake { fill: var(--ink); }
.pr18 .pl19 .pl-pylon { fill: #C9D2DA; stroke: var(--ink); stroke-width: 2.5; }
.pr18 .pl19 .pl-exh { fill: #9CA3AF; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.pr18 .pl19 .cv-plogo { font-size: 11px; }
.pr18 .pl19 .pl-blink { fill: #FF3B3B; }
.pr18 .pl19 .pl-blink--w { fill: #fff; }
.is-on .pr18-viz--flight .pl-blink { animation: pl19Blink 1.2s steps(1) infinite; }
.is-on .pr18-viz--flight .pl-blink--w { animation-delay: -.6s; }
@keyframes pl19Blink { 0%, 70% { opacity: .15; } 71%, 100% { opacity: 1; } }

/* ---------- comparison: the globe beside the table ---------- */
.cmp19 { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: start; max-width: 1120px; margin: 0 auto; }
.cmp19 .comparison__card { max-width: none; margin: 0; }
.cmp19-globe { position: sticky; top: 96px; display: grid; justify-items: center; gap: 10px; }
#globe19c { display: block; width: 100%; max-width: 460px; aspect-ratio: 1; touch-action: pan-y; cursor: grab; }
#globe19c:active { cursor: grabbing; }
.cmp19-km { display: grid; justify-items: center; gap: 2px; min-height: 46px; text-align: center; }
.cmp19-km b { font-family: 'Unbounded', system-ui, sans-serif; font-size: 18px; letter-spacing: -.02em; color: #0F1923; }
.cmp19-km span { font-size: 14px; color: #6B7280; }
.cmp19-km.is-in { animation: c19Up .5s cubic-bezier(.2, .8, .2, 1); }
.cmp19-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; }
.cmp19-hint::before { content: '↔ '; color: #E31837; }
.cmp19-globe.is-touched .cmp19-hint { opacity: 0; }
/* the rows slide in one after another each time a country is picked */
.cmp19 .comparison__row { animation: c19Up .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.cmp19 .comparison__row:nth-child(2) { animation-delay: .03s; } .cmp19 .comparison__row:nth-child(3) { animation-delay: .06s; } .cmp19 .comparison__row:nth-child(4) { animation-delay: .09s; }
.cmp19 .comparison__row:nth-child(5) { animation-delay: .12s; } .cmp19 .comparison__row:nth-child(6) { animation-delay: .15s; } .cmp19 .comparison__row:nth-child(n+7) { animation-delay: .18s; }
.comparison__selector { margin-bottom: 32px; }
@media (max-width: 900px) {
    .cmp19 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .cmp19-globe { position: relative; top: 0; }
    #globe19c { max-width: 320px; }
    .comparison__selector { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .cmp19 .comparison__row, .cmp19-km.is-in { animation: none; } }
.c18-x { z-index: 3; box-shadow: 0 4px 12px -4px rgba(15, 25, 35, .3); background: #fff; }
/* the pen steps aside after signing, so the stamp lands on a clear spot right above the signature */
@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; }
    60%, 88% { translate: 200px 34px; rotate: 18deg; } 100% { translate: -20px -30px; rotate: 0deg; } }