/* Isoteh front page, the moving layer: terracotta accent, a living background, floating ad cards,
   animated panels. Loaded after home.css; everything here respects prefers-reduced-motion. */
:root {
  --terra: #c2502e; --terra-2: #a8411f; --terra-soft: #c2502e14; --terra-glow: #c2502e33; --sand: #f6ece4; --gold: #e8a87c;
  --sig: var(--terra); --sig-soft: var(--terra-soft);
}

/* accent */
.btn { --b: var(--terra); --t: #fff; }
.btn:hover { box-shadow: 0 10px 24px -10px #c2502e88; }
.btn.inv { --b: var(--terra); --t: #fff; }
.btn.ghost.inv { color: var(--dark-ink); }
.mark, .foot .mark { background: var(--terra); color: #fff; }
.dot-live { background: var(--terra); animation-name: ping-t; }
@keyframes ping-t { 0% { box-shadow: 0 0 0 0 #c2502e55; } 70%, 100% { box-shadow: 0 0 0 8px #c2502e00; } }
.tr > :nth-child(2) { background: #fbf2ec; }
.y::before { background-color: var(--terra); }
.end::before { background: radial-gradient(50% 50% at 50% 50%, #c2502e44, transparent 70%); animation: glow 9s ease-in-out infinite alternate; }
@keyframes glow { to { transform: translateY(30px) scale(1.15); opacity: .7; } }

/* the living background behind every light section */
.bg-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-fx .blob { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.bg-fx .b1 { background: #f3c9b2; left: -14vmax; top: -16vmax; animation: drift1 26s ease-in-out infinite alternate; }
.bg-fx .b2 { background: #dfe4fb; right: -16vmax; top: 10vh; animation: drift2 32s ease-in-out infinite alternate; }
.bg-fx .b3 { background: #f6e3cf; left: 30vw; bottom: -26vmax; animation: drift3 38s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(18vw, 14vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-16vw, 22vh) scale(.9); } }
@keyframes drift3 { to { transform: translate(-20vw, -18vh) scale(1.1); } }
.bg-fx .dots { position: absolute; inset: 0; background-image: radial-gradient(#0b0d1214 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(80% 60% at 50% 30%, #000, transparent); mask-image: radial-gradient(80% 60% at 50% 30%, #000, transparent); }
.hero::before { background: radial-gradient(60% 50% at 50% 0%, #ffffffb3 0%, transparent 70%); }

/* hero: floating ad cards around the headline */
.hero { overflow: clip; }
.floaters { position: absolute; inset: 0; max-width: 1560px; margin: 0 auto; pointer-events: none; z-index: 0; }
.hero > .wrap { position: relative; z-index: 1; }
.fl { position: absolute; width: 214px; transform: translate3d(0, calc(var(--py, 0) * 1px), 0); }
.fl > .mini { animation: fl-in 1s var(--ease) both, bob 7s ease-in-out infinite alternate; }
.f1 { left: 3%; top: 150px; } .f1 > .mini { animation-delay: .5s, 0s; }
.f3 { left: 5.5%; top: 420px; } .f3 > .mini { animation-delay: .8s, -2s; }
.f5 { left: 2.5%; top: 660px; } .f5 > .mini { animation-delay: 1.1s, -4s; }
.f2 { right: 3%; top: 140px; width: 230px; } .f2 > .mini { animation-delay: .65s, -1s; }
.f7 { right: 6%; top: 370px; } .f7 > .mini { animation-delay: .95s, -3s; }
.f4 { right: 2.5%; top: 500px; } .f4 > .mini { animation-delay: 1.25s, -5s; }
.f6 { right: 5%; top: 640px; } .f6 > .mini { animation-delay: 1.4s, -2.5s; }
@keyframes fl-in { from { opacity: 0; transform: translateY(24px) scale(.94); } }
@keyframes bob { from { translate: 0 -7px; rotate: -.6deg; } to { translate: 0 7px; rotate: .6deg; } }
.mini { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px #0b0d120d, 0 24px 48px -24px #0b0d1240; padding: 12px; display: grid; gap: 7px; font-size: 12px; color: var(--ink-2); text-align: left; }
.mini b { color: var(--ink); font-weight: 600; font-size: 12.5px; }
.mini small { display: block; color: var(--mute); font-size: 11px; }
.mini .ln { display: block; height: 6px; border-radius: 3px; background: var(--bg-2); }
.mini .ln.s { width: 64%; }
.mm-top { display: flex; gap: 8px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.mm-av, .mc-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 600; font-size: 11px; color: #fff; background: #c2410c; flex: none; }
.mm-ad { display: flex; gap: 8px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 10px; position: relative; overflow: hidden; }
.mm-ad::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, #ffffffaa 50%, transparent 70%); transform: translateX(-120%); animation: sheen 4.5s ease-in-out infinite; }
@keyframes sheen { 60%, 100% { transform: translateX(120%); } }
.mm-pic { width: 30px; height: 30px; border-radius: 7px; background: var(--ad); color: var(--ad-ink); display: grid; place-items: center; font-style: normal; font-weight: 600; font-size: 14px; flex: none; }
.mini-board { padding: 10px; background: linear-gradient(#cfe0f3, #eaf1e6); }
.mb-face { display: flex; gap: 8px; align-items: center; background: var(--card); border: 4px solid #1d222d; border-radius: 8px; padding: 6px; }
.mb-pic { width: 44px; height: 34px; border-radius: 4px; background: var(--ad); color: var(--ad-ink); display: grid; place-items: center; font-style: normal; font-weight: 600; }
.mb-posts { display: flex; justify-content: space-around; height: 18px; } .mb-posts i { width: 5px; background: #2a303d; }
.mb-car { height: 12px; margin: 0 -10px -10px; background: #454b57; position: relative; overflow: hidden; }
.mb-car::after { content: ""; position: absolute; top: 3px; left: -30px; width: 22px; height: 6px; border-radius: 3px; background: var(--terra); box-shadow: 60px 0 0 #3a5bff; animation: drive 2.8s linear infinite; }
@keyframes drive { to { transform: translateX(300px); } }
.mc-msg { display: flex; gap: 6px; align-items: flex-start; }
.mc-av.a1 { background: #7c3aed; } .mc-av.a2 { background: #0e7490; }
.mc-b { background: var(--bg-2); border-radius: 10px 10px 10px 3px; padding: 5px 8px; font-size: 11.5px; line-height: 1.35; }
.toast { grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; }
.t-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 600; font-size: 16px; }
.t-ic svg { width: 16px; height: 16px; }
.toast.money .t-ic { background: #e7f4ec; color: var(--money); } .toast.money b { color: var(--money); font-size: 15px; }
.toast.seen .t-ic { background: var(--terra-soft); color: var(--terra); }
.toast.approve .t-ic { background: var(--ink); color: #fff; }
.toast .t-ic { animation: tick-pop 3.5s var(--ease) infinite; }
@keyframes tick-pop { 0%, 70%, 100% { transform: none; } 78% { transform: scale(1.15); } 86% { transform: scale(.96); } }
.ai-q { justify-self: end; background: var(--ink); color: #fff; border-radius: 10px 10px 3px 10px; padding: 5px 9px; font-size: 11.5px; }
.fl-row { display: none; }
@media (max-width: 74rem) {
  .floaters { display: none; }
  .fl-row { display: block; margin: 34px calc(var(--gut) * -1) 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .fl-track { display: flex; gap: 14px; width: max-content; padding: 12px 0 18px; animation: marq 40s linear infinite; }
  .fl-track .mini { width: 210px; flex: none; animation: bob 6s ease-in-out infinite alternate; }
  .fl-track .mini:nth-child(2n) { animation-delay: -3s; }
}

/* the live demo box */
.stage { background: #eef0f5 radial-gradient(#0b0d1212 1px, transparent 1.2px) 0 0 / 20px 20px; }
.stage::before { content: ""; position: absolute; inset: -25%; z-index: -1; background: radial-gradient(28% 32% at 22% 30%, #f1b89d66, transparent 70%), radial-gradient(30% 34% at 80% 72%, #c9d3fb88, transparent 70%), radial-gradient(22% 26% at 62% 18%, #f6dcc4aa, transparent 70%); animation: stage-drift 16s ease-in-out infinite alternate; }
@keyframes stage-drift { to { transform: translate(6%, -5%) rotate(8deg) scale(1.08); } }
.seg button .tp { position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px; border-radius: 1px; background: var(--terra); transform: scaleX(0); transform-origin: left; opacity: 0; }
.seg button.run .tp { opacity: 1; animation: tp var(--dur, 6.5s) linear forwards; }
@keyframes tp { to { transform: scaleX(1); } }
.mail, .blog-body { position: relative; }
.mail .scroll, .blog-body .scroll { will-change: transform; }
.scene.on .mail .scroll { animation: read 9s var(--ease-io) .6s infinite; }
.scene.on .blog-body .scroll { animation: read2 9s var(--ease-io) .6s infinite; }
@keyframes read { 0%, 18% { transform: none; } 45%, 82% { transform: translateY(-74px); } 100% { transform: none; } }
@keyframes read2 { 0%, 18% { transform: none; } 45%, 82% { transform: translateY(-96px); } 100% { transform: none; } }
.ad.press { animation: press-ad .5s var(--ease); }
@keyframes press-ad { 40% { transform: scale(.97); box-shadow: 0 0 0 4px var(--terra-glow); } }
.cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 5; pointer-events: none; opacity: 0; filter: drop-shadow(0 4px 6px #0b0d1240); }
.cursor::after { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--terra); opacity: 0; }
.cursor.tap::after { animation: tap .6s var(--ease); }
@keyframes tap { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.2); } }
.chips-fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.cfx { position: absolute; display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px 7px 8px; font-size: 13px; color: var(--ink); box-shadow: 0 16px 36px -18px #0b0d1255; white-space: nowrap; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.cfx.on { opacity: 1; transform: none; }
.cfx .ci { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--terra-soft); color: var(--terra); flex: none; }
.cfx .ci svg { width: 12px; height: 12px; }
.cfx.green .ci { background: #e7f4ec; color: var(--money); }
.cfx.l1 { left: 2%; top: 16%; } .cfx.l2 { left: 2%; top: 62%; } .cfx.r1 { right: 2%; top: 26%; } .cfx.r2 { right: 3%; top: 70%; }
.cfx { font-size: 12.5px; }
@media (max-width: 72rem) { .cfx.l1, .cfx.l2, .cfx.r1 { display: none; } .cfx.r2 { right: auto; left: 50%; top: auto; bottom: 14px; transform: translate(-50%, 10px); } .cfx.r2.on { transform: translate(-50%, 0); } }
.game { background: #0b0d12; }
.game video, .tv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hud { z-index: 2; }
.meter.count .m-bar i { background: var(--gold); }

/* the strip: a moving belt of every place an ad can run */
.strip { background: #fefefe99; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.strip-in { min-width: 0; }
.marq-wrap { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.strip .marq { flex-wrap: nowrap; gap: 12px; width: max-content; animation: marq 34s linear infinite; }
.strip .marq:hover { animation-play-state: paused; }
.strip .marq li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: clamp(16px, 1.6vw, 19px); color: var(--ink); white-space: nowrap; transition: border-color .25s, color .25s; }
.strip .marq li svg { width: 22px; height: 22px; padding: 3px; border-radius: 7px; background: var(--terra-soft); color: var(--terra); flex: none; box-sizing: content-box; }
.strip .marq li:hover { border-color: var(--terra); color: var(--terra); }
@keyframes marq { to { transform: translateX(-50%); } }
@media (max-width: 40rem) { .strip-in { align-items: stretch; } .marq-wrap { margin: 0 calc(var(--gut) * -1); } .strip .marq { justify-content: flex-start; } }

/* how: money flowing under the steps */
.how-fx { position: absolute; inset: 0; pointer-events: none; overflow: clip; }
.hf-in { position: sticky; top: 0; height: 100svh; }
.how > .wrap { position: relative; z-index: 1; }
.flow { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70%; }
.flow path { fill: none; stroke: var(--terra); stroke-width: 1.4; stroke-dasharray: 2 12; stroke-linecap: round; opacity: .35; vector-effect: non-scaling-stroke; animation: dash 2.4s linear infinite; }
.flow path:nth-child(2) { stroke: var(--money); opacity: .25; animation-duration: 3.2s; }
.flow path:nth-child(3) { stroke: #9fb3ff; opacity: .45; animation-duration: 4s; }
@keyframes dash { to { stroke-dashoffset: -28; } }
.coin { position: absolute; bottom: -40px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 15px var(--sans); color: #8a5a12; background: radial-gradient(circle at 35% 30%, #fff3cf, #f2c661 60%, #d9a43a); box-shadow: 0 6px 14px -6px #8a5a1288, inset 0 -2px 0 #c38d2a; opacity: 0; animation: rise-coin 14s linear infinite; }
.coin.c1 { left: 8%; } .coin.c2 { left: 22%; animation-delay: -3s; width: 26px; height: 26px; font-size: 12px; } .coin.c3 { left: 47%; animation-delay: -7s; }
.coin.c4 { left: 64%; animation-delay: -10s; width: 24px; height: 24px; font-size: 11px; } .coin.c5 { left: 82%; animation-delay: -5s; } .coin.c6 { left: 93%; animation-delay: -12s; width: 28px; height: 28px; font-size: 13px; }
@keyframes rise-coin { 0% { opacity: 0; transform: translateY(0) rotateY(0); } 10% { opacity: .9; } 80% { opacity: .7; } 100% { opacity: 0; transform: translateY(-92svh) rotate(40deg); } }
.steps { position: relative; }
@media (min-width: 64.01rem) {
  .steps::before, .steps::after { content: ""; position: absolute; left: -28px; top: 39svh; bottom: 39svh; width: 2px; border-radius: 1px; background: var(--line); }
  .steps::after { background: linear-gradient(var(--terra), var(--money)); transform-origin: top; transform: scaleY(var(--p, 0)); }
  .steps li.on::before { color: var(--terra); }
}
.layer.l-pay.on .big { animation: pay-pop .8s var(--ease); }
@keyframes pay-pop { 40% { transform: scale(1.06); color: #0a9a5a; } }

/* why: every panel moves */
.rail .viz { background: linear-gradient(180deg, #f3f4f7, #eceef3); }
.v-track { position: relative; }
.vt-scan { position: absolute; left: 12px; right: 12px; height: 34px; top: 12px; border: 1.5px solid var(--terra); border-radius: 10px; background: var(--terra-soft); opacity: 0; }
.rail.play .vt-scan { animation: scan 6s var(--ease-io) infinite; }
@keyframes scan { 0% { opacity: 0; transform: translateY(8px); } 8%, 20% { opacity: 1; transform: translateY(8px); } 30%, 42% { opacity: 1; transform: translateY(50px); } 52%, 64% { opacity: 1; transform: translateY(92px); } 74%, 88% { opacity: 1; transform: translateY(134px); } 100% { opacity: 0; transform: translateY(134px); } }
.vt-row { position: relative; z-index: 1; background: #fefefee6; }
.rail.play .vt-row.zero em { animation: zero 6s infinite; }
.rail.play .vt-row.zero:last-child em { animation-delay: .9s; }
@keyframes zero { 0%, 55% { transform: none; } 62% { transform: scale(1.35); } 70%, 100% { transform: none; } }
.v-approve { position: relative; }
.va-card { position: relative; }
.rail.play .va-card { animation: va-card 5s var(--ease) infinite; }
@keyframes va-card { 0% { opacity: 0; transform: translateX(40px); } 10%, 82% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateX(-40px); } }
.va-btns .yes { transition: none; }
.tile:hover .va-btns .yes, .tile.on .va-btns .yes { animation: none; }
.rail.play .va-btns .yes { animation: va-yes 5s var(--ease) infinite; }
@keyframes va-yes { 0%, 44% { transform: none; background: var(--ink); } 48% { transform: scale(.9); } 54%, 100% { transform: none; background: var(--terra); border-color: var(--terra); } }
.va-stamp { position: absolute; left: 50%; top: 22%; padding: 4px 12px; border: 2px solid var(--terra); border-radius: 8px; color: var(--terra); font-weight: 600; font-size: 15px; background: #fefefeee; transform: translate(-50%, 0) rotate(-8deg) scale(1.6); opacity: 0; z-index: 2; }
.rail.play .va-stamp { animation: stamp 5s var(--ease) infinite; }
@keyframes stamp { 0%, 52% { opacity: 0; transform: translate(-50%, 0) rotate(-8deg) scale(1.6); } 58%, 82% { opacity: 1; transform: translate(-50%, 0) rotate(-8deg) scale(1); } 94%, 100% { opacity: 0; transform: translate(-50%, 0) rotate(-8deg) scale(1); } }
.va-cur { position: absolute; width: 20px; height: 20px; left: 88%; top: 92%; opacity: 0; z-index: 3; }
.rail.play .va-cur { animation: va-cur 5s var(--ease) infinite; }
@keyframes va-cur { 0%, 12% { opacity: 0; left: 88%; top: 92%; } 18% { opacity: 1; left: 88%; top: 92%; } 40%, 52% { opacity: 1; left: 61%; top: 70%; } 62% { opacity: 0; left: 64%; top: 76%; } 100% { opacity: 0; } }
.v-held { position: relative; }
.vh-amt { display: grid; place-items: center; height: 28px; position: relative; }
.vh-amt b { position: absolute; font-family: var(--mono); font-weight: 500; font-size: 20px; letter-spacing: -.02em; }
.vh-amt .a1 { color: var(--ink); } .vh-amt .a2 { color: var(--money); opacity: 0; }
.rail.play .vh-amt .a1 { animation: amt1 6s var(--ease) infinite; } .rail.play .vh-amt .a2 { animation: amt2 6s var(--ease) infinite; }
@keyframes amt1 { 0%, 62% { opacity: 1; transform: none; } 70%, 92% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }
@keyframes amt2 { 0%, 62% { opacity: 0; transform: translateY(8px); } 70%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.vh-line::after { transform: scaleX(0); transition: none; }
.tile.on .vh-line::after { transform: scaleX(0); }
.rail.play .vh-line::after { animation: held-line 6s var(--ease-io) infinite; }
@keyframes held-line { 0%, 8% { transform: scaleX(0); } 30%, 40% { transform: scaleX(.5); } 62%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.vh-coin { position: absolute; top: 50%; left: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #8a5a12; background: radial-gradient(circle at 35% 30%, #fff3cf, #f2c661 60%, #d9a43a); z-index: 2; box-shadow: 0 4px 10px -4px #8a5a1288; }
.rail.play .vh-coin { animation: held-coin 6s var(--ease-io) infinite; }
@keyframes held-coin { 0%, 8% { left: 0; } 30%, 40% { left: 50%; } 62%, 92% { left: 100%; } 100% { left: 0; } }
.vs-people { display: flex; gap: 5px; margin-top: 14px; }
.vs-people i { width: 16px; height: 16px; border-radius: 50%; background: var(--terra); opacity: .2; }
.vs-people i:nth-child(3n+2) { background: #3a5bff; } .vs-people i:nth-child(3n) { background: var(--money); }
.rail.play .vs-people i { animation: person 4s var(--ease) infinite; }
.vs-people i:nth-child(2) { animation-delay: .15s !important; } .vs-people i:nth-child(3) { animation-delay: .3s !important; } .vs-people i:nth-child(4) { animation-delay: .45s !important; } .vs-people i:nth-child(5) { animation-delay: .6s !important; }
.vs-people i:nth-child(6) { animation-delay: .75s !important; } .vs-people i:nth-child(7) { animation-delay: .9s !important; } .vs-people i:nth-child(8) { animation-delay: 1.05s !important; } .vs-people i:nth-child(9) { animation-delay: 1.2s !important; }
@keyframes person { 0% { opacity: .15; transform: scale(.6); } 20%, 80% { opacity: 1; transform: none; } 100% { opacity: .15; transform: scale(.6); } }
.vai-q { width: auto; height: auto; padding: 6px 12px; font-size: 12.5px; color: #fff; background: var(--ink); white-space: nowrap; overflow: hidden; }
.rail.play .vai-q { animation: vai-q 6s steps(28) infinite; }
@keyframes vai-q { 0% { clip-path: inset(0 100% 0 0); } 22%, 100% { clip-path: inset(0 0 0 0); } }
.vai-a i { transform-origin: left; }
.rail.play .vai-a i { animation: vai-l 6s var(--ease) infinite; }
.rail.play .vai-a i:nth-child(2) { animation-delay: .15s; } .rail.play .vai-a i:nth-child(3) { animation-delay: .3s; }
@keyframes vai-l { 0%, 26% { transform: scaleX(0); } 42%, 100% { transform: none; } }
.vai-card { height: auto; display: flex; align-items: center; gap: 8px; padding: 6px; border-color: var(--terra); color: var(--ink); background: var(--card); }
.vai-card small { display: block; color: var(--terra); font-size: 11px; } .vai-card b { font-size: 13px; }
.rail.play .vai-card { animation: vai-c 6s var(--ease) infinite; }
@keyframes vai-c { 0%, 48% { opacity: 0; transform: translateY(16px); } 58%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.tile { position: relative; overflow: hidden; }
.tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, transparent 40%, var(--terra) 50%, transparent 60%) 0 0 / 300% 300%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; pointer-events: none; }
.tile:hover::before, .tile.on::before { opacity: 1; animation: edge 3s linear infinite; }
@keyframes edge { to { background-position: 100% 100%; } }

/* games: our own race */
.games { overflow: clip; }
.games-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 75% 40%, #c2502e40, transparent 70%), radial-gradient(30% 40% at 15% 80%, #3a5bff26, transparent 70%); animation: glow 12s ease-in-out infinite alternate; }
.games-in { position: relative; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.games-art { display: grid; gap: 14px; perspective: none; min-height: 0; place-items: stretch; }
.tv { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #0b0d12 url("/a/agp-race.jpg") center / cover; border: 1px solid var(--dark-line); box-shadow: 0 50px 90px -40px #000, 0 0 0 6px #ffffff08; }
.tv-live, .tv-tag, .tv-count { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 12px; font-size: 13px; background: #0b0d12cc; color: var(--dark-ink); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tv-live { top: 14px; left: 14px; }
.tv-live i { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: live-blink 1.4s infinite; }
@keyframes live-blink { 50% { opacity: .3; } }
.tv-tag { left: 14px; bottom: 14px; } .tv-tag b { color: var(--gold); font-weight: 600; }
.tv-count { top: 14px; right: 14px; background: var(--terra); color: #fff; opacity: 0; transform: translateY(-6px) scale(.95); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.tv-count svg { width: 14px; height: 14px; }
.tv-count.on { opacity: 1; transform: none; }
.games-copy .h2 { color: var(--dark-ink); }
.g-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; color: var(--dark-mute); font-size: 16px; max-width: 46ch; }
.g-points li { padding-left: 26px; position: relative; }
.g-points li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; border-radius: 3px; background: var(--terra); }
.g-points b { color: var(--dark-ink); font-weight: 500; }
.g-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.games .code { margin: 0; font-size: 12.5px; }
@media (max-width: 64rem) {
  .games-in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .games-copy { display: contents; }
  .games-copy .h2 { order: 1; } .games-art { order: 2; } .games-copy > p { order: 3; text-align: center; } .g-points { order: 4; } .g-cta { order: 5; }
  .g-points { text-align: left; margin-inline: auto; }
  .g-cta { justify-content: center; }
}
@media (max-width: 40rem) {
  .games .code { display: none; }
  .tv-tag { font-size: 12px; left: 10px; bottom: 10px; } .tv-live { top: 10px; left: 10px; font-size: 12px; } .tv-count { top: 10px; right: 10px; font-size: 12px; }
  .g-cta .btn { width: 100%; }
}

/* pricing: the split */
.split { display: flex; height: 38px; border-radius: 10px; overflow: hidden; margin-top: 4px; background: var(--bg-2); }
.split span { display: flex; align-items: center; overflow: hidden; transition: flex-basis 1.2s var(--ease); flex: 0 0 0%; }
.split i { font-style: normal; font-size: 13px; font-weight: 500; padding: 0 12px; white-space: nowrap; }
.sp-keep { background: linear-gradient(90deg, #0f7a4a, #1a9a62); color: #fff; }
.sp-fee { background: var(--terra); color: #fff; justify-content: center; }
.sp-fee i { padding: 0 4px; }
.calc.in .sp-keep { flex-basis: 85%; } .calc.in .sp-fee { flex-basis: 15%; transition-delay: .15s; }
.no-js-split .sp-keep { flex-basis: 85%; }
.calc { position: relative; }
.calc::before { content: ""; position: absolute; inset: -40px -30px; z-index: -1; border-radius: 40px; background: radial-gradient(50% 50% at 60% 50%, #f1b89d55, transparent 70%); animation: glow 10s ease-in-out infinite alternate; }

/* compare: rows come in one by one */
.js .tbl .tr { opacity: 0; transform: translateY(10px); }
.tbl.in .tr { animation: row-in .6s var(--ease) forwards; }
.tbl.in .tr:nth-child(2) { animation-delay: .08s; } .tbl.in .tr:nth-child(3) { animation-delay: .16s; } .tbl.in .tr:nth-child(4) { animation-delay: .24s; } .tbl.in .tr:nth-child(5) { animation-delay: .32s; } .tbl.in .tr:nth-child(6) { animation-delay: .4s; } .tbl.in .tr:nth-child(7) { animation-delay: .48s; } .tbl.in .tr:nth-child(8) { animation-delay: .56s; }
@keyframes row-in { to { opacity: 1; transform: none; } }
.tbl.in .y::before { animation: chk .7s var(--ease) backwards; animation-delay: inherit; }
.tbl.in .tr:nth-child(n) .y::before { animation-delay: .5s; }
@keyframes chk { 0% { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.2); } 100% { transform: none; } }
.tr { transition: background-color .25s; }
.tr:not(.th):hover { background: #fbf6f3; }

/* questions */
details .ans { overflow: hidden; }
details p { animation: none; }
summary { transition: color .2s; }
summary:hover { color: var(--terra); }
summary::after { background: linear-gradient(var(--terra), var(--terra)) center / 12px 1.5px no-repeat, linear-gradient(var(--terra), var(--terra)) center / 1.5px 12px no-repeat; }
details[open] summary { color: var(--terra); }

/* the end: good news floating up */
.end-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ef { position: absolute; bottom: -50px; padding: 8px 14px; border-radius: 999px; border: 1px solid #ffffff1f; background: #ffffff0d; color: #eef0f4b3; font-size: 14px; white-space: nowrap; animation: ef-up 16s linear infinite; opacity: 0; }
.ef.e2, .ef.e5, .ef.e8 { color: #6ee7a8; } .ef.e1, .ef.e6 { color: var(--gold); }
.ef.e1 { left: 6%; } .ef.e2 { left: 18%; animation-delay: -4s; } .ef.e3 { left: 30%; animation-delay: -9s; } .ef.e4 { left: 64%; animation-delay: -2s; }
.ef.e5 { left: 76%; animation-delay: -7s; } .ef.e6 { left: 88%; animation-delay: -12s; } .ef.e7 { left: 3%; animation-delay: -14s; } .ef.e8 { left: 82%; animation-delay: -6s; }
.ef.e3 { left: 12%; } .ef.e4 { left: 70%; }
@keyframes ef-up { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 75% { opacity: .7; } 100% { opacity: 0; transform: translateY(-640px); } }
.end > .wrap { position: relative; z-index: 1; }
@media (max-width: 64rem) { .end-fx { display: none; } .coin.c2, .coin.c3, .coin.c4 { display: none; } .coin { opacity: .6; } }

@media (prefers-reduced-motion: reduce) {
  .fl > .mini, .fl-track, .strip .marq { animation: none !important; }
  .js .tbl .tr { opacity: 1; transform: none; }
  .ef, .coin { display: none; }
}

/* calmer pass: fewer, quieter extras; motion stays where it explains something */
.f3, .f6, .f7 { display: none; }
.f1 { left: 4%; top: 190px; } .f5 { left: 6%; top: 520px; }
.f2 { right: 4%; top: 180px; } .f4 { right: 6%; top: 500px; }
.fl > .mini { animation-duration: 1s, 10s; }
@keyframes bob { from { translate: 0 -4px; } to { translate: 0 4px; } }
.mm-ad::after { animation-duration: 9s; }
.toast .t-ic { animation: none; }
.bg-fx .blob { opacity: .32; }
.bg-fx .dots { opacity: .6; }
.coin { display: none !important; }
.flow path { opacity: .18; animation-duration: 5s; }
.flow path:nth-child(2) { opacity: .14; animation-duration: 6s; }
.flow path:nth-child(3) { opacity: .22; animation-duration: 7s; }
.end-fx { display: none; }
.end::before { animation: none; }
.games-glow { animation: none; opacity: .7; }
.calc::before { animation: none; opacity: .6; }
.stage::before { animation-duration: 30s; opacity: .7; }
.tile:hover::before, .tile.on::before { animation: none; opacity: 0; }
.strip .marq { animation-duration: 48s; }
.fl-track { animation-duration: 60s; }

/* black and white: a serious company. The only colour left is the brand's own ad. */
:root {
  --terra: #0b0d12; --terra-2: #000; --terra-soft: #0b0d120f; --terra-glow: #0b0d1226; --gold: #ffffff; --money: #0b0d12;
  --sig: #0b0d12; --sig-soft: #0b0d120d;
}
.btn { --b: var(--ink); --t: var(--bg); }
.btn:hover { box-shadow: 0 10px 24px -12px #0b0d1266; }
.btn.inv { --b: var(--dark-ink); --t: var(--dark); }
.mark, .foot .mark { background: var(--ink); color: var(--bg); }
.foot .mark { background: var(--dark-ink); color: var(--dark); }
.dot-live { background: var(--ink); animation-name: ping; }
.bg-fx .b1 { background: #e3e5ea; } .bg-fx .b2 { background: #eceef2; } .bg-fx .b3 { background: #e7e8ec; }
.bg-fx .blob { opacity: .55; }
.stage::before { background: radial-gradient(28% 32% at 22% 30%, #ffffffcc, transparent 70%), radial-gradient(30% 34% at 80% 72%, #d9dce3aa, transparent 70%), radial-gradient(22% 26% at 62% 18%, #ffffff99, transparent 70%); }
.calc::before { background: radial-gradient(50% 50% at 60% 50%, #e3e5ea, transparent 70%); }
.games-glow { background: radial-gradient(40% 50% at 75% 40%, #ffffff14, transparent 70%), radial-gradient(30% 40% at 15% 80%, #ffffff0a, transparent 70%); }
.end::before { background: radial-gradient(50% 50% at 50% 50%, #ffffff1a, transparent 70%); }
.tr > :nth-child(2) { background: #f3f4f7; }
.tr:not(.th):hover { background: #f8f9fb; }
.y::before { background-color: var(--ink); }
.toast.money .t-ic { background: var(--bg-2); color: var(--ink); } .toast.money b { color: var(--ink); }
.toast.seen .t-ic { background: var(--bg-2); color: var(--ink); }
.cfx.green .ci, .cfx .ci { background: var(--bg-2); color: var(--ink); }
.mm-av, .av-nl { background: var(--ink); }
.mc-av.a1 { background: #2a2f3a; } .mc-av.a2 { background: #5b6170; }
.b-cat { color: var(--ink-2); }
.b-hero { background: linear-gradient(135deg, #1d222d, #4b515e 55%, #9aa1b0); }
.mb-car::after { background: var(--ink); box-shadow: 60px 0 0 #8a909c; }
.vs-people i, .vs-people i:nth-child(3n+2), .vs-people i:nth-child(3n) { background: var(--ink); }
.vs-people i:nth-child(2n) { background: #8a909c; }
.vh-coin { color: var(--bg); background: var(--ink); box-shadow: 0 4px 10px -4px #0b0d1288; }
.vh-amt .a2 { color: var(--ink); }
.vt-row.zero em { color: var(--ink); }
.va-stamp { border-color: var(--ink); color: var(--ink); }
@keyframes va-yes { 0%, 44% { transform: none; } 48% { transform: scale(.9); } 54%, 100% { transform: none; } }
.vai-card small { color: var(--mute); }
.l-pay { background: var(--bg-2); border-color: var(--line-2); } .l-pay .big { color: var(--ink); }
@keyframes pay-pop { 40% { transform: scale(1.06); } }
.layer .hole, .l-page .hole { color: var(--ink); border-color: var(--ink); background: var(--sig-soft); }
.l-count .frame { border-color: var(--ink); }
.steps::after { background: var(--ink); }
.strip .marq li svg { background: var(--bg-2); color: var(--ink); }
.strip .marq li:hover { border-color: var(--ink); color: var(--ink); }
.flow path, .flow path:nth-child(2), .flow path:nth-child(3) { stroke: #0b0d12; opacity: .14; }
.sp-keep { background: var(--ink); } .sp-fee { background: #8a909c; }
.calc .keep dd { color: var(--ink); }
.g-points li::before { background: var(--dark-ink); }
.tv-tag b { color: #fff; }
.tv-count { background: var(--dark-ink); color: var(--dark); }
.meter.count .m-bar i { background: #fff; }
summary:hover, details[open] summary { color: var(--ink); }
summary::after { background: linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 12px no-repeat; }
.seg button .tp { background: var(--ink); }
.cursor::after { border-color: var(--ink); }
.ad.press { animation-name: press-ad-bw; }
@keyframes press-ad-bw { 40% { transform: scale(.97); box-shadow: 0 0 0 4px #0b0d1226; } }
.tile::before { display: none; }

/* the name, very big, at the foot of the page */
.foot { padding-bottom: 0; overflow: hidden; }
.foot-big { max-width: var(--wrap); margin: 40px auto 0; padding: 0 var(--gut); line-height: .76; user-select: none; }
.foot-big span { display: block; font-weight: 600; font-size: clamp(90px, 30vw, 360px); letter-spacing: -.065em; text-align: center; color: transparent; background: linear-gradient(180deg, #eef0f4 0%, #eef0f4 35%, #eef0f400 100%); -webkit-background-clip: text; background-clip: text; transform: translateY(14%); }
.js .foot-big span { opacity: 0; transform: translateY(40%); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.js .foot-big.in span { opacity: 1; transform: translateY(14%); }

/* map lines behind the page, drifting slowly left to right */
.bg-fx .topo { position: absolute; inset: -4% -6%; width: 112%; height: 108%; fill: none; stroke: #0b0d12; stroke-width: 1; opacity: .09; vector-effect: non-scaling-stroke; animation: topo 60s ease-in-out infinite alternate; }
.bg-fx .topo path { vector-effect: non-scaling-stroke; }
@keyframes topo { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
.bg-fx .dots { opacity: .35; }

/* the side menu, on wide screens */
.side { position: fixed; right: 20px; top: 50%; z-index: 20; display: none; flex-direction: column; align-items: flex-end; gap: 12px; padding: 16px 14px; border-radius: 16px; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }
.side.show { opacity: 1; pointer-events: auto; }
.side a { position: relative; font-size: 14px; color: var(--mute); text-decoration: none; padding-right: 0; transition: color .25s, padding-right .35s var(--ease); }
.side a::after { content: ""; position: absolute; right: 0; top: 50%; width: 0; height: 1.5px; background: var(--ink); transition: width .35s var(--ease); }
.side a:hover { color: var(--ink); }
.side a.on { color: var(--ink); padding-right: 26px; }
.side a.on::after { width: 16px; }
@media (min-width: 96rem) { .side { display: flex; } }

/* owners: a header with actions, bigger panels, a progress line */
.why-head { flex-wrap: wrap; align-items: flex-end; }
.why-t { display: grid; gap: 16px; }
.why-sub { color: var(--ink-2); font-size: 18px; max-width: 46ch; }
.why-act { display: flex; gap: 10px; flex-wrap: wrap; }
.why-head .arrows { order: 3; margin-left: auto; }
@media (min-width: 64.01rem) { .rail { grid-auto-columns: minmax(320px, 420px); } .rail .viz { height: 220px; } }
.rail-prog { position: relative; height: 2px; max-width: 760px; margin: 22px auto 0; background: var(--line); border-radius: 1px; overflow: hidden; }
.rail-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: var(--ink); border-radius: 1px; transition: transform .4s var(--ease), width .4s var(--ease); }
@media (max-width: 64rem) { .why-t { justify-items: center; text-align: center; } .why-sub { margin-inline: auto; } .why-act { justify-content: center; width: 100%; } .why-head { justify-content: center; } }

/* the right moment */
.moment { padding: clamp(60px, 10vh, 120px) 0 clamp(80px, 12vh, 140px); }
.mo-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.mo-copy { display: grid; gap: 26px; justify-items: start; }
.mo-seg { position: relative; display: inline-flex; padding: 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.mo-seg button { position: relative; z-index: 1; border: 0; background: transparent; padding: 10px 22px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--mute); cursor: pointer; transition: color .3s; }
.mo-seg button[aria-selected="true"] { color: var(--ink); }
.mo-ind { position: absolute; top: 5px; bottom: 5px; left: 0; border-radius: 999px; background: var(--bg-2); transition: transform .5s var(--ease), width .5s var(--ease); }
.mo-text { display: grid; gap: 18px; justify-items: start; }
.mo-text[hidden] { display: none; }
.mo-text p { color: var(--ink-2); font-size: 18px; max-width: 40ch; }
.mo-text small { color: var(--mute); font-size: 14px; }
.mo-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.mo-text:not([hidden]) > * { animation: rise .7s var(--ease) both; }
.mo-text:not([hidden]) > :nth-child(2) { animation-delay: .06s; } .mo-text:not([hidden]) > :nth-child(3) { animation-delay: .12s; } .mo-text:not([hidden]) > :nth-child(4) { animation-delay: .18s; }
.win { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden; }
.win[hidden] { display: none; }
.win-bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.win-bar span { margin-left: auto; margin-right: auto; font-size: 13px; color: var(--mute); transform: translateX(-20px); }
.win-body { padding: 22px; display: grid; gap: 16px; min-height: 360px; align-content: start; background-image: radial-gradient(#0b0d1210 1px, transparent 1.2px); background-size: 18px 18px; }
.w-time { text-align: center; color: var(--mute); font-size: 13px; }
.w-q { justify-self: end; background: var(--bg-2); padding: 10px 16px; border-radius: 18px 18px 4px 18px; font-size: 15px; max-width: 85%; }
.w-a { color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.w-ad { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); }
.w-ad b, .w-req b { display: block; font-size: 15px; } .w-ad small, .w-req small { display: block; color: var(--ink-2); font-size: 13.5px; }
.w-ad em { font-style: normal; font-size: 12px; color: var(--mute); background: var(--bg-2); padding: 3px 8px; border-radius: 6px; align-self: start; }
.w-pic { width: 40px; height: 40px; border-radius: 10px; background: var(--ad); color: var(--ad-ink); display: grid; place-items: center; font-weight: 600; }
.w-tools { display: flex; gap: 14px; } .w-tools i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line-2); }
.w-compose { border: 1px solid var(--line); border-radius: 999px; padding: 12px 18px; color: var(--mute); font-size: 14px; background: var(--card); }
.w-req { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); }
.w-req strong { font-family: var(--mono); font-weight: 500; }
.w-btns { display: flex; gap: 10px; justify-content: flex-end; }
.w-btns span { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; background: var(--card); }
.w-btns .ok { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.w-bal { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px; border-radius: 14px; background: var(--bg-2); }
.w-bal small { display: block; color: var(--mute); font-size: 13px; } .w-bal b { font-family: var(--mono); font-size: 30px; font-weight: 500; letter-spacing: -.02em; }
.w-bars { display: flex; align-items: flex-end; gap: 5px; height: 56px; } .w-bars i { width: 10px; border-radius: 3px; background: var(--ink); opacity: .85; }
.w-bars i:nth-child(1) { height: 30%; } .w-bars i:nth-child(2) { height: 45%; } .w-bars i:nth-child(3) { height: 38%; } .w-bars i:nth-child(4) { height: 60%; } .w-bars i:nth-child(5) { height: 52%; } .w-bars i:nth-child(6) { height: 75%; } .w-bars i:nth-child(7) { height: 100%; }
.mo-win.play .w-q { animation: pop .5s var(--ease) .2s both; }
.mo-win.play .w-a { animation: type-in 1.6s steps(40) .8s both; }
@keyframes type-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.mo-win.play .w-ad { animation: pop .6s var(--ease) 2.6s both; }
.mo-win.play .w-req { animation: pop .5s var(--ease) .2s both; }
.mo-win.play .w-btns .ok { animation: press 1s var(--ease) 1.3s 1 both; }
.mo-win.play .w-bal { animation: pop .6s var(--ease) 2s both; }
.mo-win.play .w-bars i { animation: bar-up .8s var(--ease) both; animation-delay: 2.2s; transform-origin: bottom; }
@keyframes bar-up { from { transform: scaleY(0); } }
@media (max-width: 64rem) {
  .mo-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .mo-copy, .mo-text { justify-items: center; text-align: center; }
  .mo-text p { margin-inline: auto; } .mo-cta { justify-content: center; }
  .win-body { min-height: 0; }
}

/* compare: Isoteh in a dark column with rain falling inside it */
.cmp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.cmp-head > div { display: grid; gap: 16px; }
.cmp-head p { color: var(--ink-2); font-size: 18px; max-width: 46ch; }
.cmp { position: relative; margin-top: 44px; }
.cr { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 120px); align-items: stretch; }
.cr > * { display: flex; align-items: center; justify-content: center; min-height: 76px; }
.cr .cl { justify-content: flex-start; gap: 14px; font-size: 17px; padding-right: 24px; border-bottom: 1px dashed var(--line-2); }
.cr .cl svg { width: 22px; height: 22px; flex: none; color: var(--ink-2); }
.cr .c1, .cr .c2, .cr .c3 { border-bottom: 1px dashed var(--line-2); }
.cr:last-child > * { border-bottom: 0; }
.ch > * { min-height: 116px; flex-direction: column; gap: 8px; font-size: 15px; color: var(--mute); }
.ch .cl { border-bottom: 0; }
.cm-ini { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-weight: 600; color: var(--mute); font-size: 15px; }
.cm-mark { width: 30px; height: 30px; color: #fff; } .cm-mark svg { width: 100%; height: 100%; }
.cr .c0 { position: relative; background: #111318; color: #fff; overflow: hidden; }
.ch .c0 { border-radius: 24px 24px 0 0; color: #fff; font-weight: 500; }
.cr:last-child .c0 { border-radius: 0 0 24px 24px; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.cr .c0::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(104deg, transparent 0 22px, #ffffff1a 22px 23px, transparent 23px 51px), repeating-linear-gradient(98deg, transparent 0 37px, #ffffff12 37px 38px, transparent 38px 70px); background-size: 100% 140px, 100% 220px; animation: rain .9s linear infinite; pointer-events: none; }
.cr .c0::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, #ffffff10, transparent 60%); pointer-events: none; }
@keyframes rain { from { background-position: 0 0, 0 0; } to { background-position: -12px 140px, -18px 220px; } }
.cmp .rain { display: none; }
.ck { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.ck.yes { background: #8a909c; }
.ck.yes::after { content: ""; width: 12px; height: 7px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.c0 .ck.yes { background: #fff; box-shadow: 0 0 0 4px #ffffff1a; } .c0 .ck.yes::after { border-color: #111318; }
.ck.no::before, .ck.no::after { content: ""; position: absolute; width: 16px; height: 1.6px; background: #9aa1b0; transform: rotate(45deg); }
.ck.no::after { transform: rotate(-45deg); }
.ck.part { border: 1.6px solid #9aa1b0; } .ck.part::after { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 7px; border-radius: 0 7px 7px 0; background: #9aa1b0; }
.cmp.in .cr:not(.ch) .ck { animation: chk .6s var(--ease) backwards; }
.cmp.in .cr:nth-child(3) .ck { animation-delay: .1s; } .cmp.in .cr:nth-child(4) .ck { animation-delay: .2s; } .cmp.in .cr:nth-child(5) .ck { animation-delay: .3s; } .cmp.in .cr:nth-child(6) .ck { animation-delay: .4s; } .cmp.in .cr:nth-child(7) .ck { animation-delay: .5s; } .cmp.in .cr:nth-child(8) .ck { animation-delay: .6s; } .cmp.in .cr:nth-child(9) .ck { animation-delay: .7s; }
.cmp-note { margin-top: 22px; color: var(--mute); font-size: 13.5px; max-width: 80ch; }
@media (max-width: 52rem) {
  .cr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cr .cl { grid-column: 1 / -1; min-height: 0; padding: 18px 0 10px; font-size: 15.5px; border-bottom: 0; }
  .ch .cl { display: none; }
  .cr > * { min-height: 56px; }
  .ch > * { min-height: 92px; font-size: 13px; }
  .cr .c1, .cr .c2, .cr .c3 { border-bottom: 1px dashed var(--line-2); }
  .cr .c0 { border-radius: 14px; margin: 0 6px; }
  .ch .c0 { border-radius: 18px; }
  .cr:last-child .c0 { -webkit-mask-image: none; mask-image: none; border-radius: 14px; }
  .cmp-head { justify-content: center; text-align: center; } .cmp-head > div { justify-items: center; } .cmp-head p { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) { .bg-fx .topo, .cr .c0::before { animation: none; } }