/* Task 1.4 — match the Mobile Detailing package button glow.
   Uses --mobile-glow-angle and mobile-book-ring from mobile-book-glow.css. */
:is(#s2, #s3) .card-cta:is([data-book="p1"], [data-book="p2"], [data-book="p3"], [data-book="h1"]) {
  --mobile-glow-angle: 0deg;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  margin: 6px 0 2px;
  padding: 16px 20px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, #151a22, #0b0e14) padding-box,
    conic-gradient(from var(--mobile-glow-angle),
      rgba(255,255,255,.12) 0deg,
      #fff 50deg, #bfe0ff 80deg,
      rgba(255,255,255,.12) 140deg,
      rgba(255,255,255,.12) 200deg,
      #fff 240deg,
      rgba(255,255,255,.12) 300deg) border-box;
  color: #f1f5fa;
  box-shadow: 0 0 14px rgba(191,224,255,.24),
    0 0 30px rgba(191,224,255,.10),
    inset 0 1px 0 rgba(255,255,255,.08);
  animation: mobile-book-ring 3.6s linear infinite;
  transition: box-shadow .3s ease, color .3s ease;
  transform: none;
  translate: none;
}
:is(#s2, #s3) .card-cta:is([data-book="p1"], [data-book="p2"], [data-book="p3"], [data-book="h1"]):hover {
  color: #fff;
  box-shadow: 0 0 18px rgba(191,224,255,.38),
    0 0 36px rgba(191,224,255,.16),
    inset 0 1px 0 rgba(255,255,255,.12);
  transform: none;
  translate: none;
}
:is(#s2, #s3) .card-cta:is([data-book="p1"], [data-book="p2"], [data-book="p3"], [data-book="h1"]):focus-visible {
  outline: 2px solid #e6f2ff;
  outline-offset: 5px;
}
:is(#s2, #s3) .card-cta:is([data-book="p1"], [data-book="p2"], [data-book="p3"], [data-book="h1"]) span {
  animation: none;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  :is(#s2, #s3) .card-cta:is([data-book="p1"], [data-book="p2"], [data-book="p3"], [data-book="h1"]) {
    animation: none;
    transition: none;
    --mobile-glow-angle: 40deg;
  }
}