/* Highlights redesign — follows the established white Watch-page system. */
#highlights.wr-highlights {
  padding: clamp(78px, 8vw, 120px) var(--wr-pad, clamp(22px, 5vw, 76px));
  overflow: visible;
  background: #fff;
  color: var(--wr-ink);
  border-top: 1px solid var(--wr-line);
}

#highlights .wr-highlights__intro {
  display: grid;
  grid-template-columns: minmax(120px,.4fr) minmax(420px,1.15fr) minmax(260px,.6fr);
  gap: clamp(28px,5vw,84px);
  align-items: end;
  max-width: 1440px;
  margin: 0 auto clamp(52px,7vw,94px);
}

#highlights .wr-highlights__intro h2 {
  margin: 0;
  color: var(--wr-blue);
  font: 650 clamp(58px,6.5vw,98px)/.88 Manrope,sans-serif;
  letter-spacing: -.075em;
}

#highlights .wr-highlights__intro h2 em {
  color: transparent;
  font: inherit;
  font-style: normal;
  -webkit-text-stroke: 1px var(--wr-blue);
}

#highlights .wr-highlights__intro > p:last-child {
  max-width: 390px;
  margin: 0;
  color: var(--wr-muted);
  font: 400 14px/1.7 "DM Sans",sans-serif;
}

#highlights .wr-miracle-lead {
  max-width: 1440px;
  margin: 0 auto clamp(96px,11vw,154px);
}

#highlights .wr-miracle-lead__label {
  position: static;
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  color: var(--wr-blue);
  border-top: 1px solid var(--wr-blue);
}

#highlights .wr-miracle-lead__label span,
#highlights .wr-miracle-lead__label p {
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: 700 9px/1 Manrope,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#highlights .wr-screenshot-card > button {
  display: grid;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

#highlights .wr-screenshot-card--lead > button {
  grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr);
  min-height: 560px;
  border: 1px solid var(--wr-line);
}

#highlights .wr-screenshot-card__previews {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1px;
  min-width: 0;
  background: var(--wr-line);
}

#highlights .wr-screenshot-card__previews--1 { grid-template-columns: 1fr; }

#highlights .wr-screenshot-card__previews > span {
  display: grid;
  min-width: 0;
  min-height: 360px;
  place-items: center;
  overflow: hidden;
  background: #f4f6f7;
}

#highlights .wr-screenshot-card__previews img {
  width: 100%;
  height: 100%;
  padding: 14px;
  object-fit: contain;
  object-position: center;
}

#highlights .wr-screenshot-card__copy {
  display: flex;
  min-width: 0;
  height: 100%;
  padding: clamp(36px,5vw,76px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: #fff;
}

#highlights .wr-screenshot-card__copy small {
  color: var(--wr-blue);
  font: 700 9px/1 Manrope,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#highlights .wr-screenshot-card__copy strong {
  max-width: 620px;
  margin-top: 18px;
  color: var(--wr-blue);
  font: 650 clamp(30px,3.5vw,54px)/.96 Manrope,sans-serif;
  letter-spacing: -.06em;
}

#highlights .wr-screenshot-card__copy > span {
  max-width: 540px;
  margin-top: 20px;
  color: var(--wr-muted);
  font: 400 14px/1.7 "DM Sans",sans-serif;
}

#highlights .wr-screenshot-card__copy b {
  display: flex;
  width: 100%;
  margin-top: auto;
  padding: 28px 0 8px;
  justify-content: space-between;
  align-items: center;
  color: var(--wr-blue);
  border-bottom: 1px solid var(--wr-blue);
  font: 700 9px/1 Manrope,sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#highlights .wr-screenshot-card__copy b i {
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 16px;
}

#highlights .wr-service-collections,
#highlights .wr-screenshot-archive { max-width: 1440px; margin-left: auto; margin-right: auto; }

#highlights .wr-service-collection { margin: 0 0 clamp(100px,11vw,155px); }

#highlights .wr-service-collection > header,
#highlights .wr-screenshot-archive__head {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(260px,.55fr);
  gap: 50px;
  align-items: end;
  margin-bottom: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--wr-blue);
}

#highlights .wr-service-collection header small,
#highlights .wr-screenshot-archive__head .wr-eyebrow {
  color: var(--wr-blue);
  font: 700 9px/1 Manrope,sans-serif;
  letter-spacing: .14em;
}

#highlights .wr-service-collection h3,
#highlights .wr-screenshot-archive__head h3 {
  max-width: 900px;
  margin: 12px 0 0;
  color: var(--wr-blue);
  font: 650 clamp(42px,5vw,76px)/.93 Manrope,sans-serif;
  letter-spacing: -.065em;
}

#highlights .wr-service-collection header p,
#highlights .wr-screenshot-archive__head > p {
  max-width: 460px;
  margin: 0;
  color: var(--wr-muted);
  font: 400 14px/1.7 "DM Sans",sans-serif;
}

#highlights .wr-highlight-reel {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  grid-auto-flow: row;
  grid-auto-columns: unset;
  gap: 48px 24px;
  overflow: visible;
  padding: 0;
  scroll-snap-type: none;
}

#highlights .wr-highlight-video {
  display: block;
  min-width: 0;
  border: 0;
}

