:root {
  color-scheme: light;
  --deep-green: #214a3f;
  --coral: #bf524b;
  --ivory: #f5f3ea;
  --mincho: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

* { box-sizing: border-box; }

html { background: var(--ivory); }

body {
  margin: 0;
  color: var(--deep-green);
  font-family: var(--mincho);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.first-view {
  position: relative;
  isolation: isolate;
  width: min(100%, 941px);
  aspect-ratio: 941 / 1672;
  margin-inline: auto;
  overflow: hidden;
  container-type: inline-size;
  background: var(--ivory);
}

.first-view__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/hero-background.png") center top / 100% 100% no-repeat;
}

.brand {
  position: absolute;
  top: 2.55cqw;
  left: 3.9cqw;
  width: 28cqw;
  color: #123c32;
  text-align: center;
}

.brand__name {
  font-family: "Times New Roman", Georgia, serif;
  font-size: 4.8cqw;
  line-height: 1;
  letter-spacing: .25em;
  white-space: nowrap;
}

.brand__product {
  margin-top: 1.1cqw;
  font-family: Arial, sans-serif;
  font-size: 1.26cqw;
  font-weight: 600;
  letter-spacing: .55em;
  white-space: nowrap;
}

.brand__rule {
  width: 9.2cqw;
  height: 1px;
  margin: 3cqw 0 0 .15cqw;
  background: #929c94;
}

.hero-copy {
  position: absolute;
  top: 15.6cqw;
  left: 4.05cqw;
}

.hero-copy__title {
  margin: 0;
  font-size: 5.3cqw;
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: .06em;
  color: #07392f;
  text-shadow: 0 1px 10px rgba(255, 255, 246, .35);
}

.hero-copy__title span { display: block; white-space: nowrap; }
.hero-copy__title span:nth-child(3) { margin-top: .5cqw; }

.hero-copy__description {
  margin: 0 0 0 .15cqw;
  color: var(--deep-green);
  font-size: clamp(12.5px, 3.4cqw, 13px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .03em;
  white-space: nowrap;
}

.features {
  position: absolute;
  top: 56cqw;
  left: 2.65cqw;
  display: grid;
  grid-template-columns: repeat(3, 21.6cqw);
  width: 64.8cqw;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #122b27;
}

.features__item {
  position: relative;
  min-height: 12.8cqw;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.features__item + .features__item::before {
  position: absolute;
  top: .3cqw;
  left: 0;
  width: 1px;
  height: 11.8cqw;
  background: rgba(190, 145, 110, .6);
  content: "";
}

.features__icon {
  display: grid;
  place-items: center;
  width: 7.35cqw;
  height: 7.35cqw;
  border: 1px solid #8d9c83;
  border-radius: 50%;
  background: rgba(255, 255, 248, .28);
  color: #16514c;
}

.features__icon svg { width: 70%; height: 70%; }

.features__text {
  margin-top: .7cqw;
  font-size: 2.68cqw;
  line-height: 1.28;
  letter-spacing: .035em;
  white-space: nowrap;
}

.four-in-one {
  position: absolute;
  top: 65.7cqw;
  left: 74.7cqw;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 23.4cqw;
  height: 23.4cqw;
  border: 1px solid rgba(250, 255, 233, .9);
  border-radius: 50%;
  background: radial-gradient(circle at 28% 26%, rgba(255,255,250,.48), rgba(242,249,221,.22) 58%, rgba(255,255,250,.46));
  box-shadow: inset 0 0 0 .4cqw rgba(241, 248, 218, .35), inset 0 0 0 .75cqw rgba(255,255,255,.5), 0 .5cqw 1.1cqw rgba(48,65,45,.12);
  color: #244d39;
  transform: rotate(-5deg);
  backdrop-filter: blur(2px);
}

.four-in-one__text {
  display: flex;
  align-items: baseline;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 7.8cqw;
  font-style: italic;
  line-height: 1;
  white-space: nowrap;
}

.four-in-one__text i { margin-inline: .2cqw; font-size: 3.5cqw; font-weight: 400; }
.four-in-one__leaf { width: 8.6cqw; height: 3cqw; margin-top: 1cqw; }

.offer {
  position: absolute;
  top: 126.7cqw;
  left: 2.8cqw;
  width: 94.3cqw;
  height: 44.8cqw;
  border-radius: 3cqw;
  background: rgba(255, 255, 251, .89);
  box-shadow: 0 1.4cqw 3.5cqw rgba(49, 67, 42, .08);
  backdrop-filter: blur(7px);
  color: #252825;
}

.offer__normal {
  position: absolute;
  top: 7.3cqw;
  left: 5.2cqw;
  width: 28.5cqw;
  white-space: nowrap;
}

.offer__normal-label { display: block; font-size: 2.7cqw; letter-spacing: .08em; }

.offer__normal-price {
  position: relative;
  display: inline-block;
  margin-top: .05cqw;
  font-size: 6.8cqw;
  line-height: 1.08;
  letter-spacing: -.055em;
}

.offer__normal-price::after {
  position: absolute;
  top: 49%;
  left: -.7cqw;
  width: 27cqw;
  height: .25cqw;
  background: var(--coral);
  content: "";
  transform: rotate(-17deg);
  transform-origin: center;
}

.offer__normal-yen { font-size: 3.8cqw; letter-spacing: 0; }
.offer__normal-tax { margin-left: .2cqw; font-size: 1.75cqw; }

.offer__separator {
  position: absolute;
  top: 9.05cqw;
  left: 37.35cqw;
  width: 2.9cqw;
  height: 9.5cqw;
  color: #788f7c;
}

.offer__special { position: absolute; top: 2.35cqw; left: 43.4cqw; }

.offer__tag {
  display: inline-block;
  min-width: 20.25cqw;
  padding: .18cqw .4cqw .28cqw;
  border-radius: .35cqw;
  background: var(--coral);
  color: white;
  font-size: 3.35cqw;
  line-height: 1.35;
  letter-spacing: .17em;
  text-align: center;
}

.offer__special-price {
  display: flex;
  align-items: flex-end;
  margin-top: -.2cqw;
  color: var(--coral);
  font-size: 13.7cqw;
  line-height: 1;
  letter-spacing: -.08em;
  white-space: nowrap;
}

.offer__yen-group {
  display: flex;
  align-items: flex-start;
  flex-direction: column-reverse;
  padding-bottom: .3cqw;
  font-size: 6.7cqw;
  line-height: 1;
  letter-spacing: 0;
}

.offer__yen-group small { font-size: 2.6cqw; line-height: 1.1; }

.offer__conditions {
  position: absolute;
  top: 23.25cqw;
  left: 2.65cqw;
  display: flex;
  align-items: center;
  width: 88.9cqw;
  margin: 0;
  font-size: 2.25cqw;
  line-height: 1.5;
  letter-spacing: .09em;
  white-space: nowrap;
}

.offer__conditions::before,
.offer__conditions::after {
  flex: 1;
  height: 1px;
  background: #9c9e9a;
  content: "";
}

.offer__conditions span { padding-inline: 1.6cqw; }

.offer__button {
  position: absolute;
  top: 27.5cqw;
  left: 1.25cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 91.8cqw;
  height: 15cqw;
  padding: 0 5cqw;
  border: .2cqw solid #073d35;
  border-radius: 9cqw;
  background: radial-gradient(ellipse at 50% -15%, #3a7769 0, #12534a 51%, #003c37 100%);
  box-shadow: inset 0 .65cqw .65cqw rgba(255,255,255,.22), inset 0 -.8cqw 1cqw rgba(0,35,32,.32), 0 .8cqw 1.4cqw rgba(26,51,42,.25);
  color: #fff;
  cursor: pointer;
  font-family: var(--mincho);
  font-size: 4.75cqw;
  font-weight: 400;
  letter-spacing: .11em;
  white-space: nowrap;
}

.offer__button svg {
  position: absolute;
  right: 5.1cqw;
  width: 2.5cqw;
  height: 4.1cqw;
}

.offer__button:hover { filter: brightness(1.08); }
.offer__button:active { transform: translateY(1px); }
.offer__button:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

.first-view__note {
  position: absolute;
  top: 172.1cqw;
  left: 0;
  width: 100%;
  margin: 0;
  color: #30332f;
  font-size: 1.9cqw;
  letter-spacing: .045em;
  text-align: center;
}

@media (min-width: 942px) {
  body { padding-block: 24px; }
  .first-view { box-shadow: 0 12px 40px rgba(30, 50, 35, .1); }
}

/* Sections following the completed first view */
.lp-additions {
  --lp-ivory: #f8f8f2;
  --lp-green: #214a3f;
  --lp-sage: #a5bba7;
  --lp-body: "Noto Sans JP", "Yu Gothic", sans-serif;
  width: min(100%, 941px);
  margin-inline: auto;
  background: var(--lp-ivory);
  color: var(--lp-green);
}

.lp-additions .lp-eyebrow {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(11px, 2.9vw, 13px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .24em;
}

.lp-additions .lp-eyebrow::after {
  display: block;
  width: 64px;
  height: 1px;
  margin-top: 11px;
  background: currentColor;
  content: "";
  opacity: .62;
}

.lp-additions .lp-heading {
  font-family: var(--mincho);
  font-weight: 400;
  letter-spacing: .075em;
}

.concerns {
  background: var(--lp-ivory);
}

.concerns__inner,
.essentials__inner {
  width: min(calc(100% - 44px), 850px);
  margin-inline: auto;
}

.concerns__inner {
  padding-block: 70px 64px;
}

.concerns__heading {
  margin: 18px 0 38px;
  font-size: clamp(30px, 8.4vw, 48px);
  line-height: 1.5;
}

.concerns__list {
  display: grid;
  gap: 38px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.concerns__item {
  width: min(78%, 270px);
  margin-right: auto;
}

.concerns__item:nth-child(even) {
  margin-right: 0;
  margin-left: auto;
}

.concerns__portrait {
  position: relative;
}

.concerns__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.03;
  border-radius: 49% 51% 46% 54% / 39% 42% 58% 61%;
  object-fit: cover;
  filter: saturate(.95) contrast(.99);
}

.concerns__item--pores img { object-position: 55% center; }
.concerns__item--skin img { object-position: 53% center; }
.concerns__item--busy img { object-position: 64% center; }

.concerns__number {
  position: absolute;
  top: -16px;
  left: -10px;
  color: #7c9a82;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(37px, 10vw, 50px);
  font-style: italic;
  line-height: 1;
  text-shadow: 0 1px 7px rgba(255, 255, 250, .9);
}

.concerns__label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 94%;
  min-height: 68px;
  margin: -27px auto 0;
  padding: 12px 16px;
  border: 1px solid var(--lp-sage);
  border-radius: 50%;
  background: rgba(255, 255, 251, .94);
  box-shadow: 0 3px 12px rgba(55, 81, 58, .04);
  font-family: var(--mincho);
  font-size: clamp(14px, 3.8vw, 17px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .045em;
  text-align: center;
}

.concerns__closing {
  width: calc(100% + 28px);
  margin: 58px -14px 0;
  font-family: var(--mincho);
  font-size: clamp(23px, 6.55vw, 34px);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: .04em;
  text-align: center;
}

.concerns__closing span { font-size: 1.13em; }

.lp-wave {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  margin-block: -1px;
}

.lp-wave--to-green { background: var(--lp-green); }
.lp-wave--to-ivory { background: var(--lp-ivory); }

.product-intro {
  background: var(--lp-green);
  color: var(--lp-ivory);
}

.product-intro__frame {
  position: relative;
  isolation: isolate;
}

.product-intro__media { position: relative; }

.product-intro__image {
  display: block;
  width: 100%;
  height: auto;
}

.product-intro__media::before,
.product-intro__media::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.product-intro__media::before {
  background: linear-gradient(180deg, var(--lp-green) 0%, rgba(33, 74, 63, .72) 24%, transparent 58%);
  height: 24%;
}

.product-intro__media::after {
  background: linear-gradient(0deg, var(--lp-green) 0%, rgba(33, 74, 63, .62) 22%, transparent 60%);
  inset: auto 0 0;
  height: 18%;
}

.product-intro__copy {
  position: relative;
  z-index: 2;
  padding: 42px 24px 38px;
}

.lp-additions .lp-eyebrow--light { color: var(--lp-ivory); }

.product-intro__heading {
  margin: 25px 0 22px;
  font-size: clamp(24px, 6.6vw, 28px);
  line-height: 1.55;
}

.product-intro__description {
  margin: 0;
  font-family: var(--lp-body);
  font-size: clamp(13.5px, 3.7vw, 14px);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .025em;
}

.product-intro__description span { display: block; }

.essentials {
  background: var(--lp-ivory);
}

.essentials__inner {
  padding-block: 70px 70px;
}

.essentials__heading {
  margin: 18px 0 16px;
  font-size: clamp(30px, 8.2vw, 49px);
  line-height: 1.5;
}

.essentials__cards { display: grid; }

.essential-card {
  min-width: 0;
  padding-block: 22px 30px;
  border-top: 1px solid rgba(92, 123, 97, .38);
}

.essential-card:last-child { border-bottom: 1px solid rgba(92, 123, 97, .38); }

.essential-card__heading {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 65px;
  margin-bottom: 18px;
}

.essential-card__number {
  flex: none;
  color: #7d9a80;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(43px, 12vw, 54px);
  font-style: italic;
  line-height: 1;
}

.essential-card h3 {
  margin: 0;
  font-family: var(--mincho);
  font-size: clamp(18px, 5vw, 22px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .055em;
}

.essential-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.45;
  border-radius: 12px;
  object-fit: cover;
  object-position: center 53%;
}

.essential-card:nth-child(-n+2) img { filter: saturate(.93) contrast(.98); }

.essential-card p {
  margin: 15px 0 0;
  font-family: var(--lp-body);
  font-size: clamp(15px, 3.8vw, 16px);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .025em;
}

@media (min-width: 700px) {
  .concerns__inner,
  .essentials__inner { width: min(calc(100% - 72px), 850px); }

  .concerns__inner { padding-block: 80px 90px; }
  .concerns__heading { margin-bottom: 48px; }
  .concerns__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
  .concerns__item,
  .concerns__item:nth-child(even) { width: auto; margin: 0; }
  .concerns__label { min-height: 74px; font-size: 16px; }
  .concerns__closing { margin-top: 72px; }

  .product-intro__copy {
    position: absolute;
    top: 13%;
    left: 5.5%;
    width: 47%;
    padding: 0;
    text-shadow: 0 1px 8px rgba(5, 34, 28, .28);
  }
  .product-intro__media::after {
    inset: 0;
    height: auto;
    background: linear-gradient(90deg, rgba(16, 54, 46, .48), rgba(16, 54, 46, .18) 44%, transparent 70%),
      linear-gradient(0deg, var(--lp-green) 0%, transparent 18%);
  }
  .product-intro__heading { margin-block: 22px 20px; font-size: clamp(30px, 4.2vw, 42px); }
  .product-intro__description { font-size: clamp(15px, 1.8vw, 18px); }

  .essentials__inner { padding-block: 80px 84px; }
  .essentials__heading { margin-bottom: 18px; }
  .essentials__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .essential-card { padding-block: 0; padding-inline: 11px; border-top: 0; }
  .essential-card + .essential-card { padding-left: 10px; border-left: 1px solid rgba(92, 123, 97, .38); }
  .essential-card:last-child { border-bottom: 0; }
  .essential-card__heading { align-items: flex-start; gap: 10px; min-height: 90px; }
  .essential-card__number { font-size: 49px; }
  .essential-card h3 { padding-top: 7px; font-size: clamp(16px, 2.25vw, 19px); }
  .essential-card img { aspect-ratio: 1.27; }
  .essential-card p { font-size: 15px; }
}

/* ONE STEP, FOUR ROLES */
.roles-showcase {
  overflow: hidden;
  background: var(--lp-ivory);
}

.roles-showcase__inner,
.howto__inner {
  width: min(calc(100% - 44px), 850px);
  margin-inline: auto;
}

.roles-showcase__inner { padding-block: 45px 62px; }

.roles-showcase__heading {
  margin: 18px 0 22px;
  font-size: clamp(30px, 8.2vw, 48px);
  line-height: 1.5;
}

.roles-showcase__lead {
  margin: 0;
  font-family: var(--mincho);
  font-size: clamp(21px, 5.7vw, 30px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .07em;
}

.roles-showcase__stage { position: relative; }

.roles-showcase__image {
  display: block;
  width: min(100%, 500px);
  height: auto;
  margin: 27px auto 0;
  aspect-ratio: 1;
  object-fit: cover;
}

.roles-showcase__orbit {
  position: relative;
  width: min(100%, 390px);
  margin: 4px auto 0;
}

.roles-showcase__connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--lp-sage);
  pointer-events: none;
}

.roles-showcase__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roles-showcase__role {
  display: flex;
  min-width: 0;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 13px 8px;
  border: 1px solid #769479;
  border-radius: 50%;
  background: rgba(250, 250, 245, .93);
  box-shadow: 0 2px 10px rgba(48, 76, 52, .04);
  text-align: center;
}

.roles-showcase__role-name {
  font-family: var(--mincho);
  font-size: clamp(20px, 5.3vw, 26px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .06em;
}

.roles-showcase__role-detail {
  margin-top: 6px;
  font-family: var(--mincho);
  font-size: clamp(13px, 3.5vw, 14px);
  line-height: 1.5;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}

/* THE TEXTURE */
.texture-feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(172px, 47vw, 205px);
  background: #e9efe4;
}

.texture-feature__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.texture-feature::before,
.texture-feature::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
}

.texture-feature::before {
  background: linear-gradient(180deg, rgba(248, 248, 242, .97) 0%, rgba(248, 248, 242, .91) 27%, rgba(248, 248, 242, .57) 39%, transparent 53%);
}

.texture-feature::after {
  inset: auto 0 0;
  height: 20%;
  background: linear-gradient(0deg, var(--lp-ivory), transparent);
}

.texture-feature__wave {
  position: absolute;
  z-index: 3;
  display: block;
  width: 100%;
  height: auto;
  fill: var(--lp-ivory);
  pointer-events: none;
}

.texture-feature__wave--top { top: -1px; }
.texture-feature__wave--bottom { bottom: -1px; }

.texture-feature__copy {
  position: absolute;
  z-index: 2;
  top: clamp(51px, 13vw, 90px);
  left: 6%;
  width: 88%;
}

.texture-feature__heading {
  margin: 19px 0 15px;
  font-size: clamp(30px, 8vw, 55px);
  line-height: 1.45;
}

.texture-feature__description {
  margin: 0;
  font-family: var(--lp-body);
  font-size: clamp(13px, 3.5vw, 17px);
  line-height: 1.7;
  letter-spacing: .025em;
}

/* HOW TO USE */
.howto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--lp-ivory) url("assets/nagie-howto-background.png") 64% center / cover no-repeat;
}

.howto::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--lp-ivory), rgba(248, 248, 242, .77) 14%, rgba(248, 248, 242, .72) 52%, rgba(248, 248, 242, .81) 87%, var(--lp-ivory));
  content: "";
  pointer-events: none;
}

