/* Страница «Типы СДВГ». Токены общие с лендингом, тестом и приложением (tokens.css). */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Цветная подложка под стеклом: без неё backdrop-filter размывает ровный крем. */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background: var(--mesh-bg);
}

h1, h2, h3 { margin: 0; font-family: var(--font-head); line-height: 1.15; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--lime-ink); }

/* Реквизиты владельца в подвале: 13px, не меньше 12px — требование к доступности. */
footer.legal {
  max-width: 780px;
  margin: 0 auto;
  padding: 28px 20px 44px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

footer.legal p { margin: 0 0 6px; }
footer.legal p:last-child { margin-bottom: 0; }
footer.legal a { color: var(--lime-ink); text-decoration: underline; text-underline-offset: 3px; }


.types { max-width: 840px; margin: 0 auto; padding: 24px 20px 72px; }

/* --- шапка --- */
.hero { padding: 8px 4px 18px; }

/* --- вкладки --- */
.tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 -4px 18px;
  padding: 6px;
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  background: var(--glass-face-strong);
  box-shadow: var(--glass-gloss), var(--shadow-sm);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  text-align: center;
  transition: background .12s ease, border-color .12s ease;
}
.tab:hover { background: var(--glass-bg-soft); }
.tab.on {
  border-color: var(--lime);
  background: var(--lime-soft);
}
.tab__label { font-family: var(--font-head); font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.tab__code { font-size: 11px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.tab.on .tab__code { color: var(--lime-ink); }

/* --- карточка документа --- */
.doc { display: flex; flex-direction: column; padding: 26px 28px; }


.badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--lime-cta);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.doc__title { font-size: 27px; margin-bottom: 4px; }
.doc__full { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.doc__tagline { font-size: 18px; color: var(--ink-soft); }

/* --- разделы --- */
/* Разделы внутри карточки типа больше не отдельные плашки: карточка одна (.doc),
   а раздел отделяется линией сверху. */
.part {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.part--intro {
  margin-top: 20px;
  padding: 20px 0 0;
  border-top: 1px solid rgba(30, 30, 30, .1);
}

/* --- блоки --- */
/* Подзаголовок внутри описания типа: «что может происходить без лечения». */
.sub {
  margin: 20px 0 10px;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.text { margin-bottom: 12px; color: var(--ink-soft); }
.text:last-child { margin-bottom: 0; }

.list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.list:last-child { margin-bottom: 0; }
.list li { position: relative; padding-left: 22px; color: var(--ink-soft); }
.list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--lime);
}
.list--num { counter-reset: n; }
.list--num li { padding-left: 30px; }
.list--num li::before {
  counter-increment: n;
  content: counter(n);
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lime-soft);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 22px;
}

.rule {
  margin: 4px 0 12px;
  padding: 12px 16px;
  border-left: 4px solid var(--lime-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--lime-soft);
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
}
.rule:last-child { margin-bottom: 0; }

.cmp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.cmp:last-child { margin-bottom: 0; }
.cmp__col {
  padding: 14px 16px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  background: var(--glass-face-soft);
}
.cmp__col--bad { border-top: 3px solid var(--red); }
.cmp__col--good { border-top: 3px solid var(--green); }
.cmp__label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cmp__col--bad .cmp__label { color: var(--red); }
.cmp__col--good .cmp__label { color: var(--green); }
.cmp__col .list { margin-bottom: 0; }
.cmp__col .list li { padding-left: 16px; font-size: 15px; }
.cmp__col .list li::before {
  width: 6px;
  height: 6px;
  top: .68em;
  left: 0;
  background: currentColor;
  opacity: .5;
}

/* --- «что с этим делать»: короткий рассказ о гайдах и планере перед предложениями --- */
.help {
  margin-top: 22px;
  padding: 22px 24px;
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  background: var(--glass-face);
  box-shadow: var(--glass-shadow), var(--glass-gloss);
}
.help__title { font-size: 24px; margin-bottom: 8px; }
.help__text { color: var(--ink-soft); margin-bottom: 14px; }
.help__list { display: grid; gap: 8px; }
.help__list li {
  position: relative;
  padding-left: 20px;
  font-size: 15.5px;
  color: var(--ink-soft);
}
.help__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--lime);
}

/* --- предложения под карточкой типа: гайды и планер --- */
.promo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.promo__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  background: var(--glass-face);
  box-shadow: var(--glass-shadow), var(--glass-gloss);
  color: var(--ink);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.promo__card:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow-lg, var(--glass-shadow)); }
.promo__title { font-family: var(--font-head); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.promo__text { font-size: 15px; color: var(--muted); }
.promo__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.promo__price { font-family: var(--font-head); font-size: 20px; font-weight: 700; }
.promo__cta {
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.promo__card--dark { background: var(--ink); border-color: var(--glass-dark-brd); color: var(--cream); }
.promo__card--dark .promo__text { color: rgba(246, 245, 244, .72); }
.promo__more {
  align-self: flex-start;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lime);
  text-decoration: none;
}
.promo__more:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .promo { grid-template-columns: 1fr; }
}

.foot {
  margin-top: 22px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 560px) {
  .tab__label { font-size: 13px; }
  .tab__code { display: none; }
  .doc { padding: 20px 18px; }
  .cmp { grid-template-columns: 1fr; }
}

/* Стиль Phoenix (Дина, 2026-10-22): заголовки средней толщины, как на лендинге. */
h1, h2 { font-weight: 500; letter-spacing: -.03em; }

/* ══ Новая композиция страницы типов (Дина, 2026-10-23) — общий стиль сайта (phoenix). ══
   Шапка — карточка с размытыми пятнами, как первый экран лендинга; вкладки — три
   карточки «01/02/03» с кружком-стрелкой, выбранная залита лаймом со срезанным углом;
   описание типа — две колонки: слева липкая карточка с названием, справа текст;
   блок про гайды и планер — чёрная секция, пункты планера плитками. */
