/* ============================================================
   Тест «У каждой кожи — свои потребности» — ANAGRAN / Reishi Lab
   Оформление наследует систему лендинга «Антиоксидантный
   протокол Reishi Lab»: тёплый песочный лист, чернильно-коричневая
   типографика, золото и оранжевый как единственные акценты.
   ============================================================ */

/* ===== ШРИФТЫ ===== */
@font-face { font-family:'Canela'; src:url('assets/fonts/Canela-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Oksana Sans'; src:url('assets/fonts/OksanaSans.otf') format('opentype');         font-weight:400; font-display:swap; }
@font-face { font-family:'Oksana Sans'; src:url('assets/fonts/OksanaSansDemiBold.otf') format('opentype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Oksana Sans'; src:url('assets/fonts/OksanaSans-Bold.otf') format('opentype');    font-weight:700; font-display:swap; }
@font-face { font-family:'Oksana Sans Compressed'; src:url('assets/fonts/OksanaSansCompressedDemiBold.otf') format('opentype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Oksana Sans Fat'; src:url('assets/fonts/oksanasansfat.otf') format('opentype');  font-weight:900; font-display:swap; }
@font-face { font-family:'Myriad Pro'; src:url('assets/fonts/MyriadPro-Regular.otf') format('opentype');   font-weight:400; font-display:swap; }
@font-face { font-family:'Myriad Pro'; src:url('assets/fonts/MyriadPro-Semibold.otf') format('opentype');  font-weight:600; font-display:swap; }

/* ===== ТОКЕНЫ ===== */
:root {
  --bg:            #F4ECDE;
  --bg-soft:       #F8F2E6;
  --bg-card:       #EFE5D2;
  --bg-card-deep:  #E8DBC2;
  --bg-accent:     #E0D0B3;

  --ink:           #3B2F1E;   /* 11.1:1 по --bg */
  --ink-soft:      #5A4732;   /* 7.5:1  — вторичный текст */
  --ink-muted:     #8A7558;   /* 3.8:1  — только крупный/декоративный */
  --ink-faint:     #B8A788;   /* только линии и заливки */

  --gold:          #A8845A;   /* только линии и крупный декор */
  --gold-ink:      #7A5C38;   /* золото для текста: 5.2:1 по --bg, 4.9:1 по --bg-card */
  --gold-soft:     #C9A87B;
  --orange:        #D85F2C;   /* единственный акцент: цифры, прогресс, промокод */
  --orange-soft:   #E89B6B;

  --border:        #D9C9AC;
  --border-soft:   #E5D8BE;

  --f-display:     'Canela', Georgia, 'Times New Roman', serif;
  --f-headline:    'Oksana Sans Compressed', 'Oksana Sans', sans-serif;
  --f-num:         'Oksana Sans Fat', 'Oksana Sans', sans-serif;
  --f-accent:      'Oksana Sans', system-ui, sans-serif;
  --f-body:        'Myriad Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radius:        18px;
  --radius-lg:     28px;
  --ease:          cubic-bezier(.16,1,.3,1);
  --dur:           .42s;

  --z-skip:        70;
  --z-cap:         60;

  --pad:           clamp(20px, 5vw, 56px);
  --maxw:          1240px;
  --measure:       66ch;
}

/* ===== БАЗА ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  font-family:var(--f-body);
  font-size:clamp(16px, 1vw + 13px, 18px);
  line-height:1.62;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

p { text-wrap:pretty; }
img { max-width:100%; display:block; }
a { color:inherit; }

::selection { background:var(--orange); color:var(--bg); }

:where(a, button, [tabindex]):focus-visible {
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:4px;
}

.skip {
  position:absolute; left:-9999px; top:0; z-index:var(--z-skip);
  background:var(--ink); color:var(--bg);
  padding:12px 20px; text-decoration:none; font-weight:600;
}
.skip:focus { left:12px; top:12px; }

/* серифный дисплей: латиница — Canela, кириллица уходит в Georgia */
.display {
  font-family:var(--f-display);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.015em;
  text-wrap:balance;
}

/* компактный брендовый заголовок секции */
.sec-h {
  font-family:var(--f-headline);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.1;
}

/* мелкая латинская метка вразрядку */
.mark {
  font-family:var(--f-accent);
  font-size:12px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
}

/* ===== ШАПКА ===== */
.cap {
  position:sticky; top:0; z-index:var(--z-cap);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:12px clamp(14px, 4vw, 40px);
  background:rgba(244,236,222,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-soft);
}
.cap__mark { flex:0 1 auto; }
.cap__logo {
  position:absolute; left:50%; transform:translateX(-50%);
  height:clamp(34px, 5.2vw, 46px); width:auto;
}
.cap__link {
  flex:none;
  font-family:var(--f-accent);
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; white-space:nowrap;
  padding:10px 20px;
  border:1px solid var(--ink); border-radius:999px;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.cap__link:hover { background:var(--ink); color:var(--bg); }

/* ===== ГЕРОЙ ===== */
.hero {
  display:grid; grid-template-columns:1fr;
  gap:clamp(28px, 5vw, 60px);
  align-items:center;
  padding:clamp(40px, 7vw, 96px) var(--pad) clamp(32px, 5vw, 72px);
  max-width:var(--maxw); margin-inline:auto;
}
@media (min-width:900px) { .hero { grid-template-columns:1.02fr .98fr; } }

.hero__title {
  font-size:clamp(38px, 6.4vw, 76px);
  margin-bottom:clamp(18px, 2.6vw, 28px);
}
.hero__title em { font-style:normal; color:var(--gold-ink); }

.hero__lead {
  max-width:50ch;
  font-size:clamp(18px, 1.5vw + 12px, 22px);
  line-height:1.45;
  margin-bottom:14px;
}
.hero__lead--sm {
  font-size:inherit; line-height:1.62;
  color:var(--ink-soft);
  margin-bottom:clamp(24px, 3vw, 34px);
}

.hero__note { margin-top:16px; font-size:14px; color:var(--ink-soft); }

.hero__dates {
  display:inline-block; margin-top:18px;
  font-family:var(--f-accent);
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-ink);
  padding:9px 18px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--bg-soft);
}

/* витрина с флаконами */
.hero__shelf {
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(6px, 2vw, 22px);
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:clamp(26px, 4vw, 46px) clamp(16px, 3vw, 34px) clamp(24px, 3.6vw, 42px);
}
/* высоты по реальному объёму: тонер 150 мл, крем 50 мл, сыворотка 30 мл */
.hero__shelf img {
  --h:clamp(150px, 28vw, 250px);
  width:auto;
  filter:drop-shadow(0 16px 26px rgba(59,47,30,.18));
}
.hero__shelf img:nth-child(1) { height:var(--h); }
.hero__shelf img:nth-child(2) { height:calc(var(--h) * .87); }
.hero__shelf img:nth-child(3) { height:calc(var(--h) * .74); }

/* ===== ЗАЧЕМ ===== */
.why {
  padding:clamp(44px, 6vw, 96px) var(--pad);
  border-top:1px solid var(--border-soft);
  background:var(--bg-soft);
}
.why__title {
  font-size:clamp(26px, 3.6vw, 46px);
  max-width:22ch; margin:0 auto clamp(22px, 3vw, 36px);
  text-align:center;
}
.why__body { max-width:820px; margin-inline:auto; }
.why__body > p {
  max-width:var(--measure); margin-inline:auto;
  text-align:center; color:var(--ink-soft);
}
.why__body > p + p { margin-top:16px; }

.why__list {
  margin-top:clamp(30px, 4vw, 52px);
  display:flex; flex-wrap:wrap; gap:clamp(16px, 2.4vw, 28px);
  justify-content:center;
}
.why__list > div {
  flex:1 1 220px; max-width:300px;
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:22px 22px 24px;
}
.why__list dt {
  font-family:var(--f-headline); font-weight:600; text-transform:uppercase;
  font-size:14px; letter-spacing:.03em;
  color:var(--gold-ink);
  margin-bottom:10px;
}
.why__list dd { font-size:16px; line-height:1.55; color:var(--ink-soft); }

/* ===== ТЕСТ ===== */
.quiz {
  padding:clamp(40px, 6vw, 88px) var(--pad) clamp(44px, 6vw, 96px);
  max-width:820px; margin-inline:auto;
  scroll-margin-top:76px;
}

.quiz__head {
  display:flex; align-items:baseline; gap:16px;
  margin-bottom:clamp(22px, 3vw, 34px);
}
.quiz__count {
  font-family:var(--f-num);
  font-size:clamp(24px, 3vw, 34px);
  line-height:1.2;              /* Oksana Sans Fat — тяжёлый дисплей, при 1.0 срезает верх */
  color:var(--orange);
  font-variant-numeric:tabular-nums;
  flex:none; white-space:nowrap;
}
.quiz__count i { font-style:normal; color:var(--ink-soft); }
.bar { flex:1; height:2px; background:var(--border); overflow:hidden; }
.bar i {
  display:block; height:100%; background:var(--orange);
  transform-origin:left center; transform:scaleX(.1);
  transition:transform .55s var(--ease);
}

.stage { position:relative; }
.card { animation:rise var(--dur) var(--ease) both; }
@keyframes rise {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:none; }
}

.q {
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(26px, 3.6vw, 40px);
  line-height:1.1; letter-spacing:-.015em;
  text-wrap:balance;
  margin-bottom:clamp(22px, 3vw, 32px);
  max-width:22ch;
}

.opts { display:flex; flex-direction:column; gap:10px; }

.opt {
  display:block; width:100%; text-align:left;
  font-family:var(--f-body); font-size:inherit; line-height:1.45;
  color:var(--ink);
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:17px 20px;
  min-height:54px;
  cursor:pointer;
  transition:transform .24s var(--ease), border-color .24s var(--ease),
             background-color .24s var(--ease), box-shadow .24s var(--ease);
  animation:rise .5s var(--ease) both;
}
.opt:nth-child(1) { animation-delay:.03s; }
.opt:nth-child(2) { animation-delay:.07s; }
.opt:nth-child(3) { animation-delay:.11s; }
.opt:nth-child(4) { animation-delay:.15s; }
.opt:nth-child(5) { animation-delay:.19s; }

.opt:hover {
  border-color:var(--gold);
  background:#FBF7EE;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(59,47,30,.07);
}
.opt:active { transform:none; }
.opt[data-picked] {
  background:var(--ink); color:var(--bg); border-color:var(--ink);
  box-shadow:none;
}

/* ===== ВРЕЗКА-ОБЪЯСНЕНИЕ ===== */
.insight {
  background:var(--ink);
  color:var(--bg);
  padding:clamp(24px, 3.6vw, 40px);
  border-radius:var(--radius-lg);
}
.insight__label {
  font-family:var(--f-accent);
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--orange-soft);
  padding-bottom:14px; margin-bottom:16px;
  border-bottom:1px solid rgba(244,236,222,.22);
}
.insight__text { max-width:var(--measure); }
.insight__text p + p { margin-top:14px; }

