/* ==========================================================================
   Лендинг KitKids — public, для родителя.
   Ни одного нового цвета или радиуса: всё токенами из app.css. Кириллица
   набирается Nunito (--font-body) в весе 800, потому что Baloo 2 — дисплейная
   гарнитура бренда — кириллицы не имеет (см. .masthead__tagline в app.css).
   Латиница «KitKids» получает Baloo 2 целиком.
   Префикс .land- — чтобы ни один селектор здесь не спорил с приложением.
   ========================================================================== */

.land {
  --land-w: 1120px;
  font-size: calc(var(--fs-body) + 1px);   /* 17px: лендинг читают с дивана */
}

.land main { overflow-x: clip; }

/* ------------------------------- 1. topbar ------------------------------- */

.land-top {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s5);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--line);
}

.land-top__brand { display: inline-flex; align-items: center; gap: var(--s3); min-width: 0; margin-right: auto; }
.land-top__mark { width: 34px; height: 34px; flex: none; }
.land-top__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: calc(var(--fs-title) + 2px); line-height: 1;
  color: var(--ink); white-space: nowrap;
}
.land-top__name > span {
  display: block; margin-top: 2px;
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-caption); color: var(--ink-muted);
}

.land-top__nav { display: none; gap: var(--s5); }
.land-top__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; font-size: var(--fs-body); color: var(--ink-muted);
  text-decoration: none;
}
.land-top__nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.land-top__cta { flex: none; }

/* --------------------------- 2. общий блок ------------------------------- */

.land-sec {
  max-width: var(--land-w); margin: 0 auto;
  padding: var(--s8) var(--s5);
  scroll-margin-top: 80px;
}
.land-sec--deep {
  background: color-mix(in srgb, var(--paper-deep) 62%, transparent);
  border-block: 2px solid var(--line);
  max-width: none;
}
.land-sec--deep > * { max-width: var(--land-w); margin-left: auto; margin-right: auto; }
.land-sec--deep { padding-inline: var(--s5); }

.land-h2 {
  font-family: var(--font-body); font-weight: 800;
  font-size: clamp(calc(var(--fs-display) + 4px), 4.2vw, 38px);
  line-height: 1.15; letter-spacing: 0; color: var(--ink);
  text-wrap: balance;
}
.land-h3 {
  font-family: var(--font-body); font-weight: 800;
  font-size: var(--fs-title); color: var(--ink);
}
.land-sub {
  margin-top: var(--s3); max-width: 62ch;
  color: var(--ink-muted); font-size: var(--fs-body); line-height: 1.6;
}

/* Выделение текста — тоже поверхность альбома: тёплый янтарный тон, а не
   системный синий, который на бумаге выглядел бы чужой наклейкой. */
.land ::selection,
.land::selection { background: var(--amber-t); color: var(--ink); }

/* ----------------------------- 3. первый экран --------------------------- */

.land-hero {
  max-width: var(--land-w); margin: 0 auto;
  padding: var(--s7) var(--s5) var(--s8);
  display: grid; gap: var(--s7); align-items: center;
}
.land-eyebrow {
  display: inline-block;
  font-size: var(--fs-label); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-muted);
  background: var(--amber-t); border-radius: var(--r-pill);
  padding: 6px var(--s3);
}
.land-h1 {
  margin-top: var(--s4);
  font-family: var(--font-body); font-weight: 800;
  font-size: clamp(34px, 7vw, 58px);
  line-height: 1.06; letter-spacing: 0; color: var(--ink);
  text-wrap: balance;
}
.land-lead {
  margin-top: var(--s4); max-width: 34em;
  font-size: clamp(var(--fs-body), 2.4vw, 19px); line-height: 1.6; color: var(--ink-muted);
}
.land-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.land-hero__cta .btn { flex: 1 1 auto; }

.land-trust {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin-top: var(--s5); padding: 0;
  font-size: var(--fs-label); font-weight: 700; color: var(--ink-muted);
}
.land-trust li { display: flex; align-items: center; gap: var(--s2); }
.land-trust li::before {
  content: ''; width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--green); flex: none;
}

