/* marketing/templates/theme-trackformance.css
   Brand theme: "Ten-Second Slab" (owner pick, 2026-08-22, issue #129).

   Dark, athletic, unapologetically bold — the TRACKFORMANCE slab identity IS
   the design system. Near-black ground, off-white type, Big Shoulders Display
   caps for headlines, and the orange/blue two-tone as hard color blocking:
   sharp corners always, no gap between the halves (brand ruling 2026-08-21).
   The 10-up/10-down cadence bar (see .cadence in base.css) is the section
   divider; the index hero art is a cluster of dark analytics cards drawn by
   build.py (MOCKUP_HTML) and styled here. */

:root {
  --bg: #0b0c0e;
  --band: #101216;          /* section-alt ground */
  --fg: #f1eee8;
  --fg-soft: #a7adb8;       /* >= 7:1 on --bg and --band: AA for body copy */
  --line: #23262d;
  --accent: #e26b2a;
  --accent-hi: #f08b4e;
  --accent-deep: #8a3f17;
  --accent-contrast: #0b0c0e;  /* dark text on orange: 5.7:1 (white is 3.3:1) */
  --blue: #4aa3df;
  --blue-hi: #7cc0ec;
  --navy: #1b2a4a;
  --card-bg: #14161b;
  --input-bg: #101216;
  --header-bg: rgba(11, 12, 14, 0.92);
  --ok: #4ecb71;
  --err: #ff7a5c;
  --radius: 0;              /* sharp corners ALWAYS — the slab identity */
  --font-heading: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  /* cadence divider (component in base.css) */
  --cadence-track: #15171c;
  --cadence-rest: linear-gradient(90deg, rgba(74, 163, 223, 0.16), rgba(74, 163, 223, 0.05));
  --cadence-tick: rgba(11, 12, 14, 0.85);
}

body { background: var(--bg); }

/* Full-width two-tone strip above the header: orange half / blue half,
   hard stop, no gap — the badge seam, stretched across the page. */
body::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--accent) 0 50%, var(--blue) 50% 100%);
}

::selection { background: var(--accent); color: #0b0c0e; }

/* --- Display type: condensed caps for h1/h2 only; h3/h4 stay Inter so
   cards and directory entries remain scannable. --- */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.005em;
}
h1 { font-size: clamp(2.9rem, 6vw, 4.8rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }

.site-header {
  backdrop-filter: saturate(140%) blur(6px);
}

.nav-links a {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.nav-links a.btn-primary {
  color: var(--accent-contrast);
}

/* Eyebrow: muted small caps led by a small two-tone chip. */
.eyebrow { color: var(--fg-soft); }
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 9px;
  margin-right: 10px;
  vertical-align: baseline;
  background: linear-gradient(90deg, var(--accent) 0 50%, var(--blue) 50% 100%);
}

/* Buttons: uppercase, tracked, sharp. Primary carries dark text on orange —
   white on this orange is only 3.3:1. */
.btn {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 0.88rem;
}
.btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn-secondary { border-color: #3a3f47; }
.btn-secondary:hover { border-color: var(--blue); }

.lead-form input[type="email"]::placeholder { color: #6b717c; }

.section-alt {
  background: var(--band);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* --- Cards: dark slabs with a hard orange/blue left edge, alternating
   through a grid. Feature cards (plain .card in a grid — the index feature
   grid) also get a big counter numeral, CSS-only so the content JSON stays
   copy-of-record. --- */
.card {
  border-left: 3px solid var(--accent);
}
.grid > .card:nth-child(even) { border-left-color: var(--blue); }
.grid { counter-reset: slabcard; }
.grid > .card:not(.link-card):not(.directory-card)::before {
  counter-increment: slabcard;
  content: counter(slabcard, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.85rem;
}
.grid > .card:not(.link-card):not(.directory-card):nth-child(even)::before {
  color: var(--blue);
}

.pricing-card { border-left: 3px solid var(--accent); }
.pricing-grid > .pricing-card:nth-child(even) { border-left-color: var(--blue); }
.pricing-card.is-featured { border-left-color: var(--accent); }

/* Timeline / numbered benefit markers go square — no circles in a slab system. */
.timeline-marker { border-radius: 0; }
.timeline-marker-num { border-radius: 0; color: var(--accent-contrast); }

/* State-group headings (studios directory) in small display caps so 20+
   groups scan fast. */
.state-group-heading {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.badge-row span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fg-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 0;
  padding: 0.35em 0.9em;
}
.badge-row span:nth-child(odd) { border-left-color: var(--accent); }

/* Footer: band ground under a thick two-tone strip. */
.site-footer {
  background: var(--band);
  border-top: 8px solid transparent;
  border-image: linear-gradient(90deg, var(--accent) 0 50%, var(--blue) 50% 100%) 1;
}

/* --------------------------------------------------------------------------
   Index hero art: the analytics-card cluster (markup: MOCKUP_HTML in
   build.py). Three dark chart cards over a two-tone slab. Absolute collage
   at desktop widths; a plain vertical stack once the hero goes single-column.
   -------------------------------------------------------------------------- */
.cluster {
  position: relative;
  height: 470px;
  max-width: 480px;
  margin: 0 auto;
}
.cluster-slab {
  position: absolute;
  top: -24px;
  right: -10px;
  width: 210px;
  height: 280px;
  background: linear-gradient(90deg, var(--accent) 0 50%, var(--blue) 50% 100%);
}
.acard {
  position: absolute;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 16px 18px 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.acard.is-blue { border-left-color: var(--blue); }
.acard svg { display: block; width: 100%; height: auto; }
.acard-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
}
.acard-title {
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.acard-chip {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--fg);
  white-space: nowrap;
}
.acard-chip small {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--fg-soft);
  letter-spacing: 0.05em;
}
.acard-delta {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 4px;
}
.acard-delta.is-blue { color: var(--blue); }
.acard .bignum {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  color: var(--fg);
  margin: 2px 0 6px;
}
/* No card may cover another card's text: C's right edge (186) stays left of
   B's left edge (196). */
.card-a { top: 0; left: 0; width: 360px; z-index: 2; }
.card-b { top: 272px; left: 196px; width: 296px; z-index: 3; }
.card-c { top: 306px; left: 0; width: 186px; z-index: 4; }

@media (max-width: 900px) {
  .cluster { height: auto; max-width: 480px; }
  .cluster-slab { display: none; }
  .acard { position: static; width: auto; margin: 0 0 1rem; }
  .acard:last-child { margin-bottom: 0; }
}