/* ===== КНОПКИ ===== */
.btn {
  display:inline-block;
  font-family:var(--f-accent);
  font-size:13px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; text-align:center;
  cursor:pointer;
  border:1px solid var(--ink);
  border-radius:999px;
  padding:17px 34px;
  min-height:54px;
  transition:transform .26s var(--ease), background-color .26s var(--ease),
             color .26s var(--ease), box-shadow .26s var(--ease);
}
.btn--go, .btn--next {
  background:var(--ink); color:var(--bg);
}
.btn--go:hover, .btn--next:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(59,47,30,.18);
}
.btn--next { margin-top:clamp(20px, 2.8vw, 28px); }
.btn--again {
  background:transparent; color:var(--ink);
  margin-top:clamp(28px, 4vw, 46px);
}
.btn--again:hover { background:var(--ink); color:var(--bg); }

.quiz__foot {
  margin-top:clamp(26px, 4vw, 42px);
  font-size:13px; color:var(--ink-soft); max-width:var(--measure);
}

/* ===== РЕЗУЛЬТАТ ===== */
.result {
  padding:clamp(40px, 6vw, 88px) var(--pad) clamp(52px, 7vw, 100px);
  max-width:820px; margin-inline:auto;
  scroll-margin-top:76px;
}
.result > * { animation:rise .55s var(--ease) both; }
.result > *:nth-child(2) { animation-delay:.06s; }
.result > *:nth-child(3) { animation-delay:.12s; }
.result > *:nth-child(4) { animation-delay:.18s; }
.result > *:nth-child(5) { animation-delay:.24s; }
.result > *:nth-child(6) { animation-delay:.30s; }

