/* ============================================================
   Общее оформление всех страниц.
   Формат — «личный блог эксперта»: одна узкая колонка по центру.
   Цвета взяты из дизайн-референс.jpg: мятный фон, коралловый
   акцент, тёмно-синий текст.
   ============================================================ */

/* --- 1. Цвета и размеры ---------------------------------------- */
:root{
  --bg:#dcefeb;          /* мятный фон страницы */
  --bg-deep:#c3e0d9;     /* тёмная мята: круги, подложки */
  --paper:#f8fcfb;       /* карточки и квиз */
  --white:#ffffff;

  --ink:#0f2238;         /* заголовки и важный текст */
  --text:#22364b;        /* основной текст */
  --muted:#566a7b;       /* второстепенный текст */

  --coral:#f0532f;       /* акцент: черта, кнопки, цифры */
  --coral-ink:#c63c1b;   /* коралловый для мелкого текста (читается лучше) */
  --coral-tint:#fde4db;  /* светлая подложка под акцент */
  --coral-rgb:240,83,47;

  --line:#b8d5ce;
  --line-soft:#d3e8e3;

  --r-sm:12px;
  --r:18px;
  --r-lg:26px;

  --shadow:0 10px 30px rgba(15,34,56,.08);
  --shadow-sm:0 2px 10px rgba(15,34,56,.06);

  --font-text:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-num:'Oswald','Arial Narrow',sans-serif;  /* цифры и метки */

  --col:740px;
}

/* --- 2. База ---------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-text);
  background:var(--bg);
  color:var(--text);
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid rgba(var(--coral-rgb),.55);outline-offset:2px;border-radius:6px}

.wrap{max-width:var(--col);margin:0 auto;padding:0 20px}

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

/* --- 3. Шапка: автор блога -------------------------------------- */
.author-bar{padding:22px 0 0;position:relative}
.author-bar .wrap{display:flex;align-items:center;gap:14px}
.author-bar__ava{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:var(--bg-deep);border:2px solid var(--white);box-shadow:var(--shadow-sm);
}
.author-bar__ava img{width:100%;height:100%;object-fit:cover}
.author-bar__name{font-weight:700;color:var(--ink);font-size:16px;line-height:1.25}
.author-bar__role{font-size:13.5px;color:var(--muted);line-height:1.35}

/* Точечная сетка из референса — тихое украшение в углу шапки */
.dots{
  position:absolute;pointer-events:none;
  width:120px;height:72px;
  background-image:radial-gradient(var(--ink) 1.3px,transparent 1.6px);
  background-size:16px 16px;opacity:.28;
}
.author-bar .dots{top:26px;right:max(20px,calc(50% - var(--col)/2 + 20px))}

/* --- 4. Статья -------------------------------------------------- */
.post{padding-top:30px;padding-bottom:56px}
.post > * + *{margin-top:22px}

.post__kicker{
  font-family:var(--font-num);font-weight:500;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--coral-ink);
}
.post__title{
  font-size:clamp(28px,4.6vw,38px);
  font-weight:800;line-height:1.14;letter-spacing:-.025em;
  color:var(--ink);
  margin-top:10px!important;
}
/* Коралловая черта под заголовком — как в референсе */
.post__title::after{
  content:'';display:block;width:64px;height:4px;border-radius:2px;
  background:var(--coral);margin-top:18px;
}
.post p{font-size:17px;line-height:1.7}
.post b,.post strong{color:var(--ink);font-weight:700}

/* --- 5. Вступление от автора: текст + фото в круге -------------- */
.intro{display:grid;grid-template-columns:1fr 200px;gap:28px;align-items:center}
.intro__text > * + *{margin-top:14px}
.intro__lead{font-size:19px!important;line-height:1.6!important;color:var(--ink)}

