/* Лендинг. Дизайн-система знята з макета (Claude Design, 2026-07-20):
   Literata для заголовків, Manrope для інтерфейсу, теракотовий акцент,
   пігулкові кнопки, панелі з великим радіусом і м'якою низькою тінню.
   Палітра тримається в локальних змінних — глобальна (base.css) лишається
   як є, щоб застосунок і решта публічних сторінок не змінилися. */

.public.landing {
  --ld-paper: #f7f1e6;
  --ld-raised: #fffcf6;
  --ld-sunk: #f1e7d6;
  --ld-ink: #2a2320;
  --ld-ink-soft: #5c5147;
  --ld-ink-faint: #7a6347;
  --ld-rule: #e7dac6;
  --ld-rule-strong: #dfd1bb;
  --ld-accent: #2c7351;
  --ld-accent-soft: #e3eee7;
  --ld-on-accent: #fbfdfb;
  --ld-danger: #c2452d;
  --ld-danger-soft: #f6e4df;
  /* Проміжний стан прогресу: слово вже в роботі, але ще не своє. Окрема
     змінна, а не --ld-danger — «вчу» це не помилка, і червоним читалося б
     як щось зламане. */
  --ld-progress: #b07a2e;
  --ld-shadow: 0 30px 60px -34px rgba(74, 48, 24, .45);
  --ld-shadow-sm: 0 18px 40px -30px rgba(74, 48, 24, .5);
  --font-display: "Literata", Georgia, serif;
  --font-sans: "Manrope", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  background: var(--ld-paper);
  color: var(--ld-ink);
  font-family: var(--font-sans);
}

:root[data-theme="dark"] .public.landing {
  --ld-paper: #16120d;
  --ld-raised: #201b14;
  --ld-sunk: #1b1610;
  --ld-ink: #f3ece0;
  --ld-ink-soft: #b8ab99;
  --ld-ink-faint: #9c8a72;
  --ld-rule: #342c22;
  --ld-rule-strong: #3f362a;
  --ld-accent: #5ea87f;
  --ld-accent-soft: #1e2b23;
  --ld-on-accent: #121a15;
  --ld-danger: #e0705a;
  --ld-danger-soft: #2e1a17;
  --ld-progress: #d19a4a;
  --ld-shadow: 0 30px 60px -34px rgba(0, 0, 0, .7);
  --ld-shadow-sm: 0 18px 40px -30px rgba(0, 0, 0, .8);
}

/* ---------- каркас ---------- */

.ld-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 36px;
}

.landing .pub-main { max-width: none; padding: 0; }

.ld-section { padding: 60px 0; }
.ld-section-tight { padding: 44px 0; }

/* ---------- типографіка ---------- */

.ld-eyebrow {
  font: 600 13px var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ld-accent);
  margin-bottom: 14px;
}

/* Окрема обіцянка, винесена з речення: курсив із тире відділяє її від опису,
   не роблячи ще одним заголовком. */
.ld-note {
  margin-top: 10px;
  font: italic 400 15.5px/1.5 var(--font-sans);
  color: var(--ld-ink-soft);
}

.ld-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--ld-ink);
}

.ld-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--ld-ink);
}

.ld-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -.01em;
  color: var(--ld-ink);
}

/* Підзаголовки йдуть на всю ширину своєї колонки — до кінця заголовка над ними.
   Обмеження в ch обривало рядок десь посеред сторінки, і блок виглядав
   недоверстаним; у вузьких двоколонкових секціях ширину і так задає колонка. */
.ld-lede {
  margin-top: 16px;
  font: 400 17.5px/1.55 var(--font-sans);
  color: var(--ld-ink-soft);
}

.ld-sub {
  margin-top: 14px;
  font: 400 16.5px/1.6 var(--font-sans);
  color: var(--ld-ink-soft);
}

.landing a { color: inherit; }

/* ---------- кнопки ---------- */

.public.landing .ld-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 15px var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
}

