@import url('/reference-card-hover-20260911.css?v=2');

/* The coverage directory shares the homepage's card inversion and shadow. */
html body .areas-main-page :is(.areas-market-card,.areas-system-panels > article,.areas-rollout-list > article) {
  --area-ink: var(--reference-card-ink);
  --area-paper: var(--reference-card-paper);
  --area-shadow: var(--reference-card-shadow);
  transition: background-color .22s ease, color .22s ease, box-shadow .22s ease !important;
}
html body .areas-main-page .areas-system-panels > article {
  --area-ink: #fff;
  --area-paper: #050505;
  --area-shadow: rgba(0,0,0,.5);
}
html body .areas-main-page :is(.areas-market-card,.areas-system-panels > article,.areas-rollout-list > article):is(:hover,:focus-visible,:focus-within) {
  background: var(--area-ink) !important;
  color: var(--area-paper) !important;
  border-color: var(--area-ink) !important;
  box-shadow: 0 24px 60px var(--area-shadow) !important;
}
html body .areas-main-page :is(.areas-market-card,.areas-system-panels > article,.areas-rollout-list > article):is(:hover,:focus-visible,:focus-within) :is(h3,p,span,small,strong,li,header,footer) {
  color: inherit !important;
  border-color: currentColor !important;
}
html body .areas-main-page .areas-market-card:is(:hover,:focus-visible) li > span { background: currentColor; }
html body .areas-main-page .areas-market-card:focus-visible { outline: 2px solid var(--area-ink); outline-offset: 4px; }
html body .areas-main-page .areas-rollout-list > article > span {
  color: transparent !important;
  font: 700 clamp(2.2rem,4vw,3.2rem)/1 "Baron Neue", "Space Grotesk", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  -webkit-text-stroke: 1.4px var(--area-ink);
  transition: -webkit-text-stroke-color .22s ease;
}
html body .areas-main-page .areas-rollout-list > article:is(:hover,:focus-within) > span {
  color: transparent !important;
  -webkit-text-stroke-color: var(--area-paper);
}
@media (prefers-reduced-motion: reduce) {
  html body .areas-main-page :is(.areas-market-card,.areas-system-panels > article,.areas-rollout-list > article,.areas-rollout-list > article > span,.areas-market-card footer > span) { transition: none !important; }
  html body .areas-main-page .areas-market-card:is(:hover,:focus-visible) footer > span { transform: none; }
}