/* lolq.ai — главная страница (витрина + воронка).
   Материалы те же, что в студии («солнечная кузница»), но на две ступени
   тише: обводки 1–2px вместо 2.5, офсет 1–3px вместо 7, огонь — один
   сплошной на экран. Всё, что здесь объявлено, живёт только внутри
   `.landing`: студию этот файл не трогает.
   Подключается ПОСЛЕ style.css — значит перебивает его при равной силе. */

/* Токены объявлены и на :root, и на .landing. Дубль не лишний: nav.css
   подключается последним и переопределяет часть тех же имён (--edge, --fire-*,
   --lift-*) в своём :root. Объявление прямо на .landing выигрывает у
   унаследованного от :root — главная не поедет, что бы ни пришло следом. */
:root, .landing {
  /* ── пространство: 4/8/12/16/24/32/48, дробей нет ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px;
  --ld-max: 1180px;

  /* ── типографика: 7 кеглей ── */
  --fs-meta: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 18px;  --fs-xl: 22px; --fs-2xl: clamp(30px, 4.6vw, 44px);
  --ls-caps: .06em; --ls-head: -.01em;

  /* ── обводки: три уровня ── */
  --edge: #2d211a;
  --bw-hair: 1px; --bw-edge: 1.5px; --bw-hero: 2px;
  --line: rgba(45, 33, 26, .12);
  --line-strong: rgba(45, 33, 26, .20);

  /* ── тени: офсет 1–3px у предметов, блюр только у парящего ── */
  --lift-1: 0 1px 0 var(--edge);
  --lift-2: 0 2px 0 var(--edge);
  --lift-3: 0 3px 0 var(--edge);
  --shadow-soft: 0 8px 20px -14px rgba(90, 52, 24, .28);
  --shadow-lift: 0 18px 40px -26px rgba(90, 52, 24, .40);
  --glow-cta: 0 6px 16px -8px rgba(207, 34, 34, .28);

  /* ── радиусы: потолок 18 ── */
  --r-1: 8px; --r-2: 10px; --r-3: 14px; --r-4: 18px;

  /* ── чернильные дублёры марки: всё, что несёт текст ── */
  --accent-ink: #cf2222;
  --accent-2-ink: #c1401b;
  --gold-ink: #8a5a2b;
  --ink-muted: #6f5f52;
  --accent-wash: rgba(207, 34, 34, .08);
  --accent-line: rgba(207, 34, 34, .22);
  --gold-wash: rgba(255, 181, 69, .18);
  --ok-ink: #0f7a52;

  /* ── поверхности ── */
  --surface: #fffdf9;
  --surface-2: #f6f1e9;
  --on-accent: #fff;

  /* ── огонь: один сплошной на экран ── */
  --fire-ink: linear-gradient(180deg, #d92626, #b3261e);
  --fire-hot: linear-gradient(90deg, var(--gold), var(--accent-2), var(--accent));

  --ring: 0 0 0 3px rgba(207, 34, 34, .22);
  --t: .14s; --ease: cubic-bezier(.2, .7, .3, 1);
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) { :root { --t: 0s; } }

/* ────────── каркас страницы ────────── */
.landing {
  --muted: var(--ink-muted);        /* .muted внутри лендинга читается (5.7:1) */
  display: block; min-height: 100vh;
  font-size: var(--fs-base); line-height: 1.55;
}
/* Прокрутку по якорям сглаживаем на документе — скроллится он, а не .landing */
html:has(#welcome:not(.hidden)) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(#welcome:not(.hidden)) { scroll-behavior: auto; } }
/* Кольцо фокуса даём аутлайном, а не тенью: тень у кнопок несёт объём —
   подменять её кольцом значит ронять кнопку при переходе табом. */
.landing :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.ld-shell { width: 100%; max-width: var(--ld-max); margin: 0 auto; padding: 0 var(--s-6); }

/* якоря не уезжают под плавающую шапку */
.landing [id] { scroll-margin-top: 88px; }

.ld-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); border: var(--bw-hero) solid var(--edge);
  border-radius: var(--r-2); padding: var(--s-2) var(--s-3); font-weight: 600;
}
.ld-skip:focus { left: var(--s-4); top: var(--s-4); }

/* ────────── шапка гостя: стекло плавает над контентом ────────── */
.ld-topbar { position: sticky; top: 10px; z-index: 60; padding: 0 var(--s-6); }
@media (max-width: 700px) { .ld-topbar { top: 6px; padding: 0 var(--s-3); } }

