/* Fade product cards: shared dark/light 2-by-2 composition. */
.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.products .product-card { min-height: 390px; border-radius: 4px; background: linear-gradient(180deg, #0e1217, #080b0f); box-shadow: 0 14px 34px rgba(0,0,0,.24); }
.products .product-card::after { content: none; }
.products .card-content { width: 58%; height: 100%; min-height: 390px; padding: 28px 26px; }
.products .product-heading strong { font-size: clamp(1.5rem, 2.4vw, 2.6rem); letter-spacing: .13em; white-space: normal; }
.products .product-heading small { color: var(--orange); font-size: .72rem; letter-spacing: .13em; white-space: normal; line-height: 1.5; }
.products .product-visual { inset: 0 0 0 auto; width: 42%; opacity: 1; background-color: #07090c; background-size: cover; background-position: center; filter: none; -webkit-mask-image: none; mask-image: none; transform: none; }
.products .product-card:hover .product-visual, .products .product-card:focus-visible .product-visual { opacity: 1; transform: none; }
.products .product-card:hover, .products .product-card:focus-visible { transform: translateY(-3px); border-color: var(--orange); box-shadow: 0 18px 38px rgba(0,0,0,.3); }
.products .metric-block { margin-top: 25px; gap: 6px; }
.products .metric-block > strong { color: var(--orange); font-size: 2.7rem; }
.products .comparison { position: static; margin-top: 20px; gap: 5px 12px; }
.products .split-list { width: 100%; margin-top: 20px; gap: 8px; }
.products .split-list > span { grid-template-columns: 1fr auto minmax(30px,65px); gap: 8px; }
.products .score-strip { position: static; margin-top: 20px; min-height: 42px; padding: 8px 0 0; background: transparent; border-color: var(--line); }
.products .score-strip small { font-size: .47rem; letter-spacing: .02em; }
.products .score-strip b { font-size: 1rem; }
.products .trade-market { position: static; margin-top: 26px; gap: 8px; }
.products .trade-market > span { min-height: 36px; padding: 0 12px; }
.products .health-meter { max-width: 100%; }
.desktop-product-copy { display: block; max-width: 320px; margin-top: 16px; color: #aeb4bd; font-size: .68rem; letter-spacing: .045em; line-height: 1.6; }
.praxis-preview { display: grid; gap: 20px; margin-top: 30px; }
.praxis-preview > span { display: grid; gap: 7px; }
.praxis-preview small { color: var(--muted); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.praxis-preview strong { color: var(--text); font-size: .92rem; font-weight: 500; }
.praxis-metric { width: min(100%, 250px); margin-top: 24px; display: grid; gap: 6px; }
.praxis-metric > small { color: var(--muted); font-size: .65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.praxis-metric > strong { color: var(--orange); font-size: 2.7rem; line-height: .95; }
.praxis-metric > span:not(.confidence-meter) { color: #bbc0c7; font-size: .64rem; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }
.confidence-meter { width: 190px; max-width: 100%; height: 13px; margin-top: 4px; padding: 3px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.04); }
.confidence-meter i { display: block; width: 94%; height: 100%; background: repeating-linear-gradient(90deg, var(--orange) 0 5px, transparent 5px 8px); }
body[data-mode="light"] .products .product-card { background: linear-gradient(180deg, #fff, #f7f9fb); border-color: rgba(35,43,54,.18); box-shadow: 0 8px 22px rgba(24,31,40,.10); }
body[data-mode="light"] .products .product-card:hover, body[data-mode="light"] .products .product-card:focus-visible { border-color: var(--orange); box-shadow: 0 14px 30px rgba(24,31,40,.15); }
body[data-mode="light"] .products .product-visual { opacity: 1; filter: none; transform: none; -webkit-mask-image: none; mask-image: none; }
body[data-mode="light"] .products .product-heading small { color: var(--orange); }
body[data-mode="light"] .products .score-strip { background: transparent; }
@media (prefers-reduced-motion: reduce) { .products .product-card:hover, .products .product-card:focus-visible { transform: none; } }

body[data-mode="light"] .products .product-card:hover .product-visual,
body[data-mode="light"] .products .product-card:focus-visible .product-visual {
  opacity: 1; filter: none; transform: none;
}

/* Transparent artwork shares the card surface in every theme. */
.products .product-visual,
body[data-mode="light"] .products .product-visual {
  background-color: transparent;
  background-size: contain;
  background-position: center bottom;
}
.products .proxima-visual { background-image: url('https://fadesuddendeathassets.z13.web.core.windows.net/images/site/proxima-player-cutout.png'); }
.products .monolith-visual { background-image: url('https://fadesuddendeathassets.z13.web.core.windows.net/images/site/monolith-pylon-cutout.png'); background-size: auto 86%; background-position: center; }
.products .sudden-visual { width: 42%; background-image: url('https://fadesuddendeathassets.z13.web.core.windows.net/images/site/sudden-uprights-cutout.png'); background-size: contain; background-position: center bottom; }
.products .praxis-visual { width: 42%; background-image: url('https://fadesuddendeathassets.z13.web.core.windows.net/images/site/praxis-coach-full-body.png'); background-size: auto 125%; background-position: right top; }

@media (min-width: 901px) {
  .products .praxis-preview { gap: 14px; margin-top: 18px; }
  .products .praxis-metric { margin-top: 18px; }
  .products .sudden-card .trade-market { margin-top: 18px; }
}

@media (max-width: 900px) {
  .products { grid-template-columns: 1fr; }
  .products .product-heading strong { font-size: 2rem; }
  .products .proxima-visual { width: 50%; background-size: auto 106%; background-position: right bottom; }
  .products .monolith-visual { width: 42%; background-size: auto 88%; background-position: center bottom; }
  .products .sudden-visual { width: 100%; background-size: auto 96%; background-position: right bottom; }
  .products .praxis-visual { width: 100%; background-size: auto 125%; background-position: right top; }
  .products .proxima-card .comparison { margin-top: 36px; }
  .products .sudden-card .trade-market { margin-top: 58px; }
  .products .desktop-product-copy { display: none; }
}

@media (max-width: 480px) {
  .products { gap: 16px; }
  .products .card-content { width: 64%; padding: 22px 16px; }
  .products .product-visual { width: 50%; }
  .products .monolith-visual { width: 40%; }
  .products .sudden-visual,
  .products .praxis-visual { width: 100%; }
  .products .praxis-visual { background-position: right top; }
  .products .product-heading strong { font-size: 1.45rem; letter-spacing: .09em; }
  .products .product-heading small { font-size: .61rem; }
  .products .split-list > span { grid-template-columns: 1fr auto 32px; gap: 5px; }
  .products .metric-block small, .products .comparison small, .products .trade-market small { font-size: .65rem; }
  .praxis-preview strong { font-size: .83rem; }
  .praxis-metric { margin-top: 22px; }
}