.learning-detail-page {
  --learning-detail-accent: #c9182a;
  --learning-detail-accent-rgb: 201, 24, 42;
  background: #fff;
}

.learning-detail-page--bias {
  --learning-detail-accent: #0a9cab;
  --learning-detail-accent-rgb: 10, 156, 171;
}

.learning-detail-page--fallacy {
  --learning-detail-accent: #ed9d12;
  --learning-detail-accent-rgb: 237, 157, 18;
}

.learning-detail-page .content {
  border: 0;
  background: #fff;
  box-shadow: none;
}

.learning-detail {
  width: 100%;
  min-width: 0;
}

.learning-detail-hero {
  position: relative;
  isolation: isolate;
  height: var(--app-hero-height);
  min-height: var(--app-hero-height);
  overflow: hidden;
  border: 0;
  background: #0a162a;
}

.learning-detail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
    #fff 0%,
    rgba(255, 255, 255, .99) 30%,
    rgba(255, 255, 255, .94) 40%,
    rgba(255, 255, 255, .66) 49%,
    rgba(255, 255, 255, .2) 60%,
    rgba(255, 255, 255, 0) 72%);
}

.learning-detail-hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.learning-detail-hero-visual {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.learning-detail-hero-character {
  position: absolute;
  bottom: 0;
  max-width: none;
  width: auto;
  display: block;
  filter: drop-shadow(0 18px 22px rgba(3, 11, 30, .22));
}

.learning-detail-hero-character--girl {
  right: 270px;
  z-index: 1;
  height: 350px;
}

.learning-detail-hero-character--boy {
  right: 38px;
  z-index: 2;
  height: 366px;
}

.learning-detail-hero-character--gaslighting {
  right: 34px;
  z-index: 2;
  height: 390px;
}

.learning-detail-hero-character--love-bombing {
  right: 28px;
  z-index: 2;
  height: 342px;
}

.learning-detail-hero-copy {
  position: relative;
  z-index: 4;
  width: min(49%, 480px);
  padding: 46px 0 36px 35px;
}

.learning-detail-hero h1 {
  max-width: 480px;
  margin: 0 0 18px;
  color: #071d55;
  font-size: clamp(54px, 5.5vw, 66px);
  font-weight: 1000;
  letter-spacing: -.055em;
  line-height: .94;
  text-wrap: balance;
}

.learning-detail-hero p {
  max-width: 440px;
  margin: 0;
  color: #152e61;
  font-size: 17px;
  line-height: 1.54;
}

.learning-detail-coming-soon {
  min-height: var(--app-hero-height);
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 56px 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(201, 24, 42, .1), transparent 34%),
    linear-gradient(180deg, #fff 0%, #f7f9fd 100%);
}

.learning-detail-coming-soon p {
  margin: 0 0 10px;
  color: #c9182a;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.learning-detail-coming-soon h1 {
  margin: 0 0 24px;
  color: #071d55;
  font-size: clamp(48px, 7vw, 76px);
  font-weight: 1000;
  letter-spacing: -.055em;
  line-height: .95;
}

.learning-detail-coming-soon a {
  padding: 12px 18px;
  border-radius: 9px;
  background: #071d55;
  color: #fff;
  font-weight: 850;
}

.learning-detail-technique-dock {
  margin: 0 24px;
  border: 0;
  background: #fff;
}

.learning-detail-technique-dock-track {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
  padding: 50px 8px 11px;
  overflow-x: auto;
  box-sizing: border-box;
  scrollbar-color: rgba(7, 29, 85, .24) transparent;
  scrollbar-width: thin;
}

.learning-detail-technique-dock-track::-webkit-scrollbar {
  height: 5px;
}

.learning-detail-technique-dock-track::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(7, 29, 85, .24);
}

.learning-detail-technique-dock-item {
  position: relative;
  z-index: 1;
  flex: 0 0 44px;
  width: 44px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 10px;
  background: #dfe6f1;
  box-shadow:
    0 5px 12px rgba(7, 29, 85, .18),
    0 0 0 1px rgba(7, 29, 85, .14);
  outline: none;
  transform-origin: center bottom;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    border-color 150ms ease;
}

.learning-detail-technique-dock-item img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

.learning-detail-technique-dock-item:hover,
.learning-detail-technique-dock-item:focus-visible {
  z-index: 3;
  border-color: #fff;
  box-shadow:
    0 10px 22px rgba(7, 29, 85, .25),
    0 0 0 2px rgba(var(--learning-detail-accent-rgb), .68);
  transform: translateY(-4px) scale(1.23);
}

