.overview-page {
  background: #fff;
}

.overview-page .content {
  border: 0;
  box-shadow: none;
}

.overview-hero {
  --overview-accent: #c9182a;
  --overview-accent-rgb: 201, 24, 42;
  position: relative;
  height: var(--app-hero-height);
  min-height: var(--app-hero-height);
  overflow: hidden;
  border: 0;
  background: #fff;
  isolation: isolate;
}

.overview-hero[data-overview-theme="biases"] {
  --overview-accent: #00a6b3;
  --overview-accent-rgb: 0, 166, 179;
}

.overview-hero[data-overview-theme="fallacies"] {
  --overview-accent: #ed9d12;
  --overview-accent-rgb: 237, 157, 18;
}

.overview-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .22) 4%, #000 15%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .22) 4%, #000 15%, #000 100%);
}

.overview-hero::before,
.overview-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.overview-hero::before {
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .98) 30%, rgba(255, 255, 255, .86) 43%, rgba(255, 255, 255, .22) 58%, transparent 73%);
}

.overview-hero::after {
  inset: 0 auto 0 0;
  z-index: 1;
  width: 180px;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .96) 20%, rgba(255, 255, 255, .5) 58%, transparent 100%);
}

.overview-hero-visual {
  position: absolute;
  right: 35px;
  bottom: -35px;
  z-index: 2;
  width: 420px;
  aspect-ratio: 1000 / 901;
  pointer-events: none;
}

.overview-hero-foreground {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.overview-hero-depth-fix {
  position: absolute;
  top: 2.5%;
  left: -1.5%;
  z-index: 2;
  width: 56%;
  height: 96%;
  display: block;
  object-fit: contain;
  filter: saturate(1.05) drop-shadow(0 0 7px rgba(var(--overview-accent-rgb), .72));
  transform: rotate(-4.5deg) skewY(-1.8deg);
  transform-origin: center;
}

.overview-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 505px;
  padding: 38px 0 18px 35px;
}

.overview-hero-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 13px;
}

.overview-hero-category-icon {
  position: static;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 9px 24px rgba(var(--overview-accent-rgb), .2);
}

.overview-hero-title {
  margin: 0;
  color: #071d55;
  font-size: 52px;
  font-weight: 1000;
  letter-spacing: -.045em;
  line-height: .96;
}

.overview-hero-title span {
  color: var(--overview-accent);
}

.overview-hero-description {
  max-width: 470px;
  margin: 0 0 17px;
  color: #10285d;
  font-size: 16px;
  line-height: 1.45;
}

.overview-hero-loadout {
  position: relative;
  isolation: isolate;
  max-width: 490px;
  min-height: 102px;
  display: flex;
  align-items: center;
  padding-top: 4px;
}

.overview-hero-loadout::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 46px;
  left: 67px;
  right: 4px;
  height: 3px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(var(--overview-accent-rgb), .85), rgba(var(--overview-accent-rgb), .42) 58%, transparent);
  box-shadow: 0 0 13px rgba(var(--overview-accent-rgb), .28);
  transform: rotate(-1.4deg) skewX(-18deg);
}

.overview-hero-loadout::after {
  content: "";
  position: absolute;
  z-index: -2;
  bottom: 4px;
  left: 58px;
  width: 260px;
  height: 58px;
  opacity: .12;
  background: radial-gradient(circle, var(--overview-accent) 1px, transparent 1.6px) 0 0 / 8px 8px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
  mask-image: linear-gradient(90deg, #000, transparent);
}

.overview-lesson-count {
  position: relative;
  z-index: 1;
  width: 68px;
  flex: 0 0 68px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 14px;
}

.overview-lesson-count::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 4px;
  width: 2px;
  height: 56px;
  background: linear-gradient(var(--overview-accent), rgba(var(--overview-accent-rgb), .08));
  transform: rotate(7deg);
}

.overview-lesson-count strong {
  color: var(--overview-accent);
  font-size: 48px;
  font-weight: 1000;
  letter-spacing: -.07em;
  line-height: .78;
  text-shadow: 0 8px 18px rgba(var(--overview-accent-rgb), .18);
}

.overview-lesson-count span {
  margin-top: 9px;
  color: #071d55;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
}

.overview-loadout-track {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.overview-loadout-item {
  --token-color: #356ee8;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #071d55;
  text-align: center;
}

.overview-loadout-item:nth-child(2) {
  --token-color: #315fca;
}

.overview-loadout-item:nth-child(3) {
  --token-color: #8c39bd;
}

.overview-loadout-token {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  margin-bottom: 7px;
  filter: drop-shadow(0 9px 10px color-mix(in srgb, var(--token-color) 24%, transparent));
  transform: rotate(-3deg);
}

.overview-loadout-item:nth-child(2) .overview-loadout-token {
  transform: translateY(-3px) rotate(2deg);
}

.overview-loadout-item:nth-child(3) .overview-loadout-token {
  transform: rotate(4deg);
}

.overview-loadout-token img {
  position: static;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.overview-loadout-item strong {
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .025em;
  line-height: 1.05;
}

.overview-loadout-item small {
  margin-top: 2px;
  color: #64739a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .overview-hero::before {
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .92) 50%, rgba(255, 255, 255, .35) 78%, rgba(255, 255, 255, .08));
  }

  .overview-hero::after {
    width: 116px;
  }

  .overview-hero-copy {
    max-width: 485px;
    padding: 42px 24px 25px;
  }

  .overview-hero-visual {
    right: -32px;
    bottom: -55px;
    width: 378px;
    opacity: .72;
  }
}

@media (max-width: 700px) {
  .overview-hero::before {
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .88) 62%, rgba(255, 255, 255, .32));
  }

  .overview-hero::after {
    width: 72px;
  }

  .overview-hero-copy {
    width: calc(100dvw - 36px);
    max-width: calc(100dvw - 36px);
    padding: 37px 18px 30px;
  }

  .overview-hero-heading {
    gap: 10px;
  }

  .overview-hero-title {
    font-size: clamp(40px, 11.5vw, 50px);
  }

  .overview-hero-category-icon {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  .overview-hero-description {
    max-width: 340px;
    font-size: 16px;
  }

  .overview-hero-loadout {
    max-width: 354px;
  }

  .overview-lesson-count {
    width: 60px;
    flex-basis: 60px;
  }

  .overview-lesson-count strong {
    font-size: 42px;
  }

  .overview-loadout-track {
    gap: 7px;
  }

  .overview-loadout-token {
    width: 58px;
    height: 58px;
  }

  .overview-hero-visual {
    right: 10px;
    bottom: -65px;
    width: min(360px, 92vw);
    opacity: .52;
  }

  .overview-page .filterbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .overview-page .filterbar .sort {
    flex-basis: 100%;
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .overview-hero-description {
    max-width: 292px;
  }

  .overview-hero-loadout {
    width: 354px;
    max-width: 100%;
  }

  .overview-hero-visual {
    right: 10px;
    bottom: -65px;
    width: min(360px, 92vw);
    opacity: .52;
  }
}