/* The leaderboards picker: KPI groups mid-pitch, each opening a list of
   stats whose boards open in the window. */
.stage-boards {
  backdrop-filter: blur(6px);
  background: var(--ps-chrome);
  border: 2px solid var(--ps-ink);
  border-radius: 12px;
  box-shadow: var(--ps-chrome-shadow);
  color: var(--ps-cream);
  left: 50%;
  max-height: 72vh;
  overflow-y: auto;
  padding: 18px 22px;
  pointer-events: auto;
  position: absolute;
  scrollbar-width: thin;
  top: 55%;
  transform: translate(-50%, -50%);
  width: min(400px, calc(100vw - 48px));
  z-index: 2;
}

/* Behind an open leaderboard window the picker waits under it, revealed
   when the window is minimized. */
.stage-boards--backdrop {
  z-index: 0;
}

.stage-boards__lead {
  color: var(--ps-cream-soft);
  font-size: 13px;
  margin: 0 0 6px;
}

.stage-boards__group {
  border-top: 1px solid rgb(255 251 240 / 0.14);
}

.stage-boards__group summary {
  align-items: baseline;
  color: var(--ps-cream);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  justify-content: space-between;
  list-style: none;
  padding: 10px 0;
  user-select: none;
}

.stage-boards__group summary::-webkit-details-marker {
  display: none;
}

.stage-boards__group summary:hover {
  color: var(--ps-yellow);
}

.stage-boards__count {
  color: var(--ps-cream-soft);
  font-family: var(--font-mono);
  font-size: 11px;
}

.stage-boards__group[open] .stage-boards__count {
  color: var(--ps-yellow);
}

.stage-boards__list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0 0 12px 12px;
}