.howto__inner {
  position: relative;
  width: min(calc(100% - 36px), 850px);
  padding-block: 66px 78px;
}

.howto__heading {
  margin: 18px 0 16px;
  font-size: clamp(30px, 8.2vw, 49px);
  line-height: 1.5;
}

.howto__lead {
  max-width: 36em;
  margin: 0;
  font-family: var(--lp-body);
  color: var(--lp-green);
  font-size: clamp(15px, 4vw, 16px);
  line-height: 1.75;
  letter-spacing: .025em;
}

.howto__steps {
  display: grid;
  gap: 18px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.howto__step {
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  min-width: 0;
  min-height: 218px;
  overflow: hidden;
  border: 1px solid rgba(137, 166, 139, .5);
  border-radius: 18px;
  background: rgba(248, 248, 242, .8);
  box-shadow: 0 6px 20px rgba(33, 74, 63, .08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.howto__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 18px 9px 18px 17px;
}

.howto__step-mark {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 12px;
  color: #668a70;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  white-space: nowrap;
}

.howto__step-mark span:first-child {
  color: #58765f;
  font-size: 11px;
  letter-spacing: .12em;
}

.howto__step-mark span:last-child { font-size: clamp(30px, 9vw, 36px); font-style: italic; }

.howto__step-title {
  margin: 0;
  font-family: var(--mincho);
  font-size: clamp(17px, 4.5vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .04em;
}

.howto__description {
  margin: 9px 0 0;
  color: #315648;
  font-family: var(--lp-body);
  font-size: clamp(13px, 3.6vw, 14px);
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: .01em;
}

.howto__media { position: relative; min-width: 0; }

.howto__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.96) contrast(.99);
}

.howto__step:nth-child(1) .howto__photo { object-position: 59% 43%; }
.howto__step:nth-child(2) .howto__photo { object-position: 52% 48%; }
.howto__step:nth-child(3) .howto__photo { object-position: 35% 53%; }

@media (min-width: 700px) {
  .roles-showcase__inner,
  .howto__inner { width: min(calc(100% - 72px), 850px); }

  .roles-showcase__inner { padding-block: 54px 70px; }
  .roles-showcase__image { width: min(100%, 500px); }
  .roles-showcase__orbit { width: min(100%, 420px); }

  .texture-feature { padding-top: 0; }
  .texture-feature__image { aspect-ratio: 941 / 620; }
  .texture-feature::before {
    background: linear-gradient(90deg, rgba(248, 248, 242, .93) 0%, rgba(248, 248, 242, .75) 32%, transparent 66%);
  }
  .texture-feature__copy { top: 21%; left: 5.5%; width: 49%; }
  .texture-feature__heading { font-size: clamp(39px, 5.5vw, 55px); }

  .howto { background-position: center; }
  .howto__inner { width: min(calc(100% - 72px), 850px); padding-block: 82px 94px; }
  .howto__heading { margin-bottom: 15px; }
  .howto__lead { font-size: 17px; }
  .howto__steps { gap: 22px; margin-top: 36px; }
  .howto__step { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); min-height: 232px; border-radius: 20px; }
  .howto__content { padding: 28px 32px; }
  .howto__step-mark { margin-bottom: 15px; }
  .howto__step-mark span:first-child { font-size: 13px; }
  .howto__step-mark span:last-child { font-size: clamp(38px, 5vw, 44px); }
  .howto__step-title { font-size: clamp(20px, 2.65vw, 22px); }
  .howto__description { font-size: 15px; }
}