.ld-bar {
  max-width: var(--ld-max); margin: 0 auto;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4);
  border: var(--bw-hero) solid var(--edge); border-radius: var(--r-4);
  background: linear-gradient(180deg, rgba(255,252,247,.86), rgba(255,244,232,.76));
  box-shadow: 0 2px 0 var(--edge), var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(18px) saturate(1.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .ld-bar { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .ld-bar { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.ld-brand { display: flex; align-items: center; gap: var(--s-2); text-decoration: none; flex: none; }
.ld-brand img { display: block; width: 30px; height: 30px; }
.ld-brand-word {
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-lg);
  letter-spacing: var(--ls-head); color: var(--text);
}
.ld-brand-word .brand-dot { color: var(--accent-2); }

.ld-menu { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.ld-menu a {
  color: var(--ink-muted); text-decoration: none; font-size: var(--fs-base); font-weight: 500;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-2); white-space: nowrap;
}
.ld-menu a:hover { color: var(--text); background: rgba(45, 33, 26, .06); }
.ld-bar-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }
@media (max-width: 940px) { .ld-menu { display: none; } .ld-bar-actions { margin-left: auto; } }

/* ────────── кнопки: та же физика, но ход 2px ────────── */
.landing button {
  font-family: inherit; font-size: var(--fs-base); font-weight: 600;
  color: var(--text); background: var(--surface);
  border: var(--bw-edge) solid var(--edge); border-radius: var(--r-2);
  box-shadow: var(--lift-2); min-height: 40px; padding: 0 var(--s-4);
  transition: transform var(--t), box-shadow var(--t), background var(--t), filter var(--t);
}
.landing button:hover:not(:disabled) { background: #fff; }
.landing button:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.landing button.primary,
.landing button.primary:hover:not(:disabled) {
  color: var(--on-accent); background: var(--fire-ink);
  border-width: var(--bw-hero); box-shadow: var(--lift-3), var(--glow-cta);
}
.landing button.primary:hover:not(:disabled) { filter: brightness(1.06); }
.landing button.primary:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.landing button.ghost {
  background: transparent; border: none; box-shadow: none;
  color: var(--ink-muted); font-weight: 500; padding: 0 var(--s-3);
}
.landing button.ghost:hover:not(:disabled) { color: var(--text); background: rgba(45,33,26,.06); }
.landing button:disabled { opacity: .5; cursor: default; box-shadow: none; filter: none; }
.ld-cta { min-height: 48px; font-size: var(--fs-md); padding: 0 var(--s-6); }

/* ────────── секции ────────── */
/* padding-block, а не padding: у секции те же классы, что у .ld-shell, и
   короткая запись обнуляла бы его горизонтальные поля — на окне ≤1180px
   текст упирался бы в край экрана. */
.ld-sec { padding-block: var(--s-12); border-top: var(--bw-hair) solid var(--line); }
.ld-sec:first-of-type { border-top: none; }
.ld-sec-head { max-width: 640px; margin-bottom: var(--s-8); }
.ld-eyebrow {
  display: block; font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 var(--s-2);
}
.ld-h2 {
  margin: 0; font-family: var(--font-head); font-size: var(--fs-xl);
  font-weight: 600; letter-spacing: var(--ls-head); line-height: 1.25;
}
.ld-lead { margin: var(--s-3) 0 0; color: var(--ink-muted); font-size: var(--fs-md); max-width: 62ch; }

/* ────────── первый экран ────────── */
.ld-hero { padding-block: var(--s-8) var(--s-12); }
.ld-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: var(--s-12); align-items: center;
}
.ld-hero-h1 {
  margin: var(--s-3) 0 0; font-family: var(--font-head);
  font-size: var(--fs-2xl); font-weight: 700; line-height: 1.08;
  letter-spacing: var(--ls-head);
}
.ld-hero-sub { margin: var(--s-4) 0 0; font-size: var(--fs-md); color: var(--ink-muted); max-width: 46ch; }
.ld-hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.ld-hero-trust {
  margin: var(--s-4) 0 0; font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-caps); color: var(--ink-muted); text-transform: uppercase;
}
.ld-hero-more { margin: var(--s-3) 0 0; font-size: var(--fs-sm); }
.ld-hero-more a { color: var(--accent-2-ink); text-underline-offset: 3px; }

.ld-tag {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--accent-ink);
  background: var(--accent-wash); border: var(--bw-hair) solid var(--accent-line);
  border-radius: 999px; padding: 5px var(--s-3);
}

