/* /litobzor landing only (loaded by litreviewLanding). PubWiki world: sage on
 * near-white, system sans, 6px corners, one primary action per screen.
 * Grouping by spacing, tint and type; a line only where it truly separates.
 * Icons: Phosphor regular (src/templates/icons.js), inline SVG. */

/* In-page jumps (hero buttons → «Стоимость», «Примеры») glide instead of
 * snapping (Nikita 2026-10-09). */
html:has(.lr-page) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.lr-page) { scroll-behavior: auto; } }

.lr-page {
  --sage-soft: #95b8a6;
  --tint: #f1f4f2;
  --panel-shadow: 0 1px 2px rgba(31, 42, 55, 0.05), 0 14px 32px -18px rgba(27, 67, 50, 0.3);
}
.lr-page ::selection { background: var(--sage-light); color: var(--ink); }
.lr-page :focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: 4px; }
.lr-page .content-section { margin-bottom: 3rem; }
.lr-page .content-section > h2 { font-size: 1.375rem; line-height: 1.3; margin-bottom: 1.1rem; letter-spacing: -0.01em; }
.lr-page [id] { scroll-margin-top: 1rem; }
.lr-ico { width: 1.25rem; height: 1.25rem; flex: none; }

/* ---- Hero ---- */
.lr-page .lr-hero { background: none; padding: 1.25rem 0 0; margin-bottom: 2.25rem; border-radius: 0; }
.lr-page .lr-hero-title {
  font-size: clamp(1.875rem, 6.4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 650;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.lr-page .lr-hero-lead { font-size: clamp(1.0625rem, 2.4vw, 1.1875rem); line-height: 1.6; color: var(--ink-light); max-width: 38rem; margin: 0 0 1.5rem; text-wrap: pretty; }
.lr-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.lr-page .lr-hero-cta { margin-top: 0; padding: 0.8rem 1.4rem; font-size: 1rem; }
.lr-hero-link {
  color: var(--sage); font-weight: 500; text-decoration: underline;
  text-decoration-color: var(--sage-soft); text-underline-offset: 4px; text-decoration-thickness: 1px;
  padding: 0.6rem 0;
}
.lr-hero-link:hover { text-decoration-color: var(--sage); }

/* ---- Compare: no rules; the PubWiki column is one tinted band ---- */
.lr-page .lr-compare { border: 0; border-radius: 0; overflow: visible; background: none; }
.lr-page .lr-compare-row { border-top: 0; }
.lr-page .lr-compare-head > *, .lr-page .lr-compare-manual, .lr-page .lr-compare-pw { padding: 0.6rem 1rem; }
.lr-page .lr-compare-head > * { padding-top: 0.9rem; padding-bottom: 0.4rem; }
.lr-page .lr-compare-row:last-child > * { padding-bottom: 1rem; }
.lr-page .lr-compare-h--manual { padding-left: 0; }
.lr-page .lr-compare-manual { padding-left: 0; color: var(--ink-light); align-items: flex-start; gap: 0.6rem; }
.lr-page .lr-compare-manual .lr-ico { color: var(--ink-muted); margin-top: 0.1rem; }
.lr-page .lr-compare-pw { align-items: flex-start; gap: 0.6rem; color: var(--sage); font-weight: 500; }
.lr-page .lr-compare-pw .lr-ico { color: var(--sage); margin-top: 0.1rem; }
.lr-page .lr-compare-h--pw { border-radius: var(--radius) var(--radius) 0 0; }
.lr-page .lr-compare-row:last-child .lr-compare-pw { border-radius: 0 0 var(--radius) var(--radius); }

/* ---- «Что включено»: icon + approved text ---- */
.lr-included { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.lr-inc { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.lr-inc-ico {
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius); background: var(--sage-bg); color: var(--sage);
  display: grid; place-items: center;
}
.lr-inc-ico .lr-ico { width: 1.375rem; height: 1.375rem; }
.lr-page .lr-inc-text { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-light); }
.lr-inc-text strong { color: var(--ink); font-weight: 600; }
.lr-page .lr-inc-example {
  margin: 0.55rem 0 0; padding: 0.6rem 0.75rem; border-radius: var(--radius); background: var(--tint);
  font-size: 0.8125rem; line-height: 1.55; color: var(--ink-light); overflow-wrap: anywhere;
}

/* ---- Buying zone ---- */
.lr-buy { background: var(--surface); border-radius: var(--radius); box-shadow: var(--panel-shadow); padding: 1.35rem 1.1rem 1.25rem; }
.lr-page .lr-buy > h2 { margin-bottom: 0.9rem; }
.lr-opts { border: 0; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.65rem; }
.lr-opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.35rem; align-items: center;
  padding: 0.9rem 1rem; border-radius: var(--radius); background: var(--tint); cursor: pointer;
  box-shadow: inset 0 0 0 1px transparent; transition: background 0.15s ease, box-shadow 0.15s ease;
}
.lr-opt:hover { background: var(--sage-bg); }
.lr-opt:has(input:checked) { background: var(--sage-bg); box-shadow: inset 0 0 0 1.5px var(--sage); }
.lr-opt input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--sage); }
.lr-opt-main { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.lr-opt-label { font-size: 1rem; color: var(--ink); font-weight: 500; }
.lr-opt-price { font-size: 1.5rem; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lr-opt-note { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; font-size: 0.875rem; color: var(--ink-light); }
/* The discount sits on the option's top edge, like the old price card's tag. */
.lr-opt { position: relative; }
.lr-opt-tag {
  position: absolute; top: -0.62rem; right: 1rem;
  background: var(--sage); color: #fff; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.02em; padding: 0.15rem 0.6rem; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.lr-page .lr-buy .lr-buy-btn { width: 100%; min-height: 52px; font-size: 1.0625rem; font-weight: 600; margin: 0; }
.lr-page .lr-buy .lr-buy-note { margin: 0.7rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-light); text-align: center; }
.lr-buy-note a { color: var(--ink-light); text-decoration: underline; text-decoration-color: var(--sage-soft); text-underline-offset: 2px; }
.lr-buy-note a:hover { color: var(--sage); }
@media (min-width: 560px) {
  .lr-buy { padding: 1.75rem 1.75rem 1.5rem; }
  .lr-opts { grid-template-columns: 1fr 1fr; }
  .lr-opt { align-content: start; }
}

/* ---- Examples ---- */
.lr-files { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lr-file {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.75rem;
  border-radius: var(--radius); background: var(--sage-bg);
  color: var(--sage); font-size: 0.8125rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background 0.15s ease;
}
.lr-file:hover { background: var(--sage-light); }
.lr-page .lr-samples { display: grid; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.lr-page .lr-sample { border: 0; border-radius: 0; padding: 0; display: flex; flex-direction: column; }
.lr-page .lr-sample-spec { text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.35; margin: 0 0 0.2rem; }
.lr-page .lr-sample-q { font-size: 0.9375rem; line-height: 1.5; margin: 0 0 0.7rem; color: var(--ink-light); text-wrap: pretty; }
@media (min-width: 720px) {
  .lr-page .lr-samples { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .lr-page .lr-sample .lr-files { margin-top: auto; }
}

/* ---- How it works: steps with a connector (it shows sequence) ---- */
.lr-timeline { list-style: none; margin: 0; padding: 0; counter-reset: lr-step; }
.lr-step { position: relative; padding: 0 0 1.1rem 2rem; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-light); counter-increment: lr-step; }
.lr-step::before { content: ""; position: absolute; left: calc(0.5rem - 0.5px); top: 1.4rem; bottom: 0.1rem; width: 1px; background: var(--sage-light); }
.lr-step:last-child::before { display: none; }
.lr-step-dot { position: absolute; left: 0; top: 0.3rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--sage-bg); }
.lr-step-dot::after { content: counter(lr-step); position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.625rem; font-weight: 700; color: var(--sage); }
.lr-step--hour { color: var(--ink); font-weight: 500; }
.lr-step--hour .lr-step-dot { background: var(--sage); }
.lr-step--hour .lr-step-dot::after { color: #fff; }

.lr-hour { list-style: none; margin: 0.7rem 0 0; padding: 0.7rem 0.9rem; background: var(--tint); border-radius: var(--radius); font-weight: 400; display: flex; flex-direction: column; gap: 0.1rem; }
.lr-hour-stage { position: relative; padding: 0.3rem 0 0.3rem 1.5rem; font-size: 0.875rem; line-height: 1.5; color: var(--ink-light); }
.lr-hour-stage::before {
  content: ""; position: absolute; left: 0.1rem; top: 0.55rem; width: 0.75rem; height: 0.75rem; border-radius: 50%;
  background: var(--sage-light);
}
.lr-hour-stage::after {
  content: ""; position: absolute; left: 0.1rem; top: 0.55rem; width: 0.75rem; height: 0.75rem; border-radius: 50%;
  background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.6rem no-repeat;
}
/* Played once when the list scrolls into view (litobzor.js). Content is
 * fully visible before and without the script. */
.lr-hour.is-ready .lr-hour-stage::after { transform: scale(0); opacity: 0; }
.lr-hour.is-ready .lr-hour-stage { color: var(--ink-muted); }
.lr-hour.is-run .lr-hour-stage { color: var(--ink-light); transition: color 0.3s ease; transition-delay: calc(var(--i) * 260ms); }
.lr-hour.is-run .lr-hour-stage::after { transform: scale(1); opacity: 1; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; transition-delay: calc(var(--i) * 260ms); }

/* ---- FAQ: tinted rows instead of rules ---- */
.lr-page .lr-faq-item, .lr-page .lr-faq-item:first-of-type { border: 0; background: var(--tint); border-radius: var(--radius); padding: 0 1rem; }
.lr-page .lr-faq-item + .lr-faq-item { margin-top: 0.5rem; }
/* Padding, not margin: a margin would collapse through the tinted block. Equals the question's top padding. */
.lr-page .lr-faq-a { margin: 0; padding-bottom: 0.75rem; }

@media (max-width: 560px) {
  .lr-page .lr-compare-head > *, .lr-page .lr-compare-manual, .lr-page .lr-compare-pw { font-size: 0.875rem; }
  .lr-page .lr-compare-pw, .lr-page .lr-compare-h--pw { padding-left: 0.75rem; padding-right: 0.75rem; }
  .lr-page .lr-compare-manual { padding-right: 0.75rem; }
  .lr-hero-actions .lr-hero-cta { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lr-hour.is-run .lr-hour-stage, .lr-hour.is-run .lr-hour-stage::after { transition: none; }
  .lr-opt, .lr-file { transition: none; }
}