/* «Он стал холоднее» — лендинг диагностической встречи
   Цвета и сетка строго по ТЗ. Mobile-first, контрольный viewport 390×844. */

:root{
  --bg:      #F6F3EE;  /* основной светлый фон */
  --ink:     #2A332E;  /* глубокий оливковый: текст, заголовки */
  --olive:   #CBD0B8;  /* светлый оливковый: смысловой блок */
  --terra:   #8D514E;  /* винно-терракотовый: CTA, линии, маркеры */
  --stone:   #E7E0D5;  /* тёплый stone — резерв */

  --container: 350px;
  --gutter: 20px;
  --btn-h: 54px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  background-color:var(--bg);
  color:var(--ink);
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  font-size:17.5px;
  line-height:1.5;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* запас под плавающую кнопку */
  padding-bottom:calc(var(--btn-h) + 32px + env(safe-area-inset-bottom,0px));
}

/* ── сетка ───────────────────────────────────────────── */
.wrap{
  width:calc(100% - var(--gutter) * 2);
  max-width:var(--container);
  margin:0 auto;
}

.section{padding:16px 0;}
.section--first{padding-top:28px;}
.section--olive{
  background-color:var(--olive);
  padding:32px 0 32px;
}
.section--last{padding:16px 0 40px;}
.section--last h2{font-size:30px;}

/* ── типографика ─────────────────────────────────────── */
h1,h2,h3,.name{
  font-family:"Lora",Georgia,"Times New Roman",serif;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-0.01em;
}

h1{
  font-size:34px;
  line-height:1.1;
  margin-bottom:26px;
}
h1 .soft{
  display:block;
  font-style:italic;
  font-weight:500;
}

h2{
  font-size:31px;
  line-height:1.12;
  margin-bottom:18px;
}

h3{
  font-size:23px;
  line-height:1.15;
  margin-bottom:10px;
}
h3.q{color:var(--terra);margin-top:28px;}

p{margin-bottom:18px;max-width:350px;}
p:last-child{margin-bottom:0;}

strong,b{font-weight:600;}
.accent{color:var(--terra);font-weight:600;}
.lead-out{font-weight:600;}

.small{font-size:15.5px;line-height:1.45;}

.hint{
  font-family:"Lora",Georgia,"Times New Roman",serif;
  font-style:italic;
  font-size:15px;
  line-height:1.45;
  color:var(--ink);
  opacity:0.6;
  text-align:center;
  max-width:290px;
  margin:14px auto 0;
}

/* ── секция 2: варианты истории ──────────────────────── */
.cases{list-style:none;}
.cases li{
  position:relative;
  padding:17px 0 17px 20px;
  border-top:1px solid rgba(42,51,46,.14);
}
.cases li:first-child{border-top:0;padding-top:4px;}
.cases li::before{
  content:"";
  position:absolute;
  left:0;
  top:26px;
  width:6px;
  height:6px;
  border-radius:50%;
  background-color:var(--terra);
}
.cases li:first-child::before{top:13px;}

.cases-out{
  margin-top:22px;
  color:var(--terra);
  font-weight:600;
  line-height:1.4;
}

/* ── секция 3: вопросы ───────────────────────────────── */
.questions{list-style:none;margin:18px 0 26px;}
.questions li{
  position:relative;
  padding:0 0 12px 20px;
  line-height:1.45;
}
.questions li::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  width:6px;
  height:6px;
  border-radius:50%;
  background-color:var(--terra);
}

/* ── секция 4: портрет ───────────────────────────────── */
.portrait{
  display:block;
  width:100%;
  max-width:350px;
  height:auto;
  border-radius:6px;
  margin:24px 0 16px;
}
.name{
  font-size:23px;
  margin-bottom:14px;
}

/* ── секция 5: карточка параметров ───────────────────── */
.card{
  border:1px solid rgba(141,81,78,.45);
  border-radius:8px;
  margin-top:24px;
  overflow:hidden;
}
.card-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-top:1px solid rgba(141,81,78,.28);
  font-size:16px;
  font-weight:600;
  line-height:1.2;
}
.card-row:first-child{border-top:0;}
.card-row svg{
  flex:none;
  width:20px;
  height:20px;
  stroke:var(--terra);
  stroke-width:1.6;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ── секция 6: финал ─────────────────────────────────── */
.offer{margin:26px 0 22px;}
.offer .title{font-weight:600;line-height:1.35;}
.offer .meta{color:var(--terra);font-weight:600;line-height:1.35;}

/* ── CTA ─────────────────────────────────────────────── */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:var(--container);
  min-height:var(--btn-h);
  padding:14px 12px;
  background-color:var(--terra);
  color:#F6F3EE;
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  font-size:15.5px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  border-radius:6px;
  transition:background-color .18s ease;
}
.btn:hover,.btn:focus-visible{background-color:#7B4744;}

/* плавающая кнопка */
.sticky{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  padding:10px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));
  background-color:var(--bg);
  border-top:1px solid rgba(42,51,46,.10);
  display:flex;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
  z-index:20;
}
.sticky.is-visible{opacity:1;visibility:visible;transform:translateY(0);}

/* ── адаптив ─────────────────────────────────────────── */
@media (max-width:389px){
  .btn{font-size:14.5px;}
}

@media (max-width:340px){
  .btn{font-size:13px;}
}

@media (max-width:374px){
  :root{--gutter:16px;}
  body{font-size:17px;}
  h1{font-size:32px;}
  h2{font-size:28px;}
  h3{font-size:22px;}
  .btn{font-size:14px;}
}

@media (min-width:900px){
  :root{--container:420px;}
  body{font-size:18px;}
  h1{font-size:40px;}
  h2{font-size:34px;}
  h3{font-size:25px;}
  p{max-width:420px;}
  .portrait{max-width:420px;}
  .section{padding:24px 0;}
  .section--olive{padding:40px 0 40px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}