/* плашка «пришёл по приглашению» */
.landing .welcome-ref {
  display: block; margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-3); font-size: var(--fs-base); text-align: left;
  background: var(--gold-wash); border: var(--bw-hair) solid var(--line-strong); color: var(--text);
}
.landing .welcome-ref b {
  font-family: var(--font-mono); letter-spacing: .1em; color: var(--gold-ink);
}

/* доказательство продукта: кадр-клип и сетка кадров одного трека */
.ld-proof {
  background: var(--surface); border: var(--bw-hair) solid var(--line);
  border-radius: var(--r-4); padding: var(--s-4); box-shadow: var(--shadow-lift);
}
.ld-proof-main {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: var(--s-4); align-items: stretch;
}
.ld-phone {
  margin: 0; position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border: var(--bw-hero) solid var(--edge); border-radius: var(--r-4);
  background: #14100d; box-shadow: var(--lift-3);
}
.ld-phone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-phone figcaption {
  position: absolute; left: var(--s-2); bottom: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-caps);
  color: #fff; background: rgba(20, 16, 13, .62); border-radius: var(--r-1);
  padding: 2px 6px; backdrop-filter: blur(4px);
}
/* Сетка кадров тянется по высоте кадра-клипа: композиция из двух прямоугольников
   читается спокойнее, чем «телефон и обрезок рядом». */
.ld-frames {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: var(--s-2);
}
.ld-frames li { margin: 0; min-height: 0; }
.ld-frames img {
  display: block; width: 100%; height: 100%; min-height: 90px; object-fit: cover;
  border: var(--bw-edge) solid var(--edge); border-radius: var(--r-1); background: var(--surface-2);
}
.ld-proof-cap {
  margin: var(--s-3) 0 0; font-size: var(--fs-sm); color: var(--ink-muted);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: baseline;
}
.ld-proof-cap b {
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--text); font-weight: 700;
}

/* ────────── как это работает ────────── */
.ld-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-12); }
.ld-step {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--s-8); align-items: center;
}
.ld-step:nth-child(even) .ld-step-copy { order: 2; }
.ld-step-n {
  display: block; font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-caps); color: var(--accent-2-ink); font-weight: 700;
}
.ld-step h3 {
  margin: var(--s-2) 0 0; font-family: var(--font-head); font-size: var(--fs-lg);
  font-weight: 600; letter-spacing: var(--ls-head);
}
.ld-step p { margin: var(--s-2) 0 0; color: var(--ink-muted); }
.ld-step .ld-step-meta {
  margin-top: var(--s-3); font-family: var(--font-mono);
  font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.ld-shot {
  margin: 0; overflow: hidden; background: var(--surface-2);
  border: var(--bw-edge) solid var(--edge); border-radius: var(--r-3); box-shadow: var(--lift-2);
}
.ld-shot img { display: block; width: 100%; height: auto; }

/* ────────── что внутри ────────── */
.ld-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.ld-feat {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4); background: var(--surface);
  border: var(--bw-hair) solid var(--line); border-radius: var(--r-3);
}
.ld-feat h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; letter-spacing: var(--ls-head); }
.ld-feat p { margin: 0; color: var(--ink-muted); font-size: var(--fs-base); }
.ld-feat-tag {
  align-self: flex-start; margin-top: auto;
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--gold-ink);
  background: var(--gold-wash); border-radius: 999px; padding: 3px var(--s-2);
}
.ld-feat-wide { grid-column: span 2; flex-direction: row; align-items: center; gap: var(--s-4); }
.ld-feat-wide .ld-feat-copy { flex: 1 1 46%; display: flex; flex-direction: column; gap: var(--s-2); }
.ld-feat-wide img {
  flex: 1 1 54%; min-width: 0; display: block; width: 100%; height: auto;
  border: var(--bw-edge) solid var(--edge); border-radius: var(--r-2); background: var(--surface-2);
}

/* ────────── тарифы ────────── */
.ld-period {
  display: inline-flex; gap: var(--s-1); padding: var(--s-1);
  background: var(--surface-2); border: var(--bw-hair) solid var(--line);
  border-radius: var(--r-3); margin-bottom: var(--s-6);
}
.landing .ld-period button {
  min-height: 36px; padding: 0 var(--s-4); border: none; box-shadow: none;
  background: transparent; color: var(--ink-muted); font-size: var(--fs-base);
}
.landing .ld-period button:hover:not(:disabled) { background: rgba(45,33,26,.05); color: var(--text); }
.landing .ld-period button.on,
.landing .ld-period button.on:hover:not(:disabled) {
  background: var(--surface); color: var(--text); font-weight: 600;
  border: var(--bw-edge) solid var(--edge); box-shadow: var(--lift-1);
}
.ld-period .ld-save {
  font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--accent-ink);
  letter-spacing: var(--ls-caps); margin-left: var(--s-1);
}