.public.landing .ld-btn-primary {
  background: var(--ld-accent);
  color: var(--ld-on-accent);
  box-shadow: var(--ld-shadow-sm);
}

.public.landing .ld-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -26px rgba(163, 74, 40, .8);
}

.public.landing .ld-btn-ghost {
  background: transparent;
  border-color: var(--ld-rule-strong);
  color: var(--ld-ink);
}

.public.landing .ld-btn-ghost:hover { border-color: var(--ld-ink); transform: translateY(-2px); }

.public.landing .ld-btn:focus-visible { outline: 2px solid var(--ld-accent); outline-offset: 3px; }

/* ---------- шапка ---------- */

/* Шапка липне до верху: лендинг довгий, і кнопка входу з перемикачем теми
   мають лишатись під рукою. Тло обов'язкове й непрозоре — під шапкою проїжджає
   контент; береться зі змінної, тож перемикання теми його підхоплює само.
   z-index нижчий за тост (40 у base.css), щоб сповіщення лишались зверху. */
.landing .pub-top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ld-paper);
  border-bottom-color: var(--ld-rule);
}

.landing .pub-top-inner { max-width: 1180px; padding: 20px 36px; gap: 22px; }

.landing .pub-brand { font-family: var(--font-display); font-weight: 700; color: var(--ld-ink); }
.landing .pub-brand span { color: var(--ld-accent); }

.landing .pub-nav { font-family: var(--font-sans); gap: 22px; }
.landing .pub-nav a { color: var(--ld-ink-soft); font-weight: 500; }
.landing .pub-nav a:hover { color: var(--ld-ink); }

/* Кнопка шапки веде тих, хто ВЖЕ має акаунт, — на лендингу це меншість. Із
   заливкою тим самим акцентом, що й головна дія, вона ставала другим центром
   уваги: на мобільному текстове посилання ховається, і вона лишалася єдиною
   яскравою плямою вгорі, перехоплюючи погляд раніше за заголовок. Контур
   лишає її кнопкою, а єдину зелену пляму на екрані віддає «Почніть безкоштовно».
   `!important` на колір — щоб перебити таке саме правило в public.css. */
.landing .pub-cta {
  border-radius: 999px;
  padding: 10px 19px;
  border: 1px solid var(--ld-rule-strong);
  background: transparent;
  color: var(--ld-ink) !important;
}

.landing .pub-cta:hover { border-color: var(--ld-ink); background: var(--ld-raised); }

.landing .theme-toggle {
  border-color: var(--ld-rule-strong);
  background: var(--ld-raised);
  color: var(--ld-ink-soft);
}

/* ---------- hero ---------- */

/* Перший екран мусить умістити текст, картку й лічильники без прокрутки. */
.ld-hero { padding: 30px 0 44px; }

.ld-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  column-gap: 56px;
  align-items: center;
}

/* Лічильники — окремим рядком під обома колонками, на всю ширину контейнера. */
.ld-hero-grid > .ld-stats { grid-column: 1 / -1; }

/* Блок головної дії: приклади, під ними — кнопка реєстрації. */
.ld-try { margin-top: 24px; max-width: 520px; }

.ld-try-row { display: flex; gap: 10px; align-items: center; }

.ld-try-note { font: 400 13.5px var(--font-sans); color: var(--ld-ink-faint); }

.ld-samples {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ld-ink-faint);
}

/* У hero приклади стоять ПЕРЕД кнопкою — верхній відступ там зайвий. */
.ld-hero .ld-samples { margin: 0 0 18px; }

.ld-sample {
  padding: 6px 13px;
  border: 1px solid var(--ld-rule);
  border-radius: 999px;
  background: var(--ld-sunk);
  font: 500 13.5px var(--font-mono);
  color: var(--ld-ink-soft);
  cursor: pointer;
  transition: border-color .15s, color .15s, transform .15s;
}

.ld-sample:hover { border-color: var(--ld-accent); color: var(--ld-accent); transform: translateY(-1px); }

/* ---------- картка результату ---------- */

