/* TwinPare V2 product visual refresh — 2026-08-26.
   Uses privacy-safe crops of the latest verified Health & Fitness UI.
   Product copy, links and functionality remain unchanged. */

/* Homepage hero — latest Home / Energy Bank / Today's focus. */
.v2-hero__product{min-height:620px;background:none}
.v2-hero__product>img{
  content:url('/images/apps/health/latest-2026-08-26/home-energy-focus.webp');
  display:block!important;
  width:min(340px,72vw)!important;
  height:auto!important;
  border:1px solid rgba(255,255,255,.12);
  border-radius:34px!important;
  box-shadow:0 42px 110px rgba(0,0,0,.58),0 0 70px rgba(0,229,255,.08)!important;
}
.v2-hero__product>.v2-hero__glow{display:block!important}
.v2-hero__product>.v2-signal{display:inline-flex!important}

/* Your health is connected — image-led cards using current product UI.
   The panels are intentionally decorative because each card's text already names
   and explains the same concept. */
.v2-value .v2-card{
  padding:0!important;
  overflow:hidden;
  display:flex;
  min-height:100%;
  flex-direction:column;
}
.v2-value .v2-card::before{
  content:'';
  display:block;
  width:100%;
  aspect-ratio:16/9;
  flex:0 0 auto;
  border-bottom:1px solid rgba(255,255,255,.09);
  background-repeat:no-repeat;
  background-size:cover;
  transition:transform .35s ease,filter .35s ease;
}
.v2-value .v2-card:nth-child(1)::before{
  background-image:url('/images/apps/health/latest-2026-08-26/my-health-overview.webp');
  background-position:center 38%;
}
.v2-value .v2-card:nth-child(2)::before{
  background-image:url('/images/apps/health/latest-2026-08-26/heart-trends.webp');
  background-position:center 42%;
}
.v2-value .v2-card:nth-child(3)::before{
  background-image:url('/images/apps/health/latest-2026-08-26/home-energy-focus.webp');
  background-position:center 47%;
}
.v2-value .v2-card>span{margin:24px 28px 0}
.v2-value .v2-card>h3{margin:14px 28px 10px!important}
.v2-value .v2-card>p{margin:0!important;padding:0 28px 28px;flex:1}

/* Featured product — latest Home foreground; My Health and Heart are decorative
   supporting panels so the existing semantic product screenshot keeps the alt text. */
.v2-health__screens{
  position:relative;
  min-height:640px;
  background:none;
  isolation:isolate;
}
.v2-health__screens>.v2-phone--front{
  content:url('/images/apps/health/latest-2026-08-26/home-energy-focus.webp');
  display:block!important;
  left:4%!important;
  top:0!important;
  z-index:3!important;
  width:315px!important;
  height:auto!important;
  border:1px solid rgba(255,255,255,.13);
  border-radius:32px!important;
  transform:rotate(-2deg)!important;
  box-shadow:0 38px 100px rgba(0,0,0,.52)!important;
}
.v2-health__screens>.v2-phone--back{display:none!important}
.v2-health__screens::before,
.v2-health__screens::after{
  content:'';
  position:absolute;
  border:1px solid rgba(255,255,255,.1);
  border-radius:26px;
  background-repeat:no-repeat;
  background-size:cover;
  box-shadow:0 26px 70px rgba(0,0,0,.4);
}
.v2-health__screens::before{
  right:0;
  top:92px;
  z-index:2;
  width:370px;
  aspect-ratio:480/393;
  background-image:url('/images/apps/health/latest-2026-08-26/my-health-overview.webp');
  background-position:center;
  transform:rotate(4deg);
  opacity:.9;
}
.v2-health__screens::after{
  right:7%;
  bottom:16px;
  z-index:1;
  width:270px;
  aspect-ratio:180/291;
  background-image:url('/images/apps/health/latest-2026-08-26/heart-trends.webp');
  background-position:center top;
  transform:rotate(2deg);
  opacity:.78;
}

/* Keep other verified product visuals unchanged. */
.v2-together__grid>img{content:normal;display:block;width:min(100%,560px)!important;height:auto!important;object-fit:cover;justify-self:center;border-radius:28px}
.health-v2__hero-visual{min-height:620px;background:none}
.health-v2__hero-visual>.health-v2__phone{display:block!important}
.health-v2__showcase img{content:normal;display:block;width:min(100%,560px)!important;height:auto!important;margin-inline:auto}

/* Health landing performance — 2026-08-29.
   Lighthouse measured the hero section as LCP with most time in render delay.
   Above-the-fold hero content must therefore be visible on first paint instead of
   waiting for the generic IntersectionObserver reveal animation. Existing motion
   remains on below-the-fold sections. Reuse existing lightweight WebP product
   assets for the two hero screens and Today showcase. */
.health-v2__hero .reveal{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}
.health-v2__hero-visual>.health-v2__phone--main{
  content:url('/images/apps/health/v2/health-energy-hub.webp');
}
.health-v2__hero-visual>.health-v2__phone--second{
  content:url('/images/apps/health/v2/health-ai-programs.webp');
}
.health-v2__showcase img{
  content:url('/images/apps/health/v2/v2-hero-health-context.webp');
}

@media(max-width:980px){
  .v2-hero__product,.v2-health__screens,.health-v2__hero-visual{min-height:560px}
  .v2-together__grid>img,.health-v2__showcase img{width:min(100%,520px)!important}
  .v2-health__screens>.v2-phone--front{left:8%!important;width:295px!important}
  .v2-health__screens::before{right:4%;width:335px}
  .v2-health__screens::after{right:12%;width:235px}
}

@media(max-width:640px){
  .v2-hero__product,.health-v2__hero-visual{min-height:490px}
  .v2-hero__product>img{width:min(270px,76vw)!important;border-radius:28px!important}
  .v2-together__grid>img,.health-v2__showcase img{width:100%!important;max-width:480px}
  .v2-health__screens{order:2;min-height:535px}
  .v2-health__screens>.v2-phone--front{left:1%!important;width:238px!important}
  .v2-health__screens::before{right:0;top:78px;width:260px}
  .v2-health__screens::after{right:7%;bottom:0;width:180px;opacity:.7}
  .v2-value .v2-card::before{aspect-ratio:16/8.5}
  .v2-value .v2-card>span{margin:22px 22px 0}
  .v2-value .v2-card>h3{margin:12px 22px 8px!important}
  .v2-value .v2-card>p{padding:0 22px 24px}
}

@media(prefers-reduced-motion:reduce){
  .v2-value .v2-card::before{transition:none}
}