.ld-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); align-items: stretch; }
.ld-plan {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4); background: var(--surface);
  border: var(--bw-edge) solid var(--line-strong); border-radius: var(--r-3);
  box-shadow: var(--lift-1);
}
.ld-plan-hi { border: var(--bw-hero) solid var(--edge); box-shadow: var(--lift-3); }
.ld-plan-badge {
  position: absolute; top: calc(-1 * var(--s-3)); right: var(--s-3);
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-caps);
  text-transform: uppercase; font-weight: 700; color: var(--text);
  background: var(--gold-wash); border: var(--bw-hair) solid var(--line-strong);
  border-radius: 999px; padding: 3px var(--s-3);
}
.ld-plan-name {
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--ink-muted); font-weight: 700;
}
.ld-plan-price {
  font-family: var(--font-head); font-size: 30px; font-weight: 700;
  letter-spacing: var(--ls-head); line-height: 1.1; color: var(--text);
}
.ld-plan-price span { font-size: var(--fs-base); font-weight: 500; color: var(--ink-muted); }
.ld-plan-year { font-size: var(--fs-sm); color: var(--ink-muted); min-height: 18px; }
.ld-plan-clips {
  align-self: flex-start; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-ink);
  background: var(--accent-wash); border: var(--bw-hair) solid var(--accent-line);
  border-radius: var(--r-1); padding: 3px var(--s-2);
}
.ld-plan-note { margin: 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.ld-plan-feats {
  list-style: none; margin: var(--s-2) 0 var(--s-3); padding: 0;
  display: flex; flex-direction: column; gap: var(--s-2);
  font-size: var(--fs-sm); color: var(--text);
}
.ld-plan-feats li { display: flex; gap: var(--s-2); align-items: baseline; }
.ld-plan-feats li::before { content: "✓"; color: var(--ok-ink); font-weight: 700; flex: none; }
.landing .ld-plan button { margin-top: auto; width: 100%; }
.ld-plan-cur {
  margin-top: auto; text-align: center; font-family: var(--font-mono);
  font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--ink-muted); border: var(--bw-hair) dashed var(--line-strong);
  border-radius: var(--r-2); padding: var(--s-3) 0;
}
.ld-pay-note { margin: var(--s-4) 0 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.ld-pay-note.error { color: var(--danger); }

/* ────────── докупка очков: шкала ────────── */
.ld-scale-box {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: var(--s-8); align-items: center;
  background: var(--surface); border: var(--bw-hair) solid var(--line);
  border-radius: var(--r-4); padding: var(--s-6);
}
.ld-scale { display: flex; flex-direction: column; gap: var(--s-4); }
.ld-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 999px; background: var(--surface-2); cursor: pointer; margin: 0;
  border: var(--bw-hair) solid var(--line);
}
.ld-range:focus-visible { box-shadow: var(--ring); }
.ld-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); border: var(--bw-hero) solid var(--edge);
  box-shadow: var(--lift-2); cursor: grab; margin-top: -11px;
}
.ld-range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); border: var(--bw-hero) solid var(--edge); cursor: grab;
}
.ld-ticks { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-1); }
.landing .ld-ticks button {
  min-height: 44px; padding: var(--s-1) 2px; border: none; box-shadow: none; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .04em;
  color: var(--ink-muted); border-radius: var(--r-1);
}
.landing .ld-ticks button:hover:not(:disabled) { background: rgba(45,33,26,.05); color: var(--text); }
.landing .ld-ticks button.on { color: var(--accent-ink); font-weight: 700; background: var(--accent-wash); }
.ld-tick-sub { font-size: 9px; letter-spacing: 0; opacity: .8; }

.ld-readout {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4); background: var(--surface-2);
  border: var(--bw-edge) solid var(--edge); border-radius: var(--r-3); box-shadow: var(--lift-2);
}
.ld-readout-price {
  font-family: var(--font-head); font-size: 34px; font-weight: 700; line-height: 1;
  letter-spacing: var(--ls-head);
}
.ld-readout-price span { font-size: var(--fs-base); font-weight: 500; color: var(--ink-muted); }
.ld-readout-points {
  font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--ink-muted);
}
.ld-readout ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-sm); }
.ld-readout .ld-save-badge {
  align-self: flex-start; font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--gold-ink);
  background: var(--gold-wash); border-radius: 999px; padding: 3px var(--s-2);
}
.ld-scale-note { margin: var(--s-4) 0 0; font-size: var(--fs-sm); color: var(--ink-muted); }

