/* Home-page ad banner for the age eligibility checker. */
.cmpsb { position: relative; overflow: hidden; margin: 0 auto; padding: 34px 18px 14px; color: #2B2D42;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.45; box-sizing: border-box;
  background: radial-gradient(circle at 12% 18%, #FFE3EC 0, transparent 42%), radial-gradient(circle at 88% 80%, #DDF7F4 0, transparent 45%), linear-gradient(135deg, #FFF4D6, #FFE9F0 55%, #E6FAF7); }
.cmpsb *, .cmpsb *::before, .cmpsb *::after { box-sizing: border-box; }
.cmpsb-in { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; }
.cmpsb-bg span { position: absolute; font-size: 30px; opacity: .55; animation: cmpsb-float 7s ease-in-out infinite; }
.cmpsb-bg span:nth-child(1) { top: 8%;  left: 3%; }
.cmpsb-bg span:nth-child(2) { top: 70%; left: 6%;  animation-delay: -2s; font-size: 22px; }
.cmpsb-bg span:nth-child(3) { top: 12%; left: 46%; animation-delay: -4s; font-size: 22px; }
.cmpsb-bg span:nth-child(4) { top: 78%; left: 52%; animation-delay: -1s; }
.cmpsb-bg span:nth-child(5) { top: 6%;  right: 4%; animation-delay: -3s; }
.cmpsb-bg span:nth-child(6) { top: 58%; right: 3%; animation-delay: -5s; font-size: 36px; }
.cmpsb-bg span:nth-child(7) { top: 40%; left: 30%; animation-delay: -6s; font-size: 18px; }
@keyframes cmpsb-float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(6deg); } }

.cmpsb-ribbon { display: inline-block; background: #2B2D42; color: #FFC93C; font: 700 13px/1 "Poppins", system-ui, sans-serif; letter-spacing: .5px;
  padding: 8px 14px; border-radius: 999px; box-shadow: 0 4px 12px rgba(43,45,66,.25); }
.cmpsb-h { font-family: "Baloo 2", "Mukta", system-ui, sans-serif !important; font-weight: 800 !important; font-size: 30px !important; line-height: 1.1 !important;
  margin: 14px 0 10px !important; color: #2B2D42 !important; letter-spacing: 0 !important; text-transform: none !important; }
.cmpsb-h span { color: #E94E77; text-shadow: 2px 2px 0 #FFC93C; white-space: nowrap; }
.cmpsb-sub { font-size: 15px; margin: 0 0 14px; color: #3F4257; }
.cmpsb-sub strong { color: #2B2D42; }
.cmpsb-rules { list-style: none !important; margin: 0 0 14px !important; padding: 0 !important; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cmpsb-rules li { background: #fff; border-radius: 14px; padding: 9px 10px; text-align: center; box-shadow: 0 4px 14px rgba(233,78,119,.12); border-bottom: 4px solid #2EC4B6; margin: 0 !important; }
.cmpsb-rules li:nth-child(2) { border-color: #FFC93C; }
.cmpsb-rules li:nth-child(3) { border-color: #E94E77; }
.cmpsb-rules li:nth-child(4) { border-color: #8B5CF6; }
.cmpsb-rules strong { display: block; font-size: 13px; color: #6B7280; font-weight: 600; }
.cmpsb-rules em { display: block; font: 800 24px/1.1 "Baloo 2", system-ui, sans-serif; font-style: normal; color: #2B2D42; }
.cmpsb-rules small { display: block; font-size: 11px; color: #6B7280; }
.cmpsb-mr { font-family: "Mukta", system-ui, sans-serif; font-weight: 700; font-size: 17px; margin: 0 0 14px; color: #2B2D42; }
.cmpsb-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cmpsb-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; background: #E94E77; color: #fff !important; text-decoration: none !important;
  font: 800 18px/1 "Baloo 2", system-ui, sans-serif; padding: 16px 24px; border-radius: 16px; box-shadow: 0 8px 20px rgba(233,78,119,.4); animation: cmpsb-pulse 2.4s ease-in-out infinite; }
.cmpsb-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); animation: cmpsb-shine 3s linear infinite; }
.cmpsb-cta:hover { background: #D63B65; }
.cmpsb-cta span { transition: transform .2s; }
.cmpsb-cta:hover span { transform: translateX(4px); }
@keyframes cmpsb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes cmpsb-shine { from { left: -60%; } to { left: 130%; } }
.cmpsb-free { font-size: 13px; color: #4B4F63; font-weight: 600; }

.cmpsb-art { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cmpsb-blob { width: 230px; height: 230px; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px rgba(46,196,182,.25), inset 0 0 0 8px #FFF4D6; animation: cmpsb-morph 9s ease-in-out infinite; text-align: center; padding: 18px; }
@keyframes cmpsb-morph { 0%, 100% { border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; } 50% { border-radius: 56% 44% 58% 42% / 44% 56% 44% 56%; } }
.cmpsb-logo { max-width: 130px; max-height: 110px; width: auto; height: auto; }
.cmpsb-kid { font-size: 64px; line-height: 1; }
.cmpsb-school { font: 800 15px/1.2 "Baloo 2", system-ui, sans-serif; color: #2EC4B6; margin-top: 6px; }
.cmpsb-school small { color: #6B7280; font: 600 11px/1.3 "Poppins", system-ui, sans-serif; }
.cmpsb-gift { display: flex; align-items: center; gap: 10px; max-width: 320px; background: #2B2D42; color: #fff !important; text-decoration: none !important; border-radius: 18px;
  padding: 12px 16px; font-size: 14px; line-height: 1.3; border: 3px dashed #FFC93C; transform: rotate(-2deg); box-shadow: 0 10px 24px rgba(43,45,66,.3); }
.cmpsb-gift b { color: #FFC93C; }
.cmpsb-gift small { color: #C7F3EE; }
.cmpsb-gift-ico { font-size: 34px; animation: cmpsb-wiggle 1.8s ease-in-out infinite; }
@keyframes cmpsb-wiggle { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-14deg); } 86% { transform: rotate(12deg); } 94% { transform: rotate(-6deg); } }
.cmpsb-fine { position: relative; z-index: 1; max-width: 1140px; margin: 16px auto 0; font-size: 11px; color: #6B7280; text-align: center; }

@media (max-width: 639px) {
  .cmpsb-art { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .cmpsb-blob { width: 150px; height: 150px; padding: 12px; }
  .cmpsb-logo { max-width: 80px; max-height: 70px; }
  .cmpsb-school { font-size: 12px; }
  .cmpsb-school small { display: none; }
}
@media (min-width: 640px) {
  .cmpsb-rules { grid-template-columns: repeat(4, 1fr); }
  .cmpsb-h { font-size: 38px !important; }
}
@media (min-width: 900px) {
  .cmpsb { padding: 46px 28px 16px; }
  .cmpsb-in { grid-template-columns: 1.6fr 1fr; gap: 36px; }
  .cmpsb-h { font-size: 46px !important; }
  .cmpsb-blob { width: 280px; height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .cmpsb-bg span, .cmpsb-cta, .cmpsb-cta::after, .cmpsb-blob, .cmpsb-gift-ico { animation: none; }
}
