/* features-cards.v3.css -- the #features cards (2026-10-03, patches/features_frame).
 * Served max-age=604800: never edit in place, ship a new name.
 * v1: gap 28 -> 40px, the stronger hairline, the tablet frame's soft panel
 *     shadow (interface-frame.v1.css); the illustrations note (.fx-legal)
 *     is not drawn, the footer's small print carries that sentence.
 * v2: the heading and its line sit closer (20 -> 12px), and the cards sit
 *     closer to the text (56 -> 32px) (operator, same day).
 * v3: the cards wear the #interface panel's surround (operator, 2026-10-03:
 *     "the same surrounding/borders as the ipad"). They still carried the
 *     brushed rim of metal-sections.v1.css: a gradient border with white at
 *     .95 / .9 / .85, which on the dark page is a bright white edge, and on
 *     hover a full-white inset line. v1's hairline never showed: the rim sets
 *     border-color with !important. Now, at rest and on hover: the panel's
 *     hairline, its 14px corners, its plain fill and its two near shadow
 *     layers (the third, 0 44px 90px, is sized for the 1100px panel). */
#features h2 + p { margin-top: .75rem; }
#features .fx-grid { margin-top: 2rem; gap: 40px; }
#features .fx-grid > .fx-card,
#features .fx-grid > .fx-card:hover {
  border: 1px solid hsl(var(--line-strong) / .75) !important;
  border-radius: 14px;
  background: hsl(var(--bg));
  box-shadow:
    0 1px 2px hsl(var(--deep) / .05),
    0 14px 34px -10px hsl(var(--deep) / .16);
}
#features .fx-legal { display: none; }
@media (max-width: 768px) {
  #features .fx-grid { gap: 28px; }
}