/* landing.css — дополнения к style.css для лендинга.
   Подключается после style.css. Цвета построены на currentColor,
   чтобы не конфликтовать с палитрой основного файла. */

/* ---------- Плейсхолдеры ---------- */
.ph {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 1rem;
  text-align: center;
  border: 2px dashed color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 1.25rem;
  background: color-mix(in srgb, currentColor 5%, transparent);
}
.ph__num  { font-weight: 800; font-size: .85rem; opacity: .7; }
.ph__desc { font-size: .9rem; opacity: .65; max-width: 30ch; }

.ph--hero   { aspect-ratio: 4 / 3; width: 100%; }
.ph--card   { aspect-ratio: 16 / 10; width: 100%; margin-bottom: 1rem; }
.ph--cover  { aspect-ratio: 3 / 4; width: 100%; margin-bottom: .6rem; border-radius: 1rem; }
.ph--report { aspect-ratio: 4 / 3; width: 100%; }

/* Картинка поверх рамки; после загрузки подписи и рамка скрываются */
.ph > img,
.card-icon > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.ph > img { object-fit: cover; }
.card-icon { position: relative; }
.card-icon > img { object-fit: contain; background: inherit; }
.ph.is-filled { border: 0; background: none; padding: 0; }
.ph.is-filled > :not(img) { display: none !important; }
.card-icon.is-filled { color: transparent; }

/* ---------- Общее ---------- */
.section-lead { max-width: 60ch; margin: -.25rem 0 2rem; opacity: .8; }
.lp-grid { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.lp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lp-grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.lp-grid .card h3 { margin: .75rem 0 .35rem; }
.lp-grid .card p  { margin: 0; }

/* ---------- Чипы (фильтры, варианты ответа, тест) ---------- */
.lp-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: .4rem 1rem;
  border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.chip:hover { border-color: color-mix(in srgb, currentColor 55%, transparent); }
.chip:focus-visible,
.chip:has(input:focus-visible) { outline: 3px solid currentColor; outline-offset: 2px; }
.chip[aria-pressed="true"],
.chip:has(input:checked) {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.chip { position: relative; }
.chip input { position: absolute; left: 0; top: 0; opacity: 0; width: 1px; height: 1px; }
.chip:disabled { cursor: default; }
.chip.is-wrong { opacity: .45; text-decoration: line-through; }
.chip.is-correct { border-color: #2f9e6b; background: color-mix(in srgb, #2f9e6b 18%, transparent); }

/* ---------- Блок 2: полка обложек (масштаб библиотеки) ---------- */
#library { padding-bottom: 0; }
#library > .button { margin-top: .5rem; }
.lp-shelf {
  --book-w: clamp(118px, 13vw, 210px);
  --gap: clamp(12px, 1.3vw, 22px);
  display: grid;
  gap: var(--gap);
  padding: 2.5rem 0 3rem;
  overflow: hidden;
}
.lp-shelf__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--gap);
  width: max-content;
  will-change: transform;
  touch-action: pan-y;          /* вертикальная прокрутка страницы не ломается */
  cursor: grab;
  user-select: none;
}
.lp-slider.is-dragging .lp-shelf__track { cursor: grabbing; }
.lp-book img { -webkit-user-drag: none; pointer-events: none; }

.lp-slider__controls {
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin-top: -1.5rem;
  padding-bottom: 2rem;
}
.lp-slider__btn {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.lp-slider__btn:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 8%, transparent); }
.lp-slider__btn:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.lp-slider__btn .i-play { display: none; }
.lp-slider.is-paused .lp-slider__btn .i-play { display: inline; }
.lp-slider.is-paused .lp-slider__btn .i-pause { display: none; }

.lp-book {
  position: relative;
  flex: none;
  width: var(--book-w);
  aspect-ratio: 2 / 3;
  border-radius: 6px 14px 14px 6px;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 8%, transparent);
  box-shadow: 0 10px 24px rgba(40, 30, 20, .18), 0 2px 4px rgba(40, 30, 20, .12);
}
.lp-book img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Корешок и блик, чтобы карточка выглядела как книга */
.lp-book::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0,0,0,.28) 0, rgba(255,255,255,.22) 3%, rgba(0,0,0,.08) 5.5%,
    rgba(255,255,255,0) 9%, rgba(255,255,255,0) 92%, rgba(0,0,0,.12) 100%);
}
.lp-book.is-empty { border: 2px dashed color-mix(in srgb, currentColor 25%, transparent); }