/* ────────── ULTRA: шкала объёма внутри карточки тарифа ──────────
   Компонент шкалы переиспользован из докупки очков (.ld-range + .ld-ticks):
   второй ползунок с нуля означал бы вторую реализацию тех же состояний.
   Отличий два — тиков четыре вместо пяти, и на узкой карточке ползунок
   прячется: 26-пиксельный бегунок в колонке 260 px не попадает пальцем. */
.ld-plan-scale { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-1) 0; }
.ld-plan-scale .ld-range { height: 5px; }
.ld-plan-scale .ld-range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px; }
.ld-plan-scale .ld-range::-moz-range-thumb { width: 18px; height: 18px; }
.ld-tier-ticks { grid-template-columns: repeat(4, 1fr); }
.landing .ld-tier-ticks button { min-height: 32px; font-size: 11px; }
/* Колонка тарифа ~260 px: попасть пальцем в 20-пиксельный бегунок нельзя,
   поэтому на узких экранах ползунок скрыт и ступень выбирается тиками.
   На мобиле карточка снова широкая (одна колонка) — там ползунок вернётся. */
@media (min-width: 701px) and (max-width: 1180px) {
  .ld-plan-scale .ld-range { display: none; }
}

/* Зачёркнутая цена — ЧЕСТНАЯ: тот же объём по цене очка базовой ступени.
   Не выдуманный «якорь», а число из нашего же прайса. */
.ld-plan-was { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.ld-plan-was s { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-muted); }
.ld-plan-was .ld-save-badge {
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--gold-ink); background: var(--gold-wash);
  border-radius: 999px; padding: 2px var(--s-2); white-space: nowrap;
}

/* Расшифровка объёма в человеческих единицах: три строки в лицо,
   полная таблица под раскрытием. */
.ld-vol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px;
  font-size: var(--fs-sm); color: var(--text); }
.ld-vol li::before { content: "= "; color: var(--ink-muted); }
.ld-vol-all { font-size: var(--fs-sm); }
.ld-vol-all summary { cursor: pointer; color: var(--ink-muted); font-size: var(--fs-meta);
  font-family: var(--font-mono); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.ld-vol-all summary:hover { color: var(--text); }
.ld-vol-all .tw { overflow-x: auto; margin-top: var(--s-2); }
.ld-vol-all table { border-collapse: collapse; width: 100%; font-size: var(--fs-meta); }
.ld-vol-all td { padding: 3px var(--s-1); border-bottom: var(--bw-hair) solid var(--line);
  white-space: nowrap; color: var(--ink-muted); }
.ld-vol-all td:first-child { color: var(--text); white-space: normal; }

/* Приписка мелким под всей витриной: точный расчёт цены сцены. */
.ld-fine {
  margin: var(--s-4) 0 0; font-size: var(--fs-meta); line-height: 1.5;
  color: var(--ink-muted); max-width: 74ch;
}

/* ────────── партнёрка ────────── */
.ld-partner-box {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: var(--s-8); align-items: center;
  background: var(--surface); border: var(--bw-hair) solid var(--line);
  border-radius: var(--r-4); padding: var(--s-6);
}
.ld-partner-box ul { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.ld-partner-box li { display: flex; gap: var(--s-2); align-items: baseline; font-size: var(--fs-base); }
.ld-partner-box li::before { content: "·"; color: var(--accent-ink); font-weight: 700; }
.ld-partner-box b { color: var(--text); }
.ld-partner-act { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }

/* ────────── FAQ ────────── */
.ld-faq { border-top: var(--bw-hair) solid var(--line); }
.ld-q { border-bottom: var(--bw-hair) solid var(--line); }
.ld-q > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s-4);
  min-height: 56px; padding: var(--s-3) 0; font-size: var(--fs-md); font-weight: 600;
  letter-spacing: var(--ls-head);
}
.ld-q > summary::-webkit-details-marker { display: none; }
.ld-q > summary::after {
  content: "+"; margin-left: auto; flex: none; font-family: var(--font-mono);
  font-size: var(--fs-lg); color: var(--ink-muted); line-height: 1;
}
.ld-q[open] > summary::after { content: "−"; color: var(--accent-ink); }
.ld-q > summary:hover { color: var(--accent-2-ink); }
.ld-a { margin: 0 0 var(--s-4); padding-right: var(--s-8); color: var(--ink-muted); max-width: 78ch; }

