/* База: сброс стилей браузера и типографика. */
*, ::before, ::after { box-sizing: border-box; border: 0 solid var(--line); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.5 var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* подвал всегда внизу экрана, даже если на странице мало содержимого */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > main { flex: 1 0 auto; width: 100%; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; text-wrap: balance; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea {
  font: inherit; color: inherit; letter-spacing: inherit;
  margin: 0; padding: 0; background: none; border-radius: 0;
}
button { cursor: pointer; -webkit-appearance: none; appearance: none; text-align: inherit; }
img, svg, canvas, video { display: block; max-width: 100%; }
svg.icon { flex: none; }
.hidden { display: none; }
[hidden] { display: none !important; }
/* фокус виден только при управлении с клавиатуры */
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Полос прокрутки нет нигде — ни у страницы, ни у блоков (шторка, поле, меню, ряд чипов).
   Прокрутка колесом, пальцем и с клавиатуры работает как обычно. Раз полоса не занимает места,
   ширина страницы одинакова на коротких и длинных страницах и не меняется при открытии шторки — сайт не дёргается. */
* { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }
::selection { background: var(--brand-tint); }

/* контейнер страницы */
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }

/* заголовки — тонкие, как у ElevenLabs */
.display { font: 300 clamp(32px, 7.6vw, 44px)/1.08 var(--font-display); letter-spacing: -.02em; }
.h2 { font: 300 clamp(26px, 5.6vw, 32px)/1.16 var(--font-display); letter-spacing: -.02em; }
.h3 { font: 300 clamp(22px, 4.8vw, 28px)/1.14 var(--font-display); letter-spacing: -.015em; }
.h4 { font: 400 16px/1.4 var(--font-text); }
.lead { font-size: 16px; line-height: 1.5; }
.t-16 { font-size: 16px; line-height: 24px; letter-spacing: .01em; }
.t-15 { font-size: 15px; line-height: 22px; letter-spacing: .01em; }
.t-14 { font-size: 14px; line-height: 21px; }
.t-13 { font-size: 13px; line-height: 18px; }
/* ссылка в тексте */
.link { color: var(--brand-ink); font-weight: 500; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .15s var(--ease); }
@media (hover: hover) { .link:hover { text-decoration-color: currentColor; } }
.muted { color: var(--muted); }
.medium { font-weight: 500; }
.nums { font-variant-numeric: tabular-nums; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}