/* ============================================================
   HOMEPAGE-ONLY styles (loaded only by nextweb-html/index.html).
   1) Hero "Watch Demo" secondary button visibility fix.
   2) Bottom CTA blush band redesign.
   Scoped to .home-hbtns / .cta-sec.home-cta so no other page,
   shared component, header or footer is affected.
   ============================================================ */

/* ── 1. HERO "Watch Demo" ───────────────────────────────────
   Root cause: the global cta-buttons.css rule
   `.zip-public-body :is(.hero-actions,.hbtns,...) > .btn-o`
   forces white text + transparent bg + translucent white border
   (built for dark heroes). The homepage hero is white, so the
   label and icon rendered white-on-white. Re-scope for this hero. */
.zip-public-body .home-hbtns > .btn-o.home-watch-demo,
.home-hbtns > .btn-o.home-watch-demo {
  background: #fff !important;
  background-color: #fff !important;
  color: #12131a !important;
  border: 2px solid #cddd00 !important;
  border-color: #cddd00 !important;
  opacity: 1 !important;
}
.zip-public-body .home-hbtns > .btn-o.home-watch-demo > svg,
.home-hbtns > .btn-o.home-watch-demo > svg {
  fill: #12131a !important;
  stroke: none !important;
  color: #12131a !important;
}
.zip-public-body .home-hbtns > .btn-o.home-watch-demo:is(:hover,:focus,:focus-visible,:active),
.home-hbtns > .btn-o.home-watch-demo:is(:hover,:focus,:focus-visible,:active) {
  background: #f4fbc4 !important;
  background-color: #f4fbc4 !important;
  color: #12131a !important;
  border-color: #cddd00 !important;
}
.zip-public-body .home-hbtns > .btn-o.home-watch-demo:is(:hover,:focus,:focus-visible,:active) > svg,
.home-hbtns > .btn-o.home-watch-demo:is(:hover,:focus,:focus-visible,:active) > svg {
  fill: #12131a !important;
  stroke: none !important;
  color: #12131a !important;
}
.zip-public-body .home-hbtns > .btn-o.home-watch-demo:focus-visible {
  outline: 3px solid rgba(232, 31, 118, .45) !important;
  outline-offset: 2px;
}

/* ── 2. BOTTOM CTA — blush band ─────────────────────────────── */
.zip-public-body .cta-sec.home-cta,
.cta-sec.home-cta {
  background: #fff3f8 !important;
  background-image:
    radial-gradient(60rem 34rem at 22% 18%, rgba(232, 31, 118, 0.07) 0%, rgba(232, 31, 118, 0) 70%),
    radial-gradient(52rem 30rem at 82% 88%, rgba(232, 31, 118, 0.05) 0%, rgba(232, 31, 118, 0) 72%) !important;
  color: #1b2955 !important;
  padding: 9rem 3rem !important;
  text-align: center;
  border-top: 0 !important;
  min-height: 0 !important;
  overflow-x: hidden;
}

.zip-public-body .cta-sec.home-cta > *,
.cta-sec.home-cta > * {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin-inline: auto;
}

/* Badge */
.zip-public-body .cta-sec.home-cta .home-cta-badge,
.cta-sec.home-cta .home-cta-badge {
  display: inline-block;
  background: #fde3ee;
  color: #e81f76;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 1rem 2.2rem;
  border-radius: 999px;
  margin-bottom: 3rem;
}

/* Heading */
.zip-public-body .cta-sec.home-cta h2,
.cta-sec.home-cta h2 {
  color: #1b2955 !important;
  font-weight: 900;
  line-height: 1.1;
  margin: 0 auto 2rem !important;
}
.zip-public-body .cta-sec.home-cta h2 .stk,
.cta-sec.home-cta h2 .stk,
.zip-public-body .cta-sec.home-cta h2 .pk,
.cta-sec.home-cta h2 .pk {
  color: #e81f76 !important;
  -webkit-text-stroke: 0;
}

/* Supporting paragraph */
.zip-public-body .cta-sec.home-cta p,
.cta-sec.home-cta p {
  color: #5b6070 !important;
  max-width: 82rem;
  margin: 0 auto 3.4rem !important;
  line-height: 1.6;
}