/* ────────── подвал ────────── */
.ld-foot { border-top: var(--bw-hair) solid var(--line); padding: var(--s-8) 0 var(--s-12); margin-top: var(--s-8); }
.ld-foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: var(--s-8); align-items: start;
}
.ld-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.ld-foot-about p { margin: var(--s-3) 0 0; color: var(--ink-muted); font-size: var(--fs-sm); max-width: 34ch; }
.ld-foot-col h4 {
  margin: 0 0 var(--s-3); font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-muted); font-weight: 700;
}
.ld-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.ld-foot-col a, .landing .ld-foot-col button {
  color: var(--text); text-decoration: none; font-size: var(--fs-base);
  background: none; border: none; box-shadow: none; padding: 0; min-height: 0;
  font-weight: 400; text-align: left; cursor: pointer;
}
.ld-foot-col a:hover, .landing .ld-foot-col button:hover:not(:disabled) {
  color: var(--accent-2-ink); background: none; text-decoration: underline; text-underline-offset: 3px;
}
.ld-link-off { color: var(--ink-muted); display: inline-flex; align-items: baseline; gap: var(--s-2); }
/* Метка «скоро» рисуется разметкой, а не CSS-content: текст обязан переводиться
   вместе со всем остальным, а content из словаря не достать. */
.ld-link-off em {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--ls-caps); font-style: normal;
  text-transform: uppercase; color: var(--gold-ink); background: var(--gold-wash);
  border-radius: 999px; padding: 2px 6px;
}
.ld-foot-legal {
  margin-top: var(--s-8); padding-top: var(--s-4); border-top: var(--bw-hair) solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); align-items: baseline;
  font-size: var(--fs-sm); color: var(--ink-muted);
}
/* Правовые строки живут в своём контейнере (его перерисовывает смена языка),
   поэтому раскладку в строку держит он сам. */
#ld-foot-legal-text {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); align-items: baseline;
}
.landing .made-with {
  position: static; margin-left: auto; opacity: .55; pointer-events: none;
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .12em;
  color: var(--ink-muted); text-shadow: none;
}