.ld-card {
  position: relative;
  padding: 28px;
  border: 1px solid var(--ld-rule);
  border-radius: 22px;
  background: var(--ld-raised);
  box-shadow: var(--ld-shadow);
}

.ld-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ld-rule);
}

.ld-card-badge {
  font: 600 11.5px var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ld-accent);
}

.ld-card-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -.02em;
  color: var(--ld-ink);
}

.ld-card-meta { margin-top: 4px; font: 400 13.5px var(--font-mono); color: var(--ld-ink-faint); }

.ld-card-rows { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }

.ld-row-label {
  font: 600 11px var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ld-ink-faint);
  margin-bottom: 5px;
}

.ld-row-value { font: 400 16px/1.5 var(--font-sans); color: var(--ld-ink); }
.ld-row-value.is-example { font-family: var(--font-display); font-style: italic; color: var(--ld-ink-soft); }

.ld-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--ld-rule);
}

/* Вертикальні відступи дають зону натискання ~40px замість 19px самого тексту —
   на дотик у рядок висотою з палець не влучиш. Від'ємні поля з боків лишають
   текст рівно на межі картки, як було. */
.ld-link-btn {
  border: 0;
  background: none;
  padding: 11px 8px;
  margin: -11px -8px;
  font: 600 14px var(--font-sans);
  color: var(--ld-accent);
  cursor: pointer;
}

.ld-link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

.ld-card-hint { font: 400 13px var(--font-sans); color: var(--ld-ink-faint); }

/* ---------- лічильники ---------- */

.ld-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 36px;
  background: var(--ld-rule);
  border: 1px solid var(--ld-rule);
  border-radius: 20px;
  overflow: hidden;
}

/* Нижній відступ менший за верхній НАВМИСНЕ: рядок цифр не має виносних елементів,
   тож під ним лишається ~6px власного повітря шрифту. З рівним padding вміст
   візуально висів угорі — оптичний зазор був 21.5px зверху проти 34.4px знизу. */
.ld-stat { background: var(--ld-paper); padding: 20px 22px 16px; transition: background .2s; }
.ld-stat:hover { background: var(--ld-raised); }

.ld-stat dt {
  font: 600 11.5px var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ld-ink-faint);
}

.ld-stat dd {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  /* Успадковані 1.6 додавали 8px порожнечі під цифрами — рядок з одного числа
     має обіймати його щільно, інакше картку неможливо відцентрувати. */
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ld-ink);
}

/* «+» — той самий шрифт і кегль, що й число: дрібний надрядковий знак виглядав
   чужорідно. Зсув угору — не смак, а математика шрифту: знак «+» вирівняний по
   математичній осі (центр 8.63px над базовою лінією), а цифри Literata — по
   своїй (9.88px), тож без поправки він сидить на 1.25px нижче їхнього центру.
   `relative` замість `transform` — щоб не робити з інлайна inline-block. */
.ld-stat dd span {
  position: relative;
  top: -.045em;
  color: var(--ld-accent);
  transition: opacity .35s ease-out;
}

/* Ховає його ЛИШЕ скрипт і лише поки біжить лічильник: без JS «+» видимий
   одразу, як і решта сторінки. Ширину зберігаємо (opacity, не display),
   інакше число смикалося б на останньому кадрі. */
.ld-stat dd span.is-pending { opacity: 0; }

/* ---------- кроки ---------- */

.ld-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
}

.ld-step {
  padding: 28px;
  border: 1px solid var(--ld-rule);
  border-radius: 24px;
  background: var(--ld-raised);
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), box-shadow .2s;
}

.ld-step:hover { transform: translateY(-3px); box-shadow: var(--ld-shadow-sm); }

.ld-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--ld-accent-soft);
  color: var(--ld-accent);
  font: 600 13px var(--font-mono);
}

.ld-step h3 { margin-top: 16px; }
.ld-step p { margin-top: 10px; font: 400 15.5px/1.6 var(--font-sans); color: var(--ld-ink-soft); }

