.spy-lp--hero-story{--hero-story-surface:var(--paper);--hero-story-ink:var(--navy);--hero-story-rule:var(--line)}
.spy-lp--hero-story:is(.spy-lp--story,.spy-lp--contrast){--hero-story-surface:var(--navy);--hero-story-ink:var(--paper);--hero-story-rule:#34435a}
.spy-lp.spy-lp--hero-story .product-stage{aspect-ratio:auto;min-height:0;position:relative;display:block;overflow:visible;border-radius:0;background:transparent;align-self:start}
.spy-lp--hero-story .hero-story-primary{position:relative;aspect-ratio:1.12;overflow:hidden;border-radius:18px;background:var(--paper)}
.spy-lp.spy-lp--hero-story .hero-story-primary .main-product-image{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;mix-blend-mode:normal}
.spy-lp--hero-story.spy-lp--contrast .hero-story-primary{border-radius:0}
.spy-lp--hero-story .hero-story-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:24px;padding-top:22px;border-top:1px solid var(--hero-story-rule)}
.spy-lp--hero-story .hero-story-detail{display:grid;justify-items:center;align-content:start;gap:12px;min-width:0;margin:0;text-align:center;color:var(--hero-story-ink)}
.spy-lp--hero-story .hero-story-circle{width:clamp(80px,10vw,160px);max-width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--paper)}
.spy-lp--hero-story .hero-story-circle img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.spy-lp--hero-story .hero-story-detail figcaption{margin:0;font-size:clamp(13px,1vw,16px);font-weight:700;line-height:1.35;text-wrap:balance}
@media(min-width:761px){
  .spy-lp--hero-story.spy-lp--contrast .hero-story-details{margin-inline:32px;margin-bottom:32px}
}
@media(max-width:760px){
  .spy-lp.spy-lp--hero-story .product-stage{aspect-ratio:auto;flex:none}
  .spy-lp--hero-story .hero-story-primary{border-radius:12px}
  .spy-lp--hero-story.spy-lp--studio .hero-story-primary,.spy-lp--hero-story.spy-lp--contrast .hero-story-primary{border-radius:0}
  .spy-lp--hero-story .hero-story-details{gap:12px;margin-top:18px;padding-top:16px}
  .spy-lp--hero-story:is(.spy-lp--studio,.spy-lp--contrast) .hero-story-details{margin-inline:20px}
  .spy-lp--hero-story .hero-story-circle{width:96px}
  .spy-lp--hero-story .hero-story-detail{gap:10px}
  .spy-lp--hero-story .hero-story-detail figcaption{font-size:13px}
}