/* Pricing glow (see glow.js). Only active once glow.js adds .glow-on, so
   touch screens, reduced-motion visitors and no-JS visitors see the cards
   exactly as before.
   ::before  soft spotlight on the card face, under the content
   ::after   the lit border: a ring masked out of a radial gradient       */
.glow-on .receipt,
.glow-on .ptable-wrap{position:relative}
.glow-on :is(.hp-card,.price,.receipt,.ptable-wrap){
  isolation:isolate;
  --glow-fill:.11;     /* face spotlight strength */
  --glow-ring:1.5px;   /* lit border width */
  --glow-edge:1px;     /* sits over the card's own 1px border */
  --glow-core:0;       /* white-hot centre of the ring; off on white cards */
  --glow-l:55%;        /* ring lightness */
}
.glow-on :is(.hp-card,.price,.receipt,.ptable-wrap)::before,
.glow-on :is(.hp-card,.price,.receipt,.ptable-wrap)::after{
  content:"";position:absolute;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .45s ease;
}
.glow-on :is(.hp-card,.price,.receipt,.ptable-wrap)::before{
  inset:0;z-index:-1;
  background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%),
    hsl(var(--glow-hue,14) 92% 64% / var(--glow-fill)), transparent 70%);
}
.glow-on :is(.hp-card,.price,.receipt,.ptable-wrap)::after{
  inset:calc(var(--glow-edge) * -1);z-index:1;padding:var(--glow-ring);
  background:
    radial-gradient(110px circle at calc(var(--gx,50%) + var(--glow-edge)) calc(var(--gy,50%) + var(--glow-edge)),
      hsl(36 100% 92% / var(--glow-core)), transparent 70%),
    radial-gradient(230px circle at calc(var(--gx,50%) + var(--glow-edge)) calc(var(--gy,50%) + var(--glow-edge)),
      hsl(var(--glow-hue,14) 95% var(--glow-l) / .95), transparent 72%);
  -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 exclude,linear-gradient(#000 0 0);
}
.glow-on .is-glow::before,
.glow-on .is-glow::after{opacity:1}

/* Dark surfaces (dark theme, the featured card, the About receipt panel)
   take a stronger face light; on white it would wash out the text. */
[data-theme="dark"].glow-on :is(.hp-card,.price,.receipt,.ptable-wrap),
.glow-on .hp-card.is-feature,
.glow-on .receipt{--glow-fill:.16;--glow-core:.9;--glow-l:60%}
.glow-on .hp-card.is-feature{--glow-ring:2px}
/* The table wrapper scrolls sideways, which would clip a ring drawn
   outside it, so its ring sits just inside the border instead. */
.glow-on .ptable-wrap{--glow-edge:0px}