/* Shared call-to-action buttons. Loaded last in <head>, so it overrides each page's older button rules.
   Adapted to plain CSS from 21st.dev: "Shiny Button" (hyperiux) for main actions and
   "Animated Gradient Button" (uiable) for secondary actions. */
@property --btn-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes btn-sweep{to{--btn-angle:360deg}}

.btn-sm,.btn-lg,.btn,.csub,.calc-go,.res-cta,.modal-cta,.wa-cta,.pcard-wa,.article-cta a{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:999px;border:2px solid transparent;color:#fff;
  font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.01em;line-height:1.2;
  text-align:center;text-decoration:none;cursor:pointer;
  transition:transform .25s cubic-bezier(.25,1,.5,1),box-shadow .25s,filter .25s;
}
.csub,.calc-go,.res-cta,.modal-cta{display:flex;width:100%;}
.btn-lg{padding:.9rem 1.9rem;font-size:.95rem;}
.btn-sm{padding:.55rem 1.15rem;font-size:.82rem;}
.csub,.calc-go{padding:.95rem 1.5rem;font-size:1rem;}
.res-cta,.modal-cta{padding:.85rem 1.25rem;}
.article-cta a{padding:.7rem 1.5rem;font-size:.88rem;}
.wa-cta{padding:.5rem 1.1rem;font-size:.8rem;}
.pcard-wa{padding:.5rem 1rem;font-size:.75rem;}

/* Colours: every pair keeps white text at 4.5:1 contrast or better */
.btn-solid,.btn-solid-green,.btn-home,.calc-go,.modal-cta,.btn-green{
  --a:#1e7a2a;--b:#23863a;--edge:#6FCF3A;--glow:rgba(60,182,74,.45);
}
.btn-wa,.csub,.res-cta,.wa-cta,.pcard-wa,.article-cta a{
  --a:#0f7f4f;--b:#0e8345;--edge:#5BE39A;--glow:rgba(37,211,102,.4);
}
.btn-solid-blue,.nav-right .btn-green{--a:#115c96;--b:#1A5DAB;--edge:#7cc0ff;--glow:rgba(26,93,171,.45);}
.btn-solid,.btn-solid-green,.btn-solid-blue,.btn-home,.calc-go,.modal-cta,.btn-green,.btn-wa,.csub,.res-cta,.wa-cta,.pcard-wa,.article-cta a{
  background:linear-gradient(135deg,var(--a),var(--b)) padding-box,linear-gradient(135deg,var(--a),var(--b)) border-box;
}

/* Main actions: moving light around the edge */
.btn-solid,.btn-solid-green,.btn-home,.calc-go,.csub,.res-cta,.btn.btn-wa{
  background:linear-gradient(135deg,var(--a),var(--b)) padding-box,
    conic-gradient(from var(--btn-angle),var(--a) 0 62%,var(--edge) 78%,#fff 86%,var(--edge) 94%,var(--a)) border-box;
  animation:btn-sweep 3.5s linear infinite;
}
/* White version for the coloured banner on the homepage */
.cta-band .btn-solid{
  color:#1e7a2a;--glow:rgba(255,255,255,.4);
  background:linear-gradient(#fff,#fff) padding-box,
    conic-gradient(from var(--btn-angle),#fff 0 62%,#6FCF3A 78%,#1e7a2a 86%,#6FCF3A 94%,#fff) border-box;
}

/* Secondary actions: colour slides in from the left */
.btn-ghost,.btn-ghost-w{
  position:relative;isolation:isolate;overflow:hidden;
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.55);color:#fff;
  --glow:rgba(111,207,58,.35);
}
.btn-ghost::before,.btn-ghost-w::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(90deg,#1e7a2a,#115c96);
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1);
}

/* Icons take the button's text colour */
.ico{display:inline-block;flex:none;width:1.2em;height:1.2em;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;
  transition:transform .3s cubic-bezier(.16,1,.3,1);}
.ico-wa{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z%22/%3E%3C/svg%3E");}
.ico-wind{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2%22/%3E%3Cpath d=%22M9.6 4.6A2 2 0 1 1 11 8H2%22/%3E%3Cpath d=%22M12.6 19.4A2 2 0 1 0 14 16H2%22/%3E%3C/svg%3E");}
.ico-bolt{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13 2 3 14h9l-1 8 10-12h-9l1-8z%22/%3E%3C/svg%3E");}
.ico-doc{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z%22/%3E%3Cpath d=%22M14 2v6h6M8 13h8M8 17h8%22/%3E%3C/svg%3E");}
.ico-arrow{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14M13 6l6 6-6 6%22/%3E%3C/svg%3E");}

@media(hover:hover){
  .btn-solid:hover,.btn-solid-green:hover,.btn-solid-blue:hover,.btn-home:hover,.calc-go:hover,.modal-cta:hover,.btn-green:hover,
  .btn-wa:hover,.csub:hover,.res-cta:hover,.wa-cta:hover,.pcard-wa:hover,.article-cta a:hover,.btn-ghost:hover,.btn-ghost-w:hover{
    transform:translateY(-2px);box-shadow:0 10px 26px var(--glow);filter:brightness(1.07);
  }
  .btn-ghost:hover,.btn-ghost-w:hover{border-color:rgba(255,255,255,.85);background:rgba(255,255,255,.06);}
  .btn-ghost:hover::before,.btn-ghost-w:hover::before{transform:scaleX(1);}
  a:hover>.ico-arrow,button:hover>.ico-arrow{transform:translateX(4px);}
}
.btn-sm:active,.btn-lg:active,.btn:active,.csub:active,.calc-go:active,.res-cta:active,.modal-cta:active,.wa-cta:active,.pcard-wa:active,.article-cta a:active{transform:translateY(0) scale(.98);}
.btn-sm:focus-visible,.btn-lg:focus-visible,.btn:focus-visible,.csub:focus-visible,.calc-go:focus-visible,.res-cta:focus-visible,.modal-cta:focus-visible,.pcard-wa:focus-visible,.article-cta a:focus-visible{outline:3px solid #6FCF3A;outline-offset:3px;}
@media(prefers-reduced-motion:reduce){
  .btn-sm,.btn-lg,.btn,.csub,.calc-go,.res-cta,.modal-cta,.wa-cta,.pcard-wa,.article-cta a,.ico,.btn-ghost::before,.btn-ghost-w::before{animation:none;transition:none;}
}

/* Menu bar buttons stay on one line */
.nav-right .btn-sm{padding:.5rem 1rem;font-size:.8rem;white-space:nowrap;flex:none;}
/* Keeps icons level with text in ordinary links */
.ico{vertical-align:-.22em;}
/* Small tablets: no room for both, and the page itself still offers the calculator */
@media(max-width:900px){.nav-right .btn-green{display:none;}}