/* ==========================================================================
   Glossy buttons — Over the Hump Saver · production build 2026-09-04 (rev g)
   Look "E": bright candy gloss, 8px tab corners, coloured base under the button,
   outline glint + corner sparkle. Drop-in layer over the existing button styles —
   no markup changes (gloss-buttons.js injects one <span class="gloss-edge"> per button).
   Covers the Saver pages AND the Business Directory (SPA index + render.php pages).

   Specificity note: the shared rules use :is() so they beat every page rule they must
   override, which gives them specificity (0,3,1). Every per-colour / per-class override
   below therefore carries the booster ".gx.gx.gx" inside its :is() list — that class is
   never used in markup; it only lifts the rule to (0,3,1) so source order decides.
   ========================================================================== */

:root{ --gloss-ease: cubic-bezier(.2,.9,.3,1.35); }

/* ---------- 1. mechanics for every button the layer touches ---------- */
body :is(.btn, .nav .advertise, .scx-cta, .vbstrip .vb-cap .go, .pitch .cta,
         .ahb-go, .ah-chip, .btn-print, .rask button, .fbtn, .act,
         .subscribe button, .dir-search button[type="submit"], .foot-sub button,
         .s-btn, .cta-btn, .back-btn, .map-btn, .profile-btn, .hero-mini-actions .rm-open, .hero-mini-actions a, .rm-cta, .cta, .hank-chips button,
         .ah-pill, .wx-pill, .rpill){
  position:relative; overflow:hidden; isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  transition: transform .22s var(--gloss-ease), box-shadow .22s ease, filter .22s ease,
              background-color .2s ease, color .2s ease, border-color .2s ease;
}
body :is(.rpill, .gx.gx.gx){ position:absolute; }                 /* keeps its place over the reader */
body :is(.vbstrip .vb-cap .go, .gx.gx.gx){ display:inline-block; } /* a span: needs a box for the gloss */

