/* WDS shared action-button shine + sticky bar motion.
   Inspired by SalesTeem border-beam (@property --angle + conic), WDS palette.
   CSS-only. prefers-reduced-motion → static border, no motion. */

@property --wds-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --wds-offset {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --wds-percent {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 7%;
}
@property --wds-shine {
  syntax: "<color>";
  inherits: false;
  initial-value: #ffffff;
}
@property --wds-pulse {
  syntax: "<length>";
  inherits: false;
  initial-value: 12px;
}
@property --wds-hover {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@keyframes wds-angle {
  to { --wds-angle: 360deg; }
}
@keyframes wds-glow {
  0%, 100% { --wds-pulse: 10px; }
  50% { --wds-pulse: 22px; }
}
@keyframes wds-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes wds-sweep {
  0% { transform: translateX(-130%) skewX(-16deg); opacity: 0; }
  12% { opacity: .55; }
  35% { transform: translateX(130%) skewX(-16deg); opacity: 0; }
  100% { transform: translateX(130%) skewX(-16deg); opacity: 0; }
}
@keyframes wds-bar-in {
  0% { transform: translateY(120%); opacity: 0; }
  60% { transform: translateY(-8%); opacity: 1; }
  80% { transform: translateY(3%); }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes wds-bar-breathe {
  0%, 100% { box-shadow: 0 18px 48px rgba(13,26,48,.38), 0 0 0 1px rgba(41,121,255,.22), 0 0 28px rgba(41,121,255,.28), inset 0 1px 0 rgba(255,255,255,.14); }
  50% { box-shadow: 0 18px 48px rgba(13,26,48,.38), 0 0 0 1px rgba(127,182,255,.4), 0 0 42px rgba(41,121,255,.48), inset 0 1px 0 rgba(255,255,255,.18); }
}
@keyframes wds-bar-nudge {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
  70% { transform: translateY(2px); }
}

/* ---- Shared action button ---- */
.wds-shine,
a.btn-p,
button.btn-p,
a.btn.p,
button.btn.p,
.btn.p,
a.menu-cta.btn-p,
.wds-exit a.primary,
.wds-sticky-bar .cta,
#payBtn,
#paySecureBtn,
.cta-pay,
button.cta-glow,
a.cta-glow,
.pay-cta,
.start-foot .btn.p,
.ffcta .btn-w {
  --wds-fill: linear-gradient(90deg, #4d94ff, #2979FF 55%, #1e63e0);
  --wds-accent: #CFE3FF;
  --wds-accent-soft: #ffffff;
  --wds-edge: #163a7a;
  --wds-ease: .8s cubic-bezier(.25, 1, .5, 1);
  --wds-lift: .55s cubic-bezier(.22, 1, .36, 1);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid transparent;
  color: #fff;
  text-shadow: 0 1px 2px rgba(13, 26, 48, .28);
  background:
    var(--wds-fill) padding-box,
    conic-gradient(
      from calc(var(--wds-angle) - var(--wds-offset)),
      transparent,
      var(--wds-accent) var(--wds-percent),
      var(--wds-shine) calc(var(--wds-percent) * 2),
      var(--wds-accent) calc(var(--wds-percent) * 3),
      transparent calc(var(--wds-percent) * 4)
    ) border-box,
    var(--wds-edge) border-box;
  box-shadow:
    0 0 calc(var(--wds-pulse) + var(--wds-hover)) -3px rgba(41, 121, 255, .55),
    0 calc(6px + var(--wds-hover) / 4) 16px -8px rgba(13, 26, 48, .45),
    inset 0 1px 0 rgba(255, 255, 255, .28);
  animation: wds-angle 3s linear infinite, wds-glow 2.6s ease-in-out infinite;
  transition:
    transform var(--wds-lift),
    filter var(--wds-lift),
    --wds-hover var(--wds-lift),
    --wds-offset var(--wds-ease),
    --wds-percent var(--wds-ease),
    --wds-shine var(--wds-ease);
  will-change: transform;
}

/* Yellow / amber pay CTAs keep warm fill, same border beam */
#payBtn,
#paySecureBtn,
.cta-pay,
button.cta-glow,
a.cta-glow,
.pay-cta,
.wds-shine.amber {
  --wds-fill: linear-gradient(180deg, #ffe56a, #f5c21b 55%, #e89a1a);
  --wds-accent: #fff7c2;
  --wds-accent-soft: #ffffff;
  
  --wds-edge: #9a6a08;
  color: #0d1a30;
  text-shadow: none;
  box-shadow:
    0 0 calc(var(--wds-pulse) + var(--wds-hover)) -3px rgba(232, 154, 26, .45),
    0 calc(6px + var(--wds-hover) / 4) 16px -8px rgba(13, 26, 48, .35),
    inset 0 1px 0 rgba(255, 255, 255, .45);
}

.wds-shine::before,
a.btn-p::before,
button.btn-p::before,
a.btn.p::before,
button.btn.p::before,
.btn.p::before,
.wds-exit a.primary::before,
.wds-sticky-bar .cta::before,
#payBtn::before,
#paySecureBtn::before,
.cta-pay::before,
button.cta-glow::before,
a.cta-glow::before,
.pay-cta::before,
.start-foot .btn.p::before,
.ffcta .btn-w::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 2px 2px, rgba(255,255,255,.85) .5px, transparent 0) 0 0 / 4px 4px space;
  -webkit-mask-image: conic-gradient(from calc(var(--wds-angle) + 45deg), #000, transparent 10% 90%, #000);
  mask-image: conic-gradient(from calc(var(--wds-angle) + 45deg), #000, transparent 10% 90%, #000);
  opacity: .3;
  animation: wds-angle 3s linear infinite;
}

.wds-shine::after,
a.btn-p::after,
button.btn-p::after,
a.btn.p::after,
button.btn.p::after,
.btn.p::after,
.wds-exit a.primary::after,
.wds-sticky-bar .cta::after,
#payBtn::after,
#paySecureBtn::after,
.cta-pay::after,
button.cta-glow::after,
a.cta-glow::after,
.pay-cta::after,
.start-foot .btn.p::after,
.ffcta .btn-w::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  animation: wds-sweep 4.8s ease-in-out infinite;
}

.wds-shine > *,
a.btn-p > *,
button.btn-p > *,
a.btn.p > *,
.btn.p > *,
.wds-exit a.primary > *,
.wds-sticky-bar .cta > *,
#payBtn > *,
#paySecureBtn > *,
.cta-pay > *,
button.cta-glow > *,
a.cta-glow > *,
.start-foot .btn.p > *,
.ffcta .btn-w > * {
  position: relative;
  z-index: 2;
}

.wds-shine:hover,
a.btn-p:hover,
button.btn-p:hover,
a.btn.p:hover,
button.btn.p:hover,
.btn.p:hover,
.wds-exit a.primary:hover,
.wds-sticky-bar .cta:hover,
#payBtn:hover,
#paySecureBtn:hover,
.cta-pay:hover,
button.cta-glow:hover,
a.cta-glow:hover,
.pay-cta:hover,
.start-foot .btn.p:hover,
.ffcta .btn-w:hover {
  --wds-percent: 18%;
  --wds-offset: 95deg;
  --wds-shine: var(--wds-accent-soft);
  --wds-hover: 8px;
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.05) saturate(1.08);
}

.wds-shine:active,
a.btn-p:active,
button.btn-p:active,
a.btn.p:active,
.btn.p:active,
#payBtn:active,
#paySecureBtn:active,
.cta-pay:active,
button.cta-glow:active,
a.cta-glow:active {
  transform: translateY(0) scale(1);
  --wds-hover: 0px;
  transition-duration: .15s;
}

/* Soft secondary outline buttons: lighter beam only */
a.btn-s.wds-shine,
button.btn-s.wds-shine {
  --wds-fill: linear-gradient(180deg, #fff, #EAF3FF);
  --wds-accent: #7FB6FF;
  --wds-edge: #CFE3FF;
  color: #152744;
  text-shadow: none;
}

/* Sticky bar shell — slim single-row desktop, compact two-line mobile */
.wds-sticky-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  color: #EAF3FF;
  background:
    linear-gradient(135deg, rgba(21,39,68,.94), rgba(13,26,48,.9)) padding-box,
    conic-gradient(
      from var(--wds-angle),
      rgba(41,121,255,.15),
      #7FB6FF 18%,
      #CFE3FF 28%,
      #2979FF 40%,
      rgba(41,121,255,.15) 55%,
      transparent 70%,
      rgba(41,121,255,.2) 100%
    ) border-box;
  border: 1.5px solid transparent;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(120%);
  pointer-events: none;
  animation: wds-angle 5s linear infinite;
  max-width: 1180px;
  margin-inline: auto;
  width: auto;
  box-sizing: border-box;
}
.wds-sticky-bar.on {
  pointer-events: auto;
  animation:
    wds-bar-in .85s cubic-bezier(.22, 1.2, .36, 1) forwards,
    wds-bar-breathe 2.8s ease-in-out .9s infinite,
    wds-angle 5s linear infinite;
}
.wds-sticky-bar.nudge {
  animation:
    wds-bar-nudge .7s ease,
    wds-bar-breathe 2.8s ease-in-out infinite,
    wds-angle 5s linear infinite;
}
.wds-sticky-bar .copy { flex: 1; min-width: 0; }
.wds-sticky-bar .copy b {
  display: block;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.015em;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.wds-sticky-bar .copy span {
  display: block;
  font-size: 13.5px;
  line-height: 1.3;
  color: #EAF3FF;
  margin-top: 2px;
  font-weight: 600;
}
.wds-sticky-bar .cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 800;
  font-size: 16px !important;
  line-height: 1.2;
  min-height: 48px !important;
  height: auto;
  padding: 12px 18px !important;
  border-radius: 999px;
  width: auto !important;
}
.wds-sticky-bar .cta span { position: relative; z-index: 2; }
.wds-sticky-bar .cta .arr { margin-left: .35em; }
.wds-sticky-bar .x {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
body.wds-bar-on { padding-bottom: 120px; }
body.wds-bar-on .m-cta { display: none !important; }
body.wds-bar-on .wa-float { bottom: calc(120px + env(safe-area-inset-bottom)); }
body.wds-bar-on .wds-toast-wrap { bottom: calc(120px + env(safe-area-inset-bottom)); }

@media (min-width: 768px) {
  .wds-sticky-bar {
    flex-wrap: nowrap;
    padding: 10px 16px;
    gap: 14px;
    left: 20px;
    right: 20px;
    border-radius: 18px;
  }
  .wds-sticky-bar .copy b { font-size: 18px; }
  .wds-sticky-bar .copy span { font-size: 14px; margin-top: 1px; }
  .wds-sticky-bar .cta { min-height: 50px !important; font-size: 16px !important; padding: 12px 22px !important; }
  body.wds-bar-on { padding-bottom: 96px; }
  body.wds-bar-on .wa-float { bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.wds-bar-on .wds-toast-wrap { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@media (min-width: 1280px) {
  .wds-sticky-bar .copy b { font-size: 20px; }
  .wds-sticky-bar .copy span { font-size: 15px; }
  .wds-sticky-bar .cta { min-height: 52px !important; font-size: 17px !important; padding: 13px 24px !important; }
}

@media (max-width: 640px) {
  .wds-sticky-bar {
    flex-wrap: wrap;
    padding: 10px 12px 12px;
    gap: 8px;
    align-items: flex-start;
  }
  .wds-sticky-bar .copy { width: calc(100% - 44px); flex: 1 1 auto; }
  .wds-sticky-bar .copy b { font-size: 17px; }
  .wds-sticky-bar .copy span { font-size: 13px; }
  .wds-sticky-bar .x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; }
  .wds-sticky-bar .cta {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
  }
  body.wds-bar-on { padding-bottom: 140px; }
  body.wds-bar-on .wa-float { bottom: calc(140px + env(safe-area-inset-bottom)); }
  body.wds-bar-on .wds-toast-wrap { bottom: calc(140px + env(safe-area-inset-bottom)); }
}




/* header CTA stays compact (~40-44px / 15-16px) */
a.menu-cta.wds-gc,
header a.wds-gc.menu-cta,
.site-header a.wds-gc,
nav .wds-gc.menu-cta,
a.nav-cta.wds-gc,
.nav-r a.wds-gc,
header a.nav-cta {
  min-height: 42px !important;
  max-height: none;
  height: auto !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  padding: 10px 16px !important;
  width: auto !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgba(41,121,255,.55) !important;
}
@media (min-width: 1001px) {
  a.nav-cta.wds-gc, .nav-r a.wds-gc {
    font-size: 15.5px !important;
    padding: 10px 18px !important;
    min-height: 44px !important;
  }
}

/* ---- Big Growth Check CTAs (older-eye friendly) ---- */
a.wds-gc:not(.nav-cta):not(.menu-cta),
a.btn-p[href="/start/"]:not(.nav-cta):not(.menu-cta),
a.btn.p[href="/start/"]:not(.nav-cta):not(.menu-cta),
a.btn-p[href="/#check"],
a.btn-p[href="#check"],
.m-cta a[href="/start/"],
.wds-exit a.primary,
.start-foot .btn.p,
#gcStartCard a.btn-p,
a.btn-w[href="/start/"],
.ffcta .btn-w[href="/start/"] {
  min-height: 64px;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.2;
  padding: 16px 28px !important;
  border-radius: 999px;
  box-shadow:
    0 0 calc(var(--wds-pulse) + var(--wds-hover) + 6px) -2px rgba(41, 121, 255, .72),
    0 calc(8px + var(--wds-hover) / 4) 22px -6px rgba(13, 26, 48, .5),
    inset 0 1px 0 rgba(255, 255, 255, .32);
}
/* sticky CTA stays compact 48-52 */
.wds-sticky-bar .cta {
  min-height: 48px !important;
  font-size: 16px !important;
  padding: 12px 18px !important;
  width: auto !important;
}
a.wds-gc .arr,
a.btn-p[href="/start/"] .arr,
.wds-sticky-bar .cta .arr,
.wds-exit a.primary .arr {
  display: inline-block;
  margin-left: .3em;
}

@media (min-width: 641px) {
  a.wds-gc:not(.nav-cta):not(.menu-cta),
  a.btn-p[href="/start/"]:not(.nav-cta):not(.menu-cta),
  a.btn.p[href="/start/"]:not(.nav-cta):not(.menu-cta),
  .wds-exit a.primary,
  #gcStartCard a.btn-p,
  a.btn-w[href="/start/"],
  .ffcta .btn-w[href="/start/"] {
    font-size: 22px !important;
    min-height: 64px;
    padding: 18px 34px !important;
  }
  .wds-sticky-bar .cta,
  .wds-sticky-bar a.cta.wds-gc {
    font-size: 16px !important;
    min-height: 50px !important;
    padding: 12px 22px !important;
    width: auto !important;
  }
}

@media (max-width: 640px) {
  a.wds-gc:not(.nav-cta):not(.menu-cta),
  a.btn-p[href="/start/"]:not(.nav-cta):not(.menu-cta),
  a.btn.p[href="/start/"]:not(.nav-cta):not(.menu-cta),
  a.btn-p[href="/#check"],
  a.btn-p[href="#check"],
  .m-cta a[href="/start/"],
  .wds-exit a.primary,
  #gcStartCard a.btn-p,
  .hero .btn-p[href="/start/"],
  .final a.btn-p[href="/start/"],
  .ffcta .btn-w[href="/start/"] {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
  }
  .wds-sticky-bar .cta,
  .wds-sticky-bar a.cta.wds-gc {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
  }
  a.nav-cta.wds-gc,
  .nav-r a.wds-gc,
  a.menu-cta.wds-gc {
    width: auto !important;
    min-height: 42px !important;
    font-size: 15px !important;
    padding: 10px 16px !important;
  }
}

/* Hero subline under primary Growth Check CTA */
.wds-gc-note {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 650;
  color: #5b6b82;
}

@media (prefers-reduced-motion: reduce) {
  .wds-shine,
  a.btn-p, button.btn-p, a.btn.p, button.btn.p, .btn.p,
  .wds-exit a.primary, .wds-sticky-bar .cta,
  #payBtn, #paySecureBtn, .cta-pay, button.cta-glow, a.cta-glow, .pay-cta,
  .start-foot .btn.p, .ffcta .btn-w,
  .wds-shine::before, .wds-shine::after,
  a.btn-p::before, a.btn-p::after,
  button.btn-p::before, button.btn-p::after,
  a.btn.p::before, a.btn.p::after,
  .btn.p::before, .btn.p::after,
  .wds-exit a.primary::before, .wds-exit a.primary::after,
  .wds-sticky-bar .cta::before, .wds-sticky-bar .cta::after,
  #payBtn::before, #payBtn::after,
  #paySecureBtn::before, #paySecureBtn::after,
  .cta-pay::before, .cta-pay::after,
  button.cta-glow::before, button.cta-glow::after,
  a.cta-glow::before, a.cta-glow::after,
  .pay-cta::before, .pay-cta::after,
  .start-foot .btn.p::before, .start-foot .btn.p::after,
  .ffcta .btn-w::before, .ffcta .btn-w::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
  .wds-sticky-bar,
  .wds-sticky-bar.on,
  .wds-sticky-bar.nudge {
    animation: none !important;
    opacity: 1;
    transform: none;
    box-shadow: 0 18px 48px rgba(13,26,48,.38), 0 0 0 1px rgba(41,121,255,.35);
    background:
      linear-gradient(135deg, rgba(21,39,68,.94), rgba(13,26,48,.9)) padding-box,
      linear-gradient(90deg, #2979FF, #7FB6FF, #2979FF) border-box;
  }
}


/* Final compact overrides — win over big GC rules */
.wds-sticky-bar a.cta,
.wds-sticky-bar a.cta.wds-gc,
.wds-sticky-bar .cta.wds-shine {
  min-height: 48px !important;
  height: auto !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  padding: 11px 18px !important;
  width: auto !important;
  max-width: none;
  box-shadow:
    0 0 calc(var(--wds-pulse) + var(--wds-hover)) -3px rgba(41, 121, 255, .55),
    0 calc(6px + var(--wds-hover) / 4) 16px -8px rgba(13, 26, 48, .45),
    inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}
@media (min-width: 768px) {
  .wds-sticky-bar a.cta,
  .wds-sticky-bar a.cta.wds-gc {
    min-height: 50px !important;
    font-size: 16px !important;
    padding: 12px 22px !important;
  }
}
@media (min-width: 1280px) {
  .wds-sticky-bar a.cta,
  .wds-sticky-bar a.cta.wds-gc {
    min-height: 52px !important;
    font-size: 17px !important;
  }
}
header a.nav-cta.wds-gc,
.nav-r a.nav-cta.wds-gc,
a.btn-p.nav-cta.wds-gc,
a.menu-cta.nav-cta.wds-gc {
  min-height: 42px !important;
  height: auto !important;
  font-size: 15px !important;
  padding: 9px 16px !important;
  width: auto !important;
  max-width: none !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}