:root {
  --brand-near-black: #171815;
  --brand-off-white: #f4f1ea;
  --brand-orange: #ff4b2b;
}

/* Replace the old decorative text plus with the approved lopsided platform mark. */
html body .hero::after {
  content: "";
  width: clamp(100px, 14vw, 240px);
  height: clamp(120px, 18vw, 300px);
  background: var(--brand-orange);
  font-size: 0;
  -webkit-mask: url("/marketing/brand-platform-plus.svg?v=approved-20260829") center / contain no-repeat;
  mask: url("/marketing/brand-platform-plus.svg?v=approved-20260829") center / contain no-repeat;
}

/* The mask is traced from the approved artwork; colour is the only variant. */
.platform-mark {
  display: inline-block;
  width: 1.8rem;
  height: 2.2rem;
  flex: 0 0 auto;
  background: var(--brand-orange);
  -webkit-mask: url("/marketing/brand-platform-plus.svg?v=approved-20260829") center / contain no-repeat;
  mask: url("/marketing/brand-platform-plus.svg?v=approved-20260829") center / contain no-repeat;
}
.platform-mark--white { background: var(--brand-off-white); }
.platform-mark--black { background: var(--brand-near-black); }
.platform-mark--orange { background: var(--brand-orange); }
.platform-mark[aria-hidden="true"] { pointer-events: none; }

.sport-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: inherit;
  text-decoration: none;
}
.sport-brand-label {
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}

/* App shells use the compact mark on small surfaces without reconstructing the wordmark as text. */
.platform-brand-mark {
  display: inline-block;
  width: 2rem;
  height: 2.45rem;
  background: var(--brand-orange);
  -webkit-mask: url("/marketing/brand-platform-plus.svg?v=approved-20260829") center / contain no-repeat;
  mask: url("/marketing/brand-platform-plus.svg?v=approved-20260829") center / contain no-repeat;
}