@media (min-width: 900px) {
  .roles-showcase__inner {
    display: grid;
    grid-template-columns: 365px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding-block: 42px 70px;
  }

  .roles-showcase__heading { font-size: 44px; }
  .roles-showcase__stage { width: 500px; max-width: 100%; }
  .roles-showcase__image { width: 100%; margin: 0; }
  .roles-showcase__orbit { position: absolute; inset: 0; width: 100%; margin: 0; }
  .roles-showcase__list { display: block; width: 100%; height: 100%; }
  .roles-showcase__role { position: absolute; width: 31%; }
  .roles-showcase__role--lotion { top: 0; left: 34.5%; }
  .roles-showcase__role--serum { top: 34.5%; left: 0; }
  .roles-showcase__role--emulsion { top: 34.5%; right: 0; }
  .roles-showcase__role--cream { bottom: 0; left: 34.5%; }
  .roles-showcase__role-name { font-size: 22px; }
  .roles-showcase__role-detail { font-size: 13px; }

  .howto__heading br { display: none; }
}

/* CUSTOMER'S VOICE */
.customer-feedback {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--lp-ivory) url("assets/feedback-background.png") 79% top / cover no-repeat;
}

.customer-feedback::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(248, 248, 242, .3), rgba(248, 248, 242, .12) 28%, rgba(248, 248, 242, .2) 77%, rgba(248, 248, 242, .5));
  content: "";
  pointer-events: none;
}

