/* Витрина для тех, кто ещё не вошёл.

   Стили лежат отдельным файлом: страницу видят один раз, и грузить её разметку
   вместе с приложением тем, кто уже внутри, незачем. Цвета и шрифт берутся из
   app.css — там те же токены из DESIGN.md, что и в макете. */

.lp-kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent)}

/* ---------------------------------------------------------------- герой */

.lp-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:34px;
  align-items:start;padding:22px 0 12px}
.lp-hero-text{display:flex;flex-direction:column;gap:18px;min-width:0}

.lp-badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:var(--accent-soft);color:var(--accent);border-radius:999px;
  padding:7px 14px;font-size:13px;font-weight:600}
.lp-dot{width:8px;height:8px;border-radius:50%;background:var(--good);flex:none}

.lp-h1{font-size:40px;line-height:1.16;font-weight:700;letter-spacing:-.02em;margin:0}
.lp-h1 em{font-style:normal;color:var(--accent);
  /* подчёркивание как в макете: мягкое, не режет буквы с выносом вниз */
  box-shadow:inset 0 -.18em 0 var(--accent-tint)}
.lp-lead{font-size:17px;line-height:1.62;color:var(--muted);margin:0;max-width:34em}

.lp-pairs{display:flex;flex-direction:column;gap:8px}
.lp-pairs-label{font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.lp-pill{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:14px;font-weight:500;white-space:nowrap}

/* ------------------------------------------------- карточка слова в герое */

.lp-word{margin:6px 0 0;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:20px 22px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:12px}
.lp-word-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lp-speak{width:38px;height:38px;border:0;border-radius:50%;flex:none;cursor:pointer;
  background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;
  justify-content:center;transition:transform .15s ease,background .15s ease}
.lp-speak:hover{background:var(--accent-tint)}
.lp-speak:active{transform:scale(.92)}

.lp-word-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.lp-word-line b{font-size:30px;font-weight:700;letter-spacing:-.01em}
.lp-ipa{color:var(--muted);font-size:15px}

.lp-quote{margin:0;padding-inline-start:14px;border-inline-start:3px solid var(--accent);
  font-size:15px;line-height:1.55;font-style:italic}
.lp-quote cite{display:block;margin-top:6px;font-style:normal;font-size:12.5px;
  color:var(--muted)}

.lp-tr{display:flex;flex-direction:column;gap:6px;background:var(--surface-2);
  border-radius:13px;padding:10px 12px}
.lp-tr-row{display:flex;align-items:center;gap:9px;min-width:0}
.lp-tr-text{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
.lp-next{margin:0;display:flex;align-items:center;gap:6px;color:var(--good);
  font-size:13px;font-weight:600}

/* ------------------------------------------------------- вход и регистрация */

.lp-auth{padding:22px;display:flex;flex-direction:column;gap:12px;position:sticky;top:86px}
.lp-auth-tabs{width:100%}
.lp-auth-tabs button{flex:1}
.lp-auth-title{font-size:20px;font-weight:700;margin:2px 0 0}
.lp-auth .field{margin:0}
.lp-auth .status{margin:0;min-height:18px}
.lp-auth-swap{align-self:center}
.lp-auth-note{margin:0;text-align:center}

/* ---------------------------------------------------------------- блоки */

.lp-block{padding:46px 0}
.lp-block-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:26px}
.lp-block-head h2{font-size:30px;line-height:1.2;font-weight:700;margin:4px 0 0;
  letter-spacing:-.015em}
.lp-block-lead{margin:0;color:var(--muted);max-width:30em;font-size:15.5px}

.lp-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.lp-card{padding:24px;display:flex;flex-direction:column;gap:10px}
.lp-card-mark{width:48px;height:48px;border-radius:14px;flex:none;margin-bottom:6px;
  background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center}
.lp-card h3{font-size:17px;font-weight:700;margin:0}
.lp-card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}

/* ------------------------------------------------------------------ шаги */

.lp-band{background:var(--surface-2);border-radius:24px;padding:40px 32px;margin:8px 0}
.lp-band-head{text-align:center;margin-bottom:26px}
.lp-band-head h2{font-size:26px;font-weight:700;margin:4px 0 0}
.lp-steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lp-step{padding:26px;display:flex;flex-direction:column;gap:10px}
.lp-step-no{width:44px;height:44px;border-radius:14px;flex:none;margin-bottom:4px;
  background:var(--accent);color:var(--on-accent);font-size:17px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.lp-step h3{font-size:17px;font-weight:700;margin:0}
.lp-step p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}