/* ────────── мобильная версия: одна колонка, тапабельные зоны ────────── */
@media (max-width: 940px) {
  .ld-hero-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .ld-step, .ld-step:nth-child(even) .ld-step-copy { grid-template-columns: 1fr; order: 0; }
  .ld-step { gap: var(--s-4); }
  .ld-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-feat-wide { grid-column: span 2; }
  .ld-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-scale-box, .ld-partner-box { grid-template-columns: 1fr; gap: var(--s-6); }
  .ld-foot-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 700px) {
  .ld-shell { padding: 0 var(--s-4); }
  .ld-sec { padding-block: var(--s-8); }
  .ld-sec-head { margin-bottom: var(--s-6); }
  .ld-hero { padding-block: var(--s-6) var(--s-8); }
  .ld-hero-actions { flex-direction: column; align-items: stretch; }
  .landing .ld-hero-actions button { width: 100%; }
  .ld-proof { padding: var(--s-3); }
  .ld-proof-main { grid-template-columns: 1fr; gap: var(--s-3); }
  .ld-phone { max-width: 240px; margin: 0 auto; }
  .ld-feats { grid-template-columns: 1fr; }
  .ld-feat-wide { grid-column: span 1; flex-direction: column; align-items: stretch; }
  .ld-plans { grid-template-columns: 1fr; }
  .ld-plan-badge { top: calc(-1 * var(--s-2)); }
  /* На одной колонке карточка широкая — ползунок объёма помещается целиком
     и работает пальцем; тики остаются для точного попадания. */
  .landing .ld-tier-ticks button { min-height: 44px; }
  .ld-scale-box, .ld-partner-box { padding: var(--s-4); }
  .ld-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .ld-a { padding-right: 0; }
  /* Тапабельные зоны: на телефоне всё кликаемое — не меньше 44px по высоте.
     Ссылки-строчки для этого получают inline-flex и высоту, а не отступы,
     иначе они разъезжают колонки подвала. */
  .landing button { min-height: 44px; }
  .landing .ld-period button { min-height: 44px; }
  .ld-foot-col a, .landing .ld-foot-col button, .ld-hero-more a, .ld-link-off {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .ld-brand { min-height: 44px; }
  .ld-brand img { width: 26px; height: 26px; }
  .ld-brand-word { font-size: var(--fs-md); }
  .landing [id] { scroll-margin-top: 72px; }
}

/* Фон главной: одна тёплая засветка сверху справа и нейтральная сетка 64px —
   вместо трёх радиалов и оранжевой миллиметровки студии. */
body:has(#welcome:not(.hidden)) {
  background:
    radial-gradient(1100px 520px at 88% -14%, rgba(255, 122, 41, .10), transparent 62%),
    linear-gradient(rgba(45, 33, 26, .030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 33, 26, .030) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 64px 64px, 64px 64px, auto;
}
@media (max-width: 700px) {
  body:has(#welcome:not(.hidden)) {
    background: radial-gradient(700px 380px at 90% -10%, rgba(255, 122, 41, .10), transparent 62%), var(--bg);
  }
}

/* ────────── переключатель языка на главной ──────────
   Базовые стили лежат в style.css; здесь снимаем «кнопочную» физику лендинга
   (min-height 40px, офсет), которая иначе раздувает капсулу в шапке. */
.landing .lang-switch {
  padding: 2px; border-radius: 999px; gap: 2px;
  border: var(--bw-edge) solid var(--edge); background: var(--surface);
  box-shadow: var(--lift-1);
}
.landing .lang-switch button {
  min-height: 26px; padding: 0 var(--s-2); border: none; border-radius: 999px;
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 700;
  letter-spacing: var(--ls-caps); color: var(--ink-muted);
  background: transparent; box-shadow: none;
}
.landing .lang-switch button:hover:not(:disabled) { background: rgba(45, 33, 26, .06); color: var(--text); }
.landing .lang-switch button:active:not(:disabled) { transform: none; box-shadow: none; }
.landing .lang-switch button.on,
.landing .lang-switch button.on:hover:not(:disabled) {
  color: var(--on-accent); background: var(--accent-ink);
}
.ld-foot-about .lang-switch { margin-top: var(--s-4); }

/* Английские строки длиннее русских: тарифная кнопка и бейдж не должны
   разрывать карточку — переносим слово, а не выпираем за край. */
.ld-plan-badge, .ld-tick-sub { white-space: nowrap; }
.landing .ld-plan-pay, .landing .ld-plan-start, .landing .ld-pack-buy {
  white-space: normal; line-height: 1.2; padding: var(--s-2) var(--s-3);
}

/* ────────── мобильная шапка: было переполнение на 65px ──────────
   На 375px в строку не влезали марка + язык + «Войти» + CTA, и страница
   уезжала вбок (scrollWidth 440 при вьюпорте 375). CTA из шапки убираем:
   ровно та же кнопка стоит в первом экране на два пальца ниже, дублировать
   её на телефоне незачем. Остальное ужимаем. */
@media (max-width: 700px) {
  .ld-bar { gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3); }
  .ld-brand img { width: 26px; height: 26px; }
  .ld-brand-word { font-size: var(--fs-base); }
  .ld-bar-actions { gap: var(--s-1); margin-left: auto; min-width: 0; }
  #ld-nav-start { display: none; }
  #ld-nav-login { padding: 8px 12px; font-size: var(--fs-sm); white-space: nowrap; }
  .lang-switch button { padding: 5px 9px; font-size: var(--fs-meta); }
}
/* Ни одна секция не имеет права раздвигать страницу вбок: горизонтальный
   скролл на телефоне читается как сломанная вёрстка. */
.landing { overflow-x: clip; }

/* ══════════════════ РАЗДЕЛ «ПРОМТЫ»: вкладки и плитки ══════════════════
   Карточки рисует app.js из /api/styles. Постер — единственная тяжёлая
   вещь на плитке, поэтому он lazy и с фиксированным соотношением: без
   height картинка на загрузке дёргает всю сетку. */
.ld-tabs {
  display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-5);
}
.landing .ld-tabs button {
  min-height: 34px; padding: 0 var(--s-3); border: var(--bw-hair) solid var(--line);
  background: var(--surface); color: var(--ink-muted); box-shadow: none;
  border-radius: 999px; font-size: var(--fs-sm);
}
.landing .ld-tabs button:hover:not(:disabled) { color: var(--text); border-color: var(--line-strong); }
.landing .ld-tabs button.on {
  background: var(--accent-wash); color: var(--accent-ink);
  border-color: var(--edge); font-weight: 600;
}

