/* /assets/css/site.css */

/* Pills */
.pills{display:flex;gap:.4rem;flex-wrap:wrap}
.pill{display:inline-block;padding:.35rem .6rem;border-radius:999px;font-size:.9rem;text-decoration:none}
.pill-on{background:#eef;border:1px solid #cfe}
.pill-off{background:#f6f7f8;border:1px solid #e4e5e7;color:#777}

/* Specs */
.specs{display:flex;gap:1rem;flex-wrap:wrap;font-size:.95rem;margin:.5rem 0}
.specs li{list-style:none}

/* CTAs */
.ctas{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.5rem}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:.6rem;text-decoration:none;border:1px solid #ccc}
.btn.primary{border:none}
.price{font-weight:700}

/* Trust line */
.trust-line{font-size:.95rem;margin:.35rem 0 0;opacity:.92}

/* Sticky CTA (mobile) */
.cta-bar{position:sticky;bottom:0;left:0;right:0;z-index:50;display:flex;gap:.5rem;
  align-items:center;justify-content:center;padding:.6rem .8rem;border-top:1px solid #eee;background:#fff}
.cta-bar .btn{padding:.7rem 1rem;border-radius:.6rem;border:1px solid #ccc;text-decoration:none}
.cta-bar .btn.primary{border:none}
.cta-bar .cta-price{font-weight:600;margin-right:.5rem}
@media (min-width:900px){.cta-bar{display:none}}

/* reCAPTCHA badge: keep default behavior; only position*/
/* 
.grecaptcha-badge{
  position:fixed !important;bottom:16px !important;right:16px !important;
  z-index:2147483647 !important;pointer-events:auto !important;transform:none !important;
}
@media (max-width:768px){.grecaptcha-badge{right:auto !important;left:12px !important}}
body{padding-bottom:70px}

/* Optional: shrink any certification banner on phones */
@media (max-width:640px){.cert-banner{max-height:120px;overflow:hidden}}
*/
/* reCAPTCHA: fade until hover + lift above anchors */
body .grecaptcha-badge{
  position: fixed !important;
  bottom: 90px !important;     /* move it up so it doesn't cover anchors/buttons */
  right: 16px !important;
  opacity: 0.3 !important;     /* fade by default */
  transition: opacity .3s ease;
  z-index: 2147483647 !important;
}
body .grecaptcha-badge:hover{ opacity: 1 !important; }

@media (max-width:768px){
  body .grecaptcha-badge{
    right: auto !important;
    left: 12px !important;
    bottom: 90px !important;
  }
}