.learning-detail-technique-dock-item:has(+ .learning-detail-technique-dock-item:hover),
.learning-detail-technique-dock-item:hover + .learning-detail-technique-dock-item,
.learning-detail-technique-dock-item:has(+ .learning-detail-technique-dock-item:focus-visible),
.learning-detail-technique-dock-item:focus-visible + .learning-detail-technique-dock-item {
  z-index: 2;
  transform: translateY(-1px) scale(1.08);
}

.learning-detail-technique-dock-item[aria-current="page"] {
  border-color: #fff;
  box-shadow:
    0 6px 14px rgba(7, 29, 85, .2),
    0 0 0 3px var(--learning-detail-accent);
}

.learning-detail-technique-dock-item[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--learning-detail-accent);
  transform: translateX(-50%);
}

.learning-detail-technique-dock-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  max-width: 190px;
  padding: 5px 8px;
  border-radius: 7px;
  background: #071d55;
  box-shadow: 0 5px 14px rgba(7, 29, 85, .22);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, 3px);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
  white-space: nowrap;
}

.learning-detail-technique-dock-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 4px solid transparent;
  border-top-color: #071d55;
  transform: translateX(-50%);
}

.learning-detail-technique-dock-item:hover .learning-detail-technique-dock-tooltip,
.learning-detail-technique-dock-item:focus-visible .learning-detail-technique-dock-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.learning-detail-technique-dock-item:first-child .learning-detail-technique-dock-tooltip {
  left: 0;
  transform: translate(0, 3px);
}

.learning-detail-technique-dock-item:first-child:hover .learning-detail-technique-dock-tooltip,
.learning-detail-technique-dock-item:first-child:focus-visible .learning-detail-technique-dock-tooltip {
  transform: translate(0, 0);
}

.learning-detail-technique-dock-item:first-child .learning-detail-technique-dock-tooltip::after {
  left: 18px;
}

.learning-detail-technique-dock-item:last-child .learning-detail-technique-dock-tooltip {
  right: 0;
  left: auto;
  transform: translate(0, 3px);
}

.learning-detail-technique-dock-item:last-child:hover .learning-detail-technique-dock-tooltip,
.learning-detail-technique-dock-item:last-child:focus-visible .learning-detail-technique-dock-tooltip {
  transform: translate(0, 0);
}

.learning-detail-technique-dock-item:last-child .learning-detail-technique-dock-tooltip::after {
  right: 18px;
  left: auto;
  transform: none;
}

.learning-detail-technique-dock + .learning-detail-example {
  padding-top: 20px;
}

.learning-detail-example {
  padding: 40px 24px 56px;
  background: #fff;
}

.learning-detail-example-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.125fr) minmax(280px, 1fr);
  align-items: start;
  gap: 24px;
}

.learning-detail-comic-column {
  min-width: 0;
}

.learning-detail-comic-column h2 {
  margin: 0 0 22px;
  color: #071d55;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

.learning-detail-example-title--full {
  width: 100%;
  margin: 0 0 24px;
  padding: 0 12px;
  color: #071d55;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

.learning-detail-comic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.learning-detail-comic-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d7e0ed;
  border-radius: 16px;
  background: #071425;
  box-shadow: 0 8px 20px rgba(7, 29, 85, .09);
}

.learning-detail-comic-panel img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  display: block;
  object-fit: contain;
}

.learning-detail-comic-panel--wide {
  grid-column: 1 / -1;
}

.learning-detail-comic-panel--wide img {
  aspect-ratio: 5 / 2;
}

.learning-detail-insights {
  display: grid;
  gap: 30px;
}

