/* v4: certificate cards, clearer illustrations, winning-side triggers */

/* ---------- deal = certificate ---------- */
.deal{background:#FFFDF7;border:1px solid #E4D9B8;
  background-image:
    radial-gradient(circle at 50% 46%,rgba(201,154,58,.07),transparent 55%),
    repeating-radial-gradient(circle at 50% 120%,transparent 0 14px,rgba(201,154,58,.045) 14px 15px)}
.deal::before{inset:9px;border:3px double #CDB57A;border-radius:14px}
.deal::after{content:"";position:absolute;inset:16px;border-radius:10px;pointer-events:none;
  background:
    radial-gradient(circle at 0 0,#CDB57A 0 3px,transparent 4px),radial-gradient(circle at 100% 0,#CDB57A 0 3px,transparent 4px),
    radial-gradient(circle at 0 100%,#CDB57A 0 3px,transparent 4px),radial-gradient(circle at 100% 100%,#CDB57A 0 3px,transparent 4px)}
.deal .lbl{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:15px;letter-spacing:.14em;color:#8C6D24;margin-top:6px}
.deal .lbl::after{content:"";display:block;width:70px;height:1px;background:#CDB57A;margin:10px auto 0}
.deal .lbl+*{margin-top:auto!important}
.deal .rule{margin:auto 0 14px!important}
.deal .logo{height:46px}
.deal .logo.sq{height:62px}
.deal .wm{font-size:28px}
.deal .amt{font-size:clamp(42px,4.8vw,60px);color:#0B1220}
.deal .what{font-size:16.5px;color:#1C2536;max-width:360px;line-height:1.45}
.deal .foot{font-size:12px;color:#8C6D24;letter-spacing:.1em}
.deal .seal{top:auto;bottom:30px;right:28px}
@media(max-width:640px){.deal .seal{bottom:22px;right:18px}.deal .lbl{font-size:12.5px}.deal .what{font-size:15px}}

/* ---------- clearer illustrations ---------- */
.ill{height:230px;padding:46px 18px 18px}
.ill .cap{position:absolute;top:14px;left:16px;font:800 12px var(--font);letter-spacing:.04em;color:var(--accent);background:#fff;border:1px solid color-mix(in srgb,var(--accent) 30%,#fff);border-radius:999px;padding:6px 12px;box-shadow:0 2px 8px rgba(11,18,32,.06)}
.code{transform:scale(1.06)}
.race{max-width:320px}.race .trk{height:14px}.race .nm{font-size:13.5px}
.chat .m{font-size:15px}
.adv .a h3{font-size:20px}

/* ---------- moment of truth: make the winner unmistakable ---------- */
.truth{align-items:center;gap:26px}
.truth .weak{filter:saturate(.75);opacity:.9}
.truth .weak h3{text-decoration:line-through;text-decoration-color:rgba(225,29,72,.55);text-decoration-thickness:3px}
.truth .strong{position:relative;transform:scale(1.04);padding:44px 34px 36px;isolation:isolate;
  box-shadow:0 30px 70px rgba(10,22,48,.35),0 0 0 1px rgba(245,183,0,.35)}
.truth .strong::before{content:"";position:absolute;inset:-2px;border-radius:24px;z-index:-1;
  background:conic-gradient(from var(--ang,0deg),#F5B700,transparent 25%,transparent 50%,#F5B700 75%,transparent);animation:ring 4s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes ring{to{--ang:360deg}}
.truth .strong::after{content:"";position:absolute;inset:0;border-radius:22px;z-index:-1;background:radial-gradient(500px 220px at 85% 0,rgba(245,183,0,.18),transparent 70%)}
.truth .strong h3{font-size:clamp(32px,3.4vw,44px)}
.stars{display:flex;gap:6px;margin:-8px 0 22px}
.stars span{font-size:30px;line-height:1;color:#F5B700;text-shadow:0 0 18px rgba(245,183,0,.55)}
.closed{position:absolute;top:-16px;right:24px;background:#16A34A;color:#fff;font:900 12.5px var(--font);letter-spacing:.1em;padding:9px 14px;border-radius:999px;box-shadow:0 10px 24px rgba(22,163,74,.45);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 10px 24px rgba(22,163,74,.45),0 0 0 0 rgba(22,163,74,.5)}50%{box-shadow:0 10px 24px rgba(22,163,74,.45),0 0 0 12px rgba(22,163,74,0)}}
.truth .strong li{font-size:17.5px}
/* entrance: weak shakes and fades, strong rises, stars pop one by one */
.anim .truth.rv .weak{transform:translateX(-20px);opacity:0;transition:transform .8s,opacity .8s}
.anim .truth.rv.in .weak{transform:none;opacity:.9;animation:shake .5s 1s 1}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.anim .truth.rv .strong{transform:translateY(40px) scale(.96);opacity:0;transition:transform 1s cubic-bezier(.2,.8,.2,1) .3s,opacity 1s .3s}
.anim .truth.rv.in .strong{transform:scale(1.04);opacity:1}
.anim .truth.rv .stars span{display:inline-block;transform:scale(0) rotate(-40deg);transition:transform .5s cubic-bezier(.3,1.8,.5,1)}
.anim .truth.rv.in .stars span{transform:none}
.anim .truth.rv.in .stars span:nth-child(1){transition-delay:1.1s}.anim .truth.rv.in .stars span:nth-child(2){transition-delay:1.25s}.anim .truth.rv.in .stars span:nth-child(3){transition-delay:1.4s}.anim .truth.rv.in .stars span:nth-child(4){transition-delay:1.55s}.anim .truth.rv.in .stars span:nth-child(5){transition-delay:1.7s}
.anim .truth.rv .strong li{opacity:0;transform:translateX(16px);transition:opacity .5s,transform .5s}
.anim .truth.rv.in .strong li{opacity:1;transform:none}
.anim .truth.rv.in .strong li:nth-child(1){transition-delay:1.3s}.anim .truth.rv.in .strong li:nth-child(2){transition-delay:1.45s}.anim .truth.rv.in .strong li:nth-child(3){transition-delay:1.6s}.anim .truth.rv.in .strong li:nth-child(4){transition-delay:1.75s}
.anim .truth.rv .closed{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.8,.5,1) 2s}
.anim .truth.rv.in .closed{transform:none}
/* the stagger rule from anim.css must not override these */
.anim .truth.rv.stagger>*{transition-delay:0s}
@media(max-width:800px){.truth .strong{transform:none}.anim .truth.rv.in .strong{transform:none}.truth{gap:30px}}
@media(prefers-reduced-motion:reduce){.truth .strong::before{animation:none}.closed{animation:none}}
.wmk{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;color:#0B1220}
.wmk.big{font-size:34px;margin-bottom:22px}
.deal .seal{top:20px;bottom:auto;right:20px;width:52px;height:52px}
.deal .seal span{width:40px;height:40px;font-size:9.5px}
@media(max-width:640px){.deal .seal{top:16px;right:14px;width:42px;height:42px}.deal .seal span{width:32px;height:32px;font-size:8px}.deal .lbl{padding:0 40px}}
.deal .lbl{padding:0 56px}@media(max-width:640px){.deal .lbl{padding:0 44px}}