/* Supplied lifestyle images keep their complete framing at every screen size. */
.how-heading.how-intro {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 64px;
  margin-bottom: 42px;
}
.how-intro-copy { min-width: 0; }
.how-intro-copy > p:not(.eyebrow) {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.85;
}
.how-intro-note {
  display: block;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 320px;
  color: var(--green);
  font-size: 11px;
}
.usage-photo,
.wellbeing-photo,
.daily-care-photo { margin: 0; min-width: 0; }
.usage-photo > img {
  width: 100%;
  height: auto;
  border-radius: 3px;
}
.usage-photo > figcaption,
.daily-care-photo > figcaption {
  padding-top: 12px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.ingredients-layout {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px;
}
.ingredients-visual.wellbeing-photo {
  min-height: 0;
  padding: 0;
  width: 100%;
  background: #f1f6ed;
  overflow: hidden;
  border-radius: 3px;
}
.wellbeing-photo > img {
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: contain;
}
.wellbeing-photo > figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 28px 30px;
}
.wellbeing-photo .eyebrow {
  font-size: 8px;
  line-height: 1.8;
  letter-spacing: .11em;
}
.wellbeing-caption {
  color: var(--ink);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.3;
  letter-spacing: -.045em;
  margin-top: 14px;
}
.wellbeing-photo > figcaption > img {
  width: 48px;
  height: 48px;
  opacity: .55;
  flex: 0 0 48px;
}

.difference { padding: 72px 0; }
.difference-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 64px;
  align-items: center;
}
.difference-content { min-width: 0; }
.difference h2 { font-size: clamp(36px, 3.7vw, 50px); }
.difference-copy { margin-top: 26px; }
.difference-copy p { max-width: 420px; }
.daily-care-photo { position: relative; z-index: 1; }
.daily-care-photo > img {
  width: 100%;
  height: auto;
  border-radius: 3px;
}
.daily-care-photo > figcaption { color: #526e53; }
.difference-star { top: -22px; left: -100px; }

@media (max-width: 1150px) {
  .how-heading.how-intro, .ingredients-layout, .difference-inner { gap: 40px; }
  .how-intro h2 { font-size: 44px; }
  .ingredients-copy h2 { font-size: 39px; }
  .wellbeing-photo > figcaption { padding: 22px; gap: 18px; }
  .wellbeing-photo .eyebrow { font-size: 7px; }
  .wellbeing-photo > figcaption > img { width: 40px; height: 40px; flex-basis: 40px; }
}
@media (max-width: 900px) {
  .how-heading.how-intro { gap: 28px; }
  .how-intro h2 { font-size: 38px; }
  .how-intro-copy > p:not(.eyebrow) { font-size: 13px; margin-top: 20px; }
  .how-intro-note { margin-top: 18px; padding-top: 14px; font-size: 10px; }
  .ingredients-layout { gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ingredients-copy h2 { font-size: 34px; }
  .wellbeing-photo > figcaption { padding: 20px 18px; gap: 12px; }
  .wellbeing-photo .eyebrow { font-size: 7px; letter-spacing: .06em; }
  .wellbeing-caption { font-size: 22px; }
  .wellbeing-photo > figcaption > img { width: 32px; height: 32px; flex-basis: 32px; }
  .difference-inner { gap: 32px; }
  .difference h2 { font-size: 35px; }
}
@media (max-width: 680px) {
  .how-heading.how-intro { grid-template-columns: minmax(0, 1fr); gap: 25px; margin-bottom: 28px; }
  .how-intro h2 { font-size: 39px; }
  .how-intro-copy > p:not(.eyebrow) { font-size: 14px; margin-top: 20px; }
  .how-intro-note { display: none; }
  .usage-photo > figcaption, .daily-care-photo > figcaption { font-size: 10px; padding-top: 10px; }
  .ingredients-layout { display: flex; flex-direction: column; gap: 32px; }
  .ingredients-visual.wellbeing-photo { min-height: 0; order: 1; }
  .ingredients-copy { order: 0; }
  .ingredients-copy h2 { font-size: 39px; }
  .wellbeing-photo > figcaption { padding: 23px 22px; }
  .wellbeing-photo .eyebrow { font-size: 7px; letter-spacing: .08em; }
  .wellbeing-photo > figcaption > img { width: 42px; height: 42px; flex-basis: 42px; }
  .wellbeing-caption { font-size: 24px; margin-top: 11px; }
  .difference { padding: 55px 0; }
  .difference-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .difference h2 { font-size: 38px; }
  .difference-copy { margin-top: 23px; }
  .difference-copy p { max-width: none; }
  .difference-star { left: auto; right: -130px; top: 20px; }
}
@media (max-width: 360px) {
  .how-intro h2, .ingredients-copy h2 { font-size: 35px; }
  .difference h2 { font-size: 34px; }
  .wellbeing-photo > figcaption { padding: 20px 18px; }
  .wellbeing-photo > figcaption > img { width: 34px; height: 34px; flex-basis: 34px; }
  .wellbeing-caption { font-size: 22px; }
}