/* =========================================================
   v71 — Pill buttons with a round icon knob (from the user's reference).
   Brand colours: yellow #F9C721 (primary) and brand blue #006697 (secondary).
   ========================================================= */
:root{
  --pill-h:60px;
  --pill-y1:#FFE066; --pill-y2:#F9C721; --pill-y3:#E8A90C;
  --pill-b1:#2fa4dc; --pill-b2:#006697; --pill-b3:#004a70;
  --pill-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300324a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --pill-arrow-blue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006697' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --pill-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006697' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3Cpath d='M8.5 12h.01M12 12h.01M15.5 12h.01'/%3E%3C/svg%3E");
}
.pill-btn,
.btn.btn-yellow,
.btn.btn-outline,
.qs-visual-cta,
.svc-more,
.ct-submit{
  position:relative!important;isolation:isolate;
  display:inline-flex!important;align-items:center;
  height:var(--pill-h)!important;min-height:0!important;
  padding-block:0!important;padding-inline:30px calc(var(--pill-h) + 26px)!important;
  border:0!important;border-radius:999px!important;
  background:linear-gradient(100deg,var(--pill-y1) 0%,var(--pill-y2) 45%,var(--pill-y3) 100%)!important;
  color:#00324a!important;font-weight:800!important;text-decoration:none!important;white-space:nowrap;
  box-shadow:0 14px 22px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.55)!important;
  transition:transform .2s ease,box-shadow .2s ease;overflow:visible!important
}
/* lighter ring behind the knob */
.pill-btn::before,
.btn.btn-yellow::before,
.btn.btn-outline::before,
.qs-visual-cta::before,
.svc-more::before,
.ct-submit::before{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;inset-inline-end:0;width:calc(var(--pill-h) + 14px);
  border-radius:999px;background:linear-gradient(160deg,#fff3b0,#f6c43a 70%);
  box-shadow:-6px 0 12px -6px rgba(120,80,0,.35)
}
/* white knob with icon */
.pill-btn::after,
.btn.btn-yellow::after,
.btn.btn-outline::after,
.qs-visual-cta::after,
.svc-more::after,
.ct-submit::after{
  content:"";position:absolute;top:50%;inset-inline-end:7px;transform:translateY(-50%);
  width:calc(var(--pill-h) - 14px);height:calc(var(--pill-h) - 14px);border-radius:50%;
  background:var(--pill-arrow) center/46% no-repeat,radial-gradient(circle at 35% 30%,#fff 0%,#f1f4f7 60%,#d9e0e6 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.28),inset 0 -2px 4px rgba(0,0,0,.08)
}
html[dir="rtl"] .pill-btn::after,
html[dir="rtl"] .btn.btn-yellow::after,
html[dir="rtl"] .btn.btn-outline::after,
html[dir="rtl"] .qs-visual-cta::after,
html[dir="rtl"] .svc-more::after,
html[dir="rtl"] .ct-submit::after{transform:translateY(-50%) scaleX(-1)}
html[dir="rtl"] .pill-btn::before,
html[dir="rtl"] .btn.btn-yellow::before,
html[dir="rtl"] .btn.btn-outline::before,
html[dir="rtl"] .qs-visual-cta::before,
html[dir="rtl"] .svc-more::before,
html[dir="rtl"] .ct-submit::before{box-shadow:6px 0 12px -6px rgba(120,80,0,.35)}
.pill-btn:hover,
.btn.btn-yellow:hover,
.btn.btn-outline:hover,
.qs-visual-cta:hover,
.svc-more:hover,
.ct-submit:hover{transform:translateY(-2px);box-shadow:0 18px 26px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.55)!important}

/* secondary: brand blue version */
.pill-btn.pill-blue,
.btn.btn-outline{
  background:linear-gradient(100deg,var(--pill-b1) 0%,var(--pill-b2) 50%,var(--pill-b3) 100%)!important;color:#fff!important
}
.pill-btn.pill-blue::before,
.btn.btn-outline::before{background:linear-gradient(160deg,#7fd0f5,#1d8cc4 70%)}
.pill-btn.pill-blue::after,
.btn.btn-outline::after{background:var(--pill-chat) center/48% no-repeat,radial-gradient(circle at 35% 30%,#fff 0%,#f1f4f7 60%,#d9e0e6 100%)}
html[dir="rtl"] .btn.btn-outline::after{transform:translateY(-50%)}

/* header size */
.site-header .main-nav .nav-cta{--pill-h:48px;padding-block:0!important;padding-inline:20px calc(var(--pill-h) + 14px)!important;font-size:14.5px!important}
html[dir="rtl"] .site-header .main-nav .nav-cta{font-size:17px!important}
@media (max-width:900px){.btn.btn-yellow,.btn.btn-outline,.qs-visual-cta,.svc-more,.ct-submit{--pill-h:54px;padding-inline:22px calc(var(--pill-h) + 20px)!important}}

/* smaller pills inside cards, and full-width form submit */
.svc-more{--pill-h:50px;font-size:15.5px!important;padding-inline:20px calc(var(--pill-h) + 16px)!important}
html[dir="rtl"] .svc-more{font-size:17px!important}
.ct-submit{justify-content:center;width:auto}
.cta-banner .btn,.cta-inner .btn{--pill-h:54px}

/* make the ring/knob layers immune to older button pseudo-element rules */
.pill-btn::before,.btn.btn-yellow::before,.btn.btn-outline::before,.qs-visual-cta::before,.svc-more::before,.ct-submit::before{
  left:auto!important;right:auto!important;top:0!important;bottom:0!important;height:auto!important;inset-inline-end:0!important;
  opacity:1!important;transform:none!important;display:block!important}
.pill-btn::after,.btn.btn-yellow::after,.btn.btn-outline::after,.qs-visual-cta::after,.svc-more::after,.ct-submit::after{
  left:auto!important;right:auto!important;bottom:auto!important;inset-inline-end:7px!important;display:block!important;opacity:1!important}
.ct-submit{gap:0!important}
html[dir="rtl"] :is(.btn.btn-yellow,.btn.btn-outline,.qs-visual-cta,.ct-submit){padding-inline:32px calc(var(--pill-h) + 34px)!important;font-size:18px!important}
html[dir="rtl"] .svc-more{padding-inline:22px calc(var(--pill-h) + 26px)!important}
.ct-submit span{font-weight:800!important;font-size:inherit}
body .hero .hero-actions .btn{padding-block:0!important;padding-inline:30px calc(var(--pill-h) + 26px)!important;height:var(--pill-h)!important}
html[dir="rtl"] body .hero .hero-actions .btn{padding-inline:32px calc(var(--pill-h) + 34px)!important}
@media (max-width:900px){body .hero .hero-actions .btn{padding-inline:22px calc(var(--pill-h) + 20px)!important}}