.stage-boards__link {
  color: var(--ps-cream-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  text-decoration: none;
  width: fit-content;
}

.stage-boards__link:hover {
  color: var(--ps-yellow);
}

.stage-boards__tease {
  border-top: 1px dashed rgb(255 251 240 / 0.2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  padding-top: 10px;
}

.stage-boards__tease-question {
  color: var(--ps-cream-soft);
  font-size: 13px;
  margin: 0;
}

.stage-boards__tease-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stage-boards__tease-actions .btn {
  flex: 1 1 auto;
  font-size: 12px;
  padding: 7px 10px;
}

@media (max-width: 74.999rem) {
  .stage-boards {
    max-height: none;
    position: static;
    transform: none;
    width: 100%;
  }
}

/* The leaderboard filter row: Best/Worst, the position dropdown and the
   minutes slider share one line on big screens. */
.board-filter {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: space-between;
}

.board-filter__controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.board-filter__dropdown {
  position: relative;
}

.board-filter__dropdown summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.board-filter__dropdown summary::-webkit-details-marker {
  display: none;
}

.board-filter__dropdown summary::after {
  content: " ▾";
  font-size: 10px;
}

.board-filter__dropdown[open] summary::after {
  content: " ▴";
}

.board-filter__menu {
  background: var(--ps-paper);
  border: 2px solid var(--ps-ink);
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(14, 17, 17, 0.5);
  display: grid;
  gap: 4px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 320px;
  min-width: 320px;
  overflow-y: auto;
  padding: 12px 14px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
}

.board-filter__menu-heading {
  color: var(--ps-red-deep, var(--ps-red));
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  grid-column: 1 / -1;
  letter-spacing: 0.08em;
  margin-top: 4px;
  text-transform: uppercase;
}

.board-filter__option {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  gap: 7px;
}

.board-filter__option input {
  accent-color: var(--ps-red);
}

.board-filter__minutes {
  align-items: center;
  display: flex;
  gap: 8px;
}

.board-filter__minutes-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  min-width: 72px;
  text-align: right;
  white-space: nowrap;
}

.board-filter__minutes input[type="range"] {
  accent-color: var(--ps-red);
  width: clamp(120px, 16vw, 220px);
}

/* The Explore page: search straight on the pitch with the popular leagues
   beside it; both panels wait behind the window once results open. */
.stage-explore {
  backdrop-filter: blur(6px);
  background: var(--ps-chrome);
  border: 2px solid var(--ps-ink);
  border-radius: 12px;
  box-shadow: var(--ps-chrome-shadow);
  color: var(--ps-cream);
  left: 50%;
  max-width: min(520px, calc(100vw - 48px));
  padding: 20px 24px;
  pointer-events: auto;
  position: absolute;
  top: 42%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 2;
}

.stage-explore__lead {
  color: var(--ps-cream-soft);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 14px;
}

.stage-explore__types {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  margin-top: 12px;
}

.stage-explore__type {
  align-items: center;
  color: var(--ps-cream-soft);
  cursor: pointer;
  display: flex;
  font-family: var(--font-mono);
  font-size: 12px;
  gap: 6px;
}

.stage-explore__type input {
  accent-color: var(--ps-red);
}

.stage-explore__type:has(input:checked) {
  color: var(--ps-yellow);
}

.stage-explore-aside {
  backdrop-filter: blur(6px);
  background: var(--ps-chrome);
  border: 2px solid var(--ps-ink);
  border-radius: 12px;
  box-shadow: var(--ps-chrome-shadow);
  color: var(--ps-cream);
  max-height: 74vh;
  overflow-y: auto;
  padding: 16px 20px;
  pointer-events: auto;
  position: absolute;
  scrollbar-width: thin;
  top: 42%;
  transform: translateY(-50%);
  z-index: 2;
}

.stage-explore-aside--right {
  right: clamp(28px, 9vw, 160px);
}

.stage-explore-aside__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stage-explore-aside__link {
  color: var(--ps-cream-soft);
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-decoration: none;
  width: fit-content;
}

.stage-explore-aside__link:hover {
  color: var(--ps-yellow);
}

.stage-explore--backdrop {
  z-index: 0;
}

@media (max-width: 74.999rem) {
  .stage-explore,
  .stage-explore-aside {
    position: static;
    transform: none;
    max-height: none;
    max-width: none;
  }
}

/* Who-we-help: centered sections and the worked-with club crests. */
.audience-centered {
  align-items: center;
  margin-inline: auto;
  max-width: 46rem;
  text-align: center;
}

.showcase-clubs {
  align-items: center;
  text-align: center;
}

.media-showcase__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

.media-showcase__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.media-showcase__item img {
  border: 2px solid var(--ps-ink);
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(14, 17, 17, 0.35);
  height: auto;
  width: 100%;
}

.media-showcase__caption {
  color: var(--ps-ink-soft);
  font-size: 12.5px;
}

.media-showcase__video {
  max-width: 46rem;
}

.media-showcase__video iframe {
  aspect-ratio: 16 / 9;
  border: 2px solid var(--ps-ink);
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(14, 17, 17, 0.35);
  display: block;
  width: 100%;
}

.media-showcase__item--portrait {
  max-width: 440px;
}

.media-showcase__item--portrait img {
  width: 100%;
}

.media-showcase__item--wide {
  grid-column: 1 / -1;
}

.feature-block__image {
  margin-top: 14px;
}

.product-image {
  margin-inline: auto;
  max-width: 520px;
}

/* A landscape screenshot of a whole page needs the full column to be legible. */
.product-image--wide {
  max-width: none;
  width: 100%;
}

.product-page.stack-xxl > * + * {
  margin-block-start: clamp(3.5rem, 7vw, 5.5rem);
}

.product-hero--image-right {
  align-items: center;
  display: grid;
  gap: var(--space-xxl);
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.8fr);
}

.product-hero__image {
  margin: 0;
  max-width: none;
}

.product-features--image-right {
  align-items: center;
  display: grid;
  gap: var(--space-xxl);
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.8fr);
}

