/* =========================================================
   Тема tpl5 — вёрстка и оформление сняты с донора один в один.
   Светлая узкая колонка 680px, карточки .ko, золотая кнопка .blob,
   таблица фактов, аккордеоны details/summary.
   Шрифт донора (Exo 2) подгружался с чужого хоста — вместо него
   локальный Manrope из общего fonts.css, остальное без изменений.
   ========================================================= */

/* ------------------------------------------------ CSS донора */
body {
font: normal 17px/1.4 'Exo 2','Manrope',-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
background: #f2f2f0;
color: #222;
max-width: 680px;
margin: 0 auto;
padding: 0 10px 10px 10px;
word-wrap: break-word;
user-select: none;
}
a, .lin {text-decoration: none; color: #245483;} a:hover, .lin:hover {text-decoration: underline;}
img, video {max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 3px;}
header {position: relative; cursor: pointer;}
header h1 {position: absolute; right: 15px; font-size: 16px;}
@keyframes pulse {0% {transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);}70% {transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);}100% {transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);}}
.blob {width: 100%; box-shadow: 0 0 0 0 rgba(0, 0, 0, 1); transform: scale(1); animation: pulse 2s infinite; font-weight: 700; line-height: 24px; padding: 11px 15px; margin: 37px 0 37px 0; color: #111;}
.blob:hover {text-decoration: none;}
.ko {padding: 13px 18px 13px 18px; background: #fdfdfd; border-radius: 5px;}
.ko h2, .ko p {margin: 0;}
h1,h2,h3,h4,h5,h6 {margin: 15px 0; color: #333; font-size: 19px;}
b,h1,h2,h3,h4,h5,h6 {font-weight: bold;}
q:after, q:before {content: none;}
button {transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease;}
button,input[type="button"],.lin {cursor: pointer;}
button, input, select, textarea {color: inherit; font-family: inherit; font-size: inherit; margin-right: 6px; margin-bottom: 6px;padding: 10px; border: none; border-radius: 6px; outline: none;}
button, input[type="button"], input[type="reset"], input[type="submit"] {background-color: #e9a00e; padding-right: 30px; padding-left: 30px;}
button,input:not([type="checkbox"]):not([type="radio"]),input[type="range"],select,textarea {-webkit-appearance: none;}
button:active, input[type="button"]:active {transform: translateY(2px);}
button:disabled, input:disabled, select:disabled {cursor: not-allowed;opacity: 0.5;}
button:hover, input[type="button"]:hover {background: #ffb400;}
table {border-collapse: collapse; table-layout: fixed; border-bottom: 1px solid #e8e8e8; margin: 37px 0; font-size: 15px; width: 100%; }
table caption,td,th {text-align: left;}
td, th {padding: 10px 15px; word-wrap: break-word;}
tbody tr:nth-child(2n) {background-color: #e9e9e9;}
details {display: flex; flex-direction: column; align-items: flex-start; padding: 10px 10px 0; margin: 1em 0; border-radius: 6px; overflow: hidden;}
details[open] {padding: 10px; background: #fdfdfd;}
details[open] summary::marker {content: '‒ ';}
details[open] summary {margin-bottom: 10px;}
details > :last-child {margin-bottom: 0;}
details > :not(summary) {margin-top: 0;}
summary {display: list-item; background: #fdfdfd; padding: 10px; margin: -10px -10px 0; cursor: pointer; outline: none;}
summary::marker {content: '+ '; color: #dd9d1d; font-family: system-ui; font-weight: bold;}
summary:focus, summary:hover {text-decoration: underline; background: #fff;}
summary::-webkit-details-marker {color: #dbdbdb;}
footer {border-top: 1px solid #e6e6e6; padding-top: 15px; color: #777;}

a.blob.lin {
background-color: #e9a00e;
display: inline-block;
text-align: center;
max-width: -webkit-fill-available;
width: 100%;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
transform: scale(1);
animation: pulse 2s infinite;
font-weight: 700;
line-height: 24px;
padding: 12px;
margin: 37px 0 37px 0;
color: #111;
border-radius: 8px;
}

/*
baners start*/

.block_90 {
padding: 0 16px;
display: block;
max-width: 100%;
margin-bottom: 20px;
}
@media (min-width: 991px) {
.block_90 {
display: none;
max-width: 100%;
}
}
@media (max-width: 991px) {
.block-main-image {
display: none;
}
}
@media (max-width: 991px) {
.block-main {
min-height: inherit;
padding: 20px 0;
}
}
@media (max-width: 991px) {
.hero-block {
margin-bottom: 12px;
}
}

.block_100 {
max-width: 100%;
margin: 0 auto;
display: block;
}

@media (max-width: 991px) {
.block_100 {
display: none;
}
}
.hero-block {
margin-bottom: 20px;
}

.link-head-a {
display: block !important;
margin: 12px auto;
text-align: center;
}

.wrapper_link-head {
max-width: 300px;
width: 100%;
margin: 0 auto;
}

.link-head-a {
display: block !important;
margin: 0 auto;
text-align: center;
}

/*
baners end*/

/* --------------------------- блоки, которых у донора не было:
   навигация, переключатель языка, подвал, карточки шагов.
   Оформление то же: белая карточка #fdfdfd, золото #e9a00e. */

/* У донора это h1 с position:absolute и без top — он вставал на своё
   обычное место, то есть на 15px ниже верха шапки (собственный margin
   заголовка). Мой span такого отступа не имеет, и с top:0 надпись
   прилипала к самому верху. */
header .brand {position: absolute; right: 15px; top: 15px; font-size: 16px; font-weight: bold; color: #333; z-index: 2;}

.topline {display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 12px 0;}
.topline:empty {display: none;}
.topcta {display: flex; gap: 8px; flex: 1 1 auto; justify-content: flex-end;}
.btn-line, .btn-gold {display: inline-block; padding: 9px 16px; border-radius: 8px; font-weight: 700; font-size: 15px; line-height: 20px;}
.btn-line {background: #fdfdfd; border: 1px solid #e0e0dc; color: #245483;}
.btn-gold {background: #e9a00e; color: #111;}
.btn-line:hover, .btn-gold:hover {text-decoration: none;}
.btn-gold:hover {background: #ffb400;}

.pills {display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0;}
.pills a {background: #fdfdfd; border: 1px solid #e6e6e2; border-radius: 20px; padding: 7px 14px; font-size: 15px;}
.pills a:hover {text-decoration: none; background: #fff;}
.pills a[aria-current="page"] {background: #e9a00e; border-color: #e9a00e; color: #111;}

.crumbs {font-size: 14px; color: #777; margin: 12px 0;}
.crumbs ol {list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0;}
.crumbs li + li::before {content: '/'; color: #bbb; margin-right: 6px;}
.crumbs li {display: flex; align-items: center;}
.crumbs a {display: inline-flex; align-items: center; gap: .4em;}
.crumb-home {display: inline-block; width: 1em; height: 1em; fill: currentColor; flex: none;}
.lang-switch {position: relative;}
.lang-btn {display: flex; align-items: center; gap: 7px; background: #fdfdfd; border: 1px solid #e6e6e2; border-radius: 8px; padding: 8px 12px; font-size: 15px; margin: 0;}
.lang-btn:hover {background: #fff;}
.flag {width: 18px; height: 12px; border-radius: 2px; display: inline-block;}
.chev {width: 10px; height: 6px; fill: #999;}
.lang-menu {display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; background: #fdfdfd; border: 1px solid #e6e6e2; border-radius: 8px; padding: 6px; min-width: 170px; box-shadow: 0 8px 24px rgba(0,0,0,.12);}
.lang-switch.is-open .lang-menu {display: block;}
.lang-menu a {display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 6px; font-size: 15px;}
.lang-menu a:hover {text-decoration: none; background: #f2f2f0;}
.lang-menu a[aria-current="true"] {font-weight: 700;}
.foot-lang .lang-menu {left: auto; right: 0;}

.hero .eyebrow {display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a5a00; margin-bottom: 6px;}
.hero h1 {margin: 0 0 8px; font-size: 22px;}
.alt-line {text-align: center; margin: -22px 0 0; font-size: 15px;}

.stats {display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0;}
.stats > div {flex: 1 1 120px; text-align: center;}
.stats b {display: block; font-size: 20px; color: #111;}
.stats span {font-size: 14px; color: #777;}

.cat h2 {margin: 0 0 6px;}
.cat .cnt {font-size: 14px; color: #777; margin: 0 0 8px;}
.cat ul {margin: 0; padding-left: 20px;}
.cat li {margin: 4px 0;}
.cat li i {color: #999; font-style: normal; font-size: 14px;}
.promo .more {font-weight: 700;}

.steps {display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0;}
.sr {flex: 1 1 180px; background: #fdfdfd; border-radius: 5px; padding: 13px 18px;}
.sr span {display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #e9a00e; color: #111; font-weight: 700; font-size: 15px; margin-bottom: 6px;}
.sr b {display: block; margin-bottom: 4px; color: #333;}
.sr p {margin: 0; font-size: 15px; color: #555;}

.band {margin: 20px 0; text-align: center;}
.band h2 {margin: 0 0 6px;}
.band p {margin: 0 0 6px;}

.tw table {margin: 20px 0;}

.seo-inner {margin: 20px 0;}
.seo-inner h2, .seo-inner h3 {margin: 20px 0 10px;}
.seo-inner p, .seo-inner li {font-size: 16px;}
.seo-inner ul, .seo-inner ol {padding-left: 22px;}
.age-note {display: flex; gap: 10px; align-items: flex-start; background: #fdfdfd; border-left: 4px solid #e9a00e; border-radius: 5px; padding: 13px 18px; margin: 20px 0;}
.age-note p {margin: 0; font-size: 15px; color: #555;}
.age-note-badge {flex: none; background: #e9a00e; color: #111; font-weight: 700; font-size: 13px; border-radius: 20px; padding: 3px 9px;}

footer img {margin-bottom: 15px;}
.foot-brand {margin: 10px 0; color: #555;}
.foot-brand i {font-style: normal; color: #999;}
.foot-pills, .foot-links {display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 10px 0; font-size: 15px;}
.foot-links {font-size: 14px;}
.foot-about {font-size: 14px; margin: 10px 0;}
.foot-legal {font-size: 13px; margin: 12px 0;}
.foot-legal .age {display: inline-block; background: #e9a00e; color: #111; font-weight: 700; border-radius: 20px; padding: 2px 8px; margin-right: 6px;}
.foot-cp {font-size: 13px; margin: 8px 0 0; color: #999;}

@media (max-width: 640px) {
  header .brand {position: static; display: block; text-align: center; margin: 8px 0;}
  .topline {justify-content: center;}
  .topcta {justify-content: center; width: 100%;}
  .btn-line, .btn-gold {flex: 1 1 45%; text-align: center;}
  .stats > div {flex: 1 1 45%;}
  .sr {flex: 1 1 100%;}
  a.blob.lin {margin: 20px 0;}
  .alt-line {margin: -12px 0 0;}
}

/* Навигация по вопросам — донорский блок «Ключевые особенности»:
   список ссылок на якоря аккордеонов ниже по странице. */
.keys ul.faq-nav {margin: 10px 0 0; padding-left: 22px;}
.keys ul.faq-nav li {margin: 4px 0;}
.faq-lead {margin: 0 0 6px;}
.faq h2 {margin-bottom: 6px;}
/* Якорь стоит на самом summary, поэтому запас сверху нужен ему. */
.faq summary {scroll-margin-top: 12px;}

/* Донор ставил перед вопросом смайлик прямо в тексте, чередуя два.
   Держим это оформлением, чтобы разметка оставалась чистой. */
.faq details summary::before {content: "\2753\A0";}
.faq details:nth-of-type(even) summary::before {content: "\1F525\A0";}
.faq details {margin: 6px 0;}
.faq details summary {white-space: normal;}

/* широкие таблицы: прокрутка обёртки, таблица не сминается */
.tw {width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;}
.tw > table {display: table; width: auto; min-width: 100%; overflow: visible;}


/* ---- сетка превью в разделе блога ---- */
.pgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 26px 0 8px;
}
.pcard {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 20px 18px;
}
.pcard-date {
  margin: 0 0 10px;
  font-size: .82rem;
  color: var(--dim);
  letter-spacing: .01em;
}
.pcard-h {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 1.16rem;
  line-height: 1.28;
}
.pcard-h a { color: var(--ink); text-decoration: none; }
.pcard-h a:hover { color: var(--gold-2); }
.pcard-t {
  margin: 0 0 16px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--dim);
}
.pcard-more { margin: auto 0 0; }
.pcard-more a {
  font-size: .9rem;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.pcard-more a:hover { color: var(--gold-2); }
@media (max-width: 900px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 600px) {
  .pgrid { grid-template-columns: 1fr; }
  .pcard { padding: 16px 16px 15px; }
}