.res__head { margin-bottom:clamp(26px, 3.6vw, 42px); }
.res__eyebrow {
  font-family:var(--f-accent);
  font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-ink);
  margin-bottom:16px;
}
.res__title { font-size:clamp(32px, 5vw, 56px); }
.res__need {
  margin-top:16px; font-family:var(--f-body); font-weight:600;
  font-size:clamp(17px, 1.6vw, 20px);
  max-width:var(--measure);
}

.res__body { max-width:var(--measure); color:var(--ink-soft); }
.res__body p + p { margin-top:15px; }

.res__steps, .res__care, .res__inside, .res__avoid { margin-top:clamp(32px, 4.6vw, 56px); }
.res__steps h3, .res__inside h3, .res__avoid h3, .res__care-title {
  font-family:var(--f-headline); font-weight:600; text-transform:uppercase;
  font-size:clamp(15px, 1.5vw, 18px); letter-spacing:.04em;
  color:var(--gold-ink);
  padding-bottom:12px; margin-bottom:18px;
  border-bottom:1px solid var(--border);
}
.res__steps ol { list-style:none; counter-reset:s; max-width:var(--measure); }
.res__steps li {
  counter-increment:s;
  position:relative; padding-left:38px; margin-bottom:14px;
  color:var(--ink-soft);
}
.res__steps li::before {
  content:counter(s);
  position:absolute; left:0; top:0;
  font-family:var(--f-accent); font-weight:700;
  font-size:17px; line-height:1.62;
  color:var(--orange);
  font-variant-numeric:tabular-nums;
}