.product-features--image-right .product-features__grid {
  grid-template-columns: 1fr;
}

.product-features--image-right .box {
  padding: var(--space-s) var(--space-l);
}

.product-features__image {
  margin: 0;
  max-width: none;
}

.product-features__title {
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  margin: 0;
}

.product-showcase__grid {
  gap: clamp(3.5rem, 7vw, 5.5rem);
  grid-template-columns: 1fr;
}

.product-showcase__item,
.product-showcase__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.product-showcase__title,
.product-showcase__description {
  margin: 0;
}

.product-showcase__title {
  font-size: clamp(1.25rem, 2.3vw, 1.75rem);
}

.product-showcase__description {
  color: var(--ps-ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 49.999rem) {
  .product-hero--image-right,
  .product-features--image-right {
    display: flex;
    flex-direction: column;
  }

  .product-hero__image,
  .product-features__image {
    max-width: 520px;
  }
}

.mcp-terminal--json .mcp-terminal__line {
  white-space: pre;
}

.showcase-clubs__row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  justify-content: center;
}

.showcase-clubs__crest {
  display: inline-flex;
  text-decoration: none;
  transition: transform 120ms ease-out;
}

.showcase-clubs__crest:hover {
  transform: translateY(-2px);
}

/* The unlock pitch-side call to action on entity overview pages. */
.stage-unlock {
  bottom: 92px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  left: 50%;
  max-width: 420px;
  pointer-events: auto;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
  z-index: 2;
}

.stage-unlock__question {
  color: var(--ps-cream);
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.35);
  text-wrap: balance;
}

.stage-unlock__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.stage-unlock__actions .btn {
  font-size: 13px;
  min-height: 0;
  min-width: 130px;
  padding: 6px 14px;
}

@media (max-width: 74.999rem) {
  .stage-unlock {
    position: static;
    transform: none;
  }
}

/* ---------- Home hero ---------- */

.stage-hero {
  align-items: center;
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  grid-template-columns: 1.05fr 0.95fr;
  max-height: 100%;
  max-width: 1480px;
  width: 100%;
}

@media (max-width: 49.999rem) {
  .stage-hero {
    align-items: start;
    grid-template-columns: 1fr;
    max-height: none;
    padding-block: 24px 40px;
  }
}

.stage-hero__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vh, 20px);
  min-width: 0;
  max-width: 640px;
}

