/* v37_16 CTA advanced variety — homepage only (scoped) */
@media (prefers-reduced-motion: reduce){
  body.home #main .ctaRow a.btn,
  body.home #main .btnRow a.btn{ transition:none !important; }
}

/* Base CTA button shape inside main content */
body.home #main .ctaRow a.btn,
body.home #main .btnRow a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 999px;
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
  box-shadow: var(--shadow);
}

/* Hover/active polish */
body.home #main .ctaRow a.btn:hover,
body.home #main .btnRow a.btn:hover{ transform: translateY(-1px); }
body.home #main .ctaRow a.btn:active,
body.home #main .btnRow a.btn:active{ transform: translateY(0px); }
body.home #main .ctaRow a.btn:focus-visible,
body.home #main .btnRow a.btn:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }

/* HERO CTA row — three distinct “shapes” via styling */
body.home #main .ctaRow a.btn{ justify-content:flex-start; }
body.home #main .ctaRow a.btn > span{ position:relative; z-index:2; }

/* 1) Primary: orb + sheen */
body.home #main .ctaRow a.btn.primary{
  padding-left: 54px;
  background: linear-gradient(180deg, rgba(120,180,255,.22), rgba(120,180,255,.06));
  border-color: rgba(120,180,255,.38) !important;
}
body.home #main .ctaRow a.btn.primary::before{
  content:"✦";
  position:absolute;
  left: 12px;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color: rgba(255,255,255,.92);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), rgba(120,180,255,.28) 55%, rgba(120,180,255,0) 72%);
  border: 1px solid rgba(255,255,255,.22);
}
body.home #main .ctaRow a.btn.primary::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(900px 220px at 12% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%);
  pointer-events:none;
}

/* 2) Download: dashed edge + arrow orb (different feel) */
body.home #main .ctaRow a.btn[href="/resources.html"]{
  padding-left: 54px;
  border-style: dashed !important;
}
body.home #main .ctaRow a.btn[href="/resources.html"]::before{
  content:"↓";
  position:absolute;
  left: 12px;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color: var(--text);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line2);
}

/* 3) Call: “pill-cut” radius + phone orb */
body.home #main .ctaRow a.btn.ghost{
  padding-left: 54px;
  border-radius: 999px 999px 20px 999px; /* subtle cut-corner */
}
body.home #main .ctaRow a.btn.ghost::before{
  content:"☎";
  position:absolute;
  left: 12px;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line2);
}

/* Secondary CTA rows (below cards / timelines): squircle + compact */
body.home #main .btnRow.topGap a.btn{
  border-radius: 18px 26px 18px 26px;  /* squircle-ish */
  padding: 12px 16px;
}

/* Timeline CTA row: keep primary strong, others compact */
body.home #main .btnRow.u-mt12 a.btn.primary{
  border-radius: 999px;
}
body.home #main .btnRow.u-mt12 a.btn{
  border-radius: 18px;
}

/* Sticky CTA (bottom) — make it feel like a floating capsule */
body.home a.stickyBtn{
  border-radius: 999px !important;
}
body.home a.stickyBtn.primary{
  background: linear-gradient(180deg, rgba(120,180,255,.22), rgba(120,180,255,.06)) !important;
  border-color: rgba(120,180,255,.38) !important;
}