/* Sculpted Chiselled Bevel. One shared decorative top edge for every card
   surface on the site, approved by Hamad 8 November 2026.
   Two mirrored facets meet at the horizontal centre under one fine highlight.
   The layer is a single ::after overlay inside each card, 18px tall, out of
   flow and click through, so every card keeps its own background, blur,
   border, radius, shadow, size and behaviour. It moves and scales with the
   card through every hover and cinematic transform. Geometry and family list
   are documented in docs/design/sculpted-chiselled-bevel.md. */

/* A card with no positioning of its own becomes the overlay's anchor. Zero
   specificity, so any existing position rule (relative, absolute, sticky) wins. */
:where(.hero-card, .hero-stat, .portal-panel, .life-ribbon, .access-panel, .payment-logos,
       .intro-card, .info-card, .symbol-grid > a, .toc-box){ position: relative; }

:is(.hero-card, .hero-stat, .portal-panel, .life-ribbon, .life-stage, .eng-card, .card,
    .dash-visual, .access-panel, .plan, .payment-logos, .news-card,
    .intro-card, .info-card, .symbol-grid > a, .toc-box)::after{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 18px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 20' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='l' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='0.3'/%3E%3Cstop offset='100%25' stop-color='%2322d3ee' stop-opacity='0.8'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%2322d3ee' stop-opacity='0.8'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0.3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,0 160,0 160,14 0,5' fill='url(%23l)' opacity='0.35'/%3E%3Cpolygon points='160,0 320,0 320,5 160,14' fill='url(%23r)' opacity='0.35'/%3E%3Cpolyline points='0,1 320,1' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* Forced colours and print show each card's plain surface. */
@media (forced-colors: active), print{
  :is(.hero-card, .hero-stat, .portal-panel, .life-ribbon, .life-stage, .eng-card, .card,
      .dash-visual, .access-panel, .plan, .payment-logos, .news-card,
      .intro-card, .info-card, .symbol-grid > a, .toc-box)::after{ display: none; }
}