*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Anchor jumps (footer nav, #faq, etc.) would otherwise land right at the
     top edge, under the sticky header — this keeps the target's heading
     clear of it. */
  scroll-padding-top: 96px;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 0.5em;
  color: var(--slate-dark);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.6rem, 1.15rem + 2vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem); }
h3 { font-size: 1.2rem; font-weight: 700; }

p { margin: 0 0 1em; color: var(--ink-soft); }

a { color: var(--slate); text-decoration-thickness: 1px; }
a:hover { color: var(--rust); }

code, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Reference's hero mosaic runs close to full viewport width even at large
   sizes (no real content cap), which is part of why its tiles read bigger
   than the same shapes inside our normal --content-width. Scoped to the
   hero only — the rest of the page keeps the narrower, more readable
   measure that Этапы 3/9's cost table and body copy are tuned for. */
.wrap-wide {
  max-width: var(--content-wide);
  margin: 0 auto;
  /* Reference's own side padding at 1280px, measured directly (15px, not
     the site's usual 20px) — small on its own, but it's part of why the
     hero's blocks were still coming out a few percent smaller than the
     reference's measured sizes even after the gap fix. */
  padding: 0 15px;
}

.wrap-narrow {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 0 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  padding: 0.95em 1.6em;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.btn-primary {
  background: var(--rust-dark);
  color: #fff8f0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 8px 20px rgba(189, 95, 40, 0.28);
}
.btn-primary:hover { background: var(--rust-darker); color: #fff8f0; }
.btn-primary:active { transform: translateY(1px); }

.btn-block { width: 100%; }

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-faint); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--slate-dark);
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.site-footer { background: var(--paper-sunken); border-top: 1px solid var(--line-strong); padding: 36px 0 24px; }
.site-footer .wrap { max-width: var(--content-width); }
.disclaimer { font-size: 0.8rem; color: var(--ink-faint); max-width: none; margin-top: 28px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 0; }
.footer-nav a { font-size: 0.88rem; color: var(--ink-soft); }
.footer-copy { font-size: 0.8rem; color: var(--ink-faint); margin: 0; }

.footer-cols {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line-strong);
}
@media (min-width: 640px) { .footer-cols { grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; } }
.footer-col-brand .brand { margin-bottom: 0.7em; }
.footer-blurb { font-size: 0.88rem; color: var(--ink-faint); max-width: 34ch; margin: 0; }
.footer-col-title { font-family: var(--font-head); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-faint); margin: 0 0 0.9em; }
.footer-nav-stacked { flex-direction: column; gap: 10px; margin: 0; }

.error-page { padding: 72px 0 90px; text-align: center; }
.error-code {
  font-family: var(--font-mono);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--line-strong);
  margin: 0 0 0.2em;
}
.error-page h1 { margin-bottom: 0.4em; }
.error-page p { max-width: 46ch; margin-left: auto; margin-right: auto; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 1.6em; }

.legal-doc { padding: 40px 0 60px; }
.legal-doc h1 { margin-bottom: 0.3em; }
.legal-doc .updated { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-faint); margin-bottom: 2em; }
.legal-doc h2 { font-size: 1.2rem; margin-top: 1.8em; }
.legal-doc ul { color: var(--ink-soft); padding-left: 1.2em; }
.legal-doc li { margin-bottom: 0.4em; }
.legal-placeholder {
  background: var(--rust-tint);
  border: 1px solid var(--rust);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--rust-dark);
}

/* Scroll-reveal states — only active once assets/js/reveal.js has actually
   run (adds .js-reveal to <html>). See that file for why. */
html.js-reveal .reveal,
html.js-reveal .reveal-group > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1350ms cubic-bezier(0.65, 0, 0.35, 1), transform 1350ms cubic-bezier(0.65, 0, 0.35, 1);
}
html.js-reveal .reveal.is-visible,
html.js-reveal .reveal-group.is-visible > * {
  opacity: 1;
  transform: none;
}
html.js-reveal .reveal-group.is-visible > *:nth-child(2) { transition-delay: 190ms; }
html.js-reveal .reveal-group.is-visible > *:nth-child(3) { transition-delay: 380ms; }
html.js-reveal .reveal-group.is-visible > *:nth-child(4) { transition-delay: 570ms; }

/* Printing/exporting to PDF renders the full document in one pass with no
   real scrolling, so IntersectionObserver never fires for anything below
   the fold — without this override those sections would print blank. */
@media print {
  html.js-reveal .reveal,
  html.js-reveal .reveal-group > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}