/* Живой макет: настоящие компоненты детского экрана, а не картинка. */
.land-mock {
  justify-self: center; width: min(100%, 360px);
  background: var(--surface);
  border: 4px solid var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-sticker);
  padding: var(--s5);
  transform: rotate(var(--tilt, 0deg));
}
.land-mock__head { display: flex; align-items: center; gap: var(--s3); }
.land-mock__avatar {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--paper-deep); font-size: 22px; flex: none;
}
.land-mock__who { min-width: 0; display: grid; }
.land-mock__who b { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-title); }
.land-mock__who > span { font-size: var(--fs-caption); color: var(--ink-muted); }
.land-badge {
  margin-left: auto; flex: none;
  font-family: var(--font-body); font-weight: 800; font-size: var(--fs-caption);
  background: var(--sky-t); color: var(--ink);
  border: 2px solid var(--sky); border-radius: var(--r-pill);
  padding: 4px 10px; white-space: nowrap;
}
.land-mock__hero { display: grid; place-items: center; padding: var(--s4) 0 var(--s2); }
.land-mock__hero .hero { --hero-size: 132px; }
.land-mock__xp .xpbar { margin-bottom: 0; }
.land-mock__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 2px solid var(--line);
}
.land-mock__foot .purse { font-size: var(--fs-title); }
.land-mock__next { font-size: var(--fs-caption); color: var(--ink-muted); text-align: right; }

/* ------------------------------ 4. скриншоты ----------------------------- */

.land-shots {
  display: grid; gap: var(--s6); margin-top: var(--s6);
  grid-template-columns: 1fr;
}
.land-shot { margin: 0; transform: rotate(var(--tilt, 0deg)); }
.land-shot__frame {
  display: block; aspect-ratio: 2 / 3; overflow: hidden;
  border: 4px solid var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-sticker); background: var(--paper-deep);
}
.land-shot__frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block;
}
.land-shot__body { display: grid; gap: 2px; margin-top: var(--s4); padding: 0 var(--s2); }
.land-shot__body b { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-body); }
.land-shot__body span { font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-muted); }

/* Наклейка-основа: общий облик карточек лендинга. */
.land-mock, .land-kit, .land-plan, .land-voice, .land-terms {
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.land-kit:hover, .land-plan:hover { transform: rotate(0deg) translateY(-3px); }

/* ---------------------------- 5. как это играет -------------------------- */

.land-steps {
  display: grid; gap: var(--s4); margin: var(--s6) 0 0; padding: 0;
  list-style: none;
}
.land-step {
  display: flex; align-items: flex-start; gap: var(--s4);
  background: var(--surface);
  border: 4px solid var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--s5);
}
.land-step__emoji {
  flex: none; width: 52px; height: 52px; border-radius: var(--r-md);
  display: grid; place-items: center; font-size: 28px;
  background: var(--amber-t);
}
.land-step:nth-child(2) .land-step__emoji { background: var(--coral-t); }
.land-step:nth-child(3) .land-step__emoji { background: var(--green-t); }
.land-step:nth-child(4) .land-step__emoji { background: var(--sky-t); }
.land-step__body { display: grid; gap: var(--s1); min-width: 0; }
.land-step__title { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-body); }
.land-step__text { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-muted); }

.land-voice {
  display: flex; gap: var(--s4); align-items: flex-start;
  margin-top: var(--s6); padding: var(--s5);
  background: var(--surface);
  border: 4px solid var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-sticker);
}
.land-voice__icon {
  flex: none; width: 52px; height: 52px; border-radius: var(--r-md);
  display: grid; place-items: center; font-size: 28px;
  background: var(--berry-t);
}
.land-voice b { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-body); }
.land-voice p { margin-top: var(--s2); color: var(--ink-muted); line-height: 1.6; }

/* ------------------------------- 6. герои -------------------------------- */

.land-kits {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4);
  margin-top: var(--s6);
}
.land-kit {
  position: relative; margin: 0;
  display: grid; justify-items: center; gap: var(--s2);
  background: var(--surface);
  border: 4px solid var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-sticker);
  padding: var(--s6) var(--s4) var(--s5);
  transform: rotate(var(--tilt, 0deg));
}
.land-kit__stage { display: grid; place-items: center; min-height: 128px; }
.land-kit__stage .hero { --hero-size: 104px; }
.land-kit__body { display: grid; gap: 2px; text-align: center; }
.land-kit__name { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-title); }
.land-kit__note { font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-muted); }

.land-chip {
  position: absolute; top: calc(var(--s3) * -1); right: var(--s3);
  font-size: var(--fs-caption); font-weight: 800;
  border-radius: var(--r-pill); padding: 4px 12px;
  box-shadow: var(--sh-1); white-space: nowrap;
}
.land-chip--free { background: var(--green); color: #fff; }
.land-chip--pro { background: var(--amber); color: var(--ink); }

/* --------------------------- 7. игры на чтение --------------------------- */

.land-read { display: grid; gap: var(--s7); align-items: center; }
.land-read__steps { display: grid; gap: var(--s3); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.land-read__step {
  display: flex; align-items: center; gap: var(--s4);
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--sh-1); padding: var(--s3) var(--s4);
}
.land-read__n {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--berry); color: #fff;
  font-family: var(--font-body); font-weight: 800; font-size: var(--fs-body);
}
.land-read__text { display: grid; gap: 2px; min-width: 0; }
.land-read__text b { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-body); }
.land-read__text > span { font-size: var(--fs-caption); color: var(--ink-muted); }
.land-read__note { margin-top: var(--s4); font-size: var(--fs-caption); line-height: 1.6; color: var(--ink-muted); }

