/* #features visual polish.
 *
 * Three things, all scoped under #features so nothing else is caught:
 *   1. Arial everywhere inside the little animations (house rule; they were
 *      inheriting the page's display face and reading as a different product).
 *   2. The chips and buttons in those animations get the same glass treatment
 *      the real buttons on this page use, instead of a flat 1px outline.
 *   3. Depth on the two flags.
 */

/* 1. ---------------------------------------------------------------- type */
#features .grid > * > div:first-child,
#features .grid > * > div:first-child * {
  font-family: Arial, Helvetica, sans-serif;
}

/* 2. --------------------------------------------------------------- glass */
#features .fv-press,
#features .fv-swap-out,
#features .fv-swap-in,
#features .fv-in[class*="rounded-full"] {
  border-color: transparent !important;
  background:
    linear-gradient(hsl(0 0% 100% / .82), hsl(0 0% 100% / .82)) padding-box,
    linear-gradient(150deg,
        hsl(0 0% 100% / .95) 0%,
        hsl(var(--line-strong)) 30%,
        hsl(0 0% 100% / .9) 55%,
        hsl(var(--warm)) 78%,
        hsl(var(--line-strong)) 100%) border-box;
  border: 1px solid transparent;
  box-shadow:
    0 1px 1px hsl(var(--deep) / .06),
    0 4px 12px hsl(var(--deep) / .10),
    inset 0 1px hsl(0 0% 100% / .95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* The autobuy "armed" pill is the one solid-dark element in the set; keep it
   dark but give it the same rim and lift so it belongs to the same family. */
#features .fv-swap-in {
  background:
    linear-gradient(hsl(var(--deep)), hsl(var(--deep))) padding-box,
    linear-gradient(150deg,
        hsl(0 0% 100% / .55) 0%,
        hsl(var(--deep)) 45%,
        hsl(0 0% 100% / .35) 100%) border-box !important;
  box-shadow:
    0 1px 1px hsl(var(--deep) / .18),
    0 6px 18px hsl(var(--deep) / .26),
    inset 0 1px hsl(0 0% 100% / .28) !important;
}

/* 3. --------------------------------------------------------------- flags */
#features .fv-flag {
  border-radius: 2.5px;
  overflow: hidden;
  filter:
    drop-shadow(0 1px 1px hsl(var(--deep) / .18))
    drop-shadow(0 3px 6px hsl(var(--deep) / .16));
}