.customer-feedback__inner {
  position: relative;
  width: min(calc(100% - 36px), 810px);
  margin-inline: auto;
  padding-block: 56px 43px;
}

.customer-feedback .lp-eyebrow {
  color: var(--lp-green);
  text-align: center;
  letter-spacing: .33em;
}

.customer-feedback .lp-eyebrow::after { margin-inline: auto; }

.customer-feedback__heading {
  margin: 16px 0 14px;
  font-size: clamp(36px, 8vw, 58px);
  line-height: 1.43;
  letter-spacing: .1em;
  text-align: center;
}

.customer-feedback__lead {
  margin: 0;
  color: #2b4435;
  font-family: var(--mincho);
  font-size: clamp(14px, 3.75vw, 20px);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .035em;
  text-align: center;
}

.customer-feedback__sample {
  margin: 9px 0 0;
  color: #506d59;
  font-family: var(--lp-body);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.customer-feedback__cards {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.customer-feedback__reveal { --voice-delay: 0s; }
.customer-feedback__reveal:nth-child(2) { --voice-delay: .15s; }
.customer-feedback__reveal:nth-child(3) { --voice-delay: .3s; }

.customer-feedback__card {
  position: relative;
  min-width: 0;
  padding: 16px 17px 20px;
  border: 1px solid rgba(137, 163, 136, .62);
  border-radius: 18px;
  background: rgba(251, 250, 245, .83);
  box-shadow: 0 8px 22px rgba(33, 74, 63, .08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.customer-feedback__meta {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.customer-feedback__portrait {
  display: block;
  width: 64px;
  height: 64px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.customer-feedback__profile {
  min-width: 0;
  margin: 0;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(137, 163, 136, .52);
  color: #284a37;
  font-family: var(--mincho);
  font-size: clamp(12.5px, 3.6vw, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .025em;
}

.customer-feedback__body {
  position: relative;
  margin: 8px 0 0;
  padding: 0 13px 13px 25px;
  color: #263d32;
  font-family: var(--mincho);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: .02em;
}

.customer-feedback__body::before,
.customer-feedback__body::after {
  position: absolute;
  color: #c6cfb9;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 45px;
  line-height: 1;
  pointer-events: none;
}

.customer-feedback__body::before { top: -13px; left: -1px; content: "“"; }
.customer-feedback__body::after { right: 0; bottom: -14px; content: "”"; }

.customer-feedback__note {
  margin: 19px 0 0;
  color: #526554;
  font-family: var(--lp-body);
  font-size: 11.5px;
  line-height: 1.65;
  text-align: center;
}

@media (min-width: 700px) {
  .customer-feedback { background-position: center top; }
  .customer-feedback__inner { padding-block: 70px 30px; }
  .customer-feedback__heading { margin: 17px 0 16px; }
  .customer-feedback__lead { letter-spacing: .07em; }
  .customer-feedback__sample { margin-top: 2px; font-size: 13px; }
  .customer-feedback__cards { gap: 21px; margin-top: 12px; }
  .customer-feedback__card {
    min-height: 246px;
    padding: 21px 32px 24px;
    border-radius: 21px;
    background: rgba(251, 250, 245, .75);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .customer-feedback__meta { grid-template-columns: 90px minmax(0, 1fr); gap: 33px; min-height: 90px; }
  .customer-feedback__portrait {
    position: absolute;
    top: 50%;
    left: 22px;
    width: 112px;
    height: 112px;
    transform: translateY(-50%);
  }
  .customer-feedback__profile {
    grid-column: 2;
    max-width: 516px;
    padding-bottom: 10px;
    font-size: clamp(16px, 2.2vw, 18px);
    letter-spacing: .05em;
  }
  .customer-feedback__body {
    margin: -5px 92px 0 109px;
    padding: 0 24px 12px 32px;
    font-size: clamp(17px, 2.15vw, 20px);
    line-height: 1.72;
    letter-spacing: .045em;
  }
  .customer-feedback__body::before,
  .customer-feedback__body::after { font-size: 58px; }
  .customer-feedback__body::before { top: -17px; left: -7px; }
  .customer-feedback__body::after { right: -2px; bottom: -20px; }
  .customer-feedback__note { margin-top: 22px; font-size: 12px; }
}

/* QUESTIONS & ANSWERS */
.faq {
  position: relative;
  isolation: isolate;
  background: var(--lp-ivory) url("assets/FAQ-background.png") 56% center / cover no-repeat;
}

.faq::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--lp-ivory), rgba(248, 248, 242, .8) 19%, rgba(248, 248, 242, .83) 72%, var(--lp-ivory));
  content: "";
  pointer-events: none;
}

.faq__inner {
  position: relative;
  width: min(calc(100% - 44px), 850px);
  margin-inline: auto;
  padding-block: 62px 42px;
}

.faq__heading {
  margin: 18px 0 35px;
  font-size: clamp(30px, 8.1vw, 52px);
  line-height: 1.5;
}

.faq__items { display: grid; gap: 14px; }

.faq__item {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(165, 187, 167, .36);
  border-radius: 19px;
  background: rgba(248, 248, 242, .92);
  box-shadow: 0 6px 20px rgba(33, 74, 63, .06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.faq__question {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  gap: 10px;
  align-items: center;
  min-height: 80px;
  padding: 15px 14px;
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ""; }
.faq__question:focus-visible { outline: 2px solid var(--lp-green); outline-offset: -3px; border-radius: 17px; }

.faq__letter {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #e9eee6;
  color: var(--lp-green);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1;
}

.faq__question-text {
  font-family: var(--mincho);
  font-size: clamp(17px, 4.7vw, 23px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .04em;
}

.faq__toggle {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  justify-self: end;
  color: #58765f;
}

.faq__toggle::before,
.faq__toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

.faq__toggle::before { width: 12px; height: 1px; }
.faq__toggle::after { width: 1px; height: 12px; }
.faq__item[open] .faq__toggle::after { display: none; }

.faq__answer {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 0 14px 17px;
  padding: 15px 0 0;
  border-top: 1px solid rgba(165, 187, 167, .32);
}

.faq__letter--answer { font-size: 22px; }

.faq__answer p {
  margin: 4px 0 0;
  font-family: var(--lp-body);
  font-size: clamp(15px, 4.1vw, 18px);
  line-height: 1.75;
  letter-spacing: .025em;
}

/* FINAL PURCHASE */
.final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--lp-ivory) url("assets/final-background1.png") right 160px / auto clamp(390px, 110vw, 460px) no-repeat;
}

.final-cta::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(248, 248, 242, .94), rgba(248, 248, 242, .84) 150px, rgba(248, 248, 242, .3) 230px, transparent 300px, transparent 475px, rgba(248, 248, 242, .74) 605px, var(--lp-ivory) 730px);
  content: "";
  pointer-events: none;
}

.final-cta__wave {
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  fill: var(--lp-ivory);
  pointer-events: none;
}

.final-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(calc(100% - 44px), 850px);
  margin-inline: auto;
  padding-block: 60px 65px;
}

.final-cta__headline h2 {
  margin: 0;
  font-size: clamp(29px, 7.8vw, 34px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .075em;
}

.final-cta__purchase {
  position: relative;
  width: 100%;
  min-width: 0;
  margin-top: clamp(290px, 80vw, 350px);
  padding: 25px 18px 20px;
  border: 1px solid rgba(137, 166, 139, .7);
  border-radius: 14px;
  background: rgba(248, 248, 242, .9);
  box-shadow: 0 12px 28px rgba(31, 70, 53, .12);
  backdrop-filter: blur(5px);
}

.final-cta__normal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 8px;
  margin: 0 0 14px;
  font-family: var(--mincho);
  font-size: clamp(14px, 3.75vw, 17px);
  line-height: 1.45;
  white-space: nowrap;
}

.final-cta__normal del {
  font-size: 1.43em;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
}

.final-cta__normal small { font-size: .88em; }

.final-cta__special {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
}

.final-cta__special-tag {
  display: grid;
  flex: none;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: white;
  font-family: var(--mincho);
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
}

.final-cta__amount {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  color: var(--coral);
  font-family: var(--mincho);
  font-size: clamp(50px, 14.1vw, 70px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.08em;
  white-space: nowrap;
}

.final-cta__yen {
  display: flex;
  align-items: flex-start;
  flex-direction: column-reverse;
  padding-bottom: 3px;
  font-family: var(--mincho);
  font-size: .37em;
  line-height: 1;
  letter-spacing: 0;
}

.final-cta__yen small { font-size: .64em; line-height: 1.3; }

.final-cta__conditions {
  margin: 19px 0 20px;
  padding: 11px 8px;
  border-top: 1px solid rgba(73, 105, 79, .28);
  border-bottom: 1px solid rgba(73, 105, 79, .28);
  font-family: var(--mincho);
  font-size: clamp(14px, 3.75vw, 17px);
  line-height: 1.5;
  letter-spacing: .06em;
  text-align: center;
}

.final-cta__button {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 62px;
  align-items: center;
  justify-content: center;
  padding: 11px 31px 11px 12px;
  border: 1px solid #0b4237;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% -15%, #3a7769, #12534a 51%, #003c37);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.2), 0 6px 14px rgba(16, 53, 42, .2);
  color: white;
  cursor: pointer;
  font-family: var(--mincho);
  font-size: clamp(14px, 3.9vw, 18px);
  font-weight: 400;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: filter .2s ease, transform .2s ease;
}

.final-cta__button svg {
  position: absolute;
  right: 18px;
  width: 10px;
  height: 16px;
}

.final-cta__button:hover { filter: brightness(1.1); }
.final-cta__button:active { transform: translateY(1px); }
.final-cta__button:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

.site-footer {
  padding: 29px 20px 38px;
  background: var(--lp-green);
  color: var(--lp-ivory);
  text-align: center;
}

.site-footer__brand {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: .29em;
}

.site-footer__note {
  margin: 14px 0 0;
  font-family: var(--lp-body);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .04em;
}

.site-footer__copyright {
  margin: 18px 0 0;
  color: rgba(248, 248, 242, .72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .08em;
}

.purchase-demo {
  width: min(calc(100% - 32px), 420px);
  max-width: none;
  padding: 28px;
  border: 1px solid #9db49c;
  border-radius: 16px;
  background: #f8f8f2;
  box-shadow: 0 18px 50px rgba(13, 44, 34, .24);
  color: #214a3f;
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
}

.purchase-demo::backdrop { background: rgba(9, 35, 27, .55); }
.purchase-demo h2 { margin: 0 0 12px; font-family: var(--mincho); font-size: 23px; font-weight: 400; line-height: 1.5; }
.purchase-demo p { margin: 0 0 21px; font-size: 15px; line-height: 1.7; }
.purchase-demo form { text-align: right; }
.purchase-demo button { min-width: 96px; min-height: 44px; border: 0; border-radius: 999px; background: #214a3f; color: white; cursor: pointer; font: inherit; }
.purchase-demo button:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

@media (min-width: 700px) {
  .faq { background-position: center 54%; }
  .faq__inner { width: min(calc(100% - 72px), 850px); padding-block: 70px 90px; }
  .faq__heading { margin-bottom: 44px; }
  .faq__items { gap: 18px; }
  .faq__question { grid-template-columns: 42px minmax(0, 1fr) 28px; gap: 16px; min-height: 92px; padding: 17px 22px; }
  .faq__letter { width: 42px; height: 42px; font-size: 29px; }
  .faq__toggle { width: 28px; height: 28px; }
  .faq__answer { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; margin: 0 22px 20px; padding-top: 18px; }
  .faq__letter--answer { width: 40px; height: 40px; font-size: 27px; }

  .final-cta {
    background-position: center;
    background-size: cover;
  }
  .final-cta::before {
    background: linear-gradient(90deg, rgba(248, 248, 242, .8), rgba(248, 248, 242, .5) 35%, rgba(248, 248, 242, .08) 62%, transparent 74%);
  }
  .final-cta__inner {
    width: min(calc(100% - 72px), 850px);
    padding-block: 118px 100px;
  }
  .final-cta__headline h2 { font-size: clamp(36px, 4.6vw, 46px); }
  .final-cta__mobile-break { display: none; }
  .final-cta__purchase { width: min(100%, 400px); margin-top: 42px; padding: 26px 23px 22px; }
  .final-cta__special-tag { width: 62px; height: 62px; }
  .final-cta__amount { font-size: clamp(58px, 7.2vw, 70px); }
}

/* Deliberate, optional motion: static layout remains the default. */
@media (prefers-reduced-motion: no-preference) {
  .motion-reveal {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
  }

  .motion-reveal.is-visible { opacity: 1; transform: none; }

  .customer-feedback__reveal.motion-reveal {
    transform: translate3d(0, 15px, 0);
    transition: opacity .7s ease-out, transform .7s ease-out;
    transition-delay: var(--voice-delay);
  }

  .customer-feedback__reveal.motion-reveal.is-visible { transform: none; }

  .customer-feedback__reveal.motion-reveal .customer-feedback__portrait {
    opacity: 0;
    transform: scale(.96);
    transition: opacity .5s ease-out, transform .5s ease-out;
    transition-delay: var(--voice-delay);
  }

  .customer-feedback__reveal.motion-reveal.is-visible .customer-feedback__portrait {
    opacity: 1;
    transform: scale(1);
  }

  .offer__button::after,
  .final-cta__button::after {
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 43%, rgba(255, 255, 255, .16) 50%, transparent 57%);
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: 300% 100%;
    content: "";
    pointer-events: none;
    animation: nagie-cta-sweep 8s linear infinite;
  }

  @keyframes nagie-cta-sweep {
    0%, 84% { background-position: 100% 0; }
    98%, 100% { background-position: 0 0; }
  }
}

@media (min-width: 700px) and (prefers-reduced-motion: no-preference) {
  .customer-feedback__reveal.motion-reveal .customer-feedback__portrait {
    transform: translateY(-50%) scale(.96);
  }

  .customer-feedback__reveal.motion-reveal.is-visible .customer-feedback__portrait {
    transform: translateY(-50%) scale(1);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .customer-feedback__card { transition: transform .3s ease, box-shadow .3s ease; }

  .customer-feedback__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 11px 25px rgba(33, 74, 63, .11);
  }
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .concerns__portrait img,
  .essential-card img,
  .howto__photo { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }

  .concerns__item:hover .concerns__portrait img,
  .essential-card:hover img,
  .howto__step:hover .howto__photo { transform: scale(1.018); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-reveal { opacity: 1; transform: none; transition: none; }
  .faq__toggle,
  .final-cta__button { transition: none; }
}