/* ============================================================
   bmp.css -- the BUILD MY PLAN button, everywhere on the site.

   One look so families learn to recognise it: gold, a small plan
   mark, a fine inner edge, and a slow light sweep on hover. Use it
   on any link or button:

     <a class="ggk-bmp" href="apply.html">Build My Plan</a>
     <a class="ggk-bmp ggk-bmp--lg" href="apply.html">Build My Plan</a>

   nav.js adds this file to every page that has the shared nav, so
   it never needs adding by hand. The homepage links it in <head>
   so the hero button is styled from the first frame.
   ============================================================ */
.ggk-bmp {
  --bmp-gold: #c9952a;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px 14px 18px;
  background: linear-gradient(180deg, #d9a842 0%, var(--bmp-gold) 100%);
  color: #071729 !important;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: .86rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1; white-space: nowrap; text-decoration: none !important;
  border: 0; border-radius: 2px; cursor: pointer; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 10px 26px -12px rgba(201,149,42,.75);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
/* the plan mark: a card with a tick, drawn in CSS so it follows the text colour */
.ggk-bmp::before {
  content: ''; flex: none; width: 15px; height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 17'%3E%3Cpath d='M2 0h11a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm1 4v1.6h9V4H3zm0 3.6v1.6h5.5V7.6H3zm6.6 6.1 4-4-1.1-1.1-2.9 2.9-1.3-1.3-1.1 1.1z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 17'%3E%3Cpath d='M2 0h11a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm1 4v1.6h9V4H3zm0 3.6v1.6h5.5V7.6H3zm6.6 6.1 4-4-1.1-1.1-2.9 2.9-1.3-1.3-1.1 1.1z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* the light sweep */
.ggk-bmp::after {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); transition: left .7s ease;
}
.ggk-bmp:hover { transform: translateY(-1px); color: #071729 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 14px 30px -12px rgba(201,149,42,.9); }
.ggk-bmp:hover::after { left: 120%; }
.ggk-bmp:active { transform: translateY(0); }
.ggk-bmp:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ggk-bmp--lg { padding: 19px 30px 19px 24px; font-size: 1rem; gap: 12px; }
.ggk-bmp--lg::before { width: 17px; height: 19px; }
.ggk-bmp--block { display: flex; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .ggk-bmp, .ggk-bmp::after { transition: none; }
  .ggk-bmp:hover::after { left: -60%; }
}