/* ================================================
   Hero CTA hierarchy (Cindi 10/6): emphasis through depth and weight, not a new colour.
   Restyles the shared hero button classes site-wide; no page edits.
     Primary  .btn-hero-white      — white fill, bold navy label, stronger shadow + faint white ring, a bit larger
     Second.  .btn-hero-secondary / .btn-outline-hero — transparent, thinner softer border, regular weight
   The footer's small demo button (.btn-sm) and any .btn-lg are left as they were.
   Undo: remove the hero-cta.css <link> in header.cfm.
   ================================================ */

.btn-hero-white:not(.btn-sm):not(.btn-lg) {
  color: #1A2C66 !important;
  font-weight: 700;
  padding: .75rem 1.6rem;
  font-size: 1.05rem;
  line-height: 1.4;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 8px 22px rgba(10, 25, 70, .28), 0 2px 6px rgba(10, 25, 70, .16);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn-hero-white:not(.btn-sm):not(.btn-lg):hover,
.btn-hero-white:not(.btn-sm):not(.btn-lg):focus-visible {
  color: #234093 !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 12px 28px rgba(10, 25, 70, .32), 0 3px 8px rgba(10, 25, 70, .18);
}
.btn-hero-white:not(.btn-sm):not(.btn-lg):active { transform: none; }
/* quieter icon so the words carry the weight */
.btn-hero-white:not(.btn-sm):not(.btn-lg) .bi { font-size: .95em; opacity: .7; }

.btn-hero-secondary, .btn-outline-hero {
  background: transparent;
  color: rgba(255, 255, 255, .92);
  font-weight: 400;
  padding: .75rem 1.15rem;          /* same height as the primary, narrower */
  min-width: 194px;                 /* short labels (See Pricing) end up ~13% narrower than the primary, not ~47% */
  font-size: 1.05rem;
  line-height: 1.4;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: none;
}
.btn-hero-secondary:hover, .btn-outline-hero:hover,
.btn-hero-secondary:focus-visible, .btn-outline-hero:focus-visible {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .85);
  color: #fff;
  transform: none;
}
.btn-hero-secondary .bi, .btn-outline-hero .bi { opacity: .8; }

/* a short line right under the hero buttons (e.g. "Flat-rate pricing · Unlimited members · No per-contact fees")
   gets ~10px more room now the buttons are larger (Cindi 10/6): 8px (Bootstrap mt-2) -> 18px */
:is(div, p):has(> .btn-hero-white:not(.btn-sm):not(.btn-lg)) + p { margin-top: 13px !important; }   /* 18px felt detached; 13px (Cindi 10/6) */

/* Footer demo button matches the hero CTA treatment, one size smaller (Cindi 10/6) */
footer .btn-hero-white.footer-demo-btn {
  color: #1A2C66 !important;
  font-weight: 700;
  padding: .55rem 1.1rem;
  font-size: .95rem;
  line-height: 1.4;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 6px 16px rgba(10, 25, 70, .28), 0 2px 5px rgba(10, 25, 70, .16);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}
footer .btn-hero-white.footer-demo-btn:hover,
footer .btn-hero-white.footer-demo-btn:focus-visible {
  color: #234093 !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 10px 22px rgba(10, 25, 70, .32), 0 3px 7px rgba(10, 25, 70, .18);
}
/* the refined double chevron (thin stroke, 10px after the label) wherever it appears on a white CTA */
.btn-hero-white .cta-chev { margin-left: 10px; flex: 0 0 auto; opacity: .8; }
footer .btn-hero-white .cta-chev { margin-left: 8px; }
/* keep the footer button on one line in the narrow desktop footer column */
footer .btn-hero-white.footer-demo-btn { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1399.98px) {
  footer .btn-hero-white.footer-demo-btn { font-size: .875rem; padding: .5rem .8rem; }
  footer .btn-hero-white .cta-chev { margin-left: 6px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  footer .btn-hero-white .cta-chev { display: none; }   /* narrowest footer column: label only */
}
/* smallest phones: badge a touch smaller so it still sits beside the button */
@media (max-width: 374.98px) {
  footer .footer-reviews img { height: 34px; }
}

/* Value strip under the hero (.cred-belt, 37 pages), phones: two per row instead of one (Cindi 10/6).
   Four items make a 2x2 grid; with three, the last one sits centred. Icon above its label so labels fit. */
@media (max-width: 767.98px) {
  .cred-belt .row { justify-content: center; align-items: flex-start !important; row-gap: 1rem !important; }   /* top-aligned so icons line up across a row */
  .cred-belt .row > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
    margin-top: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-align: center;
    line-height: 1.3;
  }
  .cred-belt .row > [class*="col-"] > i { margin: 0 !important; }
}