/*
 * magickeys-cta.css - standout MagicKeys button at the top of every page (25 Oct 2026).
 * Added by tools/add_magickeys_header.py.
 *
 * Two placements, one shown at a time:
 *   - Wide screens (>1240px, full menu showing): .mk-strip at the end of the navy strip
 *     above the header, with a "Check this out" tag and a nudging arrow. The main header
 *     bar has no spare room at these widths (the menu fills it edge to edge).
 *   - Tablet/phone (<=1240px, menu collapsed to the burger): .mk-cta-wrap in the main
 *     header bar beside the menu button.
 * Motion is turned off for visitors who ask for reduced motion.
 */
.mk-cta-wrap,.mk-strip{align-items:center;gap:8px;white-space:nowrap}
.mk-cta-wrap{display:none}
.mk-strip{display:inline-flex}
.mk-cta-tag{display:inline-flex;align-items:center;gap:5px;color:#ffb27a;font-size:9px;font-weight:850;letter-spacing:.09em;text-transform:uppercase;line-height:1}
.mk-cta-tag svg{width:15px;height:15px;flex:none;animation:mk-nudge 1.1s ease-in-out infinite}
.mk-cta{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 13px 8px 11px;border-radius:999px;
  background:linear-gradient(100deg,#b3121f 0%,#e2361f 55%,#f36f21 100%);color:#fff !important;text-decoration:none !important;
  font-size:10px;font-weight:850;letter-spacing:.07em;text-transform:uppercase;line-height:1;
  box-shadow:0 6px 18px #b3121f55,inset 0 1px 0 #ffffff40;transition:transform .18s,box-shadow .18s;animation:mk-glow 2.4s ease-in-out infinite}
.mk-cta:hover,.mk-cta:focus-visible{transform:translateY(-1px);box-shadow:0 10px 26px #b3121f80,inset 0 1px 0 #ffffff40}
.mk-cta:focus-visible{outline:3px solid #f36f21;outline-offset:3px}
.mk-cta svg{width:15px;height:15px;flex:none}
.mk-cta .mk-cta-go{display:inline-flex;transition:transform .18s}
.mk-cta:hover .mk-cta-go{transform:translateX(3px)}
/* Strip version: fits the 30px navy strip. */
.mk-cta-sm{min-height:22px;padding:4px 11px 4px 9px;gap:6px;font-size:9px;box-shadow:0 3px 10px #00000055,inset 0 1px 0 #ffffff40}
.mk-cta-sm svg{width:13px;height:13px}
@keyframes mk-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes mk-glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
@media (prefers-reduced-motion:reduce){.mk-cta,.mk-cta-tag svg{animation:none}.mk-cta,.mk-cta .mk-cta-go{transition:none}}
/* Tablet/phone: menu is collapsed. Hide the strip copy, show the header-bar copy.
   The original header-actions block is hidden at this width; show it again for the pill
   only and keep the maintenance button hidden as before. */
@media (width<=1240px){
  .mk-strip{display:none}
  .mk-cta-wrap{display:inline-flex}
  .mk-cta-wrap .mk-cta-tag{display:none}
  .site-header .header-actions{display:flex;justify-self:end;margin-right:10px}
  .site-header .header-actions .header-cta{display:none}
}
/* Up to 1200px the header grid has two columns (logo, menu); add one for the pill so the
   menu button stays on the same row. Matches the specificity of the existing header rules.
   From 1201px the site's own 3-column rule (logo, nav, actions) applies and fits it. */
@media (max-width:1200px){html body .site-header.site-header-corporate{grid-template-columns:1fr auto auto!important}}
@media (width<=420px){.mk-cta{gap:6px;padding:8px 10px;font-size:9.5px;letter-spacing:.05em}.mk-cta .mk-cta-key{display:none}}