.learning-detail-insight-card {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.learning-detail-insight-heading {
  --learning-detail-insight-color: #071d55;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 50px;
  margin: 0 0 20px;
  padding: 8px 14px 8px 58px;
  border: 0;
  border-radius: 999px 10px 10px 999px;
  background: var(--learning-detail-insight-color);
  color: #fff;
}

.learning-detail-insight-card--warning .learning-detail-insight-heading {
  --learning-detail-insight-color: #c9182a;
}

.learning-detail-insight-card--signals .learning-detail-insight-heading {
  --learning-detail-insight-color: #0a9cab;
}

.learning-detail-page--fallacy .learning-detail-insight-card--signals .learning-detail-insight-heading {
  --learning-detail-insight-color: #ed9d12;
}

.learning-detail-insight-card--response .learning-detail-insight-heading {
  --learning-detail-insight-color: #1268b3;
}

.learning-detail-insight-heading img {
  position: absolute;
  left: -2px;
  width: 54px;
  height: 54px;
  display: block;
  object-fit: contain;
}

.learning-detail-insight-heading h3 {
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .025em;
  line-height: 1.15;
  text-transform: uppercase;
}

.learning-detail-insight-copy {
  display: grid;
  gap: 16px;
  padding: 0 10px;
}

.learning-detail-insight-copy p,
.learning-detail-warning-list li,
.learning-detail-point-list li {
  color: #29406d;
  font-size: 15px;
  line-height: 1.55;
}

.learning-detail-insight-copy p {
  margin: 0;
}

.learning-detail-warning-list,
.learning-detail-point-list {
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 0 6px;
  list-style: none;
}

.learning-detail-warning-list li,
.learning-detail-point-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.learning-detail-warning-list img,
.learning-detail-point-list img {
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
}

@media (max-width: 900px) {
  .learning-detail-technique-dock-track {
    justify-content: flex-start;
  }

  .learning-detail-example-layout,
  .learning-detail-comic {
    grid-template-columns: minmax(0, 1fr);
  }

  .learning-detail-comic-panel--wide {
    grid-column: auto;
  }

  .learning-detail-hero::before {
    inset: 0;
    background: linear-gradient(90deg,
      rgba(255, 255, 255, .99) 0%,
      rgba(255, 255, 255, .97) 40%,
      rgba(255, 255, 255, .72) 56%,
      rgba(255, 255, 255, .18) 78%,
      rgba(255, 255, 255, 0));
  }

  .learning-detail-hero-background {
    object-position: 56% center;
  }

  .learning-detail-hero-character--girl {
    right: 210px;
    height: 378px;
  }

  .learning-detail-hero-character--boy {
    right: -15px;
    height: 398px;
  }

  .learning-detail-hero-character--gaslighting {
    right: -18px;
    height: 386px;
  }

  .learning-detail-hero-character--love-bombing {
    right: -28px;
    height: 333px;
  }

  .learning-detail-hero-copy {
    width: min(58%, 465px);
    padding: 46px 0 32px 24px;
  }

  .learning-detail-hero h1 {
    font-size: clamp(49px, 8vw, 61px);
  }
}

@media (max-width: 700px) {
  .learning-detail-technique-dock {
    margin: 0 12px;
  }

  .learning-detail-technique-dock-track {
    gap: 6px;
    padding: 46px 8px 10px;
    scroll-padding-inline: 8px;
    scroll-snap-type: x proximity;
  }

  .learning-detail-technique-dock-item {
    flex-basis: 48px;
    width: 48px;
    height: 34px;
    scroll-snap-align: center;
  }

  .learning-detail-technique-dock-item:hover {
    transform: none;
  }

  .learning-detail-technique-dock-item:hover + .learning-detail-technique-dock-item,
  .learning-detail-technique-dock-item:has(+ .learning-detail-technique-dock-item:hover) {
    transform: none;
  }

  .learning-detail-technique-dock + .learning-detail-example {
    padding-top: 18px;
  }

  .learning-detail-example {
    padding: 32px 16px 44px;
  }

  .learning-detail-comic-column h2 {
    margin-bottom: 18px;
    font-size: 20px;
    white-space: normal;
  }

  .learning-detail-example-title--full {
    margin-bottom: 20px;
    padding-inline: 0;
    font-size: 20px;
  }

  .learning-detail-insight-heading {
    padding-right: 16px;
  }

  .learning-detail-hero::before {
    inset: 0;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, .99) 0%,
      rgba(255, 255, 255, .98) 35%,
      rgba(255, 255, 255, .9) 45%,
      rgba(255, 255, 255, .28) 61%,
      rgba(255, 255, 255, 0) 75%);
  }

  .learning-detail-hero-background {
    object-position: 67% center;
  }

  .learning-detail-hero-character--girl {
    right: 142px;
    height: 310px;
  }

  .learning-detail-hero-character--boy {
    right: -38px;
    height: 332px;
  }

  .learning-detail-hero-character--gaslighting {
    right: -30px;
    height: 302px;
  }

  .learning-detail-hero-character--love-bombing {
    right: -28px;
    height: 225px;
  }

  .learning-detail-hero-copy {
    width: calc(100% - 36px);
    max-width: 520px;
    padding: 32px 18px 0;
  }

  .learning-detail-hero h1 {
    max-width: none;
    margin-bottom: 15px;
    font-size: clamp(44px, 13vw, 56px);
  }

  .learning-detail-hero p {
    max-width: 40ch;
    font-size: 16px;
    line-height: 1.47;
  }
}

@media (max-width: 410px) {
  .learning-detail-hero-character--girl {
    right: 120px;
    height: 282px;
  }

  .learning-detail-hero-character--boy {
    right: -46px;
    height: 302px;
  }

  .learning-detail-hero-character--gaslighting {
    right: -34px;
    height: 276px;
  }

  .learning-detail-hero-character--love-bombing {
    right: -30px;
    height: 209px;
  }

  .learning-detail-hero-copy {
    padding-top: 30px;
  }

  .learning-detail-hero h1 {
    font-size: clamp(42px, 13vw, 52px);
  }
}