/* Head-to-head comparison page styles. Layered on top of research-study.css.
 * CSP-compliant: served from same origin via <link rel="stylesheet">.
 */

.h2h-score { background: var(--paper); border-top: 8px solid var(--accent); padding: 48px 0; }
.h2h-score__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; margin-bottom: 24px; }
.h2h-score__card { background: var(--ink); color: var(--paper); padding: 32px; }
.h2h-score__brand { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.h2h-score__big { font-size: clamp(64px, 10vw, 128px); font-weight: 900; line-height: 1.0; margin-top: 8px; color: var(--paper); }
.h2h-score__denom { font-size: 0.4em; color: var(--paper); opacity: 0.6; font-weight: 700; }
.h2h-score__label { font-size: 14px; margin-top: 8px; color: var(--paper); opacity: 0.7; text-transform: uppercase; letter-spacing: 0.08em; }
.h2h-score__vs { font-size: clamp(28px, 4vw, 48px); font-weight: 900; color: var(--accent); align-self: center; padding: 0 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.h2h-score__verdict { font-size: 18px; font-weight: 700; line-height: 1.5; max-width: 880px; margin: 16px 0 0; padding: 16px 20px; background: #f9f8f4; border-left: 4px solid var(--accent); }

/* On narrow viewports, stack the score cards vertically with "vs" between */
@media (max-width: 720px) {
  .h2h-score__grid { grid-template-columns: 1fr; }
  .h2h-score__vs { padding: 8px 0; text-align: center; }
}