.ld-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s-3); align-items: stretch;
}
.ld-card {
  display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3);
  background: var(--surface); border: var(--bw-hair) solid var(--line);
  border-radius: var(--r-3); box-shadow: var(--lift-1);
}
.ld-card h3 { margin: 0; font-size: var(--fs-md); line-height: 1.25; }
.ld-card-media {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: var(--r-2); background: var(--surface-2);
}
.ld-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-card-mark {
  position: absolute; top: var(--s-2); left: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--gold-ink); background: var(--gold-wash);
  border-radius: 999px; padding: 2px var(--s-2);
}
.ld-card-lock { left: auto; right: var(--s-2); color: var(--accent-ink); background: var(--accent-wash); }
.ld-card-preset .ld-card-mark { position: static; align-self: flex-start; }
.ld-card-gain { margin: 0; font-size: var(--fs-sm); line-height: 1.45; }
.ld-card-meta { margin: 0; font-size: var(--fs-meta); line-height: 1.4; }
.ld-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ld-card-tags span {
  font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--ink-muted);
  background: var(--surface-2); border-radius: 999px; padding: 1px var(--s-2);
}
.ld-card-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); font-size: var(--fs-meta);
}
.landing .ld-card-foot button { min-height: 32px; padding: 0 var(--s-3); font-size: var(--fs-sm); }
.ld-card-preset ol { margin: var(--s-2) 0 0; padding-left: 1.1em; font-size: var(--fs-sm);
  color: var(--ink-muted); display: flex; flex-direction: column; gap: 3px; }

/* ══════════════════ РАЗДЕЛ «ШКОЛА»: уровни и уроки ══════════════════ */
.ld-learn-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4);
}
.ld-learn-level {
  padding: var(--s-4); background: var(--surface);
  border: var(--bw-hair) solid var(--line); border-radius: var(--r-3);
}
.ld-learn-level h3 {
  margin: 0 0 var(--s-2); font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-muted);
}
.ld-learn-level ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ld-learn-level li { display: flex; align-items: center; gap: var(--s-1);
  border-top: var(--bw-hair) solid var(--line); }
.ld-learn-level li:first-child { border-top: none; }
.landing .ld-learn-level li button {
  flex: 1; min-height: 44px; padding: var(--s-2) 0; border: none; box-shadow: none;
  background: transparent; text-align: left; display: flex; flex-direction: column; gap: 1px;
}
.landing .ld-learn-level li button:hover:not(:disabled) { background: transparent; }
.landing .ld-learn-level li button:hover .ld-learn-t { color: var(--accent-ink); }
.ld-learn-t { font-size: var(--fs-base); color: var(--text); }
.ld-learn-m { font-size: var(--fs-meta); font-family: var(--font-mono); }
.ld-learn-level li.locked .ld-learn-t { color: var(--ink-muted); }
.ld-learn-perma { font-size: var(--fs-sm); color: var(--ink-muted); text-decoration: none; padding: 0 var(--s-1); }
.ld-learn-perma:hover { color: var(--accent-ink); }

/* Урок в модалке: читаемая колонка, широкие таблицы скроллятся внутри себя. */
.ld-lesson { max-width: 68ch; line-height: 1.6; }
.ld-lesson h1 { font-size: var(--fs-xl); margin: 0 0 var(--s-3); }
.ld-lesson h2 { font-size: var(--fs-lg); margin: var(--s-5) 0 var(--s-2); }
.ld-lesson h3 { font-size: var(--fs-md); margin: var(--s-4) 0 var(--s-1); }
.ld-lesson p, .ld-lesson ul, .ld-lesson ol { margin: 0 0 var(--s-3); }
.ld-lesson code { font-family: var(--font-mono); font-size: .92em; background: var(--surface-2);
  border-radius: var(--r-1); padding: 1px 4px; }
.ld-lesson .tw { overflow-x: auto; margin: 0 0 var(--s-3); }
.ld-lesson table { border-collapse: collapse; font-size: var(--fs-sm); }
.ld-lesson th, .ld-lesson td { padding: var(--s-1) var(--s-2); text-align: left;
  border-bottom: var(--bw-hair) solid var(--line); white-space: nowrap; }
.ld-lesson th { font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-muted); }
.ld-learn-gate {
  margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-3);
  background: var(--accent-wash); border: var(--bw-hair) solid var(--edge);
}
.ld-learn-gate p { margin: 0 0 var(--s-2); }