/* =====================================================================
   Button / CTA — filled pill button (Figma 10159:19251)
   Variants:
     .btn--primary  (default) — Brand Blue fill, 16/Regular white, trailing
                                arrow-right icon. Node 10159:19251.
     .btn--secondary          — Gray fill, 18/Bold white, Shadow-100 drop
                                shadow, no icon. "Start the Switch" 10159:9377.
   Arrow tinted via CSS mask (matches header price-bar__arrow pattern) so the
   glyph inherits the label colour. Token-only; BEM, .btn-scoped.
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  border-radius: var(--radius-8);
  color: var(--gray-0);
  font-family: var(--font-sans);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

.btn__label {
  word-break: break-word;
}

/* ---- Trailing arrow (primary). Tinted to label colour via mask. ---- */
.btn__arrow {
  flex-shrink: 0;
  width: var(--btn-icon);
  height: var(--btn-icon);
  background-color: currentColor;
  -webkit-mask: url("../../img/arrow-right.svg") no-repeat center / contain;
          mask: url("../../img/arrow-right.svg") no-repeat center / contain;
}

/* ---- Primary — Brand Blue, 16px Regular ---- */
.btn--primary {
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: var(--brand-blue);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: normal;
}

/* ---- Secondary ("Contact Gold Avenue") — OneGold Blue, 18px Bold, no icon ----
   Figma 10202:7622: bg #0080F3, 14/24 padding, white Bold 18/25. */
.btn--secondary {
  padding: 14px var(--btn-pad-x-lg);
  background: var(--og-blue);
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  line-height: var(--lh-25);
}
.btn--secondary:hover { background: #006fd6; }

/* ---- OG filled ("Get Started") — OneGold Blue, 16px Medium, no icon ----
   Figma 8059:65746: bg #0080F3, 14/24 padding, white Medium 16/letterSpacing
   0.16px, radius 8. Pages omit .btn__arrow. ADDITIVE — does not touch existing
   .btn--primary / .btn--secondary. */
.btn--og {
  padding: 14px var(--btn-pad-x-lg);
  background: var(--og-blue);
  color: var(--gray-0);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0.16px;
}
.btn--og:hover { background: #006fd6; }

/* ---- OG outline ("Learn More") — white bg, 1px OneGold Blue border, blue
   16px Medium label. Figma 8059:65751. Same metrics as .btn--og. ---- */
.btn--og-outline {
  padding: 14px var(--btn-pad-x-lg);
  background: var(--gray-0);
  border: 1px solid var(--og-blue);
  color: var(--og-blue);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0.16px;
}
.btn--og-outline:hover { background: var(--pale-blue); }

/* ---- Mobile 390 — button keeps its fixed pill shape (M frames: 244x49). ---- */
@media (max-width: 767.98px) {
  .btn {
    max-width: 100%;
    white-space: nowrap;
  }
  .btn__label {
    white-space: nowrap;
  }
}