/* набор */
.kit { display:flex; flex-wrap:wrap; gap:clamp(14px, 2.4vw, 24px); }
.kit__item {
  flex:1 1 260px;
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:24px 22px 26px;
  display:flex; flex-direction:column; gap:14px;
}
.kit__shot {
  align-self:center;
  height:clamp(132px, 22vw, 178px); width:auto;
  filter:drop-shadow(0 14px 22px rgba(59,47,30,.18));
}
.kit__name { font-family:var(--f-body); font-weight:600; font-size:17px; line-height:1.3; }
.kit__name em {
  font-family:var(--f-accent); font-style:normal; display:block;
  font-size:11px; font-weight:600; letter-spacing:.2em;
  color:var(--gold-ink); margin-bottom:6px;
}
.kit__desc { font-size:15px; line-height:1.5; color:var(--ink-soft); }
.kit__price {
  font-family:var(--f-body); font-weight:600; font-size:18px; line-height:1.3;
  margin-top:auto; padding-top:4px;
  font-variant-numeric:tabular-nums;
}
.kit__why { margin-top:18px; max-width:var(--measure); font-weight:600; }

/* промокод */
.promo {
  margin-top:clamp(24px, 3.6vw, 36px);
  background:var(--bg-card-deep);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:clamp(26px, 3.8vw, 42px);
  text-align:center;
}
.promo__label {
  font-family:var(--f-accent);
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:16px;
}
.promo__code {
  font-family:'Canela', Georgia, serif; font-weight:500;
  font-size:clamp(38px, 8vw, 68px); line-height:1;
  letter-spacing:.14em;
  padding-left:.14em;                 /* компенсация трекинга справа */
  color:var(--orange);
  margin-bottom:18px;
}
.promo__copy {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-accent);
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:transparent;
  border:1px solid var(--ink); border-radius:999px;
  padding:13px 26px; min-height:46px;
  cursor:pointer;
  margin-bottom:18px;
  transition:background-color .26s var(--ease), color .26s var(--ease),
             border-color .26s var(--ease), transform .26s var(--ease);
}
.promo__copy::before {
  content:''; flex:none;
  width:13px; height:13px;
  border:1.5px solid currentColor; border-radius:3px;
  box-shadow:3px -3px 0 -1.5px var(--bg-card-deep), 3px -3px 0 currentColor;
  transition:box-shadow .26s var(--ease);
}
.promo__copy:hover { background:var(--ink); color:var(--bg); transform:translateY(-1px); }
.promo__copy:hover::before { box-shadow:3px -3px 0 -1.5px var(--ink), 3px -3px 0 currentColor; }
.promo__copy[data-done] {
  background:transparent; color:var(--orange); border-color:var(--orange);
  transform:none;
}
.promo__copy[data-done]::before {
  width:14px; height:8px;
  border:none; border-left:2px solid currentColor; border-bottom:2px solid currentColor;
  border-radius:0; box-shadow:none;
  transform:rotate(-45deg) translate(1px, -2px);
}