/* ---------- 2. the E look: full-size buttons ---------- */
body :is(.btn, .nav .advertise, .scx-cta, .vbstrip .vb-cap .go, .pitch .cta,
         .ahb-go, .ah-chip, .btn-print, .rask button, .fbtn, .act,
         .subscribe button, .dir-search button[type="submit"], .foot-sub button,
         .s-btn, .cta-btn, .back-btn, .map-btn, .profile-btn, .hero-mini-actions .rm-open, .hero-mini-actions a, .rm-cta, .cta, .hank-chips button){
  --g: 34,36,43;                                   /* glow / base colour, set per colour below */
  border-radius:8px;
  border:1px solid rgba(0,0,0,.22);
  background-image:linear-gradient(180deg,
      rgba(255,255,255,.38) 0%, rgba(255,255,255,.16) 44%,
      rgba(0,0,0,.02) 52%, rgba(0,0,0,.14) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8),
              inset 0 -4px 8px rgba(0,0,0,.13),
              0 5px 0 -1px rgba(var(--g),.55),
              0 10px 20px -8px rgba(0,0,0,.32);
  transform:translateY(-2px);
  filter:saturate(1.04);
  text-shadow:0 1px 1px rgba(0,0,0,.25);
}
/* the glass highlight across the top half */
body :is(.btn, .nav .advertise, .scx-cta, .vbstrip .vb-cap .go, .pitch .cta,
         .ahb-go, .ah-chip, .btn-print, .rask button, .fbtn, .act,
         .subscribe button, .dir-search button[type="submit"], .foot-sub button,
         .s-btn, .cta-btn, .back-btn, .map-btn, .profile-btn, .hero-mini-actions .rm-open, .hero-mini-actions a, .rm-cta, .cta, .hank-chips button)::before{
  content:""; position:absolute; left:3px; right:3px; top:2px; height:50%;
  border-radius:7px 7px 30% 30%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.62) 55%, rgba(255,255,255,.08) 100%);
  opacity:.9; transform-origin:50% 0;
  transition:opacity .2s ease, transform .2s ease;
}
/* the light sweep (plays on hover) */
body :is(.btn, .nav .advertise, .scx-cta, .vbstrip .vb-cap .go, .pitch .cta,
         .ahb-go, .ah-chip, .btn-print, .rask button, .fbtn, .act,
         .subscribe button, .dir-search button[type="submit"], .foot-sub button,
         .s-btn, .cta-btn, .back-btn, .map-btn, .profile-btn, .hero-mini-actions .rm-open, .hero-mini-actions a, .rm-cta, .cta, .hank-chips button)::after{
  content:""; position:absolute; top:-40%; bottom:-40%; left:-60%; width:38%;
  z-index:2; pointer-events:none; opacity:0; transform:skewX(-22deg);
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.8) 50%, rgba(255,255,255,0) 100%);
}
/* hover: lift, glow, brighter glass */
body :is(.btn:hover, .nav .advertise:hover, .scx-cta:hover, .scx-card:focus-visible .scx-cta,
         .vbstrip a.vb-card:hover .go, .vbstrip a.vb-card:focus-visible .go, .pitch .cta:hover,
         .ahb-go:hover, .ah-chip:hover, .btn-print:hover, .rask button:hover, .fbtn:hover, .act:hover,
         .subscribe button:hover, .dir-search button[type="submit"]:hover, .foot-sub button:hover,
         .s-btn:hover, .cta-btn:hover, .back-btn:hover, .map-btn:hover, .profile-btn:hover, .hero-mini-actions .rm-open:hover, .hero-mini-actions a:hover, .rm-cta:hover, .cta:hover, .hank-chips button:hover){
  transform:translateY(-4px) scale(1.04);
  filter:brightness(1.05) saturate(1.08);
  background-image:linear-gradient(180deg,
      rgba(255,255,255,.44) 0%, rgba(255,255,255,.2) 44%,
      rgba(0,0,0,.01) 52%, rgba(0,0,0,.12) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85),
              inset 0 -4px 8px rgba(0,0,0,.11),
              0 7px 0 -1px rgba(var(--g),.55),
              0 18px 28px -10px rgba(0,0,0,.38),
              0 0 0 5px rgba(var(--g),.16);
}
body :is(.btn:hover, .nav .advertise:hover, .scx-cta:hover, .vbstrip a.vb-card:hover .go, .pitch .cta:hover,
         .ahb-go:hover, .ah-chip:hover, .btn-print:hover, .rask button:hover, .fbtn:hover, .act:hover,
         .subscribe button:hover, .dir-search button[type="submit"]:hover, .foot-sub button:hover,
         .s-btn:hover, .cta-btn:hover, .back-btn:hover, .map-btn:hover, .profile-btn:hover, .hero-mini-actions .rm-open:hover, .hero-mini-actions a:hover, .rm-cta:hover, .cta:hover, .hank-chips button:hover)::after{
  animation:gloss-sweep .75s ease-out forwards;
}
/* press: sink into the base */
body :is(.btn:active, .nav .advertise:active, .scx-cta:active, .vbstrip a.vb-card:active .go, .pitch .cta:active,
         .ahb-go:active, .ah-chip:active, .btn-print:active, .rask button:active, .fbtn:active, .act:active,
         .subscribe button:active, .dir-search button[type="submit"]:active, .foot-sub button:active,
         .s-btn:active, .cta-btn:active, .back-btn:active, .map-btn:active, .profile-btn:active, .hero-mini-actions .rm-open:active, .hero-mini-actions a:active, .rm-cta:active, .cta:active, .hank-chips button:active){
  transform:translateY(2px) scale(.985);
  filter:brightness(.97);
  background-image:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(0,0,0,.02) 50%, rgba(0,0,0,.16) 100%);
  box-shadow: inset 0 4px 10px rgba(0,0,0,.26),
              inset 0 1px 0 rgba(255,255,255,.2),
              0 1px 0 -1px rgba(var(--g),.55),
              0 3px 6px -3px rgba(0,0,0,.35);
  transition-duration:.07s;
}
body :is(.btn:active, .nav .advertise:active, .scx-cta:active, .pitch .cta:active,
         .ahb-go:active, .ah-chip:active, .btn-print:active, .rask button:active, .fbtn:active, .act:active,
         .subscribe button:active, .dir-search button[type="submit"]:active, .foot-sub button:active,
         .s-btn:active, .cta-btn:active, .back-btn:active, .map-btn:active, .profile-btn:active, .hero-mini-actions .rm-open:active, .hero-mini-actions a:active, .rm-cta:active, .cta:active, .hank-chips button:active)::before{
  opacity:.5; transform:scaleY(.8);
}
/* release: spring back */
.is-popping{ animation:gloss-pop-d .5s var(--gloss-ease); }
body :is(.btn, .nav .advertise, .pitch .cta, .ahb-go, .ah-chip, .btn-print, .rask button, .fbtn, .act,
         .subscribe button, .dir-search button[type="submit"], .foot-sub button,
         .s-btn, .cta-btn, .back-btn, .map-btn, .profile-btn, .hero-mini-actions .rm-open, .hero-mini-actions a, .rm-cta, .cta, .hank-chips button):focus-visible{
  outline:3px solid var(--gold-bright, #D9B254); outline-offset:3px;
}

/* ---------- 3. colours: same palette as today (every rule boosted with .gx.gx.gx, see note) ---------- */
/* red family */
body :is(.btn.btn-red, .nav .advertise, .ahb-go, .rask button, .pitch .cta, .foot-sub button, .vbstrip .vb-cap .go, .gx.gx.gx){
  --g:166,35,28; background-color:var(--red, #A6231C); color:#FFF3E3; border-color:#5F110C; }
body :is(.btn.btn-red:hover, .nav .advertise:hover, .ahb-go:hover, .rask button:hover, .pitch .cta:hover, .foot-sub button:hover, .vbstrip a.vb-card:hover .go, .gx.gx.gx){ background-color:#B8281F; }
body :is(.btn.btn-red:active, .nav .advertise:active, .ahb-go:active, .rask button:active, .pitch .cta:active, .foot-sub button:active, .gx.gx.gx){ background-color:var(--red-deep, #7E1812); }
/* navy family: form buttons, the directory search "Ask" and the Hank suggestion chips (same look as the Ask button) */
body :is(.subscribe button, .dir-search button[type="submit"], .btn-print, .ah-chip, .gx.gx.gx){
  --g:30,58,95; background-color:var(--navy, #1E3A5F); color:#F2EBD9; border-color:#0F2038; }
body :is(.subscribe button:hover, .dir-search button[type="submit"]:hover, .btn-print:hover, .ah-chip:hover, .gx.gx.gx){ background-color:#25497A; color:#FFF8EA; border-color:#0F2038; }
body :is(.subscribe button:active, .dir-search button[type="submit"]:active, .btn-print:active, .ah-chip:active, .gx.gx.gx){ background-color:var(--navy-deep, #152C4A); color:#FFF8EA; }
body :is(.ah-chip, .gx.gx.gx){ font-weight:700; }
/* gold + bee */
body :is(.btn.btn-gold, .gx.gx.gx){ --g:122,88,24; background-color:var(--gold, #C29A3B); color:#2A2210; border-color:#8B6A21; text-shadow:0 1px 0 rgba(255,255,255,.5); }
body :is(.btn.btn-gold:hover, .gx.gx.gx){ background-color:var(--gold-bright, #D9B254); }
body :is(.btn.btn-bee, .gx.gx.gx){ --g:150,110,0; background-color:#F1C521; color:#2B2308; border-color:#A88200; text-shadow:0 1px 0 rgba(255,255,255,.5); }
body :is(.btn.btn-bee:hover, .gx.gx.gx){ background-color:#F6CF3A; }
/* ghost: frosted glass on a navy base, fills navy on hover (as today) */
body :is(.btn.btn-ghost, .gx.gx.gx){
  --g:30,58,95;
  background-color:rgba(255,255,255,.4); color:var(--navy, #1E3A5F); border-color:rgba(30,58,95,.55);
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(6px) saturate(1.3); backdrop-filter:blur(6px) saturate(1.3);
}
body :is(.btn.btn-ghost:hover, .gx.gx.gx){ background-color:var(--navy, #1E3A5F); color:#F2EBD9; text-shadow:0 1px 1px rgba(0,0,0,.35); }
body :is(.btn.btn-ghost:active, .gx.gx.gx){ background-color:var(--navy-deep, #152C4A); color:#F2EBD9; }
/* archive filter buttons: cream glass, red when pressed */
body :is(.fbtn, .gx.gx.gx){ --g:30,58,95; text-shadow:0 1px 0 rgba(255,255,255,.55); }
body :is(.fbtn[aria-pressed="true"], .gx.gx.gx){ --g:166,35,28; background-color:var(--red, #A6231C); color:#FBF3E2; border-color:#5F110C; text-shadow:0 1px 1px rgba(0,0,0,.25); }
/* showcase flyer button: purple at rest, orange on hover (its own tokens) */
body :is(.scx-cta, .gx.gx.gx){ --g:226,86,11; background-color:var(--scx-purple, #552C6D); border-color:var(--scx-purple-deep, #341A44); color:#FBF3E6; }
body :is(.scx-cta:hover, .scx-card:focus-visible .scx-cta, .gx.gx.gx){ background-color:var(--scx-orange, #E2560B); border-color:var(--scx-orange-deep, #A43804); }
body :is(.scx-cta:active, .gx.gx.gx){ background-color:var(--scx-orange-deep, #A43804); }
/* showcase card: hovering the graphic animates the card only; hovering the button animates the button only */
body :is(.scx-card:hover .scx-cta svg, .gx.gx.gx){ transform:none; }
body :is(.scx-cta:hover svg, .scx-card:focus-visible .scx-cta svg, .gx.gx.gx){ transform:translate(3px,-3px); }
body :is(.scx-card:has(.scx-cta:hover), .gx.gx.gx){ transform:none; box-shadow:7px 7px 0 var(--scx-purple-deep, #341A44); border-top-color:var(--scx-purple, #552C6D); }
@media (max-width:620px){ body :is(.scx-card:has(.scx-cta:hover), .gx.gx.gx){ box-shadow:5px 5px 0 var(--scx-purple-deep, #341A44); } }
body :is(.scx-card:has(.scx-cta:hover) .scx-img, .gx.gx.gx){ transform:none; filter:none; }
body :is(.scx-card:has(.scx-cta:hover) .scx-sheen, .gx.gx.gx){ animation:none; }
body :is(.scx-card:has(.scx-cta:hover) .scx-glow, .gx.gx.gx){ opacity:0; }
/* flyer page actions keep their own purple / orange colours */
body :is(.act, .gx.gx.gx){ --g:85,44,109; }
body :is(.act.solid, .gx.gx.gx){ --g:226,86,11; }
/* the nav tab gets a touch more room */
body :is(.nav .advertise, .gx.gx.gx){ padding-left:1.25rem; padding-right:1.25rem; }

/* ---------- 3b. Business Directory: its own coral / teal / cream palette stays, the gloss goes on top ---------- */
body :is(.s-btn, .cta-btn.cta-add, .hero-mini-actions .rm-open, .rm-cta, .cta, .gx.gx.gx){ --g:166,58,37; }        /* coral fills */
body :is(.profile-btn, .gx.gx.gx){ --g:6,38,63; }                                                                   /* teal fill (SPA) / cream outline (pages) */
body :is(.cta-btn.cta-upgrade, .back-btn, .map-btn, .hank-chips button, .gx.gx.gx){ --g:107,63,31; text-shadow:0 1px 0 rgba(255,255,255,.55); }  /* light outline buttons */
body :is(.s-btn, .gx.gx.gx){ border-color:#5E1D10; }
body :is(.hero-mini-actions a, .gx.gx.gx){ --g:214,154,45; text-shadow:0 1px 0 rgba(255,255,255,.55); border-color:rgba(160,110,20,.6); }

/* ---------- 4. the top-bar pills + reader pill: same glass, kept as pills, matched height ---------- */
body :is(.ah-pill, .wx-pill, .rpill){
  background-image:linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.1) 48%, rgba(0,0,0,.02) 52%, rgba(0,0,0,.12) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 5px rgba(0,0,0,.12), 0 3px 0 -1px rgba(var(--g),.5), 0 6px 12px -5px rgba(0,0,0,.35);
}
body :is(.ah-pill, .wx-pill, .rpill)::before{
  content:""; position:absolute; left:2px; right:2px; top:1px; height:48%; border-radius:999px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.35) 60%, rgba(255,255,255,0) 100%); opacity:.8;
}
body :is(.ah-pill, .wx-pill, .rpill):hover{
  transform:translateY(-2px) scale(1.04); filter:brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 5px rgba(0,0,0,.1), 0 5px 0 -1px rgba(var(--g),.5), 0 10px 18px -8px rgba(0,0,0,.45);
}
body :is(.ah-pill, .wx-pill, .rpill):active{
  transform:translateY(1px) scale(.96); filter:brightness(.95);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.28), 0 1px 0 -1px rgba(var(--g),.5); transition-duration:.07s;
}
body :is(.wx-pill, .gx.gx.gx){ --g:194,154,59; text-shadow:0 1px 0 rgba(255,255,255,.45); }
body :is(.ah-pill, .gx.gx.gx){ --g:30,58,95; text-shadow:0 1px 0 rgba(255,255,255,.6); }
body :is(.rpill, .gx.gx.gx){ --g:30,58,95; }
/* the two top-bar pills share one height and one type size */
body :is(.ah-pill, .wx-pill, .gx.gx.gx){ height:26px; box-sizing:border-box; padding-top:0; padding-bottom:0; line-height:1; align-items:center; font-size:.74rem; }
body :is(.ah-pill, .wx-pill, .rpill):focus-visible{ outline:2px solid var(--gold-bright, #D9B254); outline-offset:2px; }

/* ---------- 5. outline glint + corner sparkle (spans injected by gloss-buttons.js) ---------- */
.gloss-edge{
  position:absolute; inset:-1px; border-radius:inherit; z-index:3; pointer-events:none; overflow:hidden;
  padding:1.5px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  opacity:.55; transition:opacity .25s ease;
}
.gloss-edge::before{
  content:""; position:absolute; left:50%; top:50%; width:260%; padding-top:260%; margin:-130% 0 0 -130%;
  border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,255,255,0) 0 74%, rgba(255,255,255,.55) 82%, rgba(255,255,255,1) 86%, rgba(255,255,255,.55) 90%, rgba(255,255,255,0) 96% 100%);
  animation:gloss-edge-spin 7s linear infinite;
  animation-delay:var(--gloss-delay, 0s);
}
:is(.btn, .nav .advertise, .pitch .cta, .ahb-go, .ah-chip, .btn-print, .rask button, .fbtn, .act,
    .subscribe button, .dir-search button[type="submit"], .foot-sub button,
    .s-btn, .cta-btn, .back-btn, .map-btn, .profile-btn, .rm-open, .hero-mini-actions a, .rm-cta, .cta, .hank-chips button,
    .ah-pill, .wx-pill, .rpill):hover > .gloss-edge,
.scx-cta:hover > .gloss-edge, .vbstrip a.vb-card:hover .go > .gloss-edge{ opacity:1; }
:is(.btn, .nav .advertise, .pitch .cta, .ahb-go, .ah-chip, .btn-print, .rask button, .fbtn, .act,
    .subscribe button, .dir-search button[type="submit"], .foot-sub button,
    .s-btn, .cta-btn, .back-btn, .map-btn, .profile-btn, .rm-open, .hero-mini-actions a, .rm-cta, .cta, .hank-chips button,
    .ah-pill, .wx-pill, .rpill):hover > .gloss-edge::before,
.scx-cta:hover > .gloss-edge::before, .vbstrip a.vb-card:hover .go > .gloss-edge::before{ animation-duration:1.3s; animation-delay:0s; }
/* the sparkle: a small four-point star at the top-right corner every few seconds */
.gloss-edge::after{
  content:""; position:absolute; top:-4px; right:8%; width:14px; height:14px; pointer-events:none;
  background:
    radial-gradient(circle, rgba(255,255,255,1) 0 12%, rgba(255,255,255,0) 40%),
    linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.95)) 50% 50% / 2px 100% no-repeat,
    linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.95)) 50% 50% / 100% 2px no-repeat;
  opacity:0; transform:scale(.2) rotate(0deg);
  animation:gloss-twinkle 6.5s ease-in-out infinite;
  animation-delay:var(--gloss-delay, 0s);
  filter:drop-shadow(0 0 3px rgba(255,255,255,.9));
}

/* ---------- 6. ripple + keyframes ---------- */
.gloss-ripple{
  position:absolute; border-radius:50%; z-index:1; pointer-events:none;
  background:rgba(255,255,255,.65); mix-blend-mode:screen;
  transform:scale(0); opacity:.9;
  animation:gloss-ripple .65s ease-out forwards;
}
@keyframes gloss-ripple{ to{ transform:scale(3.4); opacity:0; } }
@keyframes gloss-sweep{ 0%{ left:-60%; opacity:0; } 12%{ opacity:1; } 100%{ left:125%; opacity:0; } }
@keyframes gloss-edge-spin{ to{ transform:rotate(360deg); } }
@keyframes gloss-twinkle{
  0%, 88%{ opacity:0; transform:scale(.2) rotate(0deg); }
  92%{ opacity:1; transform:scale(1) rotate(35deg); }
  96%, 100%{ opacity:0; transform:scale(.2) rotate(70deg); }
}
@keyframes gloss-pop-d{
  0%{ transform:translateY(2px) scale(.985); }
  45%{ transform:translateY(-6px) scale(1.07); }
  72%{ transform:translateY(-3px) scale(1.02); }
  100%{ transform:translateY(-4px) scale(1.04); }
}

/* ---------- 7. reduced motion: keep the look, drop the movement ---------- */
@media (prefers-reduced-motion: reduce){
  body :is(.btn, .nav .advertise, .scx-cta, .vbstrip .vb-cap .go, .pitch .cta, .ahb-go, .ah-chip, .btn-print, .rask button, .fbtn, .act,
           .subscribe button, .dir-search button[type="submit"], .foot-sub button,
           .s-btn, .cta-btn, .back-btn, .map-btn, .profile-btn, .hero-mini-actions .rm-open, .hero-mini-actions a, .rm-cta, .cta, .hank-chips button,
           .ah-pill, .wx-pill, .rpill){ transition:none; }
  body :is(.btn:hover, .nav .advertise:hover, .scx-cta:hover, .vbstrip a.vb-card:hover .go, .pitch .cta:hover, .ahb-go:hover, .ah-chip:hover, .btn-print:hover, .rask button:hover, .fbtn:hover, .act:hover,
           .subscribe button:hover, .dir-search button[type="submit"]:hover, .foot-sub button:hover,
           .s-btn:hover, .cta-btn:hover, .back-btn:hover, .map-btn:hover, .profile-btn:hover, .hero-mini-actions .rm-open:hover, .hero-mini-actions a:hover, .rm-cta:hover, .cta:hover, .hank-chips button:hover,
           .ah-pill:hover, .wx-pill:hover, .rpill:hover){ transform:translateY(-2px); }
  .gloss-edge::before, .gloss-edge::after{ animation:none; }
  .gloss-edge{ opacity:0; }
  .is-popping{ animation:none !important; }
  .gloss-ripple{ display:none; }
}

/* ---------- 8. print: plain buttons ---------- */
@media print{
  .gloss-edge, .gloss-ripple{ display:none; }
}

/* ==========================================================================
   Preview-only variants (the /preview/ style board). Not used on live pages.
   ========================================================================== */
:is(html[data-gloss="a"], .gloss-a) :is(.btn, .gx.gx.gx){ border-radius:999px; border-color:rgba(0,0,0,.38); transform:none;
  background-image:linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.07) 46%, rgba(0,0,0,.10) 54%, rgba(0,0,0,.32) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -4px 8px rgba(0,0,0,.28), 0 8px 18px -6px rgba(0,0,0,.55), 0 2px 3px rgba(0,0,0,.22); }
:is(html[data-gloss="a"], .gloss-a) :is(.btn, .gx.gx.gx)::before{ border-radius:999px; height:46%; opacity:.8;
  background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.42) 60%, rgba(255,255,255,0) 100%); }
:is(html[data-gloss="b"], .gloss-b) :is(.btn, .gx.gx.gx){ border-color:rgba(0,0,0,.30); transform:none;
  background-image:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 50%, rgba(0,0,0,.06) 50%, rgba(0,0,0,.22) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,0,0,.22), 0 6px 16px -6px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.2); }
:is(html[data-gloss="b"], .gloss-b) :is(.btn, .gx.gx.gx)::before{ height:52%; opacity:.9;
  background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 70%, rgba(255,255,255,0) 100%); }
:is(html[data-gloss="c"], .gloss-c) :is(.btn, .gx.gx.gx){ border-radius:999px; border-color:rgba(0,0,0,.45); transform:translateY(-3px);
  background-image:linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.10) 42%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.36) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -7px 12px rgba(0,0,0,.34), 0 6px 0 -1px rgba(0,0,0,.38), 0 12px 22px -6px rgba(0,0,0,.5); }
:is(html[data-gloss="c"], .gloss-c) :is(.btn, .gx.gx.gx)::before{ border-radius:999px; left:6%; right:6%; height:48%; }
:is(html[data-gloss="d"], .gloss-d) :is(.btn, .gx.gx.gx){ border-radius:999px; }
:is(html[data-gloss="d"], .gloss-d) :is(.btn, .gx.gx.gx)::before{ border-radius:999px; left:5%; right:5%; }