/* The primary button, shared by every page that has one: the home page's
   Download, Resend Key on the lost-license page, Go home on 404. */
/* The label is Lato Bold, which every page with a button already loads. */
.buy-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 4px; height: 32px; padding: 8px 14px; border-radius: 424px; border: none;
  /* Set here, not inherited: a <button> takes the system font by default. */
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  cursor: pointer; background: #00acec; background: color(display-p3 0.082 0.655 0.906);
  position: relative; text-decoration: none; overflow: visible;
  box-shadow: 0 12px 10px -4px rgba(10,32,45,0.1);
  box-shadow: 0 12px 10px -4px color(display-p3 0.039 0.125 0.176 / 0.1);
  transition: box-shadow 0.3s cubic-bezier(.4,0,.2,1), transform 0.12s cubic-bezier(.4,0,.2,1);
}
/* Gloss across the top, which fades out on hover as the glow comes up. */
.buy-btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 5px 7px 2px rgba(255,255,255,0.12), inset 0 0 4px 1px rgba(255,255,255,0.12);
  mix-blend-mode: plus-lighter;
  transition: box-shadow 0.3s cubic-bezier(.4,0,.2,1);
}
@media (hover: hover) {
  .buy-btn:hover::after { box-shadow: inset 0 0 0 0 rgba(255,255,255,0), inset 0 0 0 0 rgba(255,255,255,0); }
  .buy-btn:hover {
    box-shadow: 0 12px 10px -4px rgba(10,32,45,0.1), 0 3px 14px rgba(0,172,236,0.45);
    box-shadow: 0 12px 10px -4px color(display-p3 0.039 0.125 0.176 / 0.1), 0 3px 14px color(display-p3 0.082 0.655 0.906 / 0.45);
  }
}
.buy-btn:active { box-shadow: 0 0 0 0 rgba(0,0,0,0); transform: scale(0.96); }
/* Nothing to press yet: a pale pill, no gloss, no glow. */
.buy-btn:disabled {
  background: rgba(255,255,255,0.7);
  box-shadow: none; cursor: default; transform: none;
}
.buy-btn:disabled::after { box-shadow: none; }
.buy-btn:disabled .buy-label { color: rgba(76,86,112,0.4); color: color(display-p3 0.298 0.337 0.439 / 0.4); }
.buy-btn:focus-visible { outline: 2px solid #00acec; outline-offset: 2px; }
/* z-index lifts the label above the gloss overlay, which would otherwise
   paint over the glyphs. */
.buy-label {
  font-size: 15px; font-weight: 700; line-height: 19px; letter-spacing: 0.01em;
  color: #fff; text-shadow: none; position: relative; z-index: 1;
}