.product-bottle b {
  left: 50%;
  top: 31%;
  transform: translate(-50%, -50%);
  padding: .28rem .42rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, .62);
  font-size: .62rem;
  line-height: 1.12;
  white-space: nowrap;
}

.hero-bottle span {
  top: 37%;
  bottom: auto;
  width: 56px;
  min-width: 0;
  padding: .24rem .12rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 2px 5px rgba(8, 45, 85, .05);
  font-size: .47rem;
  line-height: 1.04;
  letter-spacing: .075em;
  box-sizing: border-box;
}

.hero-bottle.b2 span { width: 64px; font-size: .5rem; }
.hero-bottle.b1 span,.hero-bottle.b3 span { width: 50px; padding-left: .08rem; padding-right: .08rem; }
.hero-bottle img {
  filter: drop-shadow(0 25px 18px rgba(9,44,69,.23)) drop-shadow(0 6px 4px rgba(9,44,69,.12));
}
.hero-bottle.b1 img { filter: drop-shadow(0 24px 17px rgba(98,47,39,.22)) drop-shadow(0 5px 4px rgba(98,47,39,.1)); }
.hero-bottle.b2 img { filter: drop-shadow(0 27px 19px rgba(25,96,89,.23)) drop-shadow(0 6px 4px rgba(25,96,89,.11)); }
.hero-bottle.b3 img { filter: drop-shadow(0 24px 17px rgba(54,48,100,.22)) drop-shadow(0 5px 4px rgba(54,48,100,.1)); }

/* Homepage editorial hero */
.hero {
  min-height: calc(100vh - 119px);
  grid-template-columns: 1.02fr .98fr;
  background: #fff;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(4rem, 7vw, 7rem);
}

.hero h1 {
  max-width: 850px;
  font-size: clamp(4.6rem, 7.25vw, 8.4rem);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.075em;
}

.hero h1 > span { display: block; }
.hero h1 .spray-word { color: var(--teal); }
.hero h1 .spray-word i { right: 2%; top: -2%; width: 74px; height: 42px; background-size: 14px 14px; }

.hero-sub {
  max-width: 660px;
  margin: 2.2rem 0 1.7rem;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
}

.hero-art { min-height: 650px; isolation: isolate; }
.hero-art::after {
  content: "COLOR-CODED CARE";
  position: absolute;
  right: 2.2rem;
  bottom: 2rem;
  color: rgba(8,45,85,.55);
  font: 800 .65rem Manrope, sans-serif;
  letter-spacing: .19em;
}

