/* /races 5K and run-event landing page. Every rule is scoped to keep the
 * finish-line treatment isolated from the other audience pages. */

.races-page {
  --races-ink: #201616;
  --races-deep: #120c0c;
  --races-red: #e0442e;
  --races-orange: #ffad42;
  --races-gold: #ffd166;
  --races-paper: #f4e9dc;
  --races-blush: #ead8ca;
  --races-line: #d4beb0;
  --races-muted: #5e514b;
  --races-white: #fffaf4;
  background: var(--races-white);
}

.races-page .races-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(116deg, rgba(18, 12, 12, .99) 0%, rgba(46, 20, 19, .98) 58%, rgba(118, 42, 28, .97) 100%);
  color: #fff;
  padding: 90px 48px 84px;
}

.races-page .races-hero::before {
  content: "";
  position: absolute;
  width: 540px;
  height: 540px;
  right: -190px;
  top: -200px;
  border: 2px solid rgba(255, 173, 66, .28);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(255, 173, 66, .06), 0 0 0 70px rgba(224, 68, 46, .05);
  pointer-events: none;
}

.races-page .races-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(168deg, transparent 0 92px, rgba(255, 250, 244, .065) 92px 94px, transparent 94px 142px), radial-gradient(circle at 78% 58%, rgba(255, 173, 66, .2), transparent 34%);
  pointer-events: none;
}

.races-page .races-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 66px;
  align-items: center;
}

.races-page .races-hero-copy { position: relative; z-index: 2; }

.races-page .races-eyebrow,
.races-page .races-kicker {
  display: block;
  color: var(--races-red);
  font: 800 12px/1.2 'Figtree', system-ui, sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.races-page .races-eyebrow { color: var(--races-gold); }

.races-page .races-hero h1 {
  max-width: 790px;
  color: #fff;
  font: 800 clamp(52px, 7vw, 88px)/.93 'Barlow', sans-serif;
  letter-spacing: -.045em;
  margin: 0 0 24px;
}

.races-page .races-hero-sub {
  max-width: 740px;
  color: rgba(255, 250, 244, .87);
  font: 18px/1.6 'Muli', system-ui, sans-serif;
  margin: 0 0 23px;
}

.races-page .races-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.races-page .races-badge {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 173, 66, .42);
  background: rgba(255, 250, 244, .08);
  color: #fff;
  font: 700 13px/1.3 'Figtree', system-ui, sans-serif;
}

.races-page .races-relationship {
  max-width: 690px;
  color: rgba(255, 250, 244, .7);
  font: 14px/1.55 'Muli', system-ui, sans-serif;
  margin: 0 0 27px;
}

.races-page .races-relationship strong { color: var(--races-gold); }

.races-page .races-hero-actions,
.races-page .races-final-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 27px;
}

.races-page .races-primary-cta,
.races-page .races-handoff-primary {
  min-height: 54px;
  margin: 0;
  background: var(--races-red);
  box-shadow: 8px 8px 0 rgba(255, 173, 66, .2);
}