/* ---------- режими ---------- */

.ld-modes { margin-top: 36px; }

.ld-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--ld-rule);
  border-radius: 999px;
  background: var(--ld-sunk);
}

.ld-tab {
  padding: 9px 20px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: 600 14.5px var(--font-sans);
  color: var(--ld-ink-soft);
  cursor: pointer;
  transition: background .2s, color .2s;
}

.ld-tab[aria-selected="true"] { background: var(--ld-raised); color: var(--ld-ink); box-shadow: var(--ld-shadow-sm); }

.ld-mode-panel {
  margin-top: 22px;
  padding: 28px;
  border: 1px solid var(--ld-rule);
  border-radius: 24px;
  background: var(--ld-raised);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}

/* Текст режиму теж має сталу висоту — інакше панель стрибає при зміні таба. */
.ld-mode-copy { min-height: 150px; }

.ld-mode-copy p { margin-top: 10px; font: 400 15.5px/1.6 var(--font-sans); color: var(--ld-ink-soft); }

.ld-mode-tag {
  font: 600 11.5px var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ld-accent);
}

/* Висота СТАЛА, не min-height: вміст режимів різний (показане значення,
   чотири варіанти, слоти + літери), і від «розгортання» блок стрибав на
   кожному кліку. Тепер сцена не рухається — змінюється лише її вміст. */
.ld-stage {
  padding: 24px;
  border: 1px solid var(--ld-rule);
  border-radius: 20px;
  background: var(--ld-sunk);
  /* Висота фіксована, щоб панель не стрибала при перемиканні режимів, і задана
     за найвищим із них — тестом (слово + питання + 4 варіанти + вердикт = 336px).
     На 300px вміст тесту не влазив, а `justify-content: center` з `overflow:
     hidden` зрізав його з обох боків — слово виглядало притиснутим до верху. */
  height: 360px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.ld-stage-word { font-family: var(--font-display); font-weight: 600; font-size: 30px; color: var(--ld-ink); }
.ld-stage-def { font: 400 15.5px/1.5 var(--font-sans); color: var(--ld-ink-soft); }
.ld-stage-uk { font: 500 15px var(--font-sans); color: var(--ld-accent); }
.ld-stage-hint { font: 400 13px var(--font-sans); color: var(--ld-ink-faint); }

/* Уся площа картки — одна кнопка «перевернути»: тягнеться на висоту сцени,
   щоб клік ловився будь-де, а не лише по тексту. */
.ld-flip {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.ld-flip:focus-visible { outline: 2px solid var(--ld-accent); outline-offset: 4px; }

/* Варіанти підтиснуті: чотири кнопки — найвищий вміст сцени, і саме через них
   вона вилазила за межі. `flex: none` обов'язковий — інакше flex стискає їх під
   висоту коробки, вміст «підлаштовується» під будь-яке значення, і підібрати
   висоту неможливо: вона щоразу міряється іншою. */
.ld-options { display: flex; flex-direction: column; gap: 6px; text-align: left; flex: none; }

.ld-option {
  padding: 9px 14px;
  border: 1px solid var(--ld-rule-strong);
  border-radius: 12px;
  background: var(--ld-raised);
  font: 400 14.5px var(--font-sans);
  color: var(--ld-ink);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
}

.ld-option:hover { border-color: var(--ld-accent); }
.ld-option.is-right { border-color: var(--ld-accent); background: var(--ld-accent-soft); color: var(--ld-accent); }
.ld-option.is-wrong { border-color: var(--ld-danger); background: var(--ld-danger-soft); color: var(--ld-danger); }

.ld-slots { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }

.ld-slot {
  width: 38px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--ld-rule-strong);
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--ld-ink);
}

.ld-slot.is-filled { border-style: solid; background: var(--ld-raised); }

.ld-letters { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; }

.ld-letter {
  width: 40px;
  height: 40px;
  border: 1px solid var(--ld-rule-strong);
  border-radius: 10px;
  background: var(--ld-raised);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ld-ink);
  cursor: pointer;
  transition: transform .12s, border-color .15s, opacity .15s;
}