.hero-art .orb { filter: none; opacity: 1; }
.hero-art .orb-one { width: min(43vw,610px); height: min(43vw,610px); right: -3%; top: 8%; background: #cef4ef; }
.hero-art .orb-two { width: 290px; height: 290px; right: 55%; bottom: -4%; background: #ffdcd3; }
.hero-art .orb-three { width: 235px; height: 235px; right: -2%; bottom: 1%; background: #ded8ff; }
.hero-art .orb-one::after {
  content: none;
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(8,45,85,.12);
  border-radius: 50%;
}

.hero-spectrum {
  position: absolute;
  top: 9%;
  right: 7%;
  z-index: 5;
  display: flex;
  gap: .55rem;
  align-items: center;
}
.hero-spectrum i { width: 9px; height: 9px; border-radius: 50%; background: #f29a87; box-shadow: 0 0 0 5px #fff; }
.hero-spectrum i:nth-child(2){background:#59cfc4}.hero-spectrum i:nth-child(3){background:#9e91e8}.hero-spectrum i:nth-child(4){width:13px;height:13px;background:#f2c654}.hero-spectrum i:nth-child(5){background:#77aae7}.hero-spectrum i:nth-child(6){background:#e76fa4}.hero-spectrum i:nth-child(7){background:#79c963}

.hero-bottle { bottom: -1.5rem; }
.hero-bottle.b1 { left: 1%; height: 430px; }
.hero-bottle.b2 { left: 27%; height: 565px; }
.hero-bottle.b3 { left: 59%; height: 465px; }

@media (max-width: 1050px) {
  .hero { min-height: auto; }
  .hero h1 { font-size: clamp(4.2rem, 11vw, 7rem); }
  .hero-art { min-height: 570px; }
  .hero-art .orb-one { width: 520px; height: 520px; }
}

@media (max-width: 700px) {
  .hero h1 { font-size: clamp(3.7rem, 17vw, 5rem); }
  .hero h1 .spray-word i { display: block; right: 7%; width: 48px; height: 30px; background-size: 10px 10px; }
  .hero-art { min-height: 410px; }
  .hero-art .orb-one { width: 390px; height: 390px; right: -18%; top: 2%; }
  .hero-art .orb-two { width: 190px; height: 190px; right: 58%; }
  .hero-art .orb-three { width: 165px; height: 165px; }
  .hero-spectrum { top: 1.5rem; right: 1.5rem; gap: .42rem; }
  .hero-spectrum i { width: 7px; height: 7px; box-shadow: 0 0 0 3px #fff; }
  .hero-art::after { right: 1rem; bottom: .75rem; }
  .hero-bottle.b1 { left: 0; height: 280px; }
  .hero-bottle.b2 { left: 25%; height: 365px; }
  .hero-bottle.b3 { left: 57%; height: 300px; }
}

/* Refined, quieter hero product composition */
.hero-art::after { content: none; }
.hero h1 .spray-word i { display: none; }
.hero-art .orb-one { width: min(42vw, 570px); height: min(42vw, 570px); right: 10%; top: 7%; }
.hero-art .orb-two { width: 300px; height: 300px; right: 55%; bottom: -2%; }
.hero-art .orb-three { width: 265px; height: 265px; right: 9%; bottom: 0; }
.hero-bottle { bottom: 1.25rem; }
.hero-bottle.b1 { left: 8%; height: 350px; }
.hero-bottle.b2 { left: 32%; height: 465px; }
.hero-bottle.b3 { left: 62%; height: 385px; }

@media (max-width: 1050px) {
  .hero-art .orb-one { width: 500px; height: 500px; right: 12%; }
  .hero-art .orb-two { width: 270px; height: 270px; right: 58%; bottom: -1%; }
  .hero-art .orb-three { width: 235px; height: 235px; right: 9%; bottom: 1%; }
  .hero-bottle.b1 { left: 15%; height: 335px; }
  .hero-bottle.b2 { left: 38%; height: 445px; }
  .hero-bottle.b3 { left: 61%; height: 365px; }
}

@media (max-width: 700px) {
  .hero-art .orb-one { width: 370px; height: 370px; right: 5%; top: 4%; }
  .hero-art .orb-two { width: 205px; height: 205px; right: 59%; bottom: -1%; }
  .hero-art .orb-three { width: 185px; height: 185px; right: 7%; bottom: 0; }
  .hero-bottle { bottom: .5rem; }
  .hero-bottle.b1 { left: 5%; height: 260px; }
  .hero-bottle.b2 { left: 29%; height: 340px; }
  .hero-bottle.b3 { left: 58%; height: 280px; }
}

.product-card.gold .product-bottle,
.product-card.gold .product-bottle img {
  display: block;
  opacity: 1;
}

.how-intro h2 em {
  color: var(--teal);
  font-style: normal;
}

.lifestyle-steps {
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.lifestyle-steps article {
  display: block;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: #f2f8f9;
}

.step-photo {
  position: relative;
  height: 360px;
  overflow: hidden;
}

.step-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step-photo span {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  font-size: .75rem;
  font-weight: 800;
}

.step-copy { padding: 1.5rem; }
.step-copy small { color: var(--teal); font-size: .66rem; font-weight: 800; letter-spacing: .14em; }
.step-copy h3 { margin: .3rem 0; font-size: 2rem; }
.step-copy p { margin: 0; color: #607486; font-size: .95rem; }

@media (max-width: 700px) {
  .lifestyle-steps { grid-template-columns: 1fr; }
  .lifestyle-steps article { display: block; }
  .step-photo { height: 310px; }
  .steps.lifestyle-steps p { grid-column: auto; }
  .product-bottle b { font-size: .68rem; }
}

.details-visual {
  grid-template-columns: minmax(210px, .8fr) minmax(260px, 1.2fr);
  padding: 4rem 2.5rem 3rem 4rem;
  isolation: isolate;
}

.details-visual .detail-circle {
  left: -6%;
  z-index: -1;
  transform: none;
  border-color: rgba(8, 45, 85, .18);
}

.details-visual .device-callout {
  position: relative;
  z-index: 3;
  align-self: center;
  color: var(--navy);
}

.device-callout span {
  display: block;
  margin-bottom: .7rem;
  color: #087f88;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.device-callout strong {
  display: block;
  font: 800 clamp(2.7rem, 4.6vw, 4.8rem)/.92 Manrope, sans-serif;
  letter-spacing: -.06em;
}

.device-callout p {
  max-width: 260px;
  margin: 1.35rem 0 0;
  color: #426179;
  font-size: .95rem;
}

.details-visual > img {
  position: relative;
  z-index: 2;
  justify-self: center;
  width: auto;
  max-width: 275px;
  height: 540px;
  object-fit: contain;
  filter: drop-shadow(0 26px 25px rgba(9, 42, 68, .18));
}

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; }
  .details-visual { min-height: 590px; padding: 3rem 2rem; }
  .details-visual > img { width: auto; max-width: 250px; height: 490px; }
}

@media (max-width: 700px) {
  .details-visual { grid-template-columns: .75fr 1.25fr; min-height: 510px; padding: 2rem 1rem 2rem 1.5rem; }
  .details-visual > img { width: auto; max-width: 195px; height: 390px; }
  .device-callout strong { font-size: 2.45rem; }
  .device-callout p { font-size: .82rem; }
}