/* JPAccess — metallic treatment for the Unique features cards and the pricing
   CTAs (v1).
 *
 * WHY THIS IS A SEPARATE FILE AND NOT A BUNDLE EDIT
 * The page is a prebuilt Vite bundle with no source in this repo, so anything
 * written into index-*.js is lost the next time it is rebuilt and cannot be
 * reviewed. liquid-metal.v1.css established the pattern: additive layers keyed
 * off stable hooks (#features, [data-slot="liquid-button"]), never a rewrite of
 * the bundle's own utility classes. A rebuilt bundle keeps working with or
 * without this file.
 *
 * WHY THE CARDS ARE CSS METAL AND NOT THE REAL LIQUID-METAL CANVAS
 * liquid-metal.v1.js mounts an animated <canvas> rim per element. That is
 * affordable for the two or three CTAs on the page; it is not affordable for
 * nine feature cards. This landing page has already been measured into the
 * ground once by an animation that looked cheap — the SVG dash effect took it
 * to 2.7fps — so the cards get a STATIC brushed-metal edge and sheen instead.
 * It reads as the same material at a glance and costs one gradient.
 *
 * The palette is the bundle's own tokens (--deep, --line, --fg), so this
 * follows the site into whatever theme it is in rather than pinning hex values
 * that would drift.
 */

/* ---------------------------------------------------------------- cards --
   The bundle draws these as `border border-line bg-bg` — a flat bordered box,
   the only flat surface in a page that is otherwise glass. The rules below
   replace the flat edge with a brushed rim and lift the card off the page the
   way .glass does, WITHOUT touching the bundle's classes: everything is scoped
   under #features so nothing else can be caught by it. */
#features .grid > * {
  position: relative;
  isolation: isolate;
  /* The metal edge. A 1px gradient border is not expressible directly, so the
     card paints the gradient and masks it to its own 1px frame — this keeps
     the 1rem radius exactly, which border-image cannot do. */
  border-color: transparent !important;
  background:
    linear-gradient(hsl(var(--bg)), hsl(var(--bg))) padding-box,
    linear-gradient(145deg,
        hsl(0 0% 100% / .95) 0%,
        hsl(var(--line-strong)) 22%,
        hsl(0 0% 100% / .9) 38%,
        hsl(var(--warm)) 58%,
        hsl(0 0% 100% / .85) 74%,
        hsl(var(--line-strong)) 100%) border-box;
  border: 1px solid transparent;
  box-shadow:
    0 1px 1px hsl(var(--deep) / .05),
    0 10px 34px hsl(var(--deep) / .10),
    inset 0 1px hsl(0 0% 100% / .95);
  transition: box-shadow .35s ease, transform .35s ease;
}

/* A single diagonal highlight travelling across the top edge — the thing that
   makes a flat gradient read as METAL rather than as a coloured border. Static
   by design; see the header. Behind the content (-1) and pointer-transparent so
   it can never eat a click. */
#features .grid > *::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(122deg,
      hsl(0 0% 100% / 0) 34%,
      hsl(0 0% 100% / .55) 47%,
      hsl(0 0% 100% / 0) 60%);
}

#features .grid > *:hover {
  box-shadow:
    0 2px 3px hsl(var(--deep) / .07),
    0 18px 46px hsl(var(--deep) / .16),
    inset 0 1px hsl(0 0% 100% / 1);
}

/* Bold. The bundle sets the card title at font-semibold (600); at this size,
   against a metal edge, 600 reads as ordinary body weight. */
#features h3 {
  font-weight: 750 !important;
  letter-spacing: -0.012em;
}

/* --------------------------------------------------------------- pricing --
   These already carry the animated rim (they are variant="deep", which is what
   liquid-metal.v1.js keys on). What they lacked is WEIGHT: the label sits at
   the bundle's default and the rim is thin, so the effect does not read as a
   primary action next to the cards above it.

   Scoped by .glass-plain, which is the pricing card's own surface class, so
   only buttons that actually sit in a pricing card are caught and the hero CTA
   — deliberately calmer — is untouched. */
.glass-plain [data-slot="liquid-button"] {
  font-weight: 750 !important;
  letter-spacing: .002em;
}

/* Thicker bright rim: .lm-face is the inner pill that liquid-metal insets by
   2px to leave the metal showing. Pulling it in to 3px widens the metal band
   itself rather than adding a second border around it. */
.glass-plain [data-slot="liquid-button"] .lm-face {
  inset: 3px;
}

/* And a lift, so the row of three reads as the page's primary action. */
.glass-plain [data-slot="liquid-button"] {
  box-shadow:
    0 1px 1px hsl(var(--deep) / .18),
    0 12px 30px hsl(var(--deep) / .34);
}

/* Before liquid-metal.v1.js mounts (and if it is skipped for reduced motion),
   the button still has to look metallic rather than flat black. */
.glass-plain [data-slot="liquid-button"] > .glass-deep {
  background:
    linear-gradient(hsl(var(--deep) / .94), hsl(var(--deep) / .94)) padding-box,
    linear-gradient(145deg,
        hsl(0 0% 100% / .85) 0%,
        hsl(var(--warm) / .8) 30%,
        hsl(0 0% 100% / .7) 52%,
        hsl(var(--warm) / .75) 76%,
        hsl(0 0% 100% / .8) 100%) border-box;
  border: 1px solid transparent;
}

@media (prefers-reduced-motion: reduce) {
  #features .grid > * { transition: none; }
}