.ld-letter:hover:not(:disabled) { border-color: var(--ld-accent); transform: translateY(-2px); }
.ld-letter:disabled { opacity: .3; cursor: default; }

.ld-verdict { min-height: 22px; font: 600 14.5px var(--font-sans); }
.ld-verdict.ok { color: var(--ld-accent); }
.ld-verdict.wrong { color: var(--ld-danger); }

/* ---------- блок «ваш словник» ---------- */

.ld-value { background: var(--ld-sunk); }

.ld-value-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: 60px;
  align-items: center;
}

.ld-points { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }

.ld-point {
  display: flex;
  gap: 14px;
  font: 400 16px/1.55 var(--font-sans);
  color: var(--ld-ink-soft);
}

.ld-point::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--ld-accent);
}

/* Мокап словника — показує продукт замість скріншота. */
.ld-mock {
  padding: 24px;
  border: 1px solid var(--ld-rule);
  border-radius: 24px;
  background: var(--ld-raised);
  box-shadow: var(--ld-shadow);
}

.ld-mock-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ld-rule);
}

.ld-mock-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.ld-mock-count { font: 500 13px var(--font-mono); color: var(--ld-ink-faint); }

.ld-mock-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px 46px;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ld-rule);
}

.ld-mock-row:last-child { border-bottom: 0; }

.ld-mock-word { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; }
.ld-mock-uk { font: 400 13.5px var(--font-sans); color: var(--ld-ink-soft); }

/* Смужка прогресу повторює модель застосунку: слово стає «своїм» за два
   правильні повтори (LEARN_MAX = 2 у database.py), тож станів рівно три —
   не вигадана шкала, а те, що людина побачить у себе в папці. */
.ld-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--ld-sunk);
  overflow: hidden;
}

.ld-bar-fill { display: block; height: 100%; border-radius: 999px; }
.ld-bar-fill.is-0 { width: 8%; background: var(--ld-rule-strong); }
.ld-bar-fill.is-1 { width: 50%; background: var(--ld-progress); }
.ld-bar-fill.is-2 { width: 100%; background: var(--ld-accent); }

.ld-bar-label {
  font: 600 11.5px var(--font-sans);
  letter-spacing: .03em;
  text-align: right;
}

.ld-bar-label.is-0 { color: var(--ld-ink-faint); }
.ld-bar-label.is-1 { color: var(--ld-progress); }
.ld-bar-label.is-2 { color: var(--ld-accent); }

/* ---------- матеріал ---------- */

.ld-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 40px;
}

.ld-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 22px;
  border: 1px solid var(--ld-rule);
  border-radius: 20px;
  background: var(--ld-raised);
  text-decoration: none;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), box-shadow .2s, border-color .2s;
}

.ld-tile::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--ld-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

.ld-tile:hover { transform: translateY(-3px); border-color: var(--ld-accent); box-shadow: var(--ld-shadow-sm); }
.ld-tile:hover::after { transform: scaleX(1); }
.ld-tile:focus-visible { outline: 2px solid var(--ld-accent); outline-offset: 3px; }

.ld-tile-tag {
  font: 600 10.5px var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ld-ink-faint);
}

.ld-tile-title { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -.015em; }
/* Плитки — це <span>, тож глобальне правило для абзаців сюди не дістає, а
   рядки тут короткі й «сирота» в них видно найбільше. */
.ld-tile-sub, .ld-tile-title { text-wrap: pretty; }

.ld-tile-sub { font: 400 13.5px var(--font-sans); color: var(--ld-ink-soft); }

/* ---------- фінал ---------- */

.ld-final { padding: 100px 0 84px; text-align: center; }
.ld-final .ld-lede { margin: 16px auto 0; }
.ld-final .ld-try { margin: 30px auto 0; }

/* ---------- підвал ---------- */