.portrait{position:relative;width:200px;height:200px}
.portrait::before,.portrait::after{content:'';position:absolute;border-radius:50%}
/* Два круга из референса: коралловый и мятный */
.portrait::before{inset:8px -6px -6px 8px;background:var(--coral)}
.portrait::after{width:96px;height:96px;left:-18px;bottom:-14px;background:var(--bg-deep);z-index:0}
.portrait img{
  position:relative;z-index:1;width:100%;height:100%;
  border-radius:50%;object-fit:cover;background:var(--bg-deep);
  border:4px solid var(--paper);
}

/* --- 6. Фирменный блок: сравнение цены --------------------------
   Главный смысл страницы — «тот же ремонт, без наценки посредников».
   Показываем его как строчки сметы: цену фирм зачёркиваем. */
.compare{
  background:var(--paper);border-radius:var(--r);
  border:1px solid var(--line-soft);box-shadow:var(--shadow-sm);
  padding:8px 24px;
}
.compare__row{
  display:flex;align-items:baseline;gap:12px;
  padding:14px 0;
}
.compare__row + .compare__row{border-top:1px dashed var(--line)}
.compare__who{flex:1;font-size:15.5px;line-height:1.4;color:var(--muted)}
.compare__who b{display:block;color:var(--ink);font-size:16.5px}
.compare__price{
  font-family:var(--font-num);font-weight:600;white-space:nowrap;
  font-size:26px;line-height:1;color:var(--ink);letter-spacing:.01em;
}
.compare__price small{font-family:var(--font-text);font-weight:500;font-size:13px;color:var(--muted);margin-left:4px;letter-spacing:0}
.compare__row--them .compare__price{color:var(--muted)}
.compare__price s{text-decoration-color:var(--coral);text-decoration-thickness:2px}
.compare__row--us .compare__price{color:var(--coral-ink);font-size:32px}
.compare__note{
  font-size:15px!important;line-height:1.55!important;color:var(--muted);
  padding:4px 0 14px;
}

/* --- 7. Подарок ------------------------------------------------- */
.gift{
  display:flex;gap:16px;align-items:center;
  background:var(--ink);color:#fff;
  border-radius:var(--r);padding:18px 22px;
  position:relative;overflow:hidden;
}
.gift::after{  /* коралловый полукруг справа, как на референсе */
  content:'';position:absolute;right:-46px;top:50%;transform:translateY(-50%);
  width:110px;height:110px;border-radius:50%;background:var(--coral);opacity:.9;
}
.gift__ico{
  flex-shrink:0;width:46px;height:46px;border-radius:12px;
  background:var(--coral);display:flex;align-items:center;justify-content:center;
}
.gift__ico svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gift__text{position:relative;z-index:1;padding-right:56px}
.gift__title,.gift__sub{display:block}
.gift__title{font-weight:800;font-size:18px;line-height:1.3;color:#fff}
.gift__sub{font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.78);margin-top:3px}

/* --- 8. Цифры в ряд --------------------------------------------- */
.facts{display:flex;gap:0}
.fact{flex:1;padding:0 18px}
.fact:first-child{padding-left:0}
.fact + .fact{border-left:1px solid var(--line)}
.fact__num{
  font-family:var(--font-num);font-weight:600;
  font-size:34px;line-height:1;color:var(--coral-ink);
}
.fact__label{
  margin-top:6px;font-size:12.5px;line-height:1.35;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink);
}

/* --- 9. Подводка к квизу ---------------------------------------- */
.to-quiz{
  display:flex;align-items:center;gap:12px;
  font-weight:700;font-size:18px;line-height:1.4;color:var(--ink);
}
.to-quiz::after{
  content:'';flex:1;height:1px;background:var(--line);min-width:30px;
}
.to-quiz svg{flex-shrink:0;width:22px;height:22px;stroke:var(--coral);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.closing{
  border-left:3px solid var(--coral);
  padding:4px 0 4px 18px;
  color:var(--ink);
}

/* --- 10. Подвал ------------------------------------------------- */
.site-footer{border-top:1px solid var(--line);padding-top:26px;padding-bottom:34px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.site-footer p + p{margin-top:6px}
.site-footer a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line)}
.site-footer a:hover{text-decoration-color:var(--coral)}
.site-footer__docs{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px}

