/* JR Cosmetics: helle Variante */
:root {
  --bg: #f6f1f4;
  --surface: #eee4ea;
  --surface-2: #e5d7e0;
  --line: #dccad5;
  --fg: #2a1d26;
  --white: #160b13;
  --muted: #685866;
  --accent: #6d2358;
  --accent-hover: #561a46;
  --on-accent: #ffffff;
  color-scheme: light dark;
}
picture {
  display: contents;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1219;
    --surface: #24171f;
    --surface-2: #2e1e29;
    --line: #3e2b37;
    --fg: #e8dce3;
    --white: #fbf4f8;
    --muted: #b19fab;
    --accent: #c46aa2;
    --accent-hover: #d27fb1;
    --on-accent: #ffffff;
  }
  .hero-bg .ph {
    background: radial-gradient(70% 60% at 60% 40%, #3a2532 0%, var(--surface) 60%, var(--bg) 100%);
  }
}

.hero-bg .ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(70% 60% at 60% 40%, #e8d4e0 0%, var(--surface) 60%, var(--bg) 100%);
}
.hero-bg .ph span {
  margin-left: 30%;
  font: 600 0.66rem/1.4 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed var(--accent);
  padding: 10px 14px;
}
@media (max-width: 820px) {
  .hero-bg .ph span {
    display: none;
  }
}
@media (min-width: 821px) {
  .hero-bg img {
    left: calc(63cqw - 0.302 * var(--h));
  }
}
.claim {
  font: 300 clamp(2rem, 3.6vw, 2.7rem)/1.05 var(--display);
  color: var(--white);
  letter-spacing: -0.01em;
}
.hero .sub {
  font: 500 clamp(0.72rem, 1.5vw, 0.82rem)/1.6 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
}
.years {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.years b {
  font: 300 clamp(6rem, 14vw, 10rem)/0.85 var(--display);
  color: var(--accent);
  font-variant-numeric: lining-nums;
}
.years span {
  font: 500 0.72rem/1.5 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg);
  max-width: 16ch;
}
.steps {
  list-style: none;
  padding: 0;
  margin: clamp(36px, 5vw, 56px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.steps li {
  padding: 24px 24px 26px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.steps li + li {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.steps em {
  font: 400 italic 1.1rem/1 var(--display);
  color: var(--accent);
}
.steps p {
  color: var(--muted);
  font-size: 0.92rem;
}
@media (max-width: 760px) {
  .steps {
    grid-template-columns: 1fr;
  }
  .steps li,
  .steps li + li {
    padding: 20px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
}
.feature {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 6vw, 88px);
  padding-block: clamp(32px, 5vw, 48px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.feature > * {
  min-width: 0;
}
.feature .big {
  font: 300 clamp(2.6rem, 6vw, 4.4rem)/0.95 var(--display);
  color: var(--white);
}
.feature .big small {
  display: block;
  font: 500 0.72rem/1.6 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 14px;
}
@media (max-width: 860px) {
  .feature {
    grid-template-columns: 1fr;
  }
}
.treat.flush {
  margin-top: 0;
  border-top: 0;
}
.review {
  background: var(--bg);
}
section.block.slim {
  padding-block: clamp(40px, 6vw, 64px);
}
.pull {
  font: 400 italic clamp(1.7rem, 3.6vw, 2.6rem)/1.2 var(--display);
  color: var(--white);
  max-width: 22ch;
  text-wrap: balance;
}
.pull-wrap {
  display: flex;
  flex-direction: column;
  gap: 22px;
}