#highlights .wr-highlight-video video {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: contain;
  background: #eef1f2;
}

#highlights .wr-highlight-video > div {
  min-height: 0;
  padding: 15px 0 0;
  background: #fff;
  border: 0;
}

#highlights .wr-highlight-video p {
  margin: 0 0 7px;
  color: var(--wr-blue);
  font: 700 8px/1 Manrope,sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

#highlights .wr-highlight-video h4 {
  margin: 0;
  color: var(--wr-ink);
  font: 600 18px/1.3 Manrope,sans-serif;
  letter-spacing: -.025em;
}

#highlights .wr-highlight-filter {
  display: flex;
  gap: 26px;
  overflow: visible;
  padding: 22px 0 32px;
  border-bottom: 1px solid var(--wr-line);
}

#highlights .wr-highlight-filter button,
#highlights .wr-highlight-filter button + button {
  flex: 0 0 auto;
  margin: 0;
  padding: 9px 0;
  color: #718795;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  font: 700 9px/1 Manrope,sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
}

#highlights .wr-highlight-filter button.is-active { color: var(--wr-blue); border-bottom-color: var(--wr-blue); }

#highlights .wr-screenshot-grid {
  display: block;
  border: 0;
}

#highlights .wr-screenshot-grid .wr-screenshot-card {
  border: 0;
  border-bottom: 1px solid var(--wr-line);
}

#highlights .wr-screenshot-grid .wr-screenshot-card > button {
  grid-template-columns: minmax(420px,1fr) minmax(320px,.78fr);
  min-height: 540px;
  background: #fff;
}

#highlights .wr-screenshot-grid .wr-screenshot-card:nth-child(even) > button {
  grid-template-columns: minmax(320px,.78fr) minmax(420px,1fr);
}

#highlights .wr-screenshot-grid .wr-screenshot-card:nth-child(even) .wr-screenshot-card__previews { order: 2; }
#highlights .wr-screenshot-grid .wr-screenshot-card:nth-child(even) .wr-screenshot-card__copy { order: 1; }
#highlights .wr-screenshot-grid .wr-screenshot-card__copy { padding: clamp(38px,5vw,74px); }
#highlights .wr-screenshot-grid .wr-screenshot-card__copy strong { font-size: clamp(29px,3vw,48px); }

#highlights .wr-screenshot-card > button:hover .wr-screenshot-card__copy { background: #f7f9fa; }
#highlights .wr-screenshot-card > button:hover .wr-screenshot-card__copy b i { background: transparent; color: inherit; }

@media (max-width: 900px) {
  #highlights .wr-highlights__intro { grid-template-columns: 1fr; gap: 20px; }
  #highlights .wr-highlights__intro > p:last-child { max-width: 600px; }
  #highlights .wr-screenshot-card--lead > button,
  #highlights .wr-screenshot-grid .wr-screenshot-card > button,
  #highlights .wr-screenshot-grid .wr-screenshot-card:nth-child(even) > button { grid-template-columns: 1fr 1fr; }
  #highlights .wr-screenshot-grid .wr-screenshot-card:nth-child(even) .wr-screenshot-card__previews,
  #highlights .wr-screenshot-grid .wr-screenshot-card:nth-child(even) .wr-screenshot-card__copy { order: initial; }
}

@media (max-width: 620px) {
  #highlights.wr-highlights { padding: 64px 20px 84px; }
  #highlights .wr-highlights__intro { margin-bottom: 48px; }
  #highlights .wr-highlights__intro h2 { font-size: clamp(54px,17vw,76px); }
  #highlights .wr-miracle-lead { margin-bottom: 92px; }
  #highlights .wr-screenshot-card--lead > button,
  #highlights .wr-screenshot-grid .wr-screenshot-card > button,
  #highlights .wr-screenshot-grid .wr-screenshot-card:nth-child(even) > button { display: flex; min-height: 0; flex-direction: column; }
  #highlights .wr-screenshot-card__previews { width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); }
  #highlights .wr-screenshot-card__previews--1 { grid-template-columns: 1fr; }
  #highlights .wr-screenshot-card__previews > span { min-height: 310px; }
  #highlights .wr-screenshot-card__previews--1 > span { min-height: 430px; }
  #highlights .wr-screenshot-card__previews img { padding: 8px; }
  #highlights .wr-screenshot-card__copy,
  #highlights .wr-screenshot-grid .wr-screenshot-card__copy { min-height: 310px; padding: 28px 20px 32px; }
  #highlights .wr-screenshot-card__copy strong,
  #highlights .wr-screenshot-grid .wr-screenshot-card__copy strong { font-size: 30px; }
  #highlights .wr-service-collection { margin-bottom: 94px; }
  #highlights .wr-service-collection > header,
  #highlights .wr-screenshot-archive__head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 25px; }
  #highlights .wr-service-collection h3,
  #highlights .wr-screenshot-archive__head h3 { font-size: clamp(40px,12vw,54px); }
  #highlights .wr-highlight-reel { grid-template-columns: 1fr; gap: 42px; }
  #highlights .wr-highlight-filter { flex-wrap: wrap; gap: 5px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  #highlights *, #highlights *::before, #highlights *::after { animation: none !important; transition: none !important; }
}