/* --- 11. Cookie-баннер ------------------------------------------ */
.cookie{
  position:fixed;z-index:50;right:20px;bottom:20px;max-width:340px;
  background:var(--white);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);
  padding:14px 16px;font-size:13px;line-height:1.45;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  transition:opacity .25s ease,transform .25s ease;
}
.cookie.is-hidden{opacity:0;transform:translateY(16px);pointer-events:none}
.cookie a{color:var(--coral-ink)}
.cookie__ok{
  background:transparent;border:1.5px solid var(--coral);color:var(--coral-ink);
  font-weight:700;font-size:13px;padding:5px 14px;border-radius:8px;
}
.cookie__ok:hover{background:var(--coral);color:#fff}

/* --- 12. Простые страницы (политика, согласие, главная) --------- */
.doc{padding-top:34px;padding-bottom:56px}
.doc h1{font-size:clamp(26px,4vw,32px);font-weight:800;line-height:1.2;color:var(--ink);letter-spacing:-.02em}
.doc h2{font-size:19px;font-weight:800;color:var(--ink);margin-top:30px}
.doc p,.doc li{font-size:15.5px;line-height:1.7;margin-top:10px}
.doc ul{padding-left:22px}
.doc .doc__date{color:var(--muted);font-size:14px}

.home-links{display:grid;gap:12px;margin-top:26px}
.home-link{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:18px 22px;text-decoration:none;font-weight:700;color:var(--ink);font-size:18px;
  box-shadow:var(--shadow-sm);transition:border-color .15s ease,transform .15s ease;
}
.home-link:hover{border-color:var(--coral);transform:translateY(-1px)}
.home-link span{color:var(--coral)}

/* --- 13. Телефон ------------------------------------------------ */
@media (max-width:640px){
  body{font-size:16px}
  .author-bar{padding-top:16px}
  .author-bar__ava{width:46px;height:46px}
  .author-bar .dots{display:none}
  .post{padding-top:18px}
  .post > * + *{margin-top:16px}
  .post__kicker{font-size:12.5px}
  .post__title::after{margin-top:12px;width:52px}
  .post p{font-size:16px}

  /* Фото — маленьким кругом рядом с первой фразой, чтобы квиз
     оставался близко к началу страницы */
  .intro{grid-template-columns:1fr 92px;gap:16px;align-items:start}
  .intro__lead{font-size:16.5px!important}
  .portrait{width:92px;height:92px}
  .portrait::before{inset:5px -4px -4px 5px}
  .portrait::after{width:44px;height:44px;left:-10px;bottom:-8px}
  .portrait img{border-width:3px}

  .compare{padding:2px 16px}
  .compare__row{padding:12px 0;align-items:center}
  .compare__sub{display:none}
  .compare__who b{font-size:15px}
  /* единицы — под цифрой, чтобы название фирмы влезало в строку */
  .compare__price{font-size:22px;text-align:right}
  .compare__price small{display:block;margin:3px 0 0;font-size:11.5px}
  .compare__row--us .compare__price{font-size:26px}
  .compare__note{font-size:14px!important}

  .gift{padding:14px 16px;gap:12px}
  .gift::after{width:64px;height:64px;right:-34px}
  .gift__text{padding-right:24px}
  .gift__ico{width:40px;height:40px}
  .gift__title{font-size:16px}
  .gift__sub{font-size:13.5px}

  .fact{padding:0 12px}
  .fact__num{font-size:25px}
  .fact__label{font-size:11px}

  .to-quiz{font-size:16px}

  .cookie{left:0;right:0;bottom:0;max-width:none;border-radius:0;border-width:1px 0 0;
    flex-direction:row;align-items:center;padding:10px 14px max(10px,env(safe-area-inset-bottom))}
}