/* Generation LightMode · buttons · rebrand 2028 (5 Nov 2026)
   Family: Pill Ripples. Every button is a capsule; on hover and keyboard focus a solid
   ripple ring and a dashed ripple ring open around it, like the concentric capsules in the pattern.
   Light surfaces are the default. Put .glm-on-dark on any navy surface (or an ancestor) to flip. */
:root{
  --glm-navy:#0A1A35; --glm-gold:#FDC503; --glm-teal:#12D2C5; --glm-teal-ink:#0B7A72;
  --glm-white:#fff; --glm-paper:#FBF7EE; --glm-accent:var(--glm-gold);
  --glm-font:'Montserrat','Noto Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --glm-ease:cubic-bezier(.2,.7,.2,1);
}
.glm-btn{
  --_bg:var(--glm-navy); --_fg:var(--glm-white); --_bd:transparent; --_ring:var(--glm-teal); --_h:48px; --_px:26px; --_fs:15px; --_ic:20px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--_h); padding:0 var(--_px); box-sizing:border-box;
  font:800 var(--_fs)/1 var(--glm-font); letter-spacing:.01em; text-decoration:none; white-space:nowrap;
  color:var(--_fg); background:var(--_bg); border:2px solid var(--_bd); border-radius:999px;
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:transform .18s var(--glm-ease), background-color .18s, color .18s, border-color .18s;
}
.glm-btn svg{width:var(--_ic);height:var(--_ic);flex:none;display:block}
/* Pill Ripples: two rings, outer one dashed */
.glm-btn::before,.glm-btn::after{
  content:""; position:absolute; border-radius:inherit; pointer-events:none; opacity:0;
  transition:opacity .22s var(--glm-ease), inset .26s var(--glm-ease);
}
.glm-btn::before{inset:0; border:2px solid var(--_ring)}
.glm-btn::after{inset:0; border:2px dashed var(--_ring)}
.glm-btn:hover::before,.glm-btn.is-hover::before,.glm-btn:focus-visible::before{inset:-6px; opacity:1}
.glm-btn:hover::after,.glm-btn.is-hover::after,.glm-btn:focus-visible::after{inset:-12px; opacity:.7}
.glm-btn:focus-visible{outline:none}
.glm-btn:active,.glm-btn.is-pressed{transform:scale(.97)}
.glm-btn[disabled],.glm-btn[aria-disabled="true"],.glm-btn.is-disabled{opacity:.42; cursor:not-allowed; pointer-events:none}
.glm-btn[aria-busy="true"]{cursor:progress; pointer-events:none}
.glm-btn[aria-busy="true"] svg.glm-spin{animation:glm-spin .9s linear infinite}
@keyframes glm-spin{to{transform:rotate(360deg)}}

/* variants */
.glm-btn--primary{--_bg:var(--glm-navy);--_fg:var(--glm-white)}
.glm-btn--primary svg{color:var(--glm-gold)}
.glm-btn--gold{--_bg:var(--glm-gold);--_fg:var(--glm-navy);--_ring:var(--glm-navy);--glm-accent:var(--glm-navy)}
.glm-btn--secondary{--_bg:transparent;--_fg:var(--glm-navy);--_bd:var(--glm-navy)}
.glm-btn--secondary:hover,.glm-btn--secondary.is-hover{background:rgba(10,26,53,.05)}
.glm-btn--ghost{--_bg:transparent;--_fg:var(--glm-navy);--_px:18px}
.glm-btn--ghost:hover,.glm-btn--ghost.is-hover{background:rgba(10,26,53,.06)}
.glm-btn--ghost::before,.glm-btn--ghost::after{display:none}
.glm-btn--ghost:focus-visible{box-shadow:0 0 0 2px var(--glm-white),0 0 0 4px var(--glm-teal-ink)}

