/* Почему так — docs/landing-styles.md, «Правила первой отрисовки» */
:root {
  --lp-font: "Inter RM", "Inter RM Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --lp-w: 1200px;
  --lp-g: clamp(16px, 4vw, 40px);
  --lp-head-h: 64px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  --lp-bg: #ffffff;
  --lp-band: #eef2f0;
  --lp-surface: #ffffff;
  --lp-line: #e3e7e5;
  --lp-line-2: #cbd3cf;
  --lp-text: #111715;
  --lp-muted: #5a6360;
  --lp-accent: #077a4b;
  --lp-brand: #099b5f;
  --lp-chip: #eef1f0;

  --lp-btn: #099b5f;
  --lp-btn-text: #111715;
  --lp-btn-hover: rgba(255, 255, 255, .14);
  --lp-btn-press: inset 0 1px 3px rgba(0, 0, 0, .24);
  --lp-r-btn: 10px;
  --lp-r-pop: 14px;

  --lp-focus: #111715;
  --lp-ring: 2px;
  --lp-ring-gap: 3px;

  --lp-shadow-pop: 0 1px 2px rgba(17, 23, 21, .05), 0 24px 48px -28px rgba(17, 23, 21, .28);

  --ease-precise: cubic-bezier(.2, 0, 0, 1);
  --dur-micro: 200ms;
}

/* Колонка остальных публичных страниц (/bot, /terms, отчёты /r/ /c/ /a/ …)
   — по краю шапки и подвала. Правило .shell--wide однажды пропало при
   переносе стилей главной, и отчёты, которыми делятся с клиентами,
   растянулись на 1440 px, мимо логотипа. У главной свой класс lp-main. */
.shell--wide { max-width: calc(var(--lp-w) + 2 * var(--lp-g)); padding-inline: var(--lp-g); }

@media (prefers-color-scheme: dark) {
  :root {
    --lp-bg: #0f1312;
    --lp-band: #182020;
    --lp-surface: #1b2321;
    --lp-line: #2a3230;
    --lp-line-2: #3a4542;
    --lp-text: #e8ecea;
    --lp-muted: #a3ada8;
    --lp-accent: #2fd18d;
    --lp-brand: #2fd18d;
    --lp-chip: #1d2522;
    --lp-btn: #2fd18d;
    --lp-btn-text: #0b0d11;
    --lp-btn-hover: #57dca4;
    --lp-focus: #eef2f0;
    --lp-shadow-pop: 0 1px 2px rgba(0, 0, 0, .4), 0 24px 48px -28px rgba(0, 0, 0, .7);
  }
}

.lp-btn--primary,
.header--public .btn--primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--lp-r-btn);
  background: var(--lp-btn);
  color: var(--lp-btn-text);
}
.lp-btn--primary::before,
.header--public .btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lp-btn-hover);
  opacity: 0;
}
.lp-btn--primary:hover::before,
.header--public .btn--primary:hover::before { opacity: 1; }
.lp-btn--primary:active::before,
.header--public .btn--primary:active::before { opacity: 1; box-shadow: var(--lp-btn-press); }
.rm-motion .header--public .btn--primary::before { transition: opacity var(--dur-micro) var(--ease-precise); }

.header.header--public {
  height: auto;
  min-height: var(--lp-head-h);
  padding: 0 max(var(--lp-g), calc((100% - var(--lp-w)) / 2));
  gap: var(--sp-8);
  background: var(--lp-bg);
  border-bottom: 1px solid var(--lp-line);
  font-family: var(--lp-font);
  flex-wrap: wrap;
}
.header--public .header__brand { min-height: 44px; }
.header--public .header__brand img { height: 28px; }
.header--public .header__nav { gap: var(--sp-1); flex: 1; flex-wrap: wrap; }
.header--public .header__nav a,
.header--public .header__login {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border-radius: var(--lp-r-btn);
  color: var(--lp-muted);
  font-size: .9375rem;
  font-weight: 500;
  white-space: nowrap;
}
.header--public .header__nav a:hover,
.header--public .header__login:hover { color: var(--lp-text); text-decoration: none; }
.header--public .header__right { gap: var(--sp-2); font-size: .9375rem; }
.header--public .btn--primary {
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 0;
  font: 600 .9375rem/1 var(--lp-font);
}
.header--public .btn--primary:hover { filter: none; text-decoration: none; }
.header--public :focus-visible,
.footer--public :focus-visible { outline: var(--lp-ring) solid var(--lp-focus); outline-offset: var(--lp-ring-gap); }

.header__menu { display: none; position: relative; }
.header__menu summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--lp-r-btn);
  border: 1px solid var(--lp-line);
  cursor: pointer;
  list-style: none;
}
.header__menu summary::-webkit-details-marker { display: none; }
.header__burger,
.header__burger::before,
.header__burger::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--lp-text);
  border-radius: 1px;
}
.header__burger { position: relative; }
.header__burger::before,
.header__burger::after { content: ''; position: absolute; left: 0; }
.header__burger::before { top: -6px; }
.header__burger::after { top: 6px; }
.header__menu[open] .header__burger { background: transparent; }
.header__menu[open] .header__burger::before { top: 0; transform: rotate(45deg); }
.header__menu[open] .header__burger::after { top: 0; transform: rotate(-45deg); }
.header__drop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(280px, calc(100vw - 24px));
  padding: var(--sp-2);
  display: grid;
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-pop);
  box-shadow: var(--lp-shadow-pop);
}
.header__drop a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--sp-3);
  border-radius: 8px;
  color: var(--lp-text);
  font-size: 1rem;
  font-weight: 500;
}
.header__drop a:hover { background: var(--lp-chip); text-decoration: none; }

.footer.footer--public {
  padding: 0;
  border-top: 1px solid var(--lp-line);
  background: var(--lp-bg);
  color: var(--lp-muted);
  font: 400 .875rem/1.5 var(--lp-font);
}
.footer__inner {
  max-width: calc(var(--lp-w) + 2 * var(--lp-g));
  margin: 0 auto;
  padding: var(--sp-5) var(--lp-g) var(--sp-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-8);
}
.footer__about { margin: 0; color: var(--lp-text); }
.footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-1); margin-inline: calc(var(--sp-2) * -1); }
.footer__links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--sp-2); color: var(--lp-muted); }
.footer__links a:hover { color: var(--lp-text); }

[data-reveal-ready] [data-reveal]:not(.lp-head):not(.is-visible) { opacity: 0; }
[data-reveal-ready] [data-reveal]:not(.lp-head):focus-within { opacity: 1; }

@media (max-width: 1023px) {
  .header.header--public { gap: var(--sp-4); }
}

@media (max-width: 720px) {
  .header.header--public { padding: 0 var(--lp-g); gap: var(--sp-2); }
  .header--public .header__brand img { height: 24px; }
  .header--public .header__nav,
  .header--public .header__login { display: none; }
  .header__menu { display: block; }
  .header--public .header__right { margin-left: auto; }
  .header--public .btn--primary { padding: 0 var(--sp-3); }
  .footer__inner { padding-bottom: var(--sp-6); }
  :root { --lp-head-h: 56px; }
}

@media (max-width: 380px) {
  .header--public .btn--primary { font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lp, .lp *, .lp *::before, .lp *::after {
    animation: none !important;
    transition: none !important;
  }
  .lp [data-depth] { transform: none !important; }
  [data-reveal-ready] [data-reveal]:not(.lp-head):not(.is-visible) { opacity: 1; }
}

@media print {
  [data-reveal-ready] [data-reveal]:not(.lp-head):not(.is-visible) { opacity: 1; }
}
