.benefit-experience {
  position: relative;
  isolation: isolate;
  min-height: 720px;
  overflow: hidden;
  background: #113c37;
  color: #fff9eb;
  padding: 76px 5vw 150px;
}
.benefit-images, .benefit-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.benefit-images { overflow: hidden; }
.benefit-images img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease;
  animation: benefit-drift 4.5s ease-out both;
  animation-play-state: paused;
}
.benefit-images img.is-current { opacity: 1; }
.benefit-moving .benefit-images img.is-current { animation-play-state: running; }
.benefit-shade { background: linear-gradient(90deg, #052d2be8, #052d2ba8 38%, #052d2b12 78%), linear-gradient(0deg, #052d2bf0, transparent 45%); }
.benefit-inner { max-width: 680px; }
.benefit-inner .eyebrow { color: #e6c88e; margin-bottom: 20px; }
.benefit-inner h2 { font-size: clamp(36px, 4.5vw, 64px); line-height: 1.12; margin: 0 0 20px; }
.benefit-inner h2 em { display: block; color: #e6c88e; }
.benefit-metric { display: flex; align-items: baseline; gap: 12px; line-height: 1; margin: 24px 0 12px; }
#benefit-value { font-size: clamp(74px, 9vw, 128px); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -.06em; }
#benefit-unit { font-size: 32px; color: #e6c88e; }
#benefit-copy { font-size: 18px; line-height: 1.6; max-width: 420px; margin: 0 0 22px; color: #fff9eb; }
.pool-ruler { display: none; width: min(330px, 90%); height: 28px; margin: 0 0 24px; fill: none; stroke: #e6c88e; stroke-width: 1.5; }
.benefit-pool .pool-ruler { display: block; }
.pool-ruler-point { fill: #f4deaf; stroke: none; animation: benefit-distance 4.5s ease-in-out both; animation-play-state: paused; }
.benefit-moving .pool-ruler-point { animation-play-state: running; }
.benefit-bottom { position: absolute; bottom: 30px; left: 5vw; right: 5vw; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.benefit-tabs { display: flex; gap: clamp(18px, 3vw, 44px); }
.benefit-tabs button { color: #f1f1df; font-size: 17px; padding: 14px 0; border-bottom: 2px solid #ffffff40; white-space: nowrap; transition: border-color .25s, color .25s; }
.benefit-tabs button span { display: block; font-size: 11px; margin-bottom: 6px; color: #e6c88e; }
.benefit-tabs button[aria-pressed=true] { border-color: #e6c88e; color: #ffe6ba; }
.benefit-experience button:focus-visible { outline: 2px solid #f1d69c; outline-offset: 5px; }
@keyframes benefit-drift { from { transform: scale(1.01) translateX(0); } to { transform: scale(1.075) translateX(-.8%); } }
@keyframes benefit-distance { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(384px); } }
@media (max-width: 700px) {
  .benefit-experience { min-height: 760px; padding: 52px 24px 210px; }
  .benefit-shade { background: linear-gradient(90deg, #052d2bdf, #052d2b77), linear-gradient(0deg, #052d2bf5, transparent 65%); }
  .benefit-inner h2 { font-size: 38px; }
  .benefit-inner .eyebrow { font-size: 11px; }
  .benefit-bottom { left: 24px; right: 24px; flex-direction: column; align-items: start; gap: 20px; }
  .benefit-tabs { width: 100%; gap: 16px; justify-content: space-between; }
  .benefit-tabs button { font-size: 14px; }
  #benefit-copy { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .benefit-images img, .pool-ruler-point { animation: none; transition: none; }
}