.land-games {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2); margin-top: var(--s5); padding: 0; list-style: none;
}
.land-game {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--surface); border-radius: var(--r-sm);
  box-shadow: var(--sh-1); padding: var(--s2) var(--s3);
}
.land-game__emoji { flex: none; font-size: 20px; }
.land-game__text { display: grid; min-width: 0; }
.land-game__text b { font-weight: 800; font-size: var(--fs-caption); }
.land-game__text > span { font-size: var(--fs-caption); color: var(--ink-muted); }

.land-shot--single { width: min(100%, 300px); justify-self: center; }

/* ------------------------------- 8. тарифы ------------------------------- */

.land-plans {
  display: grid; gap: var(--s5); margin-top: var(--s6);
  grid-template-columns: 1fr; align-items: start;
}
.land-plan {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s4);
  height: 100%;
  background: var(--surface);
  border: 4px solid var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-sticker);
  padding: var(--s6) var(--s5) var(--s5);
  transform: rotate(var(--tilt, 0deg));
}
.land-plan--lead { border-color: var(--amber); }
.land-plan__head { display: grid; gap: var(--s2); }
.land-plan__head .land-chip { position: static; justify-self: start; box-shadow: none; }
.land-plan__name { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-title); }
.land-plan__price {
  font-family: var(--font-body); font-weight: 800;
  font-size: clamp(30px, 5vw, 40px); line-height: 1; color: var(--ink);
}
.land-plan__price span {
  font-size: var(--fs-caption); font-weight: 700; color: var(--ink-muted);
}
.land-plan__alt { font-size: var(--fs-caption); color: var(--ink-muted); margin-top: calc(var(--s2) * -1); }
.land-plan__note { font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-muted); }
.land-plan__list {
  display: grid; gap: var(--s2); margin: 0; padding: 0;
  list-style: none; font-size: var(--fs-body); line-height: 1.5;
}
.land-plan__list li { display: flex; gap: var(--s2); align-items: flex-start; }
.land-plan__list li::before {
  content: '✓'; flex: none; color: var(--green); font-weight: 800;
}
.land-plan__btn { margin-top: auto; width: 100%; }

/* Честные условия — не аккордеон и не сноска: отдельный блок крупно. */
.land-terms {
  margin-top: var(--s7); padding: var(--s6) var(--s5);
  background: var(--surface);
  border: 4px solid var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
}
.land-terms .land-h3 { margin-bottom: var(--s2); }
.land-honest-list {
  display: grid; gap: var(--s4); margin: var(--s4) 0 0; padding: 0; list-style: none;
}
.land-honest { display: grid; gap: var(--s1); }
.land-honest b { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-body); }
.land-honest b::before { content: '· '; color: var(--amber-p); }
.land-honest span { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-muted); }

/* ----------------------------- 9. приватность ---------------------------- */

.land-priv-list {
  display: grid; gap: var(--s4); margin: var(--s6) 0 0; padding: 0; list-style: none;
}
.land-priv {
  display: grid; gap: var(--s1);
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--sh-1); padding: var(--s4) var(--s5);
}
.land-priv b { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-body); }
.land-priv span { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-muted); }

/* --------------------------------- 10. FAQ ------------------------------- */

.land-faq-list { display: grid; gap: var(--s3); margin-top: var(--s6); }
.land-faq {
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--sh-1); padding: var(--s2) var(--s5);
}
.land-faq summary {
  cursor: pointer; padding: var(--s3) 0;
  font-family: var(--font-body); font-weight: 800; font-size: var(--fs-body);
  list-style: none; position: relative; padding-right: var(--s6);
}
.land-faq summary::-webkit-details-marker { display: none; }
.land-faq summary::after {
  content: '+'; position: absolute; right: 0; top: 50%; translate: 0 -50%;
  font-size: var(--fs-title); font-weight: 800; color: var(--ink-muted);
}
.land-faq[open] summary::after { content: '–'; }
.land-faq p { padding: 0 0 var(--s4); color: var(--ink-muted); line-height: 1.6; }

/* ------------------------------ 11. финал -------------------------------- */

.land-final {
  max-width: 720px; margin: 0 auto;
  padding: var(--s8) var(--s5); text-align: center;
}
.land-final .land-sub { margin-inline: auto; }
.land-final__btn { margin-top: var(--s6); min-width: min(100%, 320px); }
.land-final__alt { margin-top: var(--s4); font-size: var(--fs-caption); color: var(--ink-muted); }
/* Единственная мелкая ссылка страницы: подсветка ссылкой и пальце-размерная
   площадка — текст высотой в строку нельзя попадать пальцем. */
