#why .spotlight-portion {
  --portion-amount-size: clamp(34px, 6vw, 72px);
  --portion-inset: clamp(16px, 3vw, 28px);
  box-sizing: border-box;
  width: min(calc(100% - 32px), 540px);
  margin: 24px auto 0;
  border: 1px solid var(--oh-line-dark, rgba(255, 255, 255, .18));
  border-radius: 20px;
  background: #000;
  color: #fff;
  text-align: center;
  scroll-margin-top: 84px;
}

#why .spotlight-portion[open] { width: min(calc(100% - 32px), 1040px); }

#why .spotlight-portion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 8px var(--portion-inset);
  border-radius: 20px;
  text-align: left;
  list-style: none;
  cursor: pointer;
  font: 500 var(--oh-row, 18px)/1.35 var(--oh-font);
}

#why .spotlight-portion > summary::-webkit-details-marker { display: none; }
#why .spotlight-portion > summary:focus-visible { outline: 2px solid var(--oh-lime); outline-offset: 3px; }
#why .spotlight-portion-plus { color: var(--oh-soft-dark); font-size: 22px; line-height: 1; }
#why .spotlight-portion[open] .spotlight-portion-plus { transform: rotate(45deg); }

#why .spotlight-portion h3 {
  margin: 0 0 clamp(16px, 2.2vw, 30px);
  color: #fff;
  font: 500 clamp(18px, 2vw, 26px)/1.2 var(--oh-font);
  letter-spacing: -.025em;
  text-wrap: balance;
}

#why .spotlight-portion figure {
  margin: 0;
  padding: clamp(22px, 3.2vw, 42px) 12px 0;
  border-top: 1px solid var(--oh-line-dark, rgba(255, 255, 255, .18));
}

#why .spotlight-portion-amounts {
  display: grid;
  grid-template-columns: 36% 12% 52%;
  align-items: start;
  padding-inline: 12px;
}

#why .spotlight-portion-amounts p { margin: 0; color: #fff; }

#why .spotlight-portion-amounts strong {
  display: block;
  font: 500 var(--portion-amount-size)/1 var(--oh-font);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.055em;
  white-space: nowrap;
}

#why .spotlight-portion-amounts p:first-child strong { color: var(--oh-lime); }
#why .spotlight-portion-amounts strong span { font-size: .55em; letter-spacing: -.025em; }
#why .spotlight-portion-amounts > span {
  margin-top: calc((var(--portion-amount-size) - 20px) / 2);
  color: var(--oh-soft-dark);
  font: 400 14px/20px var(--oh-font);
}

#why .spotlight-portion-amounts small {
  display: block;
  margin-top: 6px;
  color: var(--oh-soft-dark);
  font: 400 clamp(13px, 1.3vw, 16px)/1.35 var(--oh-font);
  text-wrap: balance;
}

#why .spotlight-portion img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2.55;
  object-fit: cover;
  object-position: center 60%;
  margin: 10px auto 0;
}

@media (max-width: 699px) {
  #why .spotlight-portion img { aspect-ratio: 2.15; }
}

#why .spotlight-portion figcaption {
  max-width: 56ch;
  margin: 14px auto 0;
  padding-inline: var(--portion-inset);
  color: var(--oh-soft-dark);
  font: 400 14px/1.5 var(--oh-font);
  text-wrap: pretty;
}

#why .spotlight-portion-study {
  width: min(calc(100% - 2 * var(--portion-inset)), 58ch);
  margin: 18px auto 0;
  padding: 16px 0 clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--oh-line-dark, rgba(255, 255, 255, .18));
  color: var(--oh-soft-dark);
  font: 400 13px/1.55 var(--oh-font);
  text-wrap: pretty;
}

#why .spotlight-portion-study a {
  color: #fff;
  text-underline-offset: .2em;
  white-space: nowrap;
}