.page-products {
  --pp-rail: 216px;
}

.page-products .hero {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.page-products .breadcrumb {
  margin-bottom: var(--space-4);
}

.page-products .breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-products .breadcrumb__list a {
  color: var(--color-ink-muted);
  text-decoration: none;
}

.page-products .breadcrumb__list a:hover {
  color: var(--color-accent);
}

.page-products .hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.page-products .hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--weight-heading);
  line-height: calc(var(--leading-heading) * 0.85);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
  margin: var(--space-2) 0 0;
}

.page-products .hero__lead {
  max-width: var(--measure);
  margin: var(--space-3) 0 0;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-products .hero__bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.page-products .hero__cell {
  min-width: 0;
}

.page-products .hero__cell--focus {
  grid-column: 1 / -1;
}

.page-products .hero__cell--teams {
  grid-column: 1;
}

.page-products .hero__cell--modules {
  grid-column: 2;
}

.page-products .hero__cell--refresh {
  grid-column: 1 / -1;
}

.page-products .module {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}

.page-products .module--focus {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}

.page-products .module--quiet {
  background: var(--color-surface-deep);
}

.page-products .module--deep {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
}

.page-products .module__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.page-products .module--focus .module__label {
  color: color-mix(in srgb, var(--color-primary-ink) 80%, transparent);
}

.page-products .module--deep .module__label {
  color: color-mix(in srgb, var(--color-contrast-ink) 62%, transparent);
}

.page-products .hero__cell--focus .figure {
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-ink);
}

.page-products .hero__num {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.page-products .hero__cell-note {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-ink-muted);
}

.page-products .hero__cell--focus .hero__cell-note {
  color: color-mix(in srgb, var(--color-primary-ink) 84%, transparent);
}

.page-products .media-frame {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface-deep);
  box-shadow: var(--shadow-1);
}

.page-products .media-frame__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.page-products .media-frame__caption {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  max-width: calc(100% - var(--space-4));
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.page-products .hero__media {
  margin-top: var(--space-6);
  aspect-ratio: 12 / 5;
}

.page-products .matrix {
  padding-top: var(--section-y);
  padding-bottom: var(--space-8);
}

.page-products .matrix__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.page-products .matrix__panels {
  min-width: 0;
}

.page-products .rail__label {
  margin: 0 0 var(--space-2);
}

.page-products .rail__list {
  list-style: none;
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0 0 var(--space-1);
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-products .rail__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.page-products .rail__link:hover {
  background: var(--color-highlight);
}

.page-products .rail__link[aria-current="true"] {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.page-products .rail__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
}

.page-products .rail__back {
  margin-top: var(--space-3);
}

.page-products .group {
  margin-bottom: var(--space-8);
}

.page-products .group:last-child {
  margin-bottom: 0;
}

.page-products .group__head {
  margin-bottom: var(--space-3);
}

.page-products .group__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
  margin: var(--space-1) 0 0;
}

.page-products .group__note {
  max-width: var(--measure);
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-products .group__head::after {
  content: "";
  display: block;
  width: 58%;
  height: 1px;
  margin-top: var(--space-3);
  background: var(--color-line);
}

.page-products .group__bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.page-products .group__media {
  grid-column: 1 / -1;
  aspect-ratio: 21 / 9;
}

.page-products .league {
  gap: var(--space-2);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.page-products .league:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

.page-products .league__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

.page-products .league__teams {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-products .league__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.page-products .league__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-ink);
  margin: var(--space-1) 0 0;
}

.page-products .league__desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-products .league__mods {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
}

.page-products .league__mods li {
  padding: calc(var(--space-1) / 4) var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.page-products .league__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}

.page-products .league__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
}

.page-products .league__dot {
  flex: none;
  width: calc(var(--space-1) * 0.85);
  height: calc(var(--space-1) * 0.85);
  border-radius: 50%;
  background: var(--color-accent);
}

.page-products .league__sub {
  appearance: none;
  padding: calc(var(--space-1) * 0.5) var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.page-products .league__sub:hover,
.page-products .league__sub:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-ink);
}

.page-products .guide {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y-lg);
}

.page-products .guide__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.page-products .guide__lead {
  max-width: var(--measure);
  margin: var(--space-3) 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-products .steps {
  list-style: none;
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
}

.page-products .steps__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.page-products .steps__no {
  padding-top: calc(var(--space-1) * 0.25);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.page-products .steps__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.page-products .steps__text {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-products .guide__foot {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-products .guide__foot a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 38%, transparent);
}

.page-products .guide__foot a:hover {
  border-bottom-color: var(--color-accent);
}

.page-products .guide__side {
  display: grid;
  gap: var(--space-2);
}

.page-products .guide__media {
  aspect-ratio: 2 / 1;
}

.page-products .refresh {
  gap: var(--space-2);
}

.page-products .refresh__list {
  list-style: none;
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.page-products .refresh__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-contrast-line);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--color-contrast-ink) 84%, transparent);
}

.page-products .refresh__list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-products .refresh__time {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-contrast-accent);
}

.page-products .refresh__note {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--color-contrast-ink) 70%, transparent);
}

.page-products .refresh__note a {
  color: var(--color-contrast-accent);
  text-decoration: none;
}

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

.page-products [data-reveal].reveal-ready {
  opacity: 0;
  transform: translateY(14px);
}

.page-products [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

@media (min-width: 640px) {
  .page-products .group--europe .group__bento,
  .page-products .group--global .group__bento,
  .page-products .group--asia .group__bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .group--europe .league--wide,
  .page-products .group--global .league--wide,
  .page-products .group--asia .league--wide {
    grid-column: span 2;
  }
}

@media (min-width: 960px) {
  .page-products .hero {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  .page-products .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--gutter);
    align-items: end;
  }

  .page-products .hero__bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .hero__cell--focus {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }

  .page-products .hero__cell--teams {
    grid-column: 3;
    grid-row: 1;
  }

  .page-products .hero__cell--modules {
    grid-column: 3;
    grid-row: 2;
  }

  .page-products .hero__cell--refresh {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

@media (min-width: 1000px) {
  .page-products .matrix__grid {
    grid-template-columns: var(--pp-rail) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }

  .page-products .matrix__rail {
    position: sticky;
    top: var(--space-8);
    align-self: start;
  }

  .page-products .rail__list {
    flex-direction: column;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-products .guide__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-8);
    align-items: start;
  }
}

@media (min-width: 1100px) {
  .page-products .group--europe .group__bento,
  .page-products .group--global .group__bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .group__media {
    aspect-ratio: 24 / 9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products [data-reveal].reveal-ready {
    opacity: 1;
    transform: none;
  }

  .page-products .league:hover {
    transform: none;
  }
}