/* --------------------------------------------------------------- витрина */

.lp-panel{padding:24px}
.lp-panel-lead{margin:0 0 16px;color:var(--muted);font-size:15.5px;max-width:44em}
.lp-mock{background:var(--surface-2);border-radius:16px;padding:22px}
.lp-mock-reader p{margin:0;font-size:17px;line-height:1.8}
/* подсветка уровней: те же цвета, что в книге, но правила там привязаны к .lyrics,
   поэтому для витрины повторяем их здесь, а общие селекторы не трогаем */
.lp-mock .w,.lp-legend .w{border-radius:5px;padding:0 3px}
.lp-legend .w{padding:2px 9px}
.lp-mock .w.lvl-new,.lp-legend .w.lvl-new{background:var(--lvl-new);box-shadow:inset 0 -2px 0 var(--lvl-new-line)}
.lp-mock .w.lvl-learning,.lp-legend .w.lvl-learning{background:var(--lvl-doing);box-shadow:inset 0 -2px 0 var(--lvl-doing-line)}
.lp-mock .w.lvl-known,.lp-legend .w.lvl-known{background:var(--lvl-known);box-shadow:inset 0 -2px 0 var(--lvl-known-line)}
.lp-legend{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lp-mock-bar{display:flex;gap:8px;justify-content:center;margin-top:18px}
.lp-mock-srs{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.lp-mock-srs b{font-size:24px;font-weight:700}
.lp-grades{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.lp-grade{background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:10px 16px;display:flex;flex-direction:column;gap:2px;min-width:104px}
.lp-grade b{font-size:14.5px;font-weight:600}
.lp-grade i{font-style:normal;font-size:12.5px;color:var(--muted)}
.lp-grade.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.lp-grade.is-on i{color:var(--on-accent)}
.lp-legend{margin:14px 0 0}

/* ---------------------------------------------------------------- призыв */

.lp-cta{background:var(--accent);color:var(--on-accent);border-radius:26px;
  padding:48px 38px;margin:14px 0 40px}
.lp-cta-in{max-width:46em;display:flex;flex-direction:column;gap:14px}
.lp-cta h2{font-size:32px;line-height:1.18;font-weight:700;margin:0;letter-spacing:-.015em}
.lp-cta p{margin:0;font-size:17px;line-height:1.55;opacity:.92}
.lp-cta-btn{align-self:flex-start;background:var(--card);color:var(--accent);
  font-weight:700;padding:13px 26px;border-radius:14px;margin-top:6px}
.lp-cta-btn:hover{background:var(--surface-2)}
.lp-cta-points{list-style:none;margin:10px 0 0;padding:0;display:flex;gap:20px;
  flex-wrap:wrap;font-size:14px;opacity:.92}
.lp-cta-points li{display:flex;align-items:center;gap:7px}

/* --------------------------------------------------------------- телефон */

@media (max-width:980px){
  /* Порядок как в макете: заголовок и описание, затем форма, и только потом
     карточка слова. display:contents распускает левую колонку, чтобы её части
     можно было переставить вместе с формой одним потоком. */
  .lp-hero{display:flex;flex-direction:column;gap:18px}
  .lp-hero-text{display:contents}
  .lp-auth{order:2;position:static}
  .lp-word{order:3}
  .lp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-steps{grid-template-columns:1fr}
}
@media (max-width:620px){
  /* на телефоне шапка рассказа выровнена по центру, как в макете */
  .lp-badge{align-self:center}
  .lp-h1,.lp-lead{text-align:center}
  .lp-lead{margin-inline:auto}
  .lp-pairs{align-items:center}
  .lp-pairs .row-gap{justify-content:center}
  .lp-h1{font-size:27px}
  .lp-lead{font-size:16px}
  .lp-block{padding:34px 0}
  .lp-block-head h2{font-size:24px}
  .lp-cards{grid-template-columns:1fr}
  .lp-band{padding:28px 18px;border-radius:20px}
  .lp-cta{padding:32px 22px;border-radius:20px}
  .lp-cta h2{font-size:25px}
  .lp-cta-btn{align-self:stretch;text-align:center}
  .lp-word{padding:16px 17px}
  .lp-word-line b{font-size:25px}
  .lp-panel{padding:18px}
  .lp-mock{padding:16px}
}