.stage-hero__title {
  color: var(--ps-cream);
  font-size: clamp(30px, 2.6vw + 1.6vh, 62px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
  text-wrap: balance;
}

.stage-hero__accent {
  color: var(--ps-yellow);
}

.stage-hero__lead {
  color: var(--ps-cream-soft);
  font-size: clamp(13px, 0.6vw + 0.7vh, 17px);
  line-height: 1.45;
  margin: 0;
  max-width: 34em;
}

.stage-hero__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Trusted-by marquee ---------- */

.stage-hero__trusted {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 34rem;
  padding-top: 4px;
}

.stage-hero__trusted-label {
  color: rgba(245, 242, 234, 0.45);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stage-trusted {
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  overflow: hidden;
}

.stage-trusted__track {
  animation: stage-trusted-scroll 28s linear infinite;
  display: flex;
  gap: 26px;
  width: max-content;
}

.stage-trusted__track > span {
  display: flex;
  gap: 26px;
}


.stage-trusted__item {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  height: 30px;
}

.stage-trusted__item img {
  height: 100%;
  opacity: 0.92;
  width: auto;
}

/* The same partner logos on a light surface, where cream has to become ink. */

.partner-logos {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.partner-logos__item {
  display: flex;
  height: 32px;
}

.partner-logos__item img {
  filter: invert(1);
  height: 100%;
  opacity: 0.85;
  width: auto;
}

/* ---------- Audience CTA cards laid out on the pitch ---------- */

.stage-hero__ctas {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-self: center;
  max-height: 100%;
  max-width: 680px;
  min-width: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  width: 100%;
}

.stage-hero__ctas-label {
  color: var(--ps-cream-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The tabs are radios: which one is checked decides which panel below is
   shown, so switching needs no script. Only the automatic cycling does. */
.stage-cta-toggle {
  align-self: start;
  background: var(--ps-chrome);
  border: 1px solid rgba(245, 242, 234, 0.12);
  border-radius: 100px;
  display: flex;
  gap: 4px;
  padding: 4px;
}

.stage-cta-toggle__pill {
  border-radius: 100px;
  color: var(--ps-cream-soft);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 8px 14px;
  text-transform: uppercase;
  transition: background-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}

.stage-cta-toggle__pill:hover {
  color: var(--ps-cream);
}

.stage-cta-toggle__radio:checked + .stage-cta-toggle__pill {
  color: var(--ps-ink);
}

.stage-cta-toggle__radio:checked + .stage-cta-toggle__pill--organisations {
  background: var(--ps-cream);
}

.stage-cta-toggle__radio:checked + .stage-cta-toggle__pill--individuals,
.stage-cta-toggle__radio:checked + .stage-cta-toggle__pill--highlights {
  background: var(--ps-yellow);
}

.stage-cta-toggle__radio:checked + .stage-cta-toggle__pill--news {
  background: var(--ps-cream);
}

/* While the tabs step round on their own, a bar fills the active tab for
   as long as it stays. The controller moves on when the bar is full. */
.stage-cta-toggle__pill {
  position: relative;
}

.stage-cta-toggle__pill::after {
  background: currentColor;
  block-size: 2px;
  border-radius: 1px;
  content: "";
  inset-block-end: 3px;
  inset-inline: 14px;
  opacity: 0.7;
  position: absolute;
  scale: 0 1;
  transform-origin: left;
}

.stage-hero__ctas--cycling .stage-cta-toggle__radio:checked + .stage-cta-toggle__pill::after {
  animation: stage-cta-progress 7s linear forwards;
}

.stage-hero__ctas--cycling:is(:hover, :focus-within) .stage-cta-toggle__pill::after {
  animation-play-state: paused;
}

@keyframes stage-cta-progress {
  to { scale: 1 1; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-hero__ctas--cycling .stage-cta-toggle__radio:checked + .stage-cta-toggle__pill::after {
    animation: none;
  }
}

.stage-cta-toggle__radio:focus-visible + .stage-cta-toggle__pill {
  outline: 2px solid var(--ps-yellow);
  outline-offset: 2px;
}

/* The panels share one grid cell so the column keeps the height of the
   tallest one, and the label and tabs stay put when switching. */
.stage-cta-panels {
  display: grid;
  overflow-x: clip;
}

.stage-cta-panel {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 240ms ease, translate 240ms ease, visibility 0s 240ms;
  translate: 24px 0;
  visibility: hidden;
}

.stage-hero__ctas:has(.stage-cta-toggle__radio[value="organisations"]:checked) .stage-cta-panel--organisations,
.stage-hero__ctas:has(.stage-cta-toggle__radio[value="individuals"]:checked) .stage-cta-panel--individuals,
.stage-hero__ctas:has(.stage-cta-toggle__radio[value="news"]:checked) .stage-cta-panel--news,
.stage-hero__ctas:has(.stage-cta-toggle__radio[value="highlights"]:checked) .stage-cta-panel--highlights {
  opacity: 1;
  transition-delay: 0s;
  translate: 0 0;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .stage-cta-panel {
    transition: none;
  }
}

.stage-cta-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stage-cta {
  align-items: center;
  background: var(--ps-paper);
  border: 1px solid rgba(14, 17, 17, 0.1);
  border-radius: 12px;
  color: var(--ps-ink);
  display: grid;
  gap: 2px 16px;
  grid-template-columns: 6rem minmax(0, 1fr) auto;
  padding: 12px 16px;
  text-decoration: none;
  transition: background-color 120ms ease, translate 120ms ease;
}

.stage-cta:hover {
  background: var(--ps-paper-raised);
  color: var(--ps-ink);
  translate: 0 -1px;
}

.stage-cta__eyebrow {
  align-self: center;
  color: var(--ps-ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stage-cta__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stage-cta__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.stage-cta__body {
  color: var(--ps-ink-soft);
  font-size: 13px;
  line-height: 1.4;
}

.stage-cta__action {
  background: var(--ps-red);
  border-radius: 8px;
  color: var(--ps-cream);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  padding: 8px 12px;
  transition: background-color 120ms ease;
  white-space: nowrap;
}

.stage-cta:hover .stage-cta__action {
  background: var(--ps-red-deep);
}

.stage-cta-panel__footer {
  align-items: center;
  border-top: 1px solid rgba(245, 242, 234, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  padding-top: 10px;
}

.stage-cta-panel__note {
  color: var(--ps-cream-soft);
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}

.stage-cta-panel__link {
  color: var(--ps-yellow);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.stage-cta-panel__link:hover {
  color: var(--ps-cream);
}

/* Inside the window the cards sit on paper, so they take the shade. */
.pitch-window .stage-cta {
  background: var(--ps-paper-shade);
}

.pitch-window .stage-cta:hover {
  background: var(--ps-paper-deep);
}

/* ---------- Small screens ---------- */

@media (max-width: 49.999rem) {
  .stage-hero__title {
    font-size: clamp(34px, 10vw, 46px);
  }

  .stage-hero__lead {
    font-size: 16px;
  }

  .stage-hero__actions {
    flex-wrap: nowrap;
  }

  /* reset.css gives .btn a 220px min-width; without this the pair
     overflows the viewport instead of shrinking. */
  .stage-hero__actions .btn {
    flex: 1 1 0;
    font-size: 15px;
    min-width: 0;
    padding-inline: 0.5em;
  }

  .stage-cta {
    gap: 10px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 16px;
  }

  .stage-cta__eyebrow {
    grid-column: 1 / -1;
  }

  .stage-cta__action {
    align-self: end;
    grid-area: 2 / 2;
  }

  .stage-cta__title {
    font-size: 19px;
  }

  .stage-cta__body {
    font-size: 14px;
  }

  .stage-cta-toggle {
    border-radius: 20px;
    flex-wrap: wrap;
  }

  .stage-cta-toggle__pill {
    font-size: 11px;
    padding: 9px 12px;
  }

  .stage-cta-toggle__pill::after {
    inset-inline: 12px;
  }

  .stage-trusted__item {
    height: 26px;
  }
}

/* On the narrowest phones the hero CTA pair stacks instead of squeezing. */
@media (max-width: 23.999rem) {
  .stage-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-trusted__track {
    animation: none;
  }
}

/* The eleven page's controls: the shape, how much of the side we can see,
   and the way to the full squad. They take the corner opposite the sidenav,
   where the shape never places anyone, rather than the foot of the stage
   where the full-backs stand. */
.pitch-site .stage-eleven-actions {
  align-items: center;
  color: var(--ps-cream-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: auto;
  text-align: center;
}

.pitch-site .stage-eleven-actions__note {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin: 0;
}

@media (min-width: 75rem) {
  .pitch-site .stage-eleven-actions {
    align-items: flex-start;
    backdrop-filter: blur(6px);
    background: var(--ps-chrome);
    border: 2px solid var(--ps-ink);
    border-radius: 10px;
    box-shadow: var(--ps-chrome-shadow);
    max-width: 17rem;
    padding: 12px 14px;
    position: absolute;
    right: clamp(18px, 3.4vw, 48px);
    text-align: left;
    top: 14px;
    z-index: 3;
  }
}