.promo__status {
  min-height:18px; margin:-8px 0 12px;
  font-size:13px; color:var(--orange);
}

.promo__terms {
  font-size:14px; line-height:1.5;
  max-width:46ch; margin:0 auto 24px;
  color:var(--ink-soft);
}
.btn--buy {
  background:var(--orange); color:#FFF8F0; border-color:var(--orange);
}
.btn--buy:hover {
  background:#C4501F; border-color:#C4501F;
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(216,95,44,.28);
}

/* поддержка изнутри */
.res__inside {
  background:var(--bg-soft);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:clamp(22px, 3.2vw, 34px);
}
.res__inside h3 { margin-top:0; }
.res__inside p { font-size:16px; max-width:var(--measure); color:var(--ink-soft); }
.res__inside p + p { margin-top:13px; }

/* ссылки на карточки товаров anagran.ru */
.lnk {
  font-weight:600; color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--gold-soft);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .22s var(--ease), text-decoration-color .22s var(--ease);
}
.lnk:hover { color:var(--orange); text-decoration-color:var(--orange); }

.res__avoid p { max-width:var(--measure); color:var(--ink-soft); }

.res__disclaimer {
  margin-top:clamp(30px, 4vw, 46px);
  font-size:13px; line-height:1.55; color:var(--ink-soft);
  max-width:var(--measure);
  padding-top:18px; border-top:1px solid var(--border-soft);
}

/* ===== ПОДВАЛ ===== */
.foot {
  background:var(--ink); color:var(--bg);
  padding:clamp(30px, 4vw, 48px) var(--pad);
  text-align:center;
}
.foot__brand { font-size:15px; margin-bottom:10px; }
.foot__brand span {
  font-family:'Canela', Georgia, serif; letter-spacing:.18em; color:var(--gold-soft);
}
.foot__meta { font-size:14px; color:rgba(244,236,222,.75); }
.foot__meta a { color:var(--orange-soft); text-decoration:none; }
.foot__meta a:hover { text-decoration:underline; }

/* обязательная маркировка БАД */
.foot__legal {
  max-width:60ch; margin:clamp(20px, 3vw, 30px) auto 0;
  padding-top:clamp(16px, 2.4vw, 22px);
  border-top:1px solid rgba(244,236,222,.2);
  font-family:var(--f-accent);
  font-size:12px; font-weight:600; line-height:1.5; letter-spacing:.1em;
  color:rgba(244,236,222,.8);
}

/* ===== СНИЖЕННАЯ АНИМАЦИЯ ===== */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .card, .opt, .result > * { animation:none; opacity:1; transform:none; }
  .btn:hover, .opt:hover { transform:none; }
}