.land-final__alt a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: var(--s1);
  color: var(--ink); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}

.land-foot {
  border-top: 2px solid var(--line);
  padding: var(--s6) var(--s5) var(--s8);
  display: grid; gap: var(--s2); justify-items: center; text-align: center;
}
.land-foot__brand { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-body); }
.land-foot__line { font-size: var(--fs-caption); color: var(--ink-muted); max-width: 46ch; }
/* Пять ссылок не влезают в телефон в один ряд — переносятся, а не уводят
   страницу вбок: подвал — единственное место, где лендинг шире окна. */
.land-foot__nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s1) var(--s4); max-width: 100%;
  margin-top: var(--s2);
}
.land-foot__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--s2);
  font-size: var(--fs-caption); font-weight: 700; color: var(--ink-muted);
}
.land-foot__nav a:hover { color: var(--ink); }

/* --------------------------- 12. появление ------------------------------- */
/* Один выход на загрузку — только первому экрану. Что ниже сгиба, приходит
 * сразу: лендинг про спокойствие, а не про анимацию на каждый чих. */

@keyframes land-in {
  from { opacity: 0; transform: translateY(14px) rotate(0deg) scale(.98); }
}
.land-eyebrow, .land-h1, .land-lead, .land-hero__cta, .land-trust, .land-mock {
  animation: land-in var(--dur-slow) var(--ease-out) backwards;
}
.land-h1 { animation-delay: 60ms; }
.land-lead { animation-delay: 120ms; }
.land-hero__cta { animation-delay: 180ms; }
.land-trust { animation-delay: 240ms; }
.land-mock { animation-delay: 120ms; }

/* ------------------------------- 13. ≥640px ------------------------------ */

@media (min-width: 640px) {
  .land-top { padding-inline: var(--s6); }
  .land-top__nav { display: flex; }
  .land-sec, .land-hero { padding-inline: var(--s6); }
  .land-sec--deep { padding-inline: var(--s6); }
  .land-shots { grid-template-columns: repeat(3, 1fr); }
  .land-steps { grid-template-columns: repeat(2, 1fr); }
  .land-honest-list { grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
  .land-priv-list { grid-template-columns: repeat(2, 1fr); }
  .land-plans { grid-template-columns: repeat(3, 1fr); }
  .land-kit__stage .hero { --hero-size: 116px; }
  .land-mock__hero .hero { --hero-size: 148px; }
}

@media (min-width: 900px) {
  .land-hero { grid-template-columns: 1.15fr .85fr; gap: var(--s8); padding-block: var(--s8) var(--s8); }
  .land-hero__cta { flex-wrap: nowrap; }
  .land-hero__cta .btn { flex: 0 1 auto; }
  .land-kits { grid-template-columns: repeat(4, 1fr); }
  .land-kit__stage .hero { --hero-size: 112px; }
  .land-read { grid-template-columns: 1.1fr .9fr; }
  .land-shot--single { justify-self: end; }
  .land-faq-list { max-width: 820px; margin-inline: auto; }
}

/* ------------------------- 14. правила тишины ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  .land-eyebrow, .land-h1, .land-lead, .land-hero__cta, .land-trust, .land-mock {
    animation: none;
  }
  .land-mock, .land-kit, .land-plan, .land-voice, .land-terms { transition: none; }
}

/* ------------------------- 15. узкий телефон ----------------------------- */

@media (max-width: 380px) {
  .land { font-size: var(--fs-body); }
  .land-top { gap: var(--s2); padding-inline: var(--s3); }
  .land-top__name > span { display: none; }
  .land-top__cta { padding-inline: var(--s3); }
  .land-hero, .land-sec, .land-final, .land-foot { padding-inline: var(--s4); }
  .land-hero { padding-top: var(--s6); }
  .land-kits { gap: var(--s3); }
  .land-kit { padding: var(--s5) var(--s3) var(--s4); }
  .land-kit__stage .hero { --hero-size: 88px; }
  .land-step { padding: var(--s4); gap: var(--s3); }
  .land-games { grid-template-columns: 1fr; }
}

/* --------------------- 15. маркировка возраста (LEGAL1) ------------------- */

/* «3+» в подвал лендинга. Знак — рамка с чернильным контуром, как у
   возрастных маркировок: читается без цвета и без картинок, и на бумаге
   выглядел бы так же. */
.land-foot__age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4em;
  height: 2.4em;
  padding: 0 var(--s2);
  margin-top: var(--s2);
  border: 2px solid var(--ink-muted);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-body);
  color: var(--ink);
}