.intro-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  padding: clamp(18px, 2.8vw, 31px);
  background: var(--paper);
}

.intro-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 22px;
}

.intro-head h1 {
  font-size: clamp(23px, 2.5vw, 35px);
  line-height: 1.12;
  letter-spacing: -.025em;
}

.intro-context {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.intro-scenes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}

.intro-scene {
  position: relative;
  display: grid;
  align-items: end;
  min-width: 0;
  min-height: clamp(345px, 37vw, 425px);
  isolation: isolate;
  overflow: hidden;
  border-radius: 6px;
  background: #24343b;
  color: #fffaf2;
  text-decoration: none;
}

.intro-scene picture,
.intro-scene img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.intro-scene img {
  object-fit: cover;
  object-position: center 5%;
  transition: transform .28s ease;
}

.intro-scene::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(180deg, #111e2600 24%, #111e2635 43%, #111e26d9 72%, #111e26fa 100%);
  pointer-events: none;
}

.intro-scene:hover,
.intro-scene:focus-visible {
  color: #fffaf2;
}

.intro-scene:hover img { transform: scale(1.025); }

.intro-caption {
  position: relative;
  z-index: 1;
  padding: 36px clamp(19px, 3vw, 33px) 25px;
}

.intro-topic {
  display: block;
  margin-bottom: 7px;
  color: #f4c3aa;
  font: 700 11px/1.25 var(--sans);
  letter-spacing: .095em;
  text-transform: uppercase;
}

.intro-caption h2 {
  margin: 0;
  font-size: clamp(31px, 3.75vw, 54px);
  line-height: 1.03;
  letter-spacing: -.045em;
}

.intro-caption h2 span { white-space: nowrap; }

.intro-action {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  padding-bottom: 2px;
  border-bottom: 1px solid #fffaf2a6;
  color: #fffaf2;
  font: 700 13px/1.4 var(--sans);
}

.intro-scene:hover .intro-action { border-color: #f4c3aa; }

.intro-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 9px 22px;
}

.intro-bottom .training-process { margin: 0; }

.deck[data-enhanced] .intro-duo:not([data-position="current"]) {
  padding: 0;
}

.deck[data-enhanced] .intro-duo:not([data-position="current"]) :is(.intro-head, .intro-caption, .intro-bottom) {
  visibility: hidden;
}

.deck[data-enhanced] .intro-duo:not([data-position="current"]) .intro-scenes {
  position: absolute;
  inset: 0;
  gap: 0;
}

.deck[data-enhanced] .intro-duo:not([data-position="current"]) .intro-scene {
  min-height: 0;
  border-radius: 0;
}

.deck[data-enhanced] .intro-duo:not([data-position="current"]) .intro-scene::after {
  display: none;
}

@media (max-width: 700px) {
  .intro-duo { gap: 14px; padding: 16px; }
  .intro-context { font-size: 13px; }
  .intro-scenes { grid-template-columns: minmax(0, 1fr); }
  .intro-scene { min-height: clamp(255px, 72vw, 370px); }
  .intro-scene img { object-position: center 4%; }
  .intro-caption { padding: 28px 17px 19px; }
  .intro-caption h2 { font-size: clamp(28px, 8.7vw, 43px); }
  .intro-action { margin-top: 10px; }
  .deck[data-enhanced] .intro-duo:not([data-position="current"]) .intro-scenes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.intro-scene-price img { object-position: center 22%; }
.intro-scene-followup img { object-position: center 21%; }
.intro-scene-price .intro-caption h2 span { color: #ffc3a6; }