.landing .pub-foot { border-color: var(--ld-rule); }
.landing .pub-foot-brand { font-family: var(--font-display); }
.landing .pub-foot-brand span { color: var(--ld-accent); }
.landing .pub-foot-links { font-family: var(--font-sans); }
.landing .pub-foot-links a { color: var(--ld-ink-soft); }
.landing .pub-foot-links a:hover { color: var(--ld-accent); }
.landing .pub-foot-legal { font-family: var(--font-sans); }
.landing .pub-foot-legal a { color: var(--ld-ink-faint); }
.landing .pub-foot-legal a:hover { color: var(--ld-accent); }
.landing .pub-foot-note { color: var(--ld-ink-faint); }

/* ---------- рух ----------
   Стартові стани вмикає лише клас `ld-motion` від JS: без JS і при
   prefers-reduced-motion сторінка повністю видима. */

@keyframes ld-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ld-fresh {
  from { opacity: .3; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.ld-motion .ld-in {
  opacity: 0;
  animation: ld-in .62s cubic-bezier(.2, .7, .3, 1) forwards;
  animation-delay: calc(var(--in-index, 0) * 90ms + 60ms);
}

.ld-motion .ld-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .6s cubic-bezier(.2, .7, .3, 1);
}

.ld-motion .ld-reveal.is-visible { opacity: 1; transform: none; }

.ld-motion [data-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
  transition-delay: calc(var(--stagger-index, 0) * 70ms);
}

.ld-motion .is-visible [data-stagger] > *,
.ld-motion [data-stagger].is-visible > * { opacity: 1; transform: none; }

.ld-settled .ld-in { opacity: 1; animation: none; }

.ld-card.is-fresh,
.ld-stage.is-fresh { animation: ld-fresh .4s ease both; }

@media (prefers-reduced-motion: reduce) {
  .ld-motion .ld-in,
  .ld-motion .ld-reveal,
  .ld-motion [data-stagger] > * {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}

/* ---------- адаптив ---------- */

@media (max-width: 1040px) {
  .ld-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .ld-mode-panel { grid-template-columns: 1fr; gap: 28px; }
  .ld-value-grid { grid-template-columns: 1fr; gap: 40px; }
  .ld-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .ld-wrap { padding: 0 24px; }
  .landing .pub-top-inner { padding: 18px 24px; }
  .ld-section { padding: 72px 0; }
  .ld-steps { grid-template-columns: 1fr; }
  .ld-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  /* Текстове посилання не вміщається поруч із перемикачем і CTA; воно
     дублюється плиткою на сторінці й у підвалі, тож ховаємо саме його. */
  .landing .pub-nav > a:not(.pub-cta) { display: none; }
  .landing .pub-nav { gap: 12px; }
  .landing .pub-top-inner { gap: 12px; }
  .landing .pub-cta { padding: 10px 16px; font-size: 14px; }

  .ld-hero { padding: 26px 0 64px; }
  .ld-section { padding: 58px 0; }
  .ld-final { padding: 64px 0 56px; }
  .ld-try-row { flex-direction: column; }
  .ld-try-row .ld-btn { width: 100%; }
  .ld-card { padding: 22px; }
  .ld-card-word { font-size: 28px; }
  .ld-mode-panel, .ld-step { padding: 22px; }
  /* Смужка вужча: на 375px фіксовані 116px лишали слову з перекладом 87px,
     і воно ламалося на кожному другому рядку. */
  .ld-mock-row { grid-template-columns: minmax(0, 1fr) 56px 42px; gap: 10px; }
  /* На вузькому екрані найвищий режим — правопис (літери переносяться на більше
     рядків), тож висота тут своя і більша за десктопну. */
  .ld-stage { padding: 18px; height: 372px; }
  .ld-mode-copy { min-height: 0; }
  .ld-tabs { width: 100%; justify-content: space-between; }
  .ld-tab { flex: 1; padding: 9px 8px; font-size: 13.5px; }
  .ld-slot { width: 34px; height: 42px; font-size: 18px; }
  .ld-letter { width: 36px; height: 36px; }
}