/* Buttons row */
.zip-public-body .cta-sec.home-cta .cta-btns,
.cta-sec.home-cta .cta-btns {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 2rem !important;
  flex-wrap: wrap;
}
.zip-public-body .cta-sec.home-cta .btn-p,
.zip-public-body .cta-sec.home-cta .btn-o,
.cta-sec.home-cta .btn-p,
.cta-sec.home-cta .btn-o {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  padding: 1.7rem 3.4rem !important;
  border-radius: 1rem !important;
  min-height: 6rem !important;
}

/* Primary — pink fill, white label */
.zip-public-body .cta-sec.home-cta .btn-p,
.cta-sec.home-cta .btn-p {
  background: #e81f76 !important;
  color: #fff !important;
  border: 2px solid #e81f76 !important;
}
.cta-sec.home-cta .btn-p:is(:hover,:focus,:focus-visible,:active) {
  background: #c9185f !important;
  border-color: #c9185f !important;
  color: #fff !important;
}

/* Secondary phone button — white fill, navy border + label */
.zip-public-body .cta-sec.home-cta:not(.dark):not(.cta-sec--dark) .btn-o,
.zip-public-body .cta-sec.home-cta:not(.dark):not(.cta-sec--dark) a.btn-o[href^="tel:"],
.cta-sec.home-cta .btn-o {
  background: #fff !important;
  background-color: #fff !important;
  color: #1b2955 !important;
  border: 2px solid #1b2955 !important;
  border-color: #1b2955 !important;
}
.zip-public-body .cta-sec.home-cta:not(.dark):not(.cta-sec--dark) .btn-o:is(:hover,:focus,:focus-visible,:active),
.zip-public-body .cta-sec.home-cta:not(.dark):not(.cta-sec--dark) a.btn-o[href^="tel:"]:is(:hover,:focus,:focus-visible,:active),
.cta-sec.home-cta .btn-o:is(:hover,:focus,:focus-visible,:active) {
  background: #1b2955 !important;
  background-color: #1b2955 !important;
  color: #fff !important;
  border-color: #1b2955 !important;
}
.zip-public-body .cta-sec.home-cta .btn-o svg,
.cta-sec.home-cta .btn-o svg {
  stroke: #1b2955 !important;
  color: #1b2955 !important;
  fill: none !important;
}
.zip-public-body .cta-sec.home-cta .btn-o:is(:hover,:focus,:focus-visible,:active) svg,
.cta-sec.home-cta .btn-o:is(:hover,:focus,:focus-visible,:active) svg {
  stroke: #fff !important;
  color: #fff !important;
}

/* Contact meta row */
.zip-public-body .cta-sec.home-cta .cta-meta,
.cta-sec.home-cta .cta-meta {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 3rem !important;
  gap: 3.5rem;
  flex-wrap: wrap;
}
.zip-public-body .cta-sec.home-cta .cmeta,
.cta-sec.home-cta .cmeta {
  display: inline-flex !important;
  align-items: center !important;
  gap: .8rem !important;
  font-size: 1.4rem;
  color: #6b7180 !important;
}
.zip-public-body .cta-sec.home-cta .cmeta a,
.cta-sec.home-cta .cmeta a { color: #6b7180 !important; }
.zip-public-body .cta-sec.home-cta .cmeta svg,
.cta-sec.home-cta .cmeta svg {
  width: 1.8rem !important;
  height: 1.8rem !important;
  flex: 0 0 auto;
  stroke: #e81f76 !important;
  color: #e81f76 !important;
  fill: none !important;
}

@media (max-width: 1024px) {
  .zip-public-body .cta-sec.home-cta,
  .cta-sec.home-cta { padding: 7rem 3rem !important; }
}
@media (max-width: 640px) {
  .zip-public-body .cta-sec.home-cta,
  .cta-sec.home-cta { padding: 6rem 2rem !important; }
  .zip-public-body .cta-sec.home-cta .cta-btns,
  .cta-sec.home-cta .cta-btns { gap: 1.4rem !important; }
  .zip-public-body .cta-sec.home-cta .cta-meta,
  .cta-sec.home-cta .cta-meta { gap: 1.6rem; }
}