/* dark (navy) surfaces */
.glm-on-dark .glm-btn,.glm-btn.glm-on-dark{--_ring:var(--glm-gold)}
.glm-on-dark .glm-btn--primary,.glm-btn--primary.glm-on-dark{--_bg:var(--glm-gold);--_fg:var(--glm-navy)}
.glm-on-dark .glm-btn--primary{--glm-accent:var(--glm-navy)}
.glm-on-dark .glm-btn--primary svg{color:var(--glm-navy)}
.glm-on-dark .glm-btn--secondary{--_fg:var(--glm-white);--_bd:rgba(255,255,255,.85)}
.glm-on-dark .glm-btn--secondary:hover,.glm-on-dark .glm-btn--secondary.is-hover{background:rgba(255,255,255,.08)}
.glm-on-dark .glm-btn--ghost{--_fg:var(--glm-white)}
.glm-on-dark .glm-btn--ghost:hover,.glm-on-dark .glm-btn--ghost.is-hover{background:rgba(255,255,255,.1)}
.glm-on-dark .glm-btn--ghost:focus-visible{box-shadow:0 0 0 2px var(--glm-navy),0 0 0 4px var(--glm-teal)}
.glm-on-dark .glm-btn--gold{--_ring:var(--glm-gold)}

/* sizes (44px is the minimum touch target) */
.glm-btn--sm{--_h:40px;--_px:20px;--_fs:13.5px;--_ic:18px}
.glm-btn--lg{--_h:56px;--_px:32px;--_fs:16.5px;--_ic:22px}
.glm-btn--block{display:flex;width:100%}

/* icon button: a circle (the sun) */
.glm-btn--icon{--_px:0;width:var(--_h);padding:0}
.glm-btn--icon.glm-btn--sm{width:40px}.glm-btn--icon.glm-btn--lg{width:56px}
.glm-btn--icon.glm-btn--ghost{--_bg:transparent}
.glm-btn--primary:is(.glm-btn--icon) svg{color:var(--glm-gold)}
.glm-btn--icon.glm-btn--soft{--_bg:rgba(10,26,53,.07);--_fg:var(--glm-navy)}
.glm-on-dark .glm-btn--primary:is(.glm-btn--icon) svg{color:var(--glm-gold)}
.glm-btn--icon.glm-btn--soft{--_bg:rgba(255,255,255,.12);--_fg:var(--glm-white)}
.glm-btn[aria-pressed="true"]{--_bg:var(--glm-navy);--_fg:var(--glm-teal)}
.glm-on-dark .glm-btn[aria-pressed="true"]{--_bg:rgba(18,210,197,.16);--_fg:var(--glm-teal)}

/* store badges: a stand-in. Replace with the official Apple and Google badge artwork on store pages. */
.glm-store{--_h:56px;--_px:22px;--_bg:var(--glm-navy);--_fg:var(--glm-white);gap:12px;text-align:left}
.glm-store svg{--_ic:26px;color:var(--glm-gold)}
.glm-store small{display:block;font:600 10.5px/1.1 var(--glm-font);letter-spacing:.04em;opacity:.8;text-transform:none}
.glm-store b{display:block;font:800 17px/1.15 var(--glm-font)}
.glm-on-dark .glm-store{--_bg:transparent;--_bd:rgba(255,255,255,.85);--_fg:var(--glm-white)}

/* social: round glyph buttons, and the labelled pill */
.glm-social{--_bg:transparent;--_fg:var(--glm-navy);--_bd:rgba(10,26,53,.9);--_px:0;width:var(--_h);padding:0}
.glm-social:hover,.glm-social.is-hover{background:var(--glm-navy);--_fg:var(--glm-white)}
.glm-on-dark .glm-social{--_fg:var(--glm-white);--_bd:rgba(255,255,255,.85)}
.glm-on-dark .glm-social:hover,.glm-on-dark .glm-social.is-hover{background:var(--glm-gold);--_fg:var(--glm-navy);--_bd:var(--glm-gold)}
.glm-social--label{width:auto;padding:0 22px;--_bg:transparent}

@media (prefers-reduced-motion:reduce){
  .glm-btn,.glm-btn::before,.glm-btn::after{transition:none}
  .glm-btn:active{transform:none}
  .glm-btn[aria-busy="true"] svg.glm-spin{animation-duration:2.4s}
}
@media (forced-colors:active){.glm-btn{border-color:ButtonText}.glm-btn::before,.glm-btn::after{border-color:Highlight}}