.races-page .races-primary-cta:hover,
.races-page .races-handoff-primary:hover { background: #bd3324; }

.races-page .races-external-cta,
.races-page .races-final-external {
  color: rgba(255, 250, 244, .86);
  font: 600 14px/1.4 'Muli', system-ui, sans-serif;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.races-page .races-external-cta:hover,
.races-page .races-final-external:hover { color: var(--races-gold); }

.races-page .races-hero .deal-hero-secondary { text-align: left; margin-top: 20px; }

.races-page .races-bib {
  position: relative;
  padding: 26px 22px 24px;
  border: 2px solid var(--races-orange);
  background: var(--races-white);
  color: var(--races-ink);
  text-align: center;
  transform: rotate(3deg);
  box-shadow: 12px 14px 0 rgba(224, 68, 46, .58);
}

.races-page .races-bib::before,
.races-page .races-bib::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  height: 5px;
  background: repeating-linear-gradient(90deg, var(--races-ink) 0 2px, transparent 2px 7px);
  opacity: .75;
}

.races-page .races-bib::before { top: 13px; }
.races-page .races-bib::after { bottom: 13px; }
.races-page .races-bib-pin { display: block; width: 13px; height: 13px; margin: 0 auto 22px; border-radius: 50%; background: var(--races-red); }
.races-page .races-bib-label,
.races-page .races-bib small,
.races-page .races-price-kicker {
  display: block;
  color: var(--races-red);
  font: 800 11px/1.3 'Figtree', system-ui, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.races-page .races-bib strong {
  display: block;
  margin: 11px 0 8px;
  color: var(--races-ink);
  font: 800 74px/.85 'Barlow', sans-serif;
  letter-spacing: -.06em;
}

.races-page .races-bib > span:not(.races-bib-pin):not(.races-bib-label) {
  display: block;
  color: var(--races-ink);
  font: 800 14px/1.35 'Figtree', system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.races-page .races-bib small { margin-top: 28px; color: var(--races-muted); letter-spacing: .09em; }

.races-page .races-offer {
  padding: 72px 48px 76px;
  background: var(--races-paper);
  border-bottom: 1px solid var(--races-line);
}

.races-page .races-offer-inner {
  max-width: 1140px;
  margin: 0 auto 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 58px;
  align-items: center;
}

.races-page .races-offer h2 {
  max-width: 720px;
  color: var(--races-ink);
  font: 800 46px/1.02 'Barlow', sans-serif;
  letter-spacing: -.035em;
  margin: 0 0 17px;
}

.races-page .races-offer p,
.races-page .races-section-intro > p,
.races-page .races-handoff p,
.races-page .races-final-cta > p {
  color: var(--races-muted);
  font: 16px/1.65 'Muli', system-ui, sans-serif;
  margin: 0;
}

.races-page .races-offer p { max-width: 740px; }

.races-page .races-offer-price {
  padding: 25px 24px 28px;
  border: 2px solid var(--races-ink);
  border-top: 8px solid var(--races-red);
  background: var(--races-ink);
  color: #fff;
  text-align: center;
  transform: rotate(-2deg);
  box-shadow: 12px 12px 0 rgba(224, 68, 46, .22);
}

.races-page .races-offer-price .races-price-kicker { color: var(--races-orange); }
.races-page .races-offer-price strong { display: block; color: var(--races-gold); font: 800 74px/.88 'Barlow', sans-serif; margin: 11px 0 12px; }
.races-page .races-offer-price > span:last-child { display: block; font: 700 13px/1.45 'Figtree', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }

.races-page .races-offer-actions {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
}

.races-page .races-dark-cta { min-height: 50px; background: var(--races-ink); }
.races-page .races-dark-cta:hover { background: #46302c; }
.races-page .races-offer-link,
.races-page .races-handoff-link { color: var(--races-ink); font: 700 14px/1.4 'Muli', system-ui, sans-serif; text-decoration: underline; text-underline-offset: 4px; }
.races-page .races-offer-link:hover,
.races-page .races-handoff-link:hover { color: var(--races-red); }

.races-page .races-trust {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 48px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
  background: var(--races-white);
}

.races-page .races-trust-item {
  min-width: 0;
  padding: 21px 20px 20px;
  border-left: 4px solid var(--races-red);
  background: #f8eee6;
}

.races-page .races-trust-item:nth-child(2n) { border-left-color: var(--races-orange); }
.races-page .races-trust-item > span,
.races-page .races-use-case > span { display: block; color: var(--races-red); font: 800 13px 'Barlow', sans-serif; letter-spacing: .12em; margin-bottom: 15px; }
.races-page .races-trust-item h3,
.races-page .races-use-case h3 { color: var(--races-ink); font: 700 18px/1.2 'Figtree', system-ui, sans-serif; margin: 0 0 8px; }
.races-page .races-trust-item p,
.races-page .races-use-case p { color: var(--races-muted); font: 14px/1.55 'Muli', system-ui, sans-serif; margin: 0; }

.races-page .races-use-cases {
  padding: 82px 48px 90px;
  background: var(--races-blush);
  border-top: 1px solid var(--races-line);
  border-bottom: 1px solid var(--races-line);
}

.races-page .races-section-intro { max-width: 790px; margin: 0 auto; text-align: center; }
.races-page .races-section-intro .deal-section-heading { margin-bottom: 18px; }
.races-page .races-use-case-grid { max-width: 1140px; margin: 45px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.races-page .races-use-case { min-width: 0; padding: 25px 21px 28px; border-top: 5px solid var(--races-orange); background: var(--races-white); transition: transform .2s ease, box-shadow .2s ease; }
.races-page .races-use-case:nth-child(2n) { border-top-color: var(--races-red); }
.races-page .races-use-case:hover { transform: translateY(-5px); box-shadow: 0 13px 26px rgba(32, 22, 22, .13); }

.races-page .races-handoff {
  padding: 72px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 410px);
  gap: 50px;
  align-items: center;
  background: var(--races-ink);
  color: #fff;
}

.races-page .races-handoff > div:first-child { max-width: 740px; margin-left: max(0px, calc((100vw - 1140px) / 2)); }
.races-page .races-handoff h2 { color: #fff; font: 800 42px/1.04 'Barlow', sans-serif; letter-spacing: -.03em; margin: 0 0 17px; }
.races-page .races-handoff p { color: rgba(255, 250, 244, .77); }
.races-page .races-handoff .races-kicker { color: var(--races-orange); }
.races-page .races-handoff-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.races-page .races-handoff-link { color: rgba(255, 250, 244, .88); }
.races-page .races-handoff-link:hover { color: var(--races-orange); }

.races-page .races-process { padding: 62px 24px 25px; background: var(--races-white); border-bottom: 1px solid var(--races-line); text-align: center; }
.races-page .races-process .races-kicker { margin-bottom: 11px; }
.races-page .races-process .how-step-list { max-width: 1200px; margin: 0 auto 24px; text-align: left; }
.races-page .races-process .how-timeline { max-width: 1200px; margin: 0 auto 8px; }
.races-page .races-testimonials { background: #e8d8cb; }
.races-page .races-testimonials .races-section-intro > p a { color: var(--races-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.races-page .races-testimonials .testimonials-page-grid { max-width: 1200px; }

.races-page .races-faq { max-width: 900px; margin: 0 auto; padding: 74px 48px 68px; background: var(--races-white); }
.races-page .races-faq .races-kicker { text-align: center; }
.races-page .races-faq .faq-item { border-left-color: var(--races-red); }
.races-page .races-faq .faq-question::after { color: var(--races-red); }

.races-page .races-final-cta { position: relative; overflow: hidden; padding: 80px 48px 70px; background: var(--races-deep); color: #fff; text-align: center; }
.races-page .races-final-cta::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(172deg, transparent 0 78px, rgba(255, 173, 66, .1) 78px 80px, transparent 80px 132px), radial-gradient(circle at 82% 44%, rgba(224, 68, 46, .25), transparent 48%); pointer-events: none; }
.races-page .races-final-cta > * { position: relative; z-index: 1; }
.races-page .races-final-cta .races-kicker { color: var(--races-orange); }
.races-page .races-final-cta h2 { color: #fff; font: 800 clamp(40px, 5vw, 62px)/1.01 'Barlow', sans-serif; letter-spacing: -.035em; margin: 0 auto 17px; }
.races-page .races-final-cta > p { max-width: 720px; margin: 0 auto 28px; color: rgba(255, 250, 244, .78); }
.races-page .races-final-actions { justify-content: center; margin-bottom: 25px; }
.races-page .races-final-fine { margin-bottom: 18px !important; font-size: 14px !important; }
.races-page .races-final-fine a,
.races-page .races-see-also a { color: var(--races-orange); text-decoration: underline; text-underline-offset: 3px; }
.races-page .races-see-also { margin: 0 auto !important; font-size: 14px !important; }
.races-page .races-see-also a:hover,
.races-page .races-final-fine a:hover { color: #fff; }

.races-page a:focus-visible,
.races-page summary:focus-visible,
.races-page button:focus-visible { outline: 3px solid var(--races-orange); outline-offset: 3px; }

@media (max-width: 1050px) {
  .races-page .races-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .races-page .races-use-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .races-page .races-handoff > div:first-child { margin-left: 0; }
}

@media (max-width: 768px) {
  .races-page .races-hero,
  .races-page .races-offer,
  .races-page .races-use-cases,
  .races-page .races-handoff,
  .races-page .races-final-cta { padding-left: 24px; padding-right: 24px; }
  .races-page .races-hero { padding-top: 68px; padding-bottom: 68px; }
  .races-page .races-hero::before { width: 280px; height: 280px; right: -130px; top: 210px; }
  .races-page .races-hero-inner { grid-template-columns: 1fr; gap: 46px; }
  .races-page .races-bib { max-width: 280px; margin-left: 13px; }
  .races-page .races-hero-actions,
  .races-page .races-final-actions { align-items: stretch; flex-direction: column; }
  .races-page .races-external-cta,
  .races-page .races-final-external { text-align: left; }
  .races-page .races-offer-inner { grid-template-columns: 1fr; gap: 34px; }
  .races-page .races-offer h2 { font-size: 36px; }
  .races-page .races-offer-price { max-width: 330px; width: 100%; margin: 0 auto; }
  .races-page .races-handoff { grid-template-columns: 1fr; gap: 34px; }
  .races-page .races-hero .races-primary-cta,
  .races-page .races-dark-cta,
  .races-page .races-final-actions .races-primary-cta { width: 100%; max-width: none; text-align: center; }
}

@media (max-width: 540px) {
  .races-page .races-trust,
  .races-page .races-use-case-grid { grid-template-columns: 1fr; }
  .races-page .races-trust { padding-left: 24px; padding-right: 24px; }
  .races-page .races-hero h1 { font-size: 46px; }
  .races-page .races-hero-sub { font-size: 17px; }
  .races-page .races-offer-actions { align-items: stretch; flex-direction: column; text-align: center; }
  .races-page .races-offer-link { display: block; }
  .races-page .races-faq { padding-left: 24px; padding-right: 24px; }
}