/* Marbl Racing - base styles. Loads BEFORE the v3 design system.
 *
 * Two things live here:
 *  1. The critical fallback. Every stylesheet bar this one is on marbl.codes; if that
 *     origin is slow, blocked or misconfigured the page would render unstyled. This block
 *     is served from marbl.racing itself, so it guarantees a readable dark page whatever
 *     happens to the other origin. v3 overrides it when v3 arrives - which is exactly why
 *     it must load FIRST. Do not merge this file into racing.css.
 *  2. Racing-only rules for classes v3 does not define (the wordmark, the mailto fallback).
 */

html { background: #171415; }
    body { margin: 0; background: #171415; color: #fff;
           font-family: 'Inter', system-ui, -apple-system, sans-serif; }

    .hp-main { text-align: center; padding: 40px 20px; }
    .hp-title { font-size: 2.5rem; line-height: 1.1; margin: 0.5rem auto; max-width: 16ch; }
    .hp-message { color: rgba(255,255,255,0.66); max-width: 52ch; margin-inline: auto; }
    .btn-split { display: inline-flex; text-decoration: none; }
    .btn-split__text { background: #F35226; color: #131112; padding: 14px 20px; font-weight: 600; }

.site-header__left .mr-logo { display: inline-flex; align-items: center; }
    .site-header__left .mr-logo img { height: 26px; width: auto; display: block; }
    .footer-logo img { height: 32px; width: auto; display: block; }

    .hp-fallback {
      margin: var(--gap-sm, 20px) 0 0;
      font-size: var(--text-sm, 13px);
      color: var(--marbl-white-40, rgba(255, 255, 255, 0.4));
    }
    .hp-fallback a {
      color: var(--marbl-white-70, rgba(255, 255, 255, 0.7));
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .hp-fallback a:hover { color: var(--marbl-ember, #F35226); }

    @media (max-width: 520px) {
      .site-header__left .mr-logo img { height: 22px; }
    }

    @media (max-width: 768px) {
      .legal-back-btn { display: none; }
    }