/* TwinPare Health & Fitness — visual refresh phase 1
   Goal: premium presentation of real product screenshots without changing product claims. */

.health-v2__hero-visual {
  min-height: 650px !important;
  isolation: isolate;
}

.health-v2__hero-visual::before {
  content: "";
  position: absolute;
  inset: 7% 2% 8% 0;
  z-index: -2;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 44px;
  background:
    radial-gradient(circle at 30% 18%, rgba(0,229,255,.16), transparent 34%),
    radial-gradient(circle at 78% 22%, rgba(187,134,252,.18), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 40px 110px rgba(0,0,0,.24);
  backdrop-filter: blur(18px);
}

.health-v2__hero-visual::after {
  content: "";
  position: absolute;
  width: 76%;
  height: 24%;
  left: 12%;
  bottom: 2%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,229,255,.16), rgba(187,134,252,.08) 42%, transparent 72%);
  filter: blur(26px);
  opacity: .82;
}

.health-v2__hero-visual > .health-v2__phone {
  display: block !important;
  content: normal !important;
  padding: 5px;
  background: linear-gradient(145deg, #151923, #05070c 60%, #1a1f2a);
  border: 1px solid rgba(255,255,255,.17);
  outline: 1px solid rgba(0,0,0,.72);
  object-fit: cover;
  filter: saturate(.98) contrast(1.02);
  transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease;
}

.health-v2__hero-visual > .health-v2__phone--main {
  width: 300px !important;
  left: 4% !important;
  top: 12px !important;
  z-index: 3 !important;
  transform: rotate(-3.5deg) translateZ(0) !important;
  box-shadow:
    0 45px 95px rgba(0,0,0,.48),
    0 0 0 1px rgba(0,229,255,.08),
    0 0 46px rgba(0,229,255,.08);
}

.health-v2__hero-visual > .health-v2__phone--second {
  width: 252px !important;
  right: 2% !important;
  top: 96px !important;
  z-index: 2 !important;
  opacity: .92 !important;
  transform: rotate(5deg) translateZ(0) !important;
  box-shadow:
    0 38px 82px rgba(0,0,0,.42),
    0 0 0 1px rgba(187,134,252,.09),
    0 0 42px rgba(187,134,252,.07);
}

@media (hover:hover) and (pointer:fine) {
  .health-v2__hero-visual:hover > .health-v2__phone--main {
    transform: rotate(-2.2deg) translateY(-8px) !important;
  }

  .health-v2__hero-visual:hover > .health-v2__phone--second {
    transform: rotate(3.6deg) translateY(-4px) !important;
    opacity: 1 !important;
  }
}

html[data-color-mode="light"] body.theme-health .health-v2__hero-visual::before {
  border-color: rgba(31,54,88,.09);
  background:
    radial-gradient(circle at 30% 18%, rgba(20,183,205,.14), transparent 34%),
    radial-gradient(circle at 78% 22%, rgba(121,91,231,.12), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(240,247,252,.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 34px 80px rgba(28,45,70,.12);
}

html[data-color-mode="light"] body.theme-health .health-v2__hero-visual > .health-v2__phone {
  box-shadow: 0 38px 78px rgba(25,42,64,.18);
}

/* Phase 2 — replace the static overview banner presentation with a live composition
   made from verified TwinPare Health assets already in the repository. */
.health-v2__showcase {
  position: relative;
  min-height: 500px;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 34px;
  background:
    radial-gradient(circle at 18% 20%, rgba(0,229,255,.13), transparent 33%),
    radial-gradient(circle at 82% 18%, rgba(187,134,252,.15), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  box-shadow: 0 34px 90px rgba(0,0,0,.22);
}

.health-v2__showcase > .health-v2__showcase-screen {
  position: absolute;
  display: block;
  height: auto;
  border-radius: 28px;
  padding: 5px;
  background-color: #090b12;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 72px rgba(0,0,0,.38);
  transition: transform .35s ease, box-shadow .35s ease;
}

.health-v2__showcase > .health-v2__showcase-screen--main {
  width: 42% !important;
  left: 29%;
  top: 7%;
  z-index: 3;
  transform: rotate(-1.5deg);
}

.health-v2__showcase > .health-v2__showcase-screen--left,
.health-v2__showcase > .health-v2__showcase-screen--right {
  width: 34% !important;
  top: 18%;
  z-index: 2;
}

.health-v2__showcase-screen--left {
  left: 4%;
  transform: rotate(-6deg);
}

.health-v2__showcase-screen--right {
  right: 4%;
  transform: rotate(6deg);
}

.health-v2__showcase:hover > .health-v2__showcase-screen--main {
  transform: rotate(-.7deg) translateY(-5px);
}

html[data-color-mode="light"] body.theme-health .health-v2__showcase {
  border-color: rgba(31,54,88,.09);
  background:
    radial-gradient(circle at 18% 20%, rgba(20,183,205,.11), transparent 33%),
    radial-gradient(circle at 82% 18%, rgba(121,91,231,.10), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,247,252,.86));
  box-shadow: 0 30px 70px rgba(31,49,72,.12);
}

html[data-color-mode="light"] body.theme-health .health-v2__showcase-screen {
  box-shadow: 0 26px 58px rgba(31,49,72,.18);
}

.health-v2__ai-context {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  padding: 32px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(187,134,252,.07), rgba(0,229,255,.035));
  text-align: center;
}

.health-v2__ai-step,
.health-v2__ai-core {
  width: 100%;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  line-height: 1.5;
}

.health-v2__ai-core {
  display: grid;
  gap: 8px;
  border-color: rgba(187,134,252,.3);
  background: rgba(187,134,252,.1);
}

.health-v2__ai-core small {
  color: #d5b8ff;
  font-weight: 700;
}

.health-v2__ai-arrow {
  color: #cbaaff;
  font-size: 1.5rem;
}

.health-v2__ai-context .health-v2__ai-note {
  margin: 8px 0 0;
  font-size: .85rem;
}

html[data-color-mode="light"] body.theme-health .health-v2__ai-context {
  color: #21192D;
  border-color: rgba(31,54,88,.1);
  background: linear-gradient(145deg, rgba(121,91,231,.055), rgba(20,183,205,.055)), #fff;
}

html[data-color-mode="light"] body.theme-health .health-v2__ai-step {
  border-color: rgba(31,54,88,.1);
  background: rgba(255,255,255,.9);
}

html[data-color-mode="light"] body.theme-health .health-v2__ai-core {
  border-color: rgba(109,70,182,.22);
  background: rgba(109,70,182,.07);
}

html[data-color-mode="light"] body.theme-health .health-v2__ai-core small,
html[data-color-mode="light"] body.theme-health .health-v2__ai-arrow {
  color: #6540A8;
}

html[data-color-mode="light"] body.theme-health .health-v2__ai-note {
  color: #5B5568;
}

@media(max-width:980px) {
  .health-v2__hero-visual {
    min-height: 570px !important;
    width: min(100%, 560px);
    margin-inline: auto;
  }

  .health-v2__hero-visual::before {
    inset: 5% 4% 8%;
  }

  .health-v2__hero-visual > .health-v2__phone--main {
    width: 270px !important;
    left: 8% !important;
  }

  .health-v2__hero-visual > .health-v2__phone--second {
    width: 225px !important;
    right: 6% !important;
    top: 88px !important;
  }

  .health-v2__showcase {
    min-height: 460px;
    max-width: 560px;
  }
}

@media(max-width:620px) {
  .health-v2__hero-visual {
    min-height: 430px !important;
    margin-top: 18px;
  }

  .health-v2__hero-visual::before {
    inset: 5% 1% 7%;
    border-radius: 30px;
  }

  .health-v2__hero-visual::after {
    width: 88%;
    left: 6%;
    bottom: 0;
  }

  .health-v2__hero-visual > .health-v2__phone {
    padding: 3px;
    border-radius: 30px !important;
  }

  .health-v2__hero-visual > .health-v2__phone--main {
    width: 205px !important;
    left: 5% !important;
    top: 8px !important;
  }

  .health-v2__hero-visual > .health-v2__phone--second {
    width: 174px !important;
    right: 2% !important;
    top: 82px !important;
  }

  .health-v2__showcase {
    min-height: 390px;
    aspect-ratio: 1;
    border-radius: 28px;
  }

  .health-v2__showcase > .health-v2__showcase-screen--main {
    width: 49% !important;
    left: 25.5%;
    top: 5%;
  }

  .health-v2__showcase > .health-v2__showcase-screen--left,
  .health-v2__showcase > .health-v2__showcase-screen--right {
    width: 38% !important;
    top: 20%;
  }

  .health-v2__ai-context {
    padding: 24px;
  }
}


/* Slice B — finish the non-product proof surfaces without changing capability claims. */
.health-v2__device-card {
  min-height: 92px;
  padding: 18px 19px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(0,229,255,.07), transparent 46%),
    linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.024)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.health-v2__device-identity{display:flex;align-items:center;gap:13px;min-width:0}
.health-v2__device-identity>div{display:grid;gap:4px;min-width:0}
.health-v2__device-identity small{color:#8e98aa;font-size:.62rem;font-weight:900;letter-spacing:.11em}
.health-v2__device-mark{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:1px solid rgba(0,229,255,.18);border-radius:13px;background:linear-gradient(145deg,rgba(0,229,255,.10),rgba(187,134,252,.10));color:#dffbff;font-size:.68rem;font-weight:900;letter-spacing:.05em}
.health-v2__research-card{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)!important;align-items:stretch;gap:14px!important;padding:22px!important;background:radial-gradient(circle at 12% 14%,rgba(0,229,255,.10),transparent 35%),radial-gradient(circle at 84% 82%,rgba(187,134,252,.12),transparent 40%),#12101f!important;text-align:left!important;box-shadow:0 28px 72px rgba(0,0,0,.20)}
.health-v2__research-step{display:grid;align-content:center;gap:7px;min-height:146px;padding:20px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.035)}
.health-v2__research-step small{color:#76efff;font-size:.65rem;font-weight:900;letter-spacing:.12em}
.health-v2__research-step span{font-size:.78rem;font-weight:800}
.health-v2__research-step strong{font-size:1rem!important;line-height:1.35}
.health-v2__research-card>b{align-self:center;margin:0}
.health-v2__privacy-inner{overflow:hidden;box-shadow:0 28px 72px rgba(0,0,0,.18)}
.health-v2__privacy-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:28px 0;text-align:left}
.health-v2__privacy-principles>div{display:grid;gap:5px;padding:17px 18px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.035)}
.health-v2__privacy-principles strong{color:#f4f1f8;font-size:.86rem}
.health-v2__privacy-principles span{color:var(--text-secondary);font-size:.8rem;line-height:1.45}
.health-v2__privacy-link{display:inline-flex;align-items:center;min-height:42px}
html[data-color-mode="light"] body.theme-health .health-v2__device-card{border-color:rgba(31,54,88,.10)!important;background:radial-gradient(circle at 0% 0%,rgba(20,183,205,.08),transparent 46%),rgba(255,255,255,.92)!important;box-shadow:0 16px 40px rgba(38,70,82,.07)}
html[data-color-mode="light"] body.theme-health .health-v2__device-mark{border-color:rgba(20,183,205,.15);background:linear-gradient(145deg,rgba(20,183,205,.09),rgba(121,91,231,.07));color:#24556a}
html[data-color-mode="light"] body.theme-health .health-v2__device-identity small{color:#66717d}
html[data-color-mode="light"] body.theme-health .health-v2__research-step{border-color:rgba(31,54,88,.09);background:rgba(255,255,255,.76)}
html[data-color-mode="light"] body.theme-health .health-v2__research-step small{color:#006A80}
html[data-color-mode="light"] body.theme-health .health-v2__privacy-principles>div{border-color:rgba(31,54,88,.09);background:rgba(255,255,255,.70)}
html[data-color-mode="light"] body.theme-health .health-v2__privacy-principles strong{color:#21192D}
html[data-color-mode="light"] body.theme-health .health-v2__privacy-principles span{color:#5B5568}
@media(max-width:980px){.health-v2__research-card{grid-template-columns:1fr!important}.health-v2__research-card>b{justify-self:center;transform:rotate(90deg)}}
@media(max-width:620px){.health-v2__device-card{align-items:flex-start!important;flex-direction:column}.health-v2__privacy-principles{grid-template-columns:1fr}}


/* Slice C — true tall Pro Max-style device geometry for the authentic app screenshots.
   Hardware-inspired CSS presentation only: no fake app UI, no Apple endorsement. */
.health-v2__hero-visual {
  min-height: 710px !important;
}

.health-v2__hero-visual > .health-v2__phone {
  box-sizing: border-box;
  aspect-ratio: 440 / 956;
  height: auto !important;
  margin: 0;
  padding: 7px !important;
  overflow: visible;
  border-radius: 49px !important;
  border: 1px solid rgba(205, 216, 232, .40) !important;
  outline: 1px solid rgba(0, 0, 0, .7);
  background: linear-gradient(115deg, #525b69 0%, #171c25 10%, #05070b 58%, #5b6470 100%);
  box-shadow: 0 40px 92px rgba(0, 0, 0, .46), inset 0 0 0 1px rgba(255,255,255,.16);
}

.health-v2__hero-visual > .health-v2__phone--main {
  top: 14px !important;
}

.health-v2__phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 41px;
  background: #080e19;
  border: 1px solid rgba(0, 0, 0, .88);
}

.health-v2__phone-screen > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  border-radius: 0;
  filter: none;
}

/* Dynamic Island-inspired hardware detail, separate from the real screenshot. */
.health-v2__phone-screen::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 29%;
  height: 18px;
  z-index: 1;
  border-radius: 999px;
  background: #020305;
  box-shadow: 0 0 0 1px rgba(255,255,255,.035);
  pointer-events: none;
}

html[data-color-mode="light"] body.theme-health .health-v2__hero-visual > .health-v2__phone {
  box-shadow: 0 32px 76px rgba(20, 35, 55, .25), inset 0 0 0 1px rgba(255,255,255,.14);
}

@media (max-width: 980px) {
  .health-v2__hero-visual {
    min-height: 635px !important;
  }
}

@media (max-width: 620px) {
  .health-v2__hero-visual {
    min-height: 490px !important;
    width: 100%;
  }

  .health-v2__hero-visual > .health-v2__phone {
    border-radius: 36px !important;
    padding: 5px !important;
  }

  .health-v2__hero-visual > .health-v2__phone--main {
    width: clamp(164px, 53vw, 205px) !important;
    left: 3% !important;
    top: 8px !important;
  }

  .health-v2__hero-visual > .health-v2__phone--second {
    width: clamp(136px, 44vw, 174px) !important;
    right: 0 !important;
    top: 90px !important;
  }

  .health-v2__phone-screen {
    border-radius: 30px;
  }

  .health-v2__phone-screen::after {
    top: 7px;
    height: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .health-v2__hero-visual > .health-v2__phone {
    transition: none !important;
  }
}

/* Slice D — realistic Pro Max-style presentation of authentic full-height
   Home/Today and Energy Hub screenshots. No generated health data. */
.health-v2__showcase--promax {
  min-height: 600px;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 82%, rgba(0,229,255,.15), transparent 47%),
    radial-gradient(circle at 70% 20%, rgba(187,134,252,.18), transparent 43%),
    #0b1020;
}
.health-v2__showcase--promax > .health-v2__showcase-device {
  box-sizing: border-box;
  display: block;
  position: absolute;
  margin: 0;
  padding: 6px;
  aspect-ratio: 440 / 956;
  height: auto;
  border-radius: 44px;
  border: 1px solid rgba(210,222,236,.48);
  background: linear-gradient(115deg,#586174,#161c28 12%,#05070c 66%,#535d70);
  box-shadow: 0 32px 75px rgba(0,0,0,.52), inset 0 0 0 1px rgba(255,255,255,.14);
  transition: transform .3s ease;
}
.health-v2__showcase-device--front {
  z-index: 2;
  width: 44%;
  left: 16%;
  top: 5%;
  transform: rotate(-3deg);
}
.health-v2__showcase-device--back {
  z-index: 1;
  width: 37%;
  right: 10%;
  top: 18%;
  transform: rotate(7deg);
}
.health-v2__showcase-device-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 37px;
  background: #07101c;
}
.health-v2__showcase-device-screen > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  filter: none;
}
.health-v2__showcase-device-screen::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 50%;
  width: 29%;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #020306;
  pointer-events: none;
}
html[data-color-mode="light"] body.theme-health .health-v2__showcase--promax {
  background: radial-gradient(circle at 35% 82%,rgba(20,183,205,.15),transparent 47%),
    radial-gradient(circle at 70% 20%,rgba(121,91,231,.14),transparent 43%),#eef4fa;
}
@media(max-width:620px) {
  .health-v2__showcase--promax { min-height: 465px; border-radius: 26px; }
  .health-v2__showcase--promax > .health-v2__showcase-device { padding: 4px; border-radius: 33px; }
  .health-v2__showcase-device--front { width: 53%; left: 8%; top: 5%; }
  .health-v2__showcase-device--back { width: 45%; right: 5%; top: 17%; }
  .health-v2__showcase-device-screen { border-radius: 28px; }
  .health-v2__showcase-device-screen::after { top: 6px; height: 12px; }
}
@media(prefers-reduced-motion:reduce) {
  .health-v2__showcase--promax > .health-v2__showcase-device { transition: none; }
}

/* Slice D frame asset: licensed third-party front-facing iPhone 16 Pro Max
   transparent overlay. Self-host asset before production release. */
.health-v2__showcase--promax > .health-v2__showcase-device {
  aspect-ratio: 388 / 800;
  border: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: 0 32px 75px rgba(0,0,0,.30);
}
.health-v2__showcase-device-screen { border-radius: 0; overflow: visible; background: transparent; }
.health-v2__showcase-device-screen > img:not(.health-v2__iphone-16-frame) {
  position: absolute;
  inset: 2.2% 2.3% 1.6%;
  width: 95.4%;
  height: 96.2%;
  border-radius: 11% / 5.5%;
  object-fit: contain;
  background: #070c15;
  overflow: hidden;
}
.health-v2__showcase-device-screen::after { display: none; }
.health-v2__showcase-device-screen > .health-v2__iphone-16-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
@media(max-width:620px) {
  .health-v2__showcase--promax > .health-v2__showcase-device { padding: 0; border-radius: 0; }
  .health-v2__showcase-device-screen { border-radius: 0; }
}

/* Slice D visual direction: luminous premium backdrop, no dark screenshot tiles.
   Product screenshots remain genuine. The handset is a self-hosted Pro Max asset. */
.health-v2__showcase--promax {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 20% 75%, rgba(241,82,211,.36), transparent 48%),
    radial-gradient(ellipse at 79% 30%, rgba(40,175,255,.48), transparent 55%),
    radial-gradient(ellipse at 50% 110%, rgba(119,92,235,.38), transparent 56%),
    linear-gradient(140deg, #36224e 0%, #384a87 55%, #225c91 100%);
}
html[data-color-mode="light"] body.theme-health .health-v2__showcase--promax {
  background:
    radial-gradient(ellipse at 15% 80%,rgba(243,110,208,.38),transparent 50%),
    radial-gradient(ellipse at 80% 28%,rgba(83,183,253,.46),transparent 54%),
    linear-gradient(135deg,#f1e4fb,#d9e8ff 52%,#c6eff6);
}
.health-v2__showcase--promax > .health-v2__showcase-device {
  box-shadow: 0 25px 55px rgba(17,15,61,.24), 0 10px 20px rgba(27,20,63,.12);
}
.health-v2__showcase-device-screen > img:not(.health-v2__iphone-16-frame) {
  object-fit: cover;
  object-position: center top;
  background: transparent;
}

/* Premium light marketing presentation: user-approved direction (2026-10-09).
   This is presentation styling, not an AI-generated product screenshot. */
body.theme-health .health-v2__showcase--promax {
  background:
    radial-gradient(ellipse at 15% 78%, rgba(246,149,230,.43), transparent 48%),
    radial-gradient(ellipse at 84% 21%, rgba(131,214,251,.49), transparent 50%),
    linear-gradient(135deg,#f7e8ff 0%,#e6e8ff 51%,#d4f1ff 100%);
  border:1px solid rgba(144,114,214,.14);
  box-shadow:0 24px 58px rgba(61,72,124,.11);
}
body.theme-health .health-v2__showcase--promax > .health-v2__showcase-device {
  box-shadow:0 28px 62px rgba(54,50,104,.23),0 6px 16px rgba(70,66,115,.12);
}
body.theme-health .health-v2__showcase-device-screen > img:not(.health-v2__iphone-16-frame) {
  background:transparent;
}