/* ==========================================================================
   My Battery Guys - brand type: the one place a font size, weight or family
   is a literal.

   Loaded after volt.css on every page that loads volt.css: the homepage,
   the product pages (pages/templates/pages/), and the policy, status and
   job-tracking pages, since volt.css itself names these tokens.
   pages/test_brand.py fails on a literal font-size, font-weight or
   font-family in volt.css, product-page.css, home.html or under pages/.

   Two families, each with one job:
     --font-sans  Inter. Everything a person reads: headings, copy, buttons,
                  form, and prices (tabular figures, so $299.99 and $349
                  line up and never letter-space apart).
     --font-mono  JetBrains Mono. Technical marks only: the spec line
                  (M745 / 11.1V / Mail-in) and step numbers. Never a
                  sentence: an option's tagline is Inter.
                  Loaded from Google Fonts with Inter; the old stack
                  ('SF Mono', ...) is not exposed to web pages on iPhone or
                  Android, so phones fell back to Courier.

   Eight sizes. The page used twenty-three (0.68rem to 1.6rem in small
   steps); each role below took the nearest of these.
   ========================================================================== */

:root {
    --font-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    /* volt.css's own names, pointed at the same two families. */
    --font: var(--font-sans);
    --mono: var(--font-mono);

    --fs-display: clamp(2.25rem, 6vw, 4rem);   /* h1 */
    --fs-h2: clamp(1.75rem, 4vw, 2.5rem);      /* section headings */
    --fs-h3: 1.25rem;                          /* card, symptom, step, question titles */
    --fs-price: 1.75rem;                       /* a price figure */
    --fs-lead: 1.125rem;                       /* intro and section sub-copy, callout */
    --fs-body: 1rem;                           /* copy, lists, buttons, inputs (16px: no iOS zoom) */
    --fs-small: 0.875rem;                      /* notes, fine print, captions, footer */
    --fs-label: 0.75rem;                       /* caps labels: eyebrows, field names, step numbers */

    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-heavy: 800;

    --ls-tight: -0.03em;   /* display and section headings */
    --ls-snug: -0.01em;    /* h3 */
    --ls-label: 0.14em;    /* caps labels */
    --ls-mono: 0.06em;     /* mono marks */

    --lh-tight: 1.1;
    --lh-snug: 1.3;
    --lh-body: 1.6;

    /* Secondary text on a dark band. --muted (#667382) on --ink fails
       contrast; that was the grey step copy in "How it works". */
    --muted-on-dark: rgba(255, 255, 255, 0.72);
}

body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); }

h1, h2, h3 { font-weight: var(--fw-heavy); line-height: var(--lh-tight); }
h1 { font-size: var(--fs-display); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--ls-snug); line-height: var(--lh-snug); }

.sub { font-size: var(--fs-lead); }
.on-dark .sub { color: var(--muted-on-dark); }

/* A caps label, wherever it appears. */
.tier .spec { font-family: var(--font-sans); font-weight: var(--fw-semibold); }
.eyebrow, .pill, .field > label, .field legend, .field-label, .hero-stat .lbl, .cta-strip .lbl, .info-card .lbl, .tl-step {
    font-size: var(--fs-label); font-weight: var(--fw-heavy);
    letter-spacing: var(--ls-label); text-transform: uppercase;
}
.eyebrow::before { font-size: var(--fs-label); }

.mono-line, .tl-step, .tl-mark {
    font-family: var(--font-mono); font-weight: var(--fw-bold); letter-spacing: var(--ls-mono);
}
.mono-line { font-size: var(--fs-small); }

/* Prices are Inter: tabular figures, heavy, no letter-spacing. */
.price, .tier .price, .hero-stat .num, .page-card .prices, .opt .opt-price, .chosen-service .opt-price {
    font-family: var(--font-sans); font-variant-numeric: tabular-nums;
    font-weight: var(--fw-heavy); letter-spacing: var(--ls-snug);
}
.tier .price, .hero-stat .num { font-size: var(--fs-price); }

.btn { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-heavy); }
.field input, .field select, .field textarea { font-family: var(--font-sans); font-size: var(--fs-body); }