.gx-page a {
  color: inherit;
  text-decoration: none;
}

.gx-page a:hover {
  text-decoration: underline;
}

.gx-hero {
  margin: 0 0 32px;
  padding: 36px 32px 32px;
  background: #000;
  color: #fff;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.gx-hero--visual {
  background:
    linear-gradient(180deg, rgba(10, 10, 10, .50) 0%, rgba(10, 10, 10, 0) 26%, rgba(10, 10, 10, 0) 54%, rgba(10, 10, 10, .72) 100%),
    linear-gradient(90deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, .22) 44%, rgba(10, 10, 10, 0) 68%),
    var(--team-hero-image) center / cover no-repeat,
    #0a0a0a;
}

.gx-hero::after {
  content: "";
  position: absolute;
  right: -54px;
  top: -38px;
  width: 210px;
  height: 210px;
  border: 22px solid var(--fc-volt);
  transform: rotate(14deg);
  opacity: .9;
}

.gx-hero__eyebrow {
  position: relative;
  z-index: 1;
  font-family: var(--fc-font-mono);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--fc-volt);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.gx-hero__title {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: .95;
  letter-spacing: 0;
  max-width: 12ch;
}

.gx-hero__sub {
  position: relative;
  z-index: 1;
  font-size: 15px;
  color: rgba(255,255,255,.74);
  max-width: 60ch;
  line-height: 1.5;
  margin: 0;
}

.gx-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 36px;
}

.gx-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, .28fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 36px;
}

.gx-layout .gx-grid {
  margin-bottom: 0;
}

.gx-tile {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  padding: 22px 24px;
  color: #fff;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.gx-tile--anthems {
  grid-column: span 4;
  background: var(--fc-electric);
}

/* FAN-581 (A11Y-M07): inherited .gx-tile white text on bubblegum was
   2.57:1, fails even this 42px title's 3:1 large-text floor — ink reaches
   8.16:1. .gx-tile__strip-icon keeps its own hardcoded white for the other
   (darker) variants, so it needs its own override here too. */
.gx-tile--funny {
  grid-column: span 2;
  background: var(--fc-bubblegum);
  color: var(--fc-black);
}

.gx-tile--funny .gx-tile__strip-icon {
  color: var(--fc-black);
}

.gx-tile--classic {
  grid-column: span 2;
  background: var(--fc-orange);
}

.gx-tile--hof {
  grid-column: span 2;
  background: #000;
  color: var(--fc-volt);
}

.gx-tile--hof .gx-tile__title,
.gx-tile--hof .gx-tile__strip-nm,
.gx-tile--hof .gx-tile__chant a {
  color: #fff;
}

.gx-tile--avin {
  grid-column: span 2;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 24px, rgba(0,0,0,.08) 24px 48px),
    #16873e;
}

.gx-tile--vintage {
  grid-column: span 2;
  background: linear-gradient(180deg, #5c4033 0%, #332116 100%);
}

.gx-tile__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

.gx-tile__pill {
  font-family: var(--fc-font-mono);
  font-size: 10px;
  letter-spacing: 0;
  background: rgba(255,255,255,.18);
  padding: 4px 8px;
  border-radius: 3px;
  text-transform: uppercase;
}

.gx-tile--hof .gx-tile__pill {
  background: var(--fc-volt);
  color: #000;
}

.gx-tile__count {
  font-family: var(--fc-font-mono);
  font-size: 11px;
  letter-spacing: 0;
  opacity: .76;
  text-transform: uppercase;
}

.gx-tile__body {
  min-width: 0;
}

.gx-tile__title {
  display: block;
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 42px;
  line-height: .98;
  letter-spacing: 0;
  margin: 0;
}

.gx-tile--anthems .gx-tile__title {
  font-size: 56px;
}

.gx-tile__desc {
  font-size: 13px;
  line-height: 1.45;
  opacity: .86;
  max-width: 42ch;
  margin: 8px 0 0;
}

.gx-tile__strip {
  margin-top: 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,.13);
  border-radius: 6px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.gx-tile--hof .gx-tile__strip {
  background: rgba(255,255,255,.06);
}

.gx-tile__strip-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.22);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  cursor: pointer;
}