/* ---------- Блок 3: шаги и пример ---------- */
.lp-steps {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: step;
}
.lp-step { counter-increment: step; }
.lp-step h3 { margin: 0 0 .35rem; }
.lp-step h3::before { content: counter(step) ". "; opacity: .5; }
.lp-step p { margin: 0; }

.lp-say {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .75rem; padding: .4rem .9rem;
  border: 2px solid currentColor; border-radius: 999px;
  background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer;
}
.lp-say[hidden] { display: none; }

/* ---------- Блок 5: родительский кабинет ---------- */
.lp-parents {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
  margin-top: 1.5rem;
}
.lp-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.lp-features li {
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
.lp-features h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.lp-features p { margin: 0; opacity: .75; }

/* ---------- Блок 6: пример AI ---------- */
.lp-ai-example { margin: 0; }
.lp-ai-example figcaption { font-size: .85rem; font-weight: 800; opacity: .6; margin-bottom: .5rem; }
.lp-ai-example p { margin: .35rem 0 0; }

/* ---------- Блок 7: цифры и отзывы ---------- */
.lp-facts {
  list-style: none; padding: 0; margin: 1.5rem 0 0;
  display: flex; flex-wrap: wrap; gap: .75rem 2.5rem;
}
.lp-facts strong { display: block; font-size: 1.35rem; font-weight: 900; }
.lp-review { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.lp-review blockquote { margin: 0; }
.lp-review blockquote p { margin: 0; font-weight: 600; }


/* ---------- Блок 9: цена ---------- */
.lp-price { position: relative; max-width: 32rem; margin-top: 1.5rem; }
.lp-price__badge {
  display: inline-block;
  margin: 0 0 .75rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  background: var(--lp-marker, #ffd666);
  color: #2b2116;
  font-size: .85rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.lp-price__amount { font-size: clamp(2.6rem, 7vw, 3.6rem); font-weight: 900; line-height: 1; margin: 0 0 .5rem; }
.lp-price__amount span { font-size: 1.1rem; font-weight: 700; opacity: .7; }
.lp-price__per { margin: 0 0 1.25rem; font-weight: 600; opacity: .8; }
.lp-price__list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; }
.lp-price__list li { position: relative; padding-left: 1.5rem; }
.lp-price__list li::before { content: "✓"; position: absolute; left: 0; font-weight: 900; }

/* ---------- Блок 10: FAQ ---------- */
.lp-faq { max-width: 46rem; margin-top: 1.5rem; }
.lp-faq details { border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.lp-faq summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 1rem 2rem 1rem 0; font-weight: 700;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%;
  transform: translateY(-50%); font-size: 1.4rem; font-weight: 600;
}
.lp-faq details[open] summary::after { content: "−"; }
.lp-faq summary:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; border-radius: .25rem; }
.lp-faq details p { margin: 0 0 1rem; opacity: .85; }

/* ---------- Блок 11: финальный CTA ---------- */
.lp-final { text-align: center; }
.lp-final h2 { margin-top: 0; }
.lp-final p { margin: 0 auto 1.5rem; max-width: 46ch; }

/* ---------- Утилита ---------- */
.visually-hidden:not(:focus):not(:active) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .chip { transition: none; }
}

/* ---------- Hero: две кнопки ---------- */
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ---------- Отзывы: аватары ---------- */
.lp-person { display: flex; align-items: center; gap: .75rem; opacity: .85; font-size: .95rem; }
.ph--avatar { flex: none; width: 3rem; height: 3rem; padding: 0; border-radius: 50%; }

/* ---------- Модалка ---------- */
html.lp-modal-open { overflow: hidden; }
.lp-modal {
  box-sizing: border-box;
  width: min(44rem, calc(100% - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  margin: auto;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 0;
  border-radius: 1.5rem;
  background: var(--lp-modal-bg, #fffdf8);
  color: inherit;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .25);
  overflow-y: auto;
}
.lp-modal::backdrop { background: rgba(20, 24, 30, .55); }
.lp-modal h2 { margin: 0 2.5rem .5rem 0; font-size: clamp(1.4rem, 3.5vw, 1.9rem); line-height: 1.2; }
.lp-modal h2:focus { outline: none; }
.lp-modal__lead { margin: 0 0 1.5rem; opacity: .75; }
.lp-modal__close {
  position: sticky; top: 0; float: right;
  width: 2.5rem; height: 2.5rem; margin: -.5rem -.5rem 0 0;
  border: 0; border-radius: 50%;
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 2;
}
.lp-modal__close:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.lp-modal__step[hidden] { display: none; }

.lp-quiz { display: grid; gap: 1.5rem; }
.lp-quiz fieldset { border: 0; margin: 0; padding: 0; }
.lp-quiz legend { font-weight: 800; margin-bottom: .6rem; padding: 0; }
.lp-quiz .chip { min-height: 2.25rem; padding: .3rem .85rem; font-size: .95rem; }
.lp-quiz > .button { justify-self: start; }
.lp-hint { font-weight: 600; font-size: .85rem; opacity: .6; margin-left: .25rem; }
.lp-other { display: block; margin: .9rem 0 .35rem; font-size: .9rem; font-weight: 700; opacity: .75; }

.lp-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: .65rem .9rem;
  border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: .9rem;
  background: var(--lp-input-bg, #fff);
  color: inherit;
  font: inherit;
}
.lp-input:focus-visible { outline: 3px solid currentColor; outline-offset: 1px; border-color: currentColor; }
.lp-input[aria-invalid="true"] { border-color: #c0392b; }

.lp-error, .lp-field__err { margin: 0; min-height: 1.2em; font-weight: 700; font-size: .9rem; color: #c0392b; }
.lp-error:empty, .lp-field__err:empty { min-height: 0; }

.lp-result {
  display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.25rem;
  margin: 1rem 0 1.5rem; padding: 1.25rem;
  border-radius: 1rem; background: color-mix(in srgb, currentColor 5%, transparent);
}
.lp-result dt { font-weight: 800; }
.lp-result dd { margin: 0; }
@media (max-width: 30rem) {
  .lp-result { grid-template-columns: 1fr; }
  .lp-result dd { margin-bottom: .5rem; }
}
.lp-link {
  display: block; margin-top: 1rem; padding: .25rem 0;
  border: 0; background: none; color: inherit; font: inherit; font-weight: 700;
  text-decoration: underline; cursor: pointer; opacity: .75;
}

.lp-why {
  margin: 1rem 0 1.5rem; padding: 1.1rem 1.25rem;
  border-radius: 1rem; background: color-mix(in srgb, currentColor 5%, transparent);
}
.lp-why__title { margin: 0 0 .5rem; font-weight: 800; }
.lp-why ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
.lp-why__note { margin: .75rem 0 0; font-size: .9rem; opacity: .7; }

.lp-signup { display: grid; gap: 1rem; }
.lp-field { display: grid; gap: .35rem; }
.lp-field label { font-weight: 800; }
.lp-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; cursor: pointer; }
.lp-consent input { width: 1.2rem; height: 1.2rem; margin-top: .1rem; flex: none; }
.lp-consent a { color: inherit; }
.lp-signup > .button { justify-self: start; }
.lp-signup .button:disabled { opacity: .6; cursor: progress; }

/* ---------- Hero: порядок блоков ----------
   Мобилка: заголовок → картинка → текст и кнопки.
   Десктоп: слева заголовок и текст, справа картинка. */
.hero.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "visual" "body";
  gap: 1.5rem;
  align-items: start;
}
.lp-hero__title  { grid-area: title; margin: 0; }
.lp-hero__visual { grid-area: visual; }
.lp-hero__body   { grid-area: body; }
.lp-hero__body .intro { margin-top: 0; }
@media (min-width: 900px) {
  .hero.lp-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". visual" "title visual" "body visual" ". visual";
    column-gap: clamp(2rem, 5vw, 4.5rem);
    row-gap: 1.25rem;
    align-items: center;
  }
}

/* Акцент в заголовке и маркер в тексте */
.lp-accent {
  background: linear-gradient(transparent 58%, var(--lp-marker, #ffd666) 58%, var(--lp-marker, #ffd666) 92%, transparent 92%);
  padding: 0 .08em;
}
.lp-hl {
  background: linear-gradient(transparent 55%, var(--lp-marker, #ffd666) 55%);
  color: inherit;
  font-weight: 800;
  padding: 0 .1em;
  border-radius: .15em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.intro strong { font-weight: 800; }

/* Триггеры под кнопками */
.lp-perks {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.lp-perks li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 6%, transparent);
  font-size: .92rem;
  font-weight: 600;
}
.lp-perks li::before { content: "✓"; font-weight: 900; }
.lp-perks li:first-child { background: var(--lp-marker, #ffd666); color: #2b2116; }
.lp-perks strong { font-weight: 900; }

/* ---------- Бесплатная сказка ---------- */
.lp-gift {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 760px) {
  .lp-gift { grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); }
}
.lp-gift__cover { display: flex; justify-content: center; }
.lp-book--big { width: min(100%, 260px); transform: rotate(-3deg); }
.lp-gift__body h2 { margin: 0 0 .6rem; }
.lp-gift__body > p { margin: 0 0 1rem; }
.lp-gift__facts { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .4rem; }
.lp-gift__facts li { position: relative; padding-left: 1.5rem; }
.lp-gift__facts li::before { content: "✓"; position: absolute; left: 0; font-weight: 900; }
.lp-final__actions { justify-content: center; }

/* ---------- Hero: вопрос над заголовком ---------- */
.lp-hero__kicker {
  display: block;
  margin-bottom: .35em;
  font-size: .55em;
  font-weight: 800;
  opacity: .65;
}

/* ---------- 3 бесплатные истории ---------- */
#free-books .lp-price__badge { margin-bottom: .5rem; }
#free-books h2 { margin-top: 0; }
.lp-free { display: flex; flex-direction: column; align-items: flex-start; }
.lp-free__cover { width: min(100%, 180px); margin: 0 auto 1.25rem; transform: rotate(-2deg); }
.lp-free:nth-child(2) .lp-free__cover { transform: rotate(2deg); }
.lp-free__tag { margin: 0; font-size: .85rem; font-weight: 800; opacity: .6; }
.lp-free h3 { margin: .2rem 0 .35rem; }
.lp-free > p:not(.lp-free__tag) { margin: 0 0 1.25rem; flex: 1; }

/* ---------- Попробуйте сами ---------- */
.lp-try {
  position: relative;
  padding: clamp(1.75rem, 5vw, 3.5rem);
  border-radius: 2rem;
  background: color-mix(in srgb, var(--lp-marker, #ffd666) 30%, transparent);
  text-align: center;
}
.lp-try h2 { margin-top: 0; }
.lp-try__text {
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.7;
  max-width: 30ch;
  margin: 1.5rem auto;
}
.lp-try__hint { margin: 0 auto 1.5rem; max-width: 46ch; opacity: .75; }
.lp-word {
  font: inherit;
  color: inherit;
  padding: 0 .25em;
  border: 0;
  border-bottom: 4px solid var(--lp-marker, #ffd666);
  border-radius: .3em;
  background: color-mix(in srgb, var(--lp-marker, #ffd666) 55%, transparent);
  cursor: pointer;
  animation: lp-nudge 2.4s ease-in-out infinite;
}
.lp-word:nth-of-type(2) { animation-delay: .3s; }
.lp-word:nth-of-type(3) { animation-delay: .6s; }
.lp-word.is-seen, .lp-word:hover { animation: none; }
.lp-word.is-active { background: var(--lp-marker, #ffd666); }
.lp-word:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@keyframes lp-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-3px); } 90% { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) { .lp-word { animation: none; } }

/* ---------- Кнопка под блоком ---------- */
.lp-section-cta { margin: 2rem 0 0; }

/* ---------- Отзывы: 5 карточек ---------- */
.lp-grid--reviews { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lp-person__name { display: block; font-weight: 800; }
.lp-person__role { display: block; opacity: .7; font-size: .9rem; }
.ph--avatar-lg { width: 3.5rem; height: 3.5rem; }

/* ---------- Сравнение ---------- */
.lp-table-wrap { overflow-x: auto; margin-top: 1.5rem; border-radius: 1.25rem; }
.lp-table-wrap:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.lp-table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; text-align: center; }
.lp-table th, .lp-table td { padding: .9rem 1rem; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.lp-table thead th { font-weight: 800; }
.lp-table tbody th { text-align: left; font-weight: 700; }
.lp-table .is-us,
.lp-table td:nth-child(2) { background: color-mix(in srgb, var(--lp-marker, #ffd666) 35%, transparent); }
.lp-table thead .is-us { border-radius: 1rem 1rem 0 0; }
.lp-table tbody tr:last-child td:nth-child(2) { border-radius: 0 0 1rem 1rem; }
.lp-yes, .lp-no, .lp-part {
  display: inline-grid; place-items: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  font-weight: 900; font-size: .95rem;
}
.lp-yes  { background: #2f9e6b; color: #fff; }
.lp-no   { background: color-mix(in srgb, #c0392b 15%, transparent); color: #c0392b; }
.lp-part { background: color-mix(in srgb, #d4a017 22%, transparent); color: #8a6a00; }
.lp-table-legend { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: 1rem 0 0; font-size: .9rem; opacity: .8; }
.lp-table-legend .lp-yes, .lp-table-legend .lp-no, .lp-table-legend .lp-part { width: 1.3rem; height: 1.3rem; font-size: .75rem; margin-left: .5rem; }

/* ---------- Защита от горизонтальной прокрутки на мобильном ---------- */
html, body { overflow-x: clip; }
.lp-table-wrap, .lp-table td, .lp-table th { position: relative; }

/* ---------- FOMO-строка ---------- */
.lp-fomo {
  background: #2b3a35;
  color: #fff;
  font-size: .92rem;
}
.lp-fomo p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .3rem .75rem;
  margin: 0 auto;
  padding-top: .6rem;
  padding-bottom: .6rem;
  text-align: center;
}
.lp-fomo__left { color: var(--lp-marker, #ffd666); }
.lp-fomo__link {
  padding: .2rem .8rem;
  border-radius: 999px;
  background: var(--lp-marker, #ffd666);
  color: #2b2116;
  font-weight: 800;
  text-decoration: none;
}
.lp-fomo__link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lp-fomo__dot {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: #ff6b5a;
  box-shadow: 0 0 0 0 rgba(255, 107, 90, .7);
  animation: lp-pulse 1.8s ease-out infinite;
}
@keyframes lp-pulse { to { box-shadow: 0 0 0 .6rem rgba(255, 107, 90, 0); } }
@media (max-width: 560px) {
  .lp-fomo { font-size: .85rem; }
  .lp-fomo__dot { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lp-fomo__dot { animation: none; } }

/* ---------- Места в блоке цены ---------- */
.lp-seats {
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  border-radius: .9rem;
  background: color-mix(in srgb, #c0392b 8%, transparent);
}
.lp-seats p { margin: 0; font-weight: 700; }
.lp-seats__bar {
  height: .6rem;
  margin: .7rem 0 .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  overflow: hidden;
}
.lp-seats__bar span { display: block; height: 100%; border-radius: inherit; background: #c0392b; }
.lp-seats__left { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.lp-seats__left strong { color: #b03a2e; font-size: 1.15rem; }
.lp-seats__left span { font-weight: 600; opacity: .7; font-size: .9rem; }

/* ---------- Отзывы детей: фото внутри карточки ---------- */
.lp-review--kid { justify-content: flex-start; gap: 1rem; }
.ph--kid {
  aspect-ratio: 4 / 3;
  width: 100%;
  padding: 0;
  border-radius: 1rem;
}
.ph--kid > img { object-position: center 40%; }
.lp-review--kid blockquote { flex: 1; }

@media (max-width: 640px) {
  /* Отзывы листаются вбок, а не идут длинной лентой */
  .lp-grid--reviews {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem;
  }
  .lp-grid--reviews > * { flex: 0 0 80%; scroll-snap-align: start; }
}

/* ---------- Сравнение на мобильном: карточки вместо таблицы ---------- */
@media (max-width: 640px) {
  .lp-table-wrap { overflow: visible; }
  .lp-table { min-width: 0; }
  .lp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lp-table, .lp-table tbody, .lp-table tr, .lp-table th, .lp-table td { display: block; }
  .lp-table tbody { display: grid; gap: .9rem; }
  .lp-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding: 1rem;
    border-radius: 1.1rem;
    background: color-mix(in srgb, currentColor 4%, transparent);
  }
  .lp-table tbody th { grid-column: 1 / -1; padding: 0 0 .25rem; border: 0; font-size: 1.05rem; }
  .lp-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .7rem;
    border: 0;
    border-radius: .7rem;
    background: var(--lp-modal-bg, #fff);
    text-align: left;
    font-size: .9rem;
  }
  .lp-table td::before { content: attr(data-label); font-weight: 700; opacity: .75; }
  .lp-table td:nth-child(2) { background: color-mix(in srgb, var(--lp-marker, #ffd666) 45%, #fff); }
  .lp-table tbody tr:last-child td:nth-child(2) { border-radius: .7rem; }
  .lp-table tr:first-child td { flex-direction: column; align-items: flex-start; }
  .lp-yes, .lp-no, .lp-part { flex: none; }
}

/* ---------- FOMO-строка прилипает к верху ---------- */
.lp-fomo { position: sticky; top: 0; z-index: 60; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
html { scroll-padding-top: 4rem; }
@media (max-width: 560px) {
  .lp-fomo p { flex-wrap: nowrap; justify-content: space-between; text-align: left; gap: .5rem; padding-top: .5rem; padding-bottom: .5rem; }
  .lp-fomo__more { display: none; }
  .lp-fomo__link { flex: none; }
}

/* ---------- Hero ---------- */
.lp-hero__note { margin: .9rem 0 0; }

/* ---------- Каталог: плашка и кнопка после полки ---------- */
.lp-plate {
  display: inline-flex; flex-wrap: wrap; gap: .25rem .6rem;
  margin: 0; padding: .7rem 1.1rem;
  border-radius: 1rem;
  background: var(--lp-marker, #ffd666); color: #2b2116;
}
.lp-plate span { font-weight: 600; }
.lp-library-cta { display: flex; justify-content: center; margin: .25rem auto 3rem; }
.lp-slider__controls { margin-top: -1.5rem; padding-bottom: 1.5rem; }

/* ---------- Игра «Попробуйте сами» ---------- */
.lp-word--static { cursor: default; animation: none; }
.lp-game__dots { display: flex; justify-content: center; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.25rem; }
.lp-game__dots li { width: 2.25rem; height: .4rem; border-radius: 999px; background: color-mix(in srgb, currentColor 15%, transparent); transition: background-color .3s; }
.lp-game__dots li.is-on { background: currentColor; }
.lp-game__step[hidden] { display: none; }
.lp-game__q { font-size: clamp(1.1rem, 2.6vw, 1.35rem); font-weight: 800; margin: 0 0 1rem; }
.lp-game__opts { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.lp-game__opts .chip { min-height: 3rem; padding: .5rem 1.4rem; font-size: 1.05rem; background: var(--lp-modal-bg, #fff); }
.lp-game__msg { min-height: 1.5em; margin: 0 0 .75rem; font-weight: 800; color: #2f9e6b; }
.lp-say--inline { margin: 0 .15rem; padding: .15rem .7rem; vertical-align: baseline; font-size: inherit; }

/* ---------- Награды ---------- */
.lp-rewards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 1rem; }
.lp-rewards h3 { margin-top: 0; }
.lp-rewards .ph { margin-top: 1rem; }
.lp-steps-list { list-style: none; padding: 0; margin: 0 0 .75rem; display: grid; gap: .45rem; }
.lp-steps-list li { position: relative; padding-left: 1.5rem; }
.lp-steps-list li::before { content: "★"; position: absolute; left: 0; color: #d4a017; }

/* ---------- ИИ-блок с картинкой ---------- */
.lp-ai-example { margin-top: 1.25rem; }

/* ---------- Финальный CTA ---------- */
.lp-button-big { font-size: 1.15rem; padding-inline: 2.2rem; min-height: 3.5rem; }
.lp-modal__urgency { margin: 0; font-size: .9rem; color: #b03a2e; }

/* ---------- Жанры над каталогом (витрина, не кнопки) ---------- */
.lp-tags { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.lp-tags li {
  padding: .35rem .9rem;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, currentColor 15%, transparent);
  font-weight: 700;
  font-size: .92rem;
}
.lp-slider[hidden] { display: none; }

/* ---------- Обложка с подписью в полке ---------- */
.lp-shelf__item { flex: none; width: var(--book-w); }
.lp-shelf__item .lp-book { width: 100%; }
.lp-cap { margin: .55rem 0 0; display: grid; gap: .1rem; }
.lp-cap__title { font-weight: 800; font-size: .92rem; line-height: 1.25; }
.lp-cap__meta { font-size: .78rem; font-weight: 600; opacity: .6; }
.lp-shelf__track { align-items: flex-start; }

/* ---------- Жанры и возраст над каталогом ---------- */
.lp-tagrows { display: grid; gap: .6rem; margin-top: 1.25rem; }
.lp-tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.lp-tagrow__label { font-size: .85rem; font-weight: 800; opacity: .6; min-width: 4.5rem; }
.lp-tagrow .lp-tags { margin: 0; }
.lp-tags--age li { background: color-mix(in srgb, var(--lp-marker, #ffd666) 35%, transparent); border-color: transparent; }

/* ---------- Мокапы показываем целиком, без обрезки ----------
   Когда картинка загрузилась, рамка подстраивается под её пропорции. */
.ph--report.is-filled,
.ph--hero.is-filled {
  aspect-ratio: auto;
  overflow: visible;
}
.ph--report.is-filled > img,
.ph--hero.is-filled > img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 1.25rem;
}

/* Мокап рекомендации ИИ вертикальный (3:4): ограничиваем ширину,
   чтобы он не растягивался на пол-экрана в высоту */
.ph[data-placeholder="7"] {
  width: 100%;
  max-width: 440px;
  justify-self: center;
  margin-inline: auto;
}

/* Плашка каталога: на телефоне без перечня жанров (он дублирует теги ниже) */
.lp-plate__dot { display: none; }
@media (max-width: 640px) {
  .lp-plate__genres { display: none; }
  .lp-plate__dot { display: inline; }
}

/* ---------- Hero: боль, терракотовый вопрос, без подсветок ---------- */
.lp-pain {
  margin: 0 0 .75rem;
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  font-weight: 700;
  opacity: .7;
}
.lp-hero__title h1 { margin: 0; }
.lp-hero__kicker { color: #c4623f; opacity: 1; background: none; }
.lp-accent, .lp-hl { background: none; padding: 0; }

/* ---------- FOMO: длинный текст на компьютере, короткий на телефоне ---------- */
.lp-fomo__short { display: none; }
@media (max-width: 760px) {
  .lp-fomo__long { display: none; }
  .lp-fomo__short { display: inline; }
}

/* ---------- Каталог ---------- */
.lp-shelf-title { margin: 2rem auto 0; font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
.lp-free__note { margin: .6rem 0 0; }
.lp-cta-note { margin: .5rem 0 0; }

/* ---------- Отзывы: строка с результатом ---------- */
.lp-review__result {
  margin: 0;
  padding: .45rem .75rem;
  border-radius: .7rem;
  background: color-mix(in srgb, #2f9e6b 12%, transparent);
  font-size: .9rem;
}
.lp-review__result strong { color: #227a52; }

/* ---------- Награды: карточки одной высоты ---------- */
.lp-rewards { align-items: stretch; }
.lp-reward { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.lp-reward h3 { margin: 0 0 .5rem; }
.lp-reward__lead { margin: 0 0 1rem; opacity: .8; }
.lp-reward__list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.lp-reward__list li {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .8rem;
  border-radius: .9rem;
  background: color-mix(in srgb, currentColor 4%, transparent);
}
.lp-reward__list li > span:last-child { display: grid; font-size: .9rem; }
.lp-reward__list strong { font-size: 1rem; }
.lp-reward__icon { font-size: 1.5rem; line-height: 1; }
.lp-reward .ph { margin-top: auto; }

/* ---------- Цена: два тарифа ---------- */
.lp-plans {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  align-items: stretch;
  margin-top: 1.5rem;
}
.lp-plans .lp-price { max-width: none; margin: 0; display: flex; flex-direction: column; }
.lp-plans .lp-price .button { align-self: flex-start; margin-top: auto; }
.lp-price--hot { box-shadow: 0 0 0 3px var(--lp-marker, #ffd666), 0 14px 40px rgba(0, 0, 0, .08); }
.lp-price__badge--muted { background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; }
.lp-plans .lp-price__badge, .lp-plans .lp-price .small-note { align-self: flex-start; }
.lp-plans .lp-price__amount { margin-top: .25rem; }