.types { max-width: 1120px; padding-top: 28px; }

.hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  /* Заголовок и лид из шапки убраны — карточка стала ниже, отступы тоже. */
  padding: clamp(20px, 3vw, 34px) clamp(22px, 5vw, 56px);
  border-radius: 28px;
  background:
    radial-gradient(40% 60% at 80% 30%, rgba(20, 20, 20, .12), transparent 70%),
    radial-gradient(50% 80% at 18% 100%, #c7fa0b, rgba(199, 250, 11, 0) 72%),
    radial-gradient(40% 70% at 96% 96%, #c7fa0b, rgba(199, 250, 11, 0) 70%),
    radial-gradient(60% 60% at 30% 0%, #f4f4f1, rgba(244, 244, 241, 0) 70%),
    #d4d4cf;
}
.hero__title { margin: 0 0 4px; font-size: clamp(40px, 7vw, 78px); line-height: .95; letter-spacing: -.045em; }
.hero__btn {
  display: inline-block;
  margin-top: 22px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}

/* Вкладки — карточки, не сегментный переключатель. */
.tabs {
  position: static;
  gap: 14px;
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.tab {
  position: relative;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  min-height: 150px;
  padding: 18px 20px;
  border: 1.5px solid var(--glass-brd);
  border-radius: 18px;
  background: var(--glass-bg);
  text-align: left;
  transition: background .15s ease, transform .15s ease;
}
.tab:hover { background: #fff; transform: translateY(-2px); }
.tab__num { position: absolute; top: 16px; left: 20px; font-size: 14px; color: var(--muted); }
.tab__arrow {
  position: absolute;
  top: 10px; right: 10px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1.5px solid var(--glass-brd);
  border-radius: 50%;
  font-size: 17px;
}
.tab__label { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.tab__code { font-size: 12px; }
.tab.on {
  border-color: var(--lime);
  background: var(--lime);
  clip-path: polygon(0 0, calc(100% - 58px) 0, 100% 58px, 100% 100%, 0 100%);
}
.tab.on .tab__arrow { border-color: var(--ink); }
.tab.on .tab__num, .tab.on .tab__code { color: var(--ink); }

/* Описание типа: две колонки. */
.doc {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: 20px;
  align-items: start;
}
.doc__hero {
  position: sticky;
  top: 20px;
  padding: 28px 26px;
  border: 0;
  border-radius: 22px;
  background: var(--ink);
  color: #fff;
}
.doc__hero .badge { background: var(--lime); color: var(--ink); }
.doc__title { font-size: clamp(28px, 3vw, 38px); line-height: 1.05; margin: 6px 0 10px; color: #fff; }
.doc__full { color: rgba(255, 255, 255, .6); }
.doc__tagline { color: rgba(255, 255, 255, .88); font-size: 17px; }
.part {
  padding: 30px 32px;
  border: 1.5px solid var(--glass-brd);
  border-radius: 22px;
  background: var(--glass-bg);
}
.part .text { font-size: 17px; }
.rule { border-left: 0; border-radius: 14px; background: var(--lime); }
.list--num li::before { background: var(--ink); color: var(--lime); }

/* Гайды и планер — чёрная секция; пункты планера плитками, видны сразу. */
.help {
  margin-top: 36px;
  padding: clamp(28px, 5vw, 56px);
  border: 0;
  border-radius: 28px;
  background:
    radial-gradient(40% 60% at 96% 0%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 70%),
    var(--ink);
  color: #fff;
  box-shadow: none;
}
.help__eyebrow { margin-bottom: 12px; color: var(--lime); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.help__title { font-size: clamp(30px, 4vw, 48px); color: #fff; }
.help__text { max-width: 720px; color: rgba(255, 255, 255, .8); font-size: 17px; margin-bottom: 24px; }
.help__list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.help__list li {
  padding: 18px 18px 18px 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .9);
}
.help__list li::before { position: static; display: block; margin-bottom: 12px; width: 10px; height: 10px; border-radius: 50%; }

.promo { margin-top: 14px; }
.promo__card { border: 1.5px solid var(--glass-brd); border-radius: 22px; padding: 24px 26px; }
.promo__card--dark { border-color: var(--ink); }

@media (max-width: 820px) {
  .doc { grid-template-columns: 1fr; }
  .doc__hero { position: static; }
  .tabs { grid-template-columns: 1fr; gap: 10px; }
  .tab { min-height: 96px; }
}

.tab.on .tab__arrow { top: auto; bottom: 14px; }

/* Карточка гайда — лаймовая, как на результатах теста; список раскрывается по клику. */
.promo { align-items: start; }
.promo__card--guide { background: var(--lime); border-color: var(--lime); }
.promo__eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.promo__card--guide .promo__text { color: var(--ink); }
.promo__details { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--ink); font-size: 15px; }
.promo__details summary { cursor: pointer; list-style: none; font-weight: 600; }
.promo__details summary::-webkit-details-marker { display: none; }
.promo__details summary::after { content: ' ↓'; }
.promo__details[open] summary::after { content: ' ↑'; }
.promo__details p { margin-top: 8px; }
.promo__list { display: grid; gap: 6px; margin-top: 10px; }
.promo__list li { position: relative; padding-left: 16px; }
.promo__list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.promo__joke { color: var(--ink); font-style: italic; }
.promo__card--guide .promo__cta { background: var(--ink); color: #fff; }
.promo__card--guide, .promo__card--guide .promo__details, .promo__card--guide summary, .promo__card--guide .promo__title { color: var(--ink); }