/* ============================================================
   Посадочные под поисковые запросы (/foto-krossovok-na-modeli/ и т. д.).
   Генерирует scripts/landing-build.cjs из landing/pages.cjs; этот файл
   уезжает на сервер как /site/landing.css (с версией в адресе — /site/
   отдаётся с кэшем на месяц).

   Язык — тот же, что у витрины (src/landing.css, мир «Бирка»): Unbounded
   огромный, PT Mono на бирках только для измеримого, электрик заливает,
   фиолетовый градиент — знак ИИ, скруглений почти нет. Шапка и подвал —
   /site/chrome.css, оттуда же :root с --pad: поля страницы те же, что у
   шапки, левый край текста встаёт под знак.

   Чем посадочная отличается от статьи блога: первый экран — не заголовок и
   текст, а пара «до → после» и кнопка. Читать тут начинают со второго
   экрана, если вообще начинают.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: #fff; color: #0e0f12; min-height: 100vh;
  display: flex; flex-direction: column; -webkit-font-smoothing: antialiased;
  font: 17px/1.5 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
main.ld {
  flex: 1;
  --l-ink: #0e0f12; --l-ink-2: #4b5059; --l-ink-3: #7c818b;
  --l-hair: rgba(14, 15, 18, .14); --l-hair-2: rgba(14, 15, 18, .08);
  --l-blue: #2b3bff; --l-blue-ink: #c9cdff;
  --l-night: #0a0a0d; --l-night-2: #a4a6c2; --l-night-hair: rgba(255, 255, 255, .14);
  --l-ai-1: #4b3bff; --l-ai-2: #a83bff;
  --l-gx: var(--pad, clamp(20px, 4vw, 56px));
  --l-disp: 'Unbounded', system-ui, sans-serif;
  --l-mono: 'PT Mono', ui-monospace, 'Courier New', monospace;
  --l-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- бирка, кнопка, лид — как на витрине ---------- */
