/* Общие токены и каркас. Как global.web.css и --landing-* на лендинге:
   цвета palette, радиус карточки 20px, внутренний 8px.
   Inter — текст, Manrope — заголовки. Оба SIL Open Font License,
   файлы в /fonts: OFL.txt и Manrope-OFL.txt. */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-text: #222222;
  --color-black: #000000;
  --color-muted: #909090;
  --color-line: #cacaca;
  --color-border: #eaeaea;
  --color-fill: #f2f1f0;
  --color-white: #ffffff;
  --color-dark: #222222;
  --color-footer-line: rgba(255, 255, 255, 0.2);
  --color-focus: #222222;
  --radius-card: 20px;
  --radius-inner: 8px;
  --font: Inter, Arial, sans-serif;
  --font-headline: Manrope, Arial, sans-serif;
  --page-width: 1120px;
  --page-gutter: 40px;
  --page-gap: 12px;
  --card-padding-block: 40px;
  --card-padding-inline: 20px;
  --headline-gap: 36px;
  --headline-size: 24px;
  --headline-line: 32px;
  --headline-weight: 500;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  background:
    radial-gradient(900px 520px at 100% -10%, rgba(34, 34, 34, 0.045), transparent 58%),
    var(--color-white);
  color: var(--color-text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  font-synthesis: none;
}

h1,
.headline-kicker,
.section-title {
  font-family: var(--font-headline);
}

img,
svg {
  display: block;
}

a {
  color: inherit;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.page {
  display: flex;
  flex-direction: column;
  gap: var(--page-gap);
  width: min(var(--page-width), calc(100% - var(--page-gutter)));
  margin-inline: auto;
  padding-bottom: 40px;
}

@keyframes block-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.advisor,
.page > .card {
  animation: block-in 420ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .advisor,
  .page > .card {
    animation: none;
  }
}

@media (min-width: 719px) {
  :root {
    --page-gap: 20px;
    --card-padding-block: 60px;
    --card-padding-inline: 40px;
    --headline-gap: 44px;
    --headline-size: 36px;
    --headline-line: 44px;
    --headline-weight: 400;
  }
}

@media (min-width: 1200px) {
  :root {
    --page-gutter: 48px;
    --card-padding-block: 72px;
    --card-padding-inline: 56px;
    --headline-gap: 40px;
    --headline-size: 48px;
    --headline-line: 58px;
  }
}