.gx-tile__strip-icon:hover {
  background: #fff;
  color: #000;
}

.gx-tile__strip-meta {
  font-family: var(--fc-font-mono);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
  opacity: .72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gx-tile__strip-nm {
  display: block;
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gx-tile__strip-rank {
  font-family: var(--fc-font-mono);
  font-size: 11px;
  letter-spacing: 0;
  opacity: .72;
  font-variant-numeric: tabular-nums;
}

.gx-tile__chants {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.gx-tile__chant {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 7px 8px;
  background: rgba(255,255,255,.1);
  border-radius: 4px;
}

.gx-tile__chant-rank {
  font-family: var(--fc-font-mono);
  font-size: 11px;
  letter-spacing: 0;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

.gx-tile__chant a {
  display: block;
  min-width: 0;
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gx-tile__chant em {
  display: block;
  margin-top: 3px;
  font-style: normal;
}

.gx-tile__chant em a {
  font-family: var(--fc-font-mono);
  font-size: 10px;
  letter-spacing: 0;
  font-weight: 400;
  opacity: .72;
  text-transform: uppercase;
}

.gx-why {
  background: #fff;
  border: 1px solid #ececea;
  border-radius: 8px;
  padding: 28px 32px;
  margin-bottom: 36px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.gx-why__col h2 {
  margin: 0 0 8px;
  font-family: var(--fc-font-mono);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--fc-bubblegum);
  text-transform: uppercase;
}

.gx-why__col p {
  margin: 0;
  font-size: 13px;
  color: rgba(0,0,0,.78);
  line-height: 1.55;
}

.gx-notes {
  border-top: 1px solid #ececea;
}

.gx-note-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid #ececea;
  align-items: start;
}

.gx-note-row h2 {
  margin: 0;
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0;
  line-height: 1;
}

.gx-note-row__count {
  font-family: var(--fc-font-mono);
  font-size: 11px;
  letter-spacing: 0;
  color: rgba(0,0,0,.55);
  margin-top: 8px;
  text-transform: uppercase;
}

.gx-note-row p {
  margin: 0 0 10px;
  font-size: 14px;
  color: rgba(0,0,0,.78);
  line-height: 1.55;
  max-width: 64ch;
}

.gx-note-row__examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.gx-note-row__chip {
  font-family: var(--fc-font-mono);
  font-size: 11px;
  letter-spacing: 0;
  padding: 5px 10px;
  background: #f3f1eb;
  border-radius: 3px;
  color: #000;
}

.gx-note-row__chip:hover {
  background: var(--fc-volt);
  text-decoration: none;
}

@media (max-width: 980px) {
  .gx-layout {
    grid-template-columns: 1fr;
  }

  .gx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gx-tile,
  .gx-tile--anthems,
  .gx-tile--funny,
  .gx-tile--classic,
  .gx-tile--hof,
  .gx-tile--avin,
  .gx-tile--vintage {
    grid-column: span 1;
  }

  .gx-tile--anthems .gx-tile__title {
    font-size: 42px;
  }

  .gx-why {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 700px) {
  .gx-page {
    width: 100%;
    max-width: 100%;
    padding: 28px 14px 80px;
    overflow-x: hidden;
  }

  .gx-hero {
    padding: 28px 22px;
  }

  .gx-hero::after {
    display: none;
  }

  .gx-hero__title {
    font-size: 36px;
    max-width: 9ch;
  }

  .gx-grid {
    grid-template-columns: 1fr;
  }

  .gx-tile {
    min-height: 0;
    padding: 20px;
  }

  .gx-tile__title,
  .gx-tile--anthems .gx-tile__title {
    font-size: 34px;
  }

  .gx-note-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}