.lp-tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 11px 7px 9px; background: #fff; color: var(--l-ink);
  font: 12.5px/1 var(--l-mono); letter-spacing: .005em; white-space: nowrap; border-radius: 2px;
  box-shadow: 0 1px 0 rgba(14, 15, 18, .10), 0 6px 18px -8px rgba(14, 15, 18, .35);
}
.lp-tag::before { content: ''; width: 7px; height: 7px; background: var(--l-blue); flex: none; }
.lp-tag.ai::before { background: linear-gradient(135deg, var(--l-ai-1), var(--l-ai-2)); }
.lp-tag.line { background: transparent; box-shadow: inset 0 0 0 1px var(--l-hair); }
.lp-tag.line.w { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); color: #fff; }
.lp-tag.line.w::before { background: #fff; }
.lp-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.lp-cta {
  display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 10px 0 22px;
  border-radius: 999px; background: var(--l-ink); color: #fff;
  font-weight: 600; font-size: 16px; text-decoration: none; border: 0; cursor: pointer;
  font-family: inherit; transition: background .2s, transform .3s var(--l-ease);
}
.lp-cta:hover { background: var(--l-blue); transform: translateY(-1px); }
.lp-cta .ico {
  width: 34px; height: 34px; border-radius: 999px; background: rgba(255, 255, 255, .14);
  display: grid; place-items: center; flex: none;
}
.lp-cta .ico svg { width: 16px; height: 16px; }

.lp-lead { font-size: clamp(17px, 1.25vw, 21px); line-height: 1.5; max-width: 60ch; color: var(--l-ink-2); margin: 0; text-wrap: pretty; }
.lp-lead b { color: var(--l-ink); font-weight: 600; }
.lp-pad { padding-left: var(--l-gx); padding-right: var(--l-gx); }

/* ---------- типографика ---------- */
.ld h1, .ld h2, .ld h3 { font-family: var(--l-disp); font-weight: 700; letter-spacing: -.03em; text-wrap: balance; margin: 0; }
.ld-h1 { font-size: clamp(32px, 4.6vw, 74px); line-height: 1; margin: 18px 0 20px; }
.ld-h2 { font-size: clamp(26px, 3vw, 46px); line-height: 1.05; margin-bottom: .5em; }
.ld-sect { padding-top: clamp(56px, 7vw, 120px); }
.ld-head { display: grid; gap: 14px; margin-bottom: clamp(20px, 2.4vw, 36px); }
@media (min-width: 1000px) {
  .ld-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .ld-head .lp-lead { max-width: 56ch; }
}

/* ---------- первый экран: текст слева, шторка справа ---------- */
.ld-hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); align-items: center;
  padding: clamp(24px, 3.6vw, 56px) var(--l-gx) clamp(40px, 5vw, 80px);
}
@media (min-width: 960px) { .ld-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
/* Шторка первого экрана не выше окна: при 2:3 и 620 px она уходила бы под
   сгиб на ноутбуке, и кнопка с заголовком опускались вместе с ней. */
.ld-hero .cmp { width: 100%; max-width: min(620px, calc((100svh - 150px) * .667)); margin: 0 auto; border-radius: 4px; }
@media (max-width: 959px) { .ld-hero .cmp { max-width: 520px; } }
.ld-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.ld-act .or { font: 12.5px/1.45 var(--l-mono); color: var(--l-ink-3); max-width: 30ch; }
.ld-hero .lp-tags { margin-top: 22px; }

/* ---------- полоса чисел ---------- */
.ld-strip { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--l-hair); border-bottom: 1px solid var(--l-hair); }
@media (min-width: 760px) { .ld-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ld-strip .c { padding: clamp(18px, 2.2vw, 36px) var(--l-gx); min-width: 0; }
.ld-strip .c + .c { border-top: 1px solid var(--l-hair); }
@media (min-width: 760px) { .ld-strip .c + .c { border-top: 0; border-left: 1px solid var(--l-hair); } }
.ld-strip .n { font: 700 clamp(30px, 3.4vw, 60px)/.95 var(--l-disp); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ld-strip .n small { font-size: .42em; font-weight: 500; letter-spacing: 0; color: var(--l-ink-3); }
.ld-strip .lab { margin-top: 10px; font: 12.5px/1.5 var(--l-mono); color: var(--l-ink-2); max-width: 40ch; }

/* ---------- ночная полоса: ещё кадры ---------- */
.ld-night { background: var(--l-night); color: #fff; padding: clamp(56px, 7vw, 120px) var(--l-gx); margin-top: clamp(56px, 7vw, 120px); }
.ld-night ::selection { background: #fff; color: var(--l-night); }
.ld-night .lp-lead { color: var(--l-night-2); }
.ld-night .lp-lead b { color: #fff; }
.ld-badge {
  display: inline-block; vertical-align: .12em; font: 600 .28em/1 var(--l-disp); letter-spacing: .06em;
  padding: .32em .5em .3em; border-radius: .3em; margin-right: .18em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--l-ai-1), var(--l-ai-2)); color: #fff;
}
/* Пока соседние пары не долиты, в ряду может стоять одна — потолок ширины
   не даёт ей раздуться во весь экран (2:3 на 1440 px = кадр в два экрана). */
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px; margin-top: clamp(24px, 3vw, 44px); }
.cmp-grid figure { margin: 0; min-width: 0; width: 100%; max-width: 560px; }
.cmp-grid figcaption { margin-top: 10px; font: 12.5px/1.5 var(--l-mono); color: var(--l-night-2); }
.ld-night .note { margin-top: 26px; font: 12.5px/1.6 var(--l-mono); color: var(--l-night-2); max-width: 72ch; }
.ld-night .note b { color: #fff; font-weight: 400; }

/* ---------- шторка «до → после» (src/ui/compare.css, без React) ---------- */
.cmp {
  position: relative; overflow: hidden; background: #141418; border-radius: 2px;
  cursor: ew-resize; touch-action: pan-y; user-select: none;
}
.cmp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-over { position: absolute; inset: 0; }
.cmp-bar {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); cursor: ew-resize;
}
.cmp-bar:focus-visible { outline: none; }
.cmp-bar:focus-visible .cmp-grip { box-shadow: 0 0 0 3px #2b3bff; }
.cmp-grip {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 999px; background: #fff; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6);
}
.cmp-grip::before, .cmp-grip::after { content: ''; position: absolute; top: 50%; margin-top: -5px; width: 0; height: 0; border: 5px solid transparent; }
.cmp-grip::before { border-right-color: #0e0f12; left: 7px; }
.cmp-grip::after { border-left-color: #0e0f12; right: 7px; }
.cmp-lab {
  position: absolute; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 11px 7px 9px; border-radius: 2px; background: #0e0f12; color: #fff;
  font: 12.5px/1 var(--l-mono); pointer-events: none;
}
.cmp-lab::before { content: ''; width: 7px; height: 7px; background: #fff; flex: none; }
.cmp-lab.l { left: 14px; }
.cmp-lab.r { right: 14px; }
.cmp-cap { position: absolute; left: 14px; bottom: 14px; z-index: 2; pointer-events: none; max-width: calc(100% - 28px); }
.cmp-cap .lp-tag { white-space: normal; line-height: 1.35; }
/* Место под кадр, которого ещё нет: та же рамка, знак скобок из логотипа —
   пустота читается как задумка, а не как недогруз. Страница с таким
   местом на первом экране выходит с noindex (см. landing-build.cjs). */
.cmp-wait { cursor: default; background: #eef0f3; display: grid; place-items: center; }
.cmp-wait .cmp-mark { width: 46%; max-width: 220px; height: auto; }
.cmp-wait .cmp-lab { background: rgba(14, 15, 18, .55); }
.cmp-wait .lp-tag.line.w { box-shadow: inset 0 0 0 1px rgba(14, 15, 18, .3); color: var(--l-ink-2); }
.cmp-wait .lp-tag.line.w::before { background: var(--l-ink-3); }

/* ---------- какое фото нужно ---------- */
.ld-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 72px); margin-top: clamp(20px, 2.4vw, 36px); }
@media (min-width: 1000px) { .ld-rows { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Картинка-подсказка: листы режутся клетками 800×655…800×873 (poses-slice.cjs),
   поэтому слот квадратный, картинка вписывается ЦЕЛИКОМ (contain) — 09.09
   владелец: «превьюшки мелкие и пережатые»: 76 px с object-fit: cover резали
   рисунок до середины, и присевшая фигура с огромным кроссовком превращалась
   в серое пятно. Фон слота белый — такой же, как фон листа. */
.ld-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-top: 1px solid var(--l-hair); align-items: start; }
.ld-row.nopic { grid-template-columns: minmax(0, 1fr); }
.ld-row img { width: 120px; height: 120px; object-fit: contain; background: #fff; box-shadow: inset 0 0 0 1px var(--l-hair); border-radius: 6px; display: block; }
.ld-row b { display: block; font: 600 16px/1.25 var(--l-disp); letter-spacing: -.02em; margin-bottom: 5px; }
.ld-row p { margin: 0; color: var(--l-ink-2); font-size: 15.5px; line-height: 1.45; }
.ld-row p em { font-style: normal; color: var(--l-ink); font-weight: 500; }
.ld-rows > .ld-row:last-child { border-bottom: 1px solid var(--l-hair); }
@media (min-width: 1000px) { .ld-rows > .ld-row:nth-last-child(-n+2) { border-bottom: 1px solid var(--l-hair); } }

/* ---------- как это работает ---------- */
.ld-how ol { list-style: none; counter-reset: s; margin: clamp(20px, 2.4vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 56px); }
@media (min-width: 900px) { .ld-how ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ld-how li { counter-increment: s; padding: 18px 0 22px; border-top: 1px solid var(--l-hair); font-size: 16px; line-height: 1.5; color: var(--l-ink-2); }
.ld-how li::before { content: counter(s, decimal-leading-zero); display: block; margin-bottom: 10px; font: 12.5px/1 var(--l-mono); color: var(--l-blue); }
.ld-how li b { color: var(--l-ink); font-weight: 600; }

/* ---------- сколько стоит ---------- */
.ld-price { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); margin-top: clamp(20px, 2.4vw, 36px); }
@media (min-width: 960px) { .ld-price { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.ld-price .big { font: 700 clamp(56px, 8vw, 132px)/.9 var(--l-disp); letter-spacing: -.05em; white-space: nowrap; }
.ld-price .big small { font-size: .38em; font-weight: 500; letter-spacing: -.02em; color: var(--l-ink-3); }
.ld-price .txt { margin-top: 18px; color: var(--l-ink-2); font-size: 16px; line-height: 1.55; max-width: 52ch; }
.ld-price .txt b { color: var(--l-ink); font-weight: 600; }
.ld-price .txt p { margin: 0 0 12px; }
.ld-vs { display: grid; grid-template-columns: minmax(0, 1fr); font: 13px/1.45 var(--l-mono); align-self: end; }
.ld-vs > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; padding: 12px 0; border-top: 1px solid var(--l-hair); color: var(--l-ink-2); }
.ld-vs > div:last-child { border-bottom: 1px solid var(--l-hair); }
.ld-vs > div > span:last-child { text-align: right; white-space: nowrap; color: var(--l-ink); }
.ld-vs > div.us { color: var(--l-ink); }
.ld-vs > div.us > span:last-child { color: var(--l-blue); }
.ld-vs .src { grid-column: 1 / -1; font-size: 11.5px; color: var(--l-ink-3); margin-top: -4px; }

/* ---------- вопросы ---------- */
.ld-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 80px); margin-top: clamp(16px, 2vw, 28px); }
@media (min-width: 900px) { .ld-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ld-faq .q { padding: clamp(20px, 2.2vw, 32px) 0; border-top: 1px solid var(--l-hair); }
.ld-faq h3 { font-size: clamp(18px, 1.4vw, 23px); line-height: 1.2; font-weight: 600; margin-bottom: 10px; }
.ld-faq p { color: var(--l-ink-2); font-size: 16px; line-height: 1.5; max-width: 56ch; margin: 0; }
.ld-faq p b { color: var(--l-ink); font-weight: 600; }

/* ---------- ещё ---------- */
.ld-more { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); margin-top: clamp(16px, 2vw, 28px); }
@media (min-width: 900px) { .ld-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ld-more h3 { font: 600 clamp(18px, 1.4vw, 22px)/1.2 var(--l-disp); letter-spacing: -.025em; margin-bottom: 8px; }
.ld-more ul { list-style: none; margin: 0; padding: 0; }
.ld-more li { padding: 11px 0; border-top: 1px solid var(--l-hair); font-size: 16px; line-height: 1.4; }
.ld-more li:last-child { border-bottom: 1px solid var(--l-hair); }
.ld-more a { color: var(--l-ink); text-decoration: none; border-bottom: 1.5px solid rgba(14, 15, 18, .2); transition: .15s; }
.ld-more a:hover { color: var(--l-blue); border-color: var(--l-blue); }
.ld-more li small { display: block; margin-top: 2px; font: 12px/1.4 var(--l-mono); color: var(--l-ink-3); }

/* ---------- последний призыв ---------- */
.ld-final {
  margin: clamp(56px, 7vw, 120px) var(--l-gx) clamp(40px, 5vw, 80px);
  background: var(--l-ink); color: #fff; border-radius: 6px;
  padding: clamp(26px, 3.6vw, 60px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center;
}
@media (min-width: 900px) { .ld-final { grid-template-columns: minmax(0, 1fr) auto; } }
.ld-final h2 { font-size: clamp(24px, 2.8vw, 44px); line-height: 1.05; }
.ld-final p { margin: 12px 0 0; color: var(--l-night-2); font-size: 16px; line-height: 1.5; max-width: 56ch; }
.ld-final .lp-cta { background: #fff; color: var(--l-ink); }
.ld-final .lp-cta:hover { background: var(--l-blue); color: #fff; }
.ld-final .lp-cta .ico { background: rgba(14, 15, 18, .1); }
.ld-final .lp-cta:hover .ico { background: rgba(255, 255, 255, .14); }

/* ---------- телефон ---------- */
@media (max-width: 520px) {
  .ld-h1 { font-size: clamp(28px, 8.6vw, 38px); overflow-wrap: anywhere; }
  .lp-tags .lp-tag { white-space: normal; line-height: 1.35; }
  .ld-strip .n { white-space: normal; }
  .ld-price .big { font-size: 64px; }
  /* «от 16,5 ₽ за кадр» одной строкой шире 390 px (nowrap) и тянуло страницу
     вбок (10.10) — подпись встаёт под число */
  .ld-price .big small { display: block; margin-top: 10px; }
  .ld-row { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .ld-row img { width: 88px; height: 88px; }
}
@media (prefers-reduced-motion: reduce) { .lp-cta { transition: none; } }
@media print { .hdr, .ftr, .ck-bar, .ld-final { display: none; } }

/* ---------- сет для карточки (03.10) ----------
   Исходник с телефона и кадры сета в один ряд; исходник — в пунктирной рамке
   («это ваше фото»), у кадров номер. Рисует landing-build.cjs (setHtml). */
.ld-set-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ld-set-row figure { margin: 0; min-width: 0; }
.ld-set-row img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--l-hair); }
.ld-set-row .src img { outline: 1.5px dashed var(--l-ink-3); outline-offset: 3px; }
.ld-set-row figcaption { margin-top: 8px; font: 12.5px/1.4 var(--l-mono); color: var(--l-ink-2); }
.ld-set-row figcaption b { color: var(--l-blue); font-weight: 700; margin-right: 6px; }
.ld-set .note { margin-top: 18px; font: 12.5px/1.5 var(--l-mono); color: var(--l-ink-3); }
@media (max-width: 760px) { .ld-set-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- тёмная тема (03.10) ----------
   Шапка сайта переключает тему кнопкой (site/chrome/header.html, ключ
   dropcrop.theme), и в тёмной теме шапка и подвал становятся тёмными. Без
   этого блока посадочная под ними оставалась белой — меню выглядело чужим
   (владелец 03.10). Палитра — та же, что у блога (admin/blog.css). Ночная
   полоса и шторки уже тёмные; переворачиваются чернила, линии, бирки и кнопки:
   у кнопки фон — var(--l-ink), и без своей строки она стала бы белой с белым
   текстом. */
[data-theme='dark'] body { background: #101216; color: #f1f3f7; }
[data-theme='dark'] main.ld {
  --l-ink: #f1f3f7; --l-ink-2: #b4bac5; --l-ink-3: #8e97a6;
  --l-hair: rgba(255, 255, 255, .14); --l-hair-2: rgba(255, 255, 255, .08);
  --l-blue: #6879ff;
}
[data-theme='dark'] .lp-tag { background: #1e2129; color: #f1f3f7; box-shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 6px 18px -8px rgba(0, 0, 0, .7); }
[data-theme='dark'] .lp-cta { background: #f1f3f7; color: #111318; }
[data-theme='dark'] .lp-cta .ico { background: rgba(17, 19, 24, .12); }
[data-theme='dark'] .lp-cta:hover { background: #4254ff; color: #fff; }
[data-theme='dark'] .lp-cta:hover .ico { background: rgba(255, 255, 255, .14); }
[data-theme='dark'] .ld-night { background: #0a0a0d; border-top: 1px solid rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .06); }
[data-theme='dark'] .cmp-wait { background: #1e2129; }
[data-theme='dark'] .ld-more a { border-bottom-color: rgba(255, 255, 255, .22); }
[data-theme='dark'] .ld-final { background: #16181e; border: 1px solid rgba(255, 255, 255, .08); }
[data-theme='dark'] .ld-final .lp-cta { background: #f1f3f7; color: #111318; }
[data-theme='dark'] .ld-final .lp-cta:hover { background: #4254ff; color: #fff; }