/* Fonts are served from this site, not from fonts.googleapis.com: that stylesheet is
   render-blocking and cost about 500ms of the first paint (1280ms -> 776ms measured), and a
   foreign CDN is an extra point of failure for a Russian audience.

   These are Google's own static instances for the exact weights the page uses, which is what
   every block was verified against: with them the blocks measure exactly as they did when the
   page was accepted. The variable builds were tried and rejected on measurement — Inter and
   Unbounded variable carry an optical-size axis that changes the letterforms with the font size,
   and every block lost its match (why-parents: 24 of 26 lines off and the block height wrong;
   tariffs: 44 of 59). Ten files instead of thirty would have been the only gain.

   Only Latin and Cyrillic subsets ship. A browser fetches a file only when the page needs a
   character from its unicode-range, so a Russian visitor downloads roughly 150KB of this,
   not all of it. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/inter-300-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: 300;
  font-display: swap;
  src: url('../fonts/inter-300-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/inter-300-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: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/inter-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-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;
  font-display: swap;
  src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-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: 500;
  font-display: swap;
  src: url('../fonts/inter-500-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-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: 600;
  font-display: swap;
  src: url('../fonts/inter-600-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-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: 700;
  font-display: swap;
  src: url('../fonts/inter-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/unbounded-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/unbounded-400-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: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/unbounded-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/unbounded-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/unbounded-700-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: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/unbounded-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Gasoek One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/gasoek-one-400-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: 'Gasoek One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/gasoek-one-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==== base: reset, tokens, container (generated from plan.json; edit tokens here) ==== */

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

:root {
  --color-accent: #f96e33;
  --color-violet: #7f67b4;
  --color-violet-dark: #4a3572;
  --color-violet-muted: #725da2;
  --color-violet-surface: #f2eeff;
  --color-violet-border: #dbccff;
  --color-green: #63ac61;
  --color-green-dark: #47ae56;
  --color-text: #2c2c2c;
  --color-text-strong: #171717;
  --page-background: #ffffff;
  --text-color: #2c2c2c;
  --font-primary: "Inter", Arial, sans-serif;
  --container-width: 1160px;
  --container-padding: 20px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page-background);
  color: var(--text-color);
  font-family: var(--font-primary);
  overflow-wrap: break-word; /* a word wider than its line breaks instead of overflowing narrow screens */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Resets use :where() (zero specificity) so a single BEM class always overrides them. */
:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
  margin: 0;
}

:where(ul[class], ol[class]) {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(img, picture, svg, video) {
  display: block;
  max-width: 100%;
}

:where(img, video) {
  height: auto;
}

:where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

:where(button) {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* A fieldset keeps its content's min-content width by default and overflows flex rows. */
:where(fieldset) {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

:where(legend) {
  padding: 0;
}

:where(address) {
  font-style: normal;
}

:where(table) {
  border-collapse: collapse;
}

/* Raised and lowered text must not make its line taller: line heights are exact integers. */
:where(sub, sup) {
  line-height: 0;
}

:where(a) {
  color: inherit;
}

/* Scripts toggle `hidden`; a class that sets `display` would otherwise keep the element visible. */
[hidden] {
  display: none !important;
}

.container {
  width: 100%;
  max-width: calc(var(--container-width) + 2 * var(--container-padding));
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--container-padding);
  padding-left: var(--container-padding);
}

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

@media (max-width: 1199.98px) {
  :root {
    --container-padding: 32px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --container-padding: 16px;
  }
}

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

/* ==== shared components ==== */
/* ==== btn-primary-green — green gradient CTA ==== */
.btn-primary-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 28px 37px;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 10px;
  color: #ffffff;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  background-image: linear-gradient(259deg, #77c275 0%, var(--color-green) 100%);
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-primary-green--pill {
  border-radius: 70px;
}

.btn-primary-green--rounded {
  border-radius: 20px;
}

.btn-primary-green--orange {
  background-image: linear-gradient(76deg, #ff8450 0%, var(--color-accent) 100%);
}

.btn-primary-green--full {
  width: 100%;
}

.btn-primary-green--arrow::after {
  content: "";
  flex-shrink: 0;
  width: 15px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0IDEwLjU0MjJWMUgzLjY2MjY1TTE0IDFMMSAxMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==") no-repeat center / contain;
  mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0IDEwLjU0MjJWMUgzLjY2MjY1TTE0IDFMMSAxMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==") no-repeat center / contain;
}

.btn-primary-green:focus-visible {
  outline: 2px solid var(--color-violet-dark);
  outline-offset: 2px;
}

.btn-primary-green:active {
  opacity: 0.7;
}

.btn-primary-green:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==== btn-red-arrow — pill CTA with a diagonal arrow ==== */
.btn-red-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 62px;
  padding: 10px 38px;
  border: 0;
  border-radius: 70px;
  color: #ffffff;
  font-weight: 600;
  font-size: 17px;
  line-height: 19px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  background-image: linear-gradient(267deg, #77c275 0%, var(--color-green) 100%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 45%);
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-red-arrow::after {
  content: "";
  flex-shrink: 0;
  width: 15px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0IDEwLjU0MjJWMUgzLjY2MjY1TTE0IDFMMSAxMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==") no-repeat center / contain;
  mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0IDEwLjU0MjJWMUgzLjY2MjY1TTE0IDFMMSAxMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==") no-repeat center / contain;
}

.btn-red-arrow--red {
  background-image: none;
  background-color: #ff2828;
}

.btn-red-arrow--orange {
  background-image: linear-gradient(76deg, #ff8450 0%, var(--color-accent) 100%);
}

.btn-red-arrow--full {
  width: 100%;
}

.btn-red-arrow--md {
  gap: 14px;
  min-height: 58px;
  padding: 10px 58px;
}

.btn-red-arrow--sm {
  gap: 4px;
  min-height: 43px;
  padding: 5px 19px;
  border-radius: 34px;
  font-size: 14px;
  line-height: 15px;
  box-shadow: none;
}

.btn-red-arrow--sm::after {
  width: 7px;
  height: 7px;
}

.btn-red-arrow:focus-visible {
  outline: 2px solid var(--color-violet-dark);
  outline-offset: 2px;
}

.btn-red-arrow:active {
  opacity: 0.7;
}

.btn-red-arrow:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==== btn-call-outline — outlined «Заказать звонок» ==== */
.btn-call-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: 10px 42px;
  border: 1px solid rgb(255 255 255 / 74%);
  border-radius: 70px;
  color: #ffffff;
  font-weight: 600;
  font-size: 10px;
  line-height: 10px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-call-outline--fill {
  background-color: rgb(255 255 255 / 12%);
  -webkit-backdrop-filter: blur(60px);
  backdrop-filter: blur(60px);
}

.btn-call-outline:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.btn-call-outline:active {
  opacity: 0.7;
}

.btn-call-outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==== section-title — Unbounded section heading ==== */
/* flow-root keeps the cap-trim margins of __text inside the heading box. */
.section-title {
  display: flow-root;
  color: var(--color-text);
  font-family: "Unbounded", Arial, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 42px;
  text-align: center;
  text-transform: uppercase;
}

/* Figma trims the title box to the cap line: the line box is 9px taller above and below. */
.section-title__text {
  display: block;
  margin: -9px 0;
}

.section-title--sm {
  font-size: 28px;
  line-height: 36px;
}

.section-title--sm .section-title__text {
  margin: -8px 0 -7px;
}

.section-title--lg {
  font-size: 34px;
  line-height: 44px;
}

.section-title--light {
  color: #ffffff;
}

.section-title--violet {
  color: var(--color-violet);
}

.section-title--left {
  text-align: left;
}

.section-title__accent {
  color: #7761aa;
}

.section-title__accent--orange {
  color: var(--color-accent);
}

.section-title__accent--yellow {
  color: #fabd00;
}

/* An inline highlight: the designer drew a 35px orange plate behind the range. */
.section-title__mark {
  display: inline-block;
  padding: 0 5px;
  border-radius: 5px;
  color: #ffffff;
  line-height: 35px;
  background-color: var(--color-accent);
}

/* ==== tariff-inner-title — inner titles of a tariff detail ==== */
/* flow-root keeps the cap-trim margins of __text inside the title box. */
.tariff-inner-title {
  display: flow-root;
  color: var(--color-violet-dark);
  font-family: "Unbounded", Arial, sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 30px;
  text-align: center;
  text-transform: uppercase;
}

/* Figma trims the title box to the cap line: 6px above the caps, 5px under the baseline. */
.tariff-inner-title__text {
  display: block;
  margin: -6px 0 -5px;
}

.tariff-inner-title--badge {
  padding: 12px 11px 13px;
  border-radius: 5px;
  color: #ffffff;
  background-color: var(--color-violet-dark);
}

.tariff-inner-title--light {
  color: #ffffff;
}

.tariff-inner-title--eyebrow {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  line-height: 15px;
}

.tariff-inner-title--eyebrow .tariff-inner-title__text {
  margin: -3px 0 -2px;
}

/* ==== benefit-card-white — white benefit card with an icon ==== */
.benefit-card-white {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 22px;
  border: 1px solid #dfd6f2;
  border-radius: 15px;
  background-color: #ffffff;
  box-shadow: 0 0 40px 0 rgb(114 92 164 / 10%);
}

.benefit-card-white--h172 {
  min-height: 172px;
}

.benefit-card-white--h215 {
  min-height: 215px;
}

/* The picture differs per card: the using block sets --benefit-card-icon on the card. */
.benefit-card-white__icon {
  flex-shrink: 0;
  width: 75px;
  height: 72px;
  background-image: var(--benefit-card-icon, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.benefit-card-white__text {
  max-width: 181px;
  margin-top: -3px; /* Figma cap-trim of the 18/20 text */
  margin-bottom: -4px;
  font-size: 18px;
  line-height: 20px;
}

.benefit-card-white__accent {
  font-weight: 600;
}

/* ==== check-list-item — a line with a check icon ==== */
.check-list-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

.check-list-item::before {
  content: "";
  flex-shrink: 0;
  width: 21px;
  height: 22px;
  background-color: var(--color-green);
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyMSAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjg2OTMgMC40MzkwNjRDMjAuNjA5NCAwLjAxMDUxOTMgMjAuMDQ4MSAtMC4xMjgwNjggMTkuNjE1NiAwLjEyOTUyNUMxOS41MDQxIDAuMTk2MDA3IDE5LjQwMTQgMC4yNzAyNDMgMTkuMzAxIDAuMzQ2NTI0QzE4Ljg0MSAwLjY4NjUxNyAxOC4zNjAxIDEuMjMzODYgMTcuOTcyMSAxLjY0NjJDMTQuNTYzOSA1LjI4ODgxIDExLjQ3NTIgOS4yNTM5NiA4LjkyNjkgMTMuNTQzOEM4LjY3MzMzIDEzLjk2MTUgOC40MTA0NyAxNC40MiA4LjE5NzcgMTQuODU5OUM3Ljk5Mjk2IDE1LjI3NDUgNy43NzQ3OSAxNS43MzEzIDcuNTgwMDIgMTYuMTUzQzYuMjM5NjMgMTMuNzIxMyA0LjEzMDcyIDExLjA1MjYgMS42Mjc0MyA5Ljk2MDY0QzAuNjI2NTcxIDkuNTUwMjQgLTAuMzYzNzYzIDEwLjU5NDcgMC4xMzE4NDIgMTEuNTYzOUMwLjI3ODc0MSAxMS44NDk3IDAuNDUwMjQ4IDEyLjExNjMgMC42MjE4NzQgMTIuMzg0OUMxLjQ1ODY0IDEzLjY5MTMgMi40NDE5OSAxNC44ODQ2IDMuMzExIDE2LjE2MzdDNC40MTU4NyAxNy43NjYxIDUuMzQ2NDQgMTkuNDYyOSA2LjI0NjQ1IDIxLjE4MjNDNi44NjY0OCAyMi4zNDE4IDguNjIyNTMgMjIuMTY3OCA4Ljk5MjI2IDIwLjg5NjJDOS42MTMgMTkuNjAyMSAxMC4yNTA5IDE4LjMyMzcgMTAuOTMzMiAxNy4wNjMyQzExLjE1MTEgMTYuNjU0NCAxMS40MDI4IDE2LjIxOSAxMS42MTIzIDE1LjgwNzNDMTEuODE1OSAxNS40MDI3IDEyLjA0NDcgMTQuOTM0OSAxMi4yNTY1IDE0LjUzMzJDMTQuMDExNSAxMS4xMjg0IDE2LjExNzIgNy45MTc3IDE4LjM5NDEgNC44MjM2M0MxOC43OCA0LjMwMjA2IDE5LjMwNjkgMy41OTU5OSAxOS43MDE4IDMuMDgwMTdDMTkuOTUyOCAyLjc0Njg0IDIwLjM1NTMgMi4yNTUyNyAyMC41NzEgMS45MDg4NEMyMC43MDUzIDEuNjk5ODUgMjAuODMxMyAxLjQ4NjYyIDIwLjkyODkgMS4yNTUzMkMyMS4wMzc0IDAuOTk4MDY1IDIxLjAyNDkgMC42OTU5OTUgMjAuODY5MyAwLjQzOTA2NFoiIGZpbGw9IiM2M0FDNjEiLz4KPC9zdmc+Cg==") no-repeat center / contain;
  mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyMSAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjg2OTMgMC40MzkwNjRDMjAuNjA5NCAwLjAxMDUxOTMgMjAuMDQ4MSAtMC4xMjgwNjggMTkuNjE1NiAwLjEyOTUyNUMxOS41MDQxIDAuMTk2MDA3IDE5LjQwMTQgMC4yNzAyNDMgMTkuMzAxIDAuMzQ2NTI0QzE4Ljg0MSAwLjY4NjUxNyAxOC4zNjAxIDEuMjMzODYgMTcuOTcyMSAxLjY0NjJDMTQuNTYzOSA1LjI4ODgxIDExLjQ3NTIgOS4yNTM5NiA4LjkyNjkgMTMuNTQzOEM4LjY3MzMzIDEzLjk2MTUgOC40MTA0NyAxNC40MiA4LjE5NzcgMTQuODU5OUM3Ljk5Mjk2IDE1LjI3NDUgNy43NzQ3OSAxNS43MzEzIDcuNTgwMDIgMTYuMTUzQzYuMjM5NjMgMTMuNzIxMyA0LjEzMDcyIDExLjA1MjYgMS42Mjc0MyA5Ljk2MDY0QzAuNjI2NTcxIDkuNTUwMjQgLTAuMzYzNzYzIDEwLjU5NDcgMC4xMzE4NDIgMTEuNTYzOUMwLjI3ODc0MSAxMS44NDk3IDAuNDUwMjQ4IDEyLjExNjMgMC42MjE4NzQgMTIuMzg0OUMxLjQ1ODY0IDEzLjY5MTMgMi40NDE5OSAxNC44ODQ2IDMuMzExIDE2LjE2MzdDNC40MTU4NyAxNy43NjYxIDUuMzQ2NDQgMTkuNDYyOSA2LjI0NjQ1IDIxLjE4MjNDNi44NjY0OCAyMi4zNDE4IDguNjIyNTMgMjIuMTY3OCA4Ljk5MjI2IDIwLjg5NjJDOS42MTMgMTkuNjAyMSAxMC4yNTA5IDE4LjMyMzcgMTAuOTMzMiAxNy4wNjMyQzExLjE1MTEgMTYuNjU0NCAxMS40MDI4IDE2LjIxOSAxMS42MTIzIDE1LjgwNzNDMTEuODE1OSAxNS40MDI3IDEyLjA0NDcgMTQuOTM0OSAxMi4yNTY1IDE0LjUzMzJDMTQuMDExNSAxMS4xMjg0IDE2LjExNzIgNy45MTc3IDE4LjM5NDEgNC44MjM2M0MxOC43OCA0LjMwMjA2IDE5LjMwNjkgMy41OTU5OSAxOS43MDE4IDMuMDgwMTdDMTkuOTUyOCAyLjc0Njg0IDIwLjM1NTMgMi4yNTUyNyAyMC41NzEgMS45MDg4NEMyMC43MDUzIDEuNjk5ODUgMjAuODMxMyAxLjQ4NjYyIDIwLjkyODkgMS4yNTUzMkMyMS4wMzc0IDAuOTk4MDY1IDIxLjAyNDkgMC42OTU5OTUgMjAuODY5MyAwLjQzOTA2NFoiIGZpbGw9IiM2M0FDNjEiLz4KPC9zdmc+Cg==") no-repeat center / contain;
}

.check-list-item--row {
  flex-direction: row;
  align-items: flex-start;
  gap: 13px;
  text-align: left;
}

.check-list-item--row::before {
  width: 16px;
  height: 13px;
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxNyAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgNi45NTA3OUwyLjI2MjUyIDQuNjc4OTRMNi4xMjA1MiA4LjQ3NDM3TDE0LjY0NzggMEwxNi45MTkzIDIuMjYyODRMNi4xMjA1MiAxM0wwIDYuOTUwNzlaIiBmaWxsPSIjNjNBQzYxIi8+Cjwvc3ZnPgo=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxNyAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgNi45NTA3OUwyLjI2MjUyIDQuNjc4OTRMNi4xMjA1MiA4LjQ3NDM3TDE0LjY0NzggMEwxNi45MTkzIDIuMjYyODRMNi4xMjA1MiAxM0wwIDYuOTUwNzlaIiBmaWxsPSIjNjNBQzYxIi8+Cjwvc3ZnPgo=");
}

.check-list-item--orange::before {
  background-color: var(--color-accent);
}

.check-list-item--yellow::before {
  background-color: #e4a900;
}

.check-list-item__text {
  margin-top: -5px; /* Figma cap-trim of the 20/24 text */
  margin-bottom: -4px;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
}

.check-list-item--row .check-list-item__text {
  margin-top: -3px;
  margin-bottom: -4px;
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
}

/* ==== tariff-badge-popular — yellow «popular» pill ==== */
.tariff-badge-popular {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid #ffe599;
  border-radius: 100px;
  color: var(--color-text); /* the badge keeps its own colour on dark cards */
  font-weight: 600;
  font-size: 14px;
  line-height: 15px;
  text-align: center;
  text-transform: uppercase;
  background-color: #fabd00;
}

.tariff-badge-popular--table {
  padding: 3px 8px;
  border-radius: 79px;
  font-size: 11px;
  line-height: 12px;
}

.tariff-badge-popular--bar {
  display: block;
  padding: 13px;
  border: 0;
  border-radius: 0;
  font-size: 20px;
  line-height: 22px;
}

/* ==== teacher-card — teacher photo, name and facts ==== */
.teacher-card {
  display: flex;
  flex-direction: column;
  gap: 33px;
  padding: 18px 16px 30px;
  overflow: hidden;
  border: 1px solid #d6ccf8;
  border-radius: 20px;
  background-color: #ffffff;
  background-image: url("../img/teacher-badge.png");
  background-repeat: no-repeat;
  background-position: right 48px top 156px;
  background-size: 107px 101px;
  box-shadow: 0 0 40px 0 rgb(114 92 164 / 10%);
}

.teacher-card__header {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.teacher-card__photo {
  flex-shrink: 0;
  width: 183px;
  height: 181px;
  overflow: hidden;
  border-radius: 16px;
}

/* The designer cropped the photo: it is shown at 233x315 through a 183x181 window. */
.teacher-card__image {
  width: 233px;
  height: 315px;
  margin: -28px 0 0 -16px;
  object-fit: cover;
}

.teacher-card__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 19px;
  min-width: 0;
  padding-top: 44px;
}

.teacher-card__name {
  max-width: 189px;
  margin-top: -5px; /* Figma cap-trim of the 21/27 text, 1px down as the reference shows it */
  margin-bottom: -6px;
  color: var(--color-accent);
  font-family: "Unbounded", Arial, sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 27px;
  text-transform: uppercase;
}

.teacher-card__subject {
  padding: 6px 23px;
  border-radius: 100px;
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  background-color: var(--color-accent);
}

.teacher-card__facts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 513px;
  padding-left: 10px;
  color: #000000;
}

.teacher-card__fact {
  display: flex;
  gap: 13px;
  font-size: 20px;
  line-height: 24px;
}

.teacher-card__fact::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background-color: #000000;
}

@media (hover: hover) {
  .btn-primary-green:hover,
  .btn-red-arrow:hover,
  .btn-call-outline:hover {
    opacity: 0.85;
  }
}

@media (max-width: 1199.98px) {
  .section-title {
    font-size: 27px;
    line-height: 36px;
  }

  .section-title--sm {
    font-size: 24px;
    line-height: 31px;
  }

  .section-title--lg {
    font-size: 29px;
    line-height: 38px;
  }

  .section-title__text {
    margin: -8px 0;
  }

  .tariff-inner-title {
    font-size: 21px;
    line-height: 26px;
  }

  .tariff-inner-title__text {
    margin: -6px 0 -4px;
  }
}

@media (max-width: 767.98px) {
  .btn-primary-green {
    padding: 20px 24px;
    font-size: 16px;
  }

  .btn-red-arrow {
    padding: 10px 24px;
  }

  .btn-red-arrow--md {
    padding: 10px 24px;
  }

  .btn-red-arrow--sm {
    min-height: 44px;
  }

  .btn-call-outline {
    min-height: 44px;
    padding: 10px 24px;
    font-size: 12px;
    line-height: 14px;
  }

  .section-title {
    font-size: 24px;
    line-height: 32px;
  }

  .section-title--sm {
    font-size: 21px;
    line-height: 28px;
  }

  .section-title--lg {
    font-size: 25px;
    line-height: 33px;
  }

  .section-title__mark {
    line-height: 28px;
  }

  .section-title__text {
    margin: -7px 0;
  }

  .tariff-inner-title {
    font-size: 18px;
    line-height: 24px;
  }

  .tariff-inner-title__text {
    margin: -5px 0 -6px;
  }

  .tariff-inner-title--badge {
    padding: 10px 12px 11px;
  }

  .check-list-item__text {
    font-size: 18px;
    line-height: 22px;
  }

  .check-list-item--row .check-list-item__text {
    font-size: 16px;
    line-height: 20px;
  }

  .teacher-card {
    gap: 24px;
    padding: 16px 16px 24px;
    background-image: none;
  }

  .teacher-card__header {
    flex-direction: column;
    gap: 16px;
  }

  .teacher-card__info {
    padding-top: 0;
  }

  .teacher-card__facts {
    max-width: none;
  }

  .teacher-card__fact {
    font-size: 16px;
    line-height: 20px;
  }

  .teacher-card__fact::before {
    margin-top: 7px;
  }
}

/* ==== showcase only: never shipped with the components ==== */

/* tariff-detail-card — the rounded card two tariff descriptions are drawn inside.
   Each card spans several page sections, so its parts carry --top / --mid / --bottom and only
   the part that owns an edge draws it. The «Максимум» card has a 1px stroke where the
   «Подготовка + аттестат» card has 2px: --thin selects it. */
.tariff-detail-card {
  max-width: 1300px;
  margin-inline: auto;
  background: var(--color-violet-surface);
  border-left: 2px solid var(--color-violet-border);
  border-right: 2px solid var(--color-violet-border);
}

.tariff-detail-card--top {
  border-top: 2px solid var(--color-violet-border);
  border-radius: 50px 50px 0 0;
}

.tariff-detail-card--bottom {
  border-bottom: 2px solid var(--color-violet-border);
  border-radius: 0 0 50px 50px;
}

.tariff-detail-card--thin {
  border-left-width: 1px;
  border-right-width: 1px;
}

.tariff-detail-card--thin.tariff-detail-card--top {
  border-top-width: 1px;
}

.tariff-detail-card--thin.tariff-detail-card--bottom {
  border-bottom-width: 1px;
}

@media (max-width: 1199.98px) {
  .tariff-detail-card {
    margin-inline: 16px;
  }
}

@media (max-width: 767.98px) {
  .tariff-detail-card--top {
    border-radius: 24px 24px 0 0;
  }

  .tariff-detail-card--bottom {
    border-radius: 0 0 24px 24px;
  }
}


/* lead-form — the page's single request form, and modal — the dialog that borrows it.
   One Contact Form 7 shortcode renders this form once; the section at the bottom of the page hosts it,
   and every call-to-action opens the dialog, into which block JS moves the very same element. Neither
   belongs to the «free video» section, so neither is named after it. */

/* `lead-form` scopes the form rather than being the <form>: in WordPress the element itself is
   rendered by Contact Form 7 and carries only its own classes,
so anything keyed on the form would
   match nothing. The scope sits on the container the form lives in — the section's host and the
   dialog's body both carry it — and the form inside,
ours or CF7's,
is the column. */
.lead-form {
  display: flex;
  flex-direction: column;
  color: var(--color-text);
}

.lead-form__form,
.wpcf7-form {
  display: flex;
  flex-direction: column;
}

.lead-form__fields {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.lead-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lead-form__label {
  margin: -2px 0;
  color: #52586c;
  font-size: 16px;
  line-height: 16px;
}

.lead-form__input,
.lead-form__input.wpcf7-form-control.wpcf7-text {
  width: 100%;   /* CF7 gives its inputs a `size` attribute; without this they keep that width */
  height: 50px;
  padding: 0 22px;
  border: 1px solid #e1e7ee;
  border-radius: 10px;
  color: var(--color-text);   /* the section around it is purple with white text; an input inherits that */
  font-size: 16px;
  line-height: 16px;
  background-color: #ffffff;
  transition: border-color 0.2s;
}

.lead-form__input::placeholder,
.lead-form__input.wpcf7-form-control.wpcf7-text::placeholder {
  color: #dfdfdf;
}

.lead-form__input:focus,
.lead-form__input.wpcf7-form-control.wpcf7-text:focus {
  border-color: var(--color-accent);
}

.lead-form__input:focus-visible,
.lead-form__input.wpcf7-form-control.wpcf7-text:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.lead-form__consent {
  display: flex;
  gap: 9px;
  margin-top: 16px;
}

.lead-form__checkbox {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin: 3px 0 0;
  border: 2px solid rgb(249 110 51 / 60%);
  appearance: none;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.2s;
}

.lead-form__checkbox:checked {
  background-color: rgb(249 110 51 / 60%);
}

.lead-form__checkbox:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.lead-form__consent-text {
  flex: 1 1 0;
  min-width: 0;
  color: #858585;
  font-size: 13px;
  line-height: 16px;
}

.lead-form__consent-link {
  text-decoration: underline;
}

.lead-form__consent-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.lead-form__submit,
.lead-form__submit.wpcf7-form-control.wpcf7-submit {
  display: flex;
  appearance: none;   /* Contact Form 7 renders the submit as <input>, which keeps UA styling */
  cursor: pointer;
  justify-content: center;
  align-items: center;
  min-height: 64px;
  margin-top: 23px;
  padding: 10px 24px;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 70px;
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  text-transform: uppercase;
  background-color: var(--color-green);
  transition: opacity 0.2s;
}

.lead-form__submit:focus-visible,
.lead-form__submit.wpcf7-form-control.wpcf7-submit:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.lead-form__submit:active,
.lead-form__submit.wpcf7-form-control.wpcf7-submit:active {
  opacity: 0.7;
}

.lead-form__submit:disabled,
.lead-form__submit.wpcf7-form-control.wpcf7-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* the callback popup: the one place on this page where fixed positioning is right */
.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
}

.modal__backdrop {
  position: fixed;
  inset: 0;
  background-color: rgb(44 44 44 / 60%);
}

.modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  padding: 24px 28px 32px;
  border-radius: 20px;
  background-color: #ffffff;
}

.modal__close {
  align-self: flex-end;
  width: 32px;
  height: 32px;
  margin: -8px -12px 0 0;
  color: #52586c;
  font-size: 28px;
  line-height: 32px;
  transition: opacity 0.2s;
}

.modal__close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.modal__close:active {
  opacity: 0.7;
}

.modal__title {
  margin-bottom: 20px;
}

@media (hover: hover) {
.lead-form__consent-link:hover {
    text-decoration: none;
  }

.lead-form__submit:hover,
.lead-form__submit.wpcf7-form-control.wpcf7-submit:hover {
    opacity: 0.85;
  }

.modal__close:hover {
    opacity: 0.7;
  }
}


@media (max-width: 767.98px) {
.lead-form__fields {
    gap: 12px;
  }

.lead-form__input,
.lead-form__input.wpcf7-form-control.wpcf7-text {
    padding: 0 16px;
  }

.lead-form__consent-text {
    font-size: 14px;
    line-height: 18px;
  }

.lead-form__submit,
.lead-form__submit.wpcf7-form-control.wpcf7-submit {
    min-height: 56px;
  }

.modal {
    padding: 16px;
  }

.modal__dialog {
    padding: 20px 16px 24px;
  }
}

/* ---- Contact Form 7 ---------------------------------------------------------------------------
   The page ships one form; in WordPress it is a CF7 shortcode. CF7 renders markup of its own around
   every control — a <p> and a <br> per row, a wrapper span per field, and two nested spans around a
   checkbox, where the class from the form template lands on the wrapper and never on the <input>.
   These rules let that markup behave like the markup the design was built on. They match nothing
   when the plain form is used, so the static page is unaffected. */
.lead-form p,
.wpcf7-form p {
  display: contents;   /* CF7's automatic paragraphs must not break the flex rows */
}

.lead-form br,
.wpcf7-form br {
  display: none;       /* nor its automatic line breaks */
}

.wpcf7-form .wpcf7-form-control-wrap {
  display: block;   /* not `width: 100%`: the same wrapper holds the consent checkbox, which is a
                       flex item and must stay as narrow as the box itself */
}

/* the checkbox: our class is on CF7's wrapper, so the box is moved to the real input inside it */
.lead-form__checkbox.wpcf7-form-control.wpcf7-checkbox {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  background: none;
}

.lead-form__checkbox.wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item {
  margin: 0;
}

.lead-form__checkbox.wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item-label {
  display: none;       /* CF7 prints the tag's value beside the box; the consent text says it already */
}

.lead-form__checkbox.wpcf7-form-control.wpcf7-checkbox input[type="checkbox"] {
  width: 19px;
  height: 19px;
  margin: 3px 0 0;
  border: 2px solid rgb(249 110 51 / 60%);
  appearance: none;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.2s;
}

.lead-form__checkbox.wpcf7-form-control.wpcf7-checkbox input[type="checkbox"]:checked {
  background-color: rgb(249 110 51 / 60%);
}

.lead-form__checkbox.wpcf7-form-control.wpcf7-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.wpcf7-form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 18px;
}

.lead-form .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* CF7's messages must never inherit the purple section's white text, and a theme must not decide
   their colour either. */
.wpcf7-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  color: #d3341b;
  font-size: 13px;
  line-height: 16px;
}

.wpcf7-form .wpcf7-response-output {
  color: var(--color-text);
  border: 1px solid #e1e7ee;
  background-color: #ffffff;
}

.lead-form__input.wpcf7-not-valid {
  border-color: #d3341b;
}

/* CF7 does not ship the spinner in the HTML: on init it inserts one after every .has-spinner
   control (contact-form-7/includes/js/index.js). Each init adds another, so a form initialised
   twice ends up with two of them in a row — and the column layout of this form stacks them one
   under the other. Only the first is shown; it is a display defect, and the duplicate init that
   causes it lives on the site's side. */
.wpcf7-form .wpcf7-spinner ~ .wpcf7-spinner {
  display: none;
}

/* the paragraphs of CF7 are transparent to the layout, so the spinner is a row of the column:
   centred, it reads as the form's own state rather than as something left of the button */
.wpcf7-form .wpcf7-spinner {
  align-self: center;
}

/* ==== block: site-header ==== */
/* ==== site-header — violet top bar: logo, nav, phone, call button ==== */
.site-header {
  overflow: hidden;
  background-color: #5c488a;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 8px;
}

.site-header__logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.site-header__tagline {
  /* Figma aligns the tagline lower than the wordmark centre: its line box starts 13px below the row top */
  align-self: flex-start;
  margin-top: 13px;
  /* the 1x31 hairline of the logo lockup: a background keeps its Figma height free of the text box */
  padding-left: 10px;
  max-width: 110px;
  color: #d4cee3;
  font-weight: 300;
  font-size: 12px;
  line-height: 13px;
  background-image: linear-gradient(#a89acc, #a89acc);
  background-position: left center;
  background-size: 1px 31px;
  background-repeat: no-repeat;
}

.site-header__burger {
  display: none;
  transition: opacity 0.2s;
}

.site-header__burger-icon {
  display: block;
  width: 24px;
  height: 16px;
  background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(#ffffff, #ffffff), linear-gradient(#ffffff, #ffffff);
  background-position: 0 0, 0 7px, 0 14px;
  background-size: 24px 2px;
  background-repeat: no-repeat;
}

.site-header__menu {
  display: flex;
  align-items: center;
  margin-left: 96px;
}

.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: 45px;
  /* Figma sets the nav row 1px above the centre of the bar */
  margin-bottom: 2px;
}

.site-header__nav-link {
  color: #ffffff;
  font-size: 13px;
  line-height: 13px;
  text-transform: uppercase;
  text-decoration: none;
}

.site-header__phone {
  margin-left: 137px;
  white-space: nowrap;
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  text-decoration: none;
}

.site-header__call {
  flex-shrink: 0;
  margin-left: 23px;
}

.site-header__logo:focus-visible,
.site-header__burger:focus-visible,
.site-header__nav-link:focus-visible,
.site-header__phone:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.site-header__logo:active,
.site-header__burger:active {
  opacity: 0.7;
}

@media (hover: hover) {
  .site-header__logo:hover,
  .site-header__burger:hover {
    opacity: 0.7;
  }

  .site-header__nav-link:hover,
  .site-header__phone:hover {
    text-decoration: underline;
  }
}

@media (max-width: 1199.98px) {
  .site-header__inner {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .site-header__menu {
    flex: 1 1 auto;
    justify-content: flex-end;
    margin-left: 24px;
  }

  .site-header__nav-list {
    gap: 24px;
  }

  .site-header__phone {
    margin-left: 24px;
  }

  .site-header__call {
    margin-left: 16px;
  }
}

@media (max-width: 767.98px) {
  .site-header__burger {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
  }

  .site-header__menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    padding-bottom: 8px;
  }

  .site-header--menu-open .site-header__menu {
    display: flex;
  }

  .site-header__nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-bottom: 0;
  }

  .site-header__nav-link {
    display: block;
    padding: 13px 0;
    font-size: 14px;
    line-height: 18px;
  }

  .site-header__phone {
    display: block;
    margin-left: 0;
    padding: 11px 0;
    font-size: 18px;
    line-height: 22px;
  }

  .site-header__call {
    margin-top: 8px;
    margin-left: 0;
  }
}

/* ==== block: hero ==== */
/* ==== hero ==== */
.hero {
  background-color: var(--color-violet);
  background-image: url("../img/hero-background.png");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero__inner {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding-top: 86px;
  padding-bottom: 83px;
}

.hero__content {
  display: flex;
  flex: 0 1 601px;
  flex-direction: column;
  align-items: flex-start;
  gap: 62px;
  min-width: 0;
}

.hero__title {
  margin-top: -9px; /* Figma cap-trim of the 36/47 heading */
  margin-bottom: -11px;
  max-width: 575px; /* the line breaks the designer set */
  color: #ffffff;
  font-weight: 700;
  font-size: 36px;
  font-family: "Unbounded", Arial, sans-serif;
  line-height: 47px;
  text-transform: uppercase;
}

.hero__mark {
  -webkit-box-decoration-break: clone; /* Safari: without it the plate loses its padding and rounding on the second line */
  box-decoration-break: clone;
  margin: 0 -9px; /* the plate bleeds past the text, it does not move it */
  padding: 0 9px;
  border-radius: 5px;
  background-color: var(--color-accent);
}

.hero__lead {
  margin-top: -4px; /* Figma cap-trim of the 23/28 text */
  margin-bottom: -7px;
  max-width: 456px;
  color: #ffffff;
  font-weight: 500;
  font-size: 23px;
  line-height: 28px;
}

.hero__cta {
  width: 380px; /* the Figma frame is fixed 380x80 */
  max-width: 100%;
}

/* the five drawings of the card are stacked as its backgrounds, topmost first, as Figma paints them */
.hero__card {
  flex: 0 0 530px;
  margin-top: 5px;
  padding: 17px 0 20px 16px;
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: 26px;
  background-color: rgb(255 255 255 / 19%);
  background-image: url("../img/hero-books.svg"), url("../img/hero-book.svg"), url("../img/hero-mascot.png"), url("../img/hero-diagram.svg"), url("../img/hero-formula.svg");
  background-position: 426px 423px, 489px 73px, 326px 173px, 309px 110px, 349px 30px;
  background-size: 113px 106px, 86px 91px, 290px 314px, 122px 61px, 147px 42px;
  background-origin: border-box; /* the Figma positions are measured from the outer edge */
  background-repeat: no-repeat;
  overflow: hidden;
  backdrop-filter: blur(154px);
  -webkit-backdrop-filter: blur(154px);
}

.hero__steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 307px; /* the Figma step frames are fixed 307 wide; the rest of the card is the illustration */
  background-image: url("../img/hero-arrow-down.svg"), url("../img/hero-arrow-down.svg"), url("../img/hero-arrow-down.svg");
  background-position: center 80px, center 173px, center 267px;
  background-size: 6px 12px;
  background-repeat: no-repeat;
}

.hero__step {
  padding: 18px 0 21px; /* 17/22 in Figma, one pixel down so the label lands on the design's baseline */
  border-top: 2px solid var(--color-green);
  border-radius: 16px;
  background-image: linear-gradient(90deg, #ffede5 0%, #ffffff 49%, #ffeee7 100%);
}

.hero__result {
  display: grid;
  border: 2px solid #ffad8b;
  border-radius: 16px;
  background-color: #ffe4d9;
}

.hero__result-photos {
  display: flex;
  grid-area: 1 / 1;
  justify-content: space-between;
  padding: 12px 16px 0 13px;
}

.hero__result-photo {
  width: 64px; /* the size the designer scaled the certificate to */
  height: 89px;
  border-radius: 4px;
  background-repeat: no-repeat;
}

.hero__result-photo--secondary {
  background-image: url("../img/hero-certificate-secondary.png");
  background-position: center;
  background-size: cover;
  transform: rotate(-7.41deg);
}

.hero__result-photo--basic {
  width: 61px;
  background-image: url("../img/hero-certificate-basic.png");
  background-position: -21px -5px; /* the crop the designer set on the fill */
  background-size: 86px 110px;
  transform: rotate(9.82deg);
}

.hero__result-body {
  display: flex;
  grid-area: 1 / 1;
  flex-direction: column;
  align-items: center;
  padding: 15px 0 21px;
}

.hero__result-check {
  width: 21px; /* icon box: a background gives its element no size */
  height: 22px;
  background-image: url("../img/hero-check.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

.hero__result-badge {
  margin-top: 7px;
  padding: 7px 9px; /* 11/12 in Figma, less the cap-trim of the 20/24 text */
  border-radius: 8px;
  color: #ffffff;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  text-transform: uppercase;
  background-color: var(--color-accent);
}

.hero__result-note {
  margin-top: 14px; /* 18 in Figma, less the cap-trim of the 14/17 text */
  margin-bottom: -3px;
  max-width: 285px;
  color: var(--color-text);
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
}

/* the designer keeps the count and the clarification on separate lines */
.hero__result-detail {
  display: block;
  max-width: 251px; /* the line break the designer set */
  margin: 0 auto;
}

.hero__ticker {
  padding: 32px 0 33px;
  border-top: 2px solid #39285b;
  background-color: var(--color-violet-dark);
  overflow: hidden;
}

.hero__ticker-track {
  display: flex;
  width: max-content;
  opacity: 0.71;
  /* the first frame is the offset the design shows, so the strip moves from the first frame */
  transform: translateX(-506px);
  animation: hero-ticker 40s linear infinite;
}

.hero__ticker-group {
  display: flex;
  gap: 22px;
  align-items: center;
  padding-right: 22px; /* the gap to the next copy: the loop shifts by exactly one group */
}

.hero__ticker-text {
  flex-shrink: 0;
  width: 597px; /* the width of the Figma text layer: it sets the rhythm of the strip */
  margin-top: -3px; /* Figma cap-trim of the 18/20 text */
  margin-bottom: -4px;
  color: #ffffff;
  font-weight: 500;
  font-size: 18px;
  line-height: 20px;
  white-space: nowrap;
}

.hero__ticker-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ffffff;
}

@keyframes hero-ticker {
  from {
    transform: translateX(-506px);
  }

  to {
    transform: translateX(calc(-506px - 50%));
  }
}

@media (hover: hover) {
  .hero__ticker:hover .hero__ticker-track {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__ticker-track {
    transform: translateX(-506px);
    animation: none;
  }
}

@media (max-width: 1199.98px) {
  .hero__inner {
    flex-direction: column;
    gap: 48px;
    padding-top: 65px;
    padding-bottom: 62px;
  }

  .hero__content {
    flex: 0 1 auto;
    align-items: stretch; /* the long uppercase words must wrap, not set the width */
    gap: 44px;
    width: 100%;
    max-width: 601px;
  }

  .hero__title {
    margin-top: -8px;
    margin-bottom: -8px;
    font-size: 30px;
    line-height: 39px;
  }

  .hero__lead {
    font-size: 20px;
    line-height: 25px;
    max-width: 420px;
  }

  .hero__card {
    flex: none; /* in the stacked column the basis would set the height */
    width: 530px;
    max-width: 100%;
    margin-top: 0;
  }
}

@media (max-width: 767.98px) {
  .hero__inner {
    gap: 32px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .hero__content {
    gap: 28px;
  }

  .hero__title {
    margin-top: -6px;
    margin-bottom: -6px;
    font-size: 24px;
    line-height: 31px;
  }

  .hero__lead {
    margin-bottom: -4px;
    font-size: 17px;
    line-height: 22px;
    max-width: none;
  }

  .hero__cta {
    width: 100%;
  }

  .hero__card {
    width: 100%;
    padding: 14px 12px 16px;
    background-image: none; /* the mascot and the doodles have no room next to the steps */
  }

  .hero__steps {
    width: 100%;
  }

  .hero__ticker {
    padding: 22px 0 23px;
  }
}

@media (max-width: 479.98px) {
  .hero__title {
    margin-top: -5px;
    margin-bottom: -5px;
    font-size: 20px; /* «ГОСУДАРСТВЕННОГО» must fit a 320px screen unbroken */
    line-height: 26px;
  }

  .hero__result-photos {
    display: none; /* the two certificates and the badge no longer fit side by side */
  }
}

/* ==== block: why-parents ==== */
/* ==== why-parents — pains of the parents and the conclusion banner ==== */

/* The two oversized page-decor circles are painted as hard-edged radial gradients and clipped to the section. */
.why-parents {
  overflow: hidden;
  background-image:
    radial-gradient(circle 618px at 99px 65px, rgb(243 237 255 / 77%) 100%, rgb(243 237 255 / 0%) 100%),
    radial-gradient(circle 414px at calc(100% - 200px) 534px, rgb(243 237 255 / 55%) 100%, rgb(243 237 255 / 0%) 100%);
}

/* 19/57px in the Figma nodes; the Figma render puts the banner group one pixel higher. */
.why-parents__inner {
  padding-top: 120px;
  padding-bottom: 58px;
}

/* Chrome sets Unbounded one pixel higher in its line box than the Figma build; the cards stay put. */
.why-parents__title {
  margin-top: 1px;
  margin-bottom: -1px;
}

/* The designer's row of cards is 1162px wide — 2px more than the container. */
.why-parents__list {
  display: flex;
  gap: 23px;
  margin-top: 63px;
  margin-right: -2px;
}

.why-parents__card {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  min-height: 279px;
  padding: 12px 7px 6px;
  border: 1px solid #fb9d75;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0 0 30px rgb(0 0 0 / 10%);
}

/* Chrome sets the 16px digits a pixel above the Figma build; the negative margin keeps the picture in place. */
.why-parents__number {
  margin-bottom: -1px;
  margin-left: 7px;
  padding-top: 1px;
  color: #7459d0;
  font-size: 16px;
  line-height: 19px;
  font-weight: 600;
}

/* The illustration stands beside the number, so it rises back by the number's line;
   every card cuts its own part out of the one exported strip. */
.why-parents__picture {
  margin: var(--why-parents-picture-top) 0 0 var(--why-parents-picture-left);
  background-image: url("../img/why-parents-pains.jpg");
  background-repeat: no-repeat;
}

.why-parents__card--gia .why-parents__picture {
  --why-parents-picture-top: -19px;
  --why-parents-picture-left: 29px;
  width: 136px;
  height: 130px;
  background-position: -1px -40px;
  background-size: 642px 214px;
}

.why-parents__card--year .why-parents__picture {
  --why-parents-picture-top: -17px;
  --why-parents-picture-left: 30px;
  width: 134px;
  height: 129px;
  background-position: -128px -39px;
  background-size: 632px 212px;
}

.why-parents__card--school .why-parents__picture {
  --why-parents-picture-top: -14px;
  --why-parents-picture-left: 33px;
  width: 128px;
  height: 122px;
  background-position: -244px -37px;
  background-size: 604px 201px;
}

.why-parents__card--exam .why-parents__picture {
  --why-parents-picture-top: -19px;
  --why-parents-picture-left: 35px;
  width: 128px;
  height: 130px;
  background-position: -389px -40px;
  background-size: 640px 214px;
}

.why-parents__card--stress .why-parents__picture {
  --why-parents-picture-top: -19px;
  --why-parents-picture-left: 26px;
  width: 144px;
  height: 126px;
  background-position: -570px -61px;
  background-size: 710px 235px;
}

/* The plate keeps the designer's 68% fill and top rule; its text stays opaque. */
.why-parents__note {
  min-height: 122px;
  margin-top: auto;
  padding: 16px 12px 0;
  border-top: 2px solid rgb(249 110 51 / 68%);
  border-radius: 16px;
  font-size: 18px;
  line-height: 22px;
  font-weight: 600;
  text-align: center;
  background-color: rgb(255 240 234 / 68%);
}

/* Two plates keep the designer's line breaks through a narrower text measure (f2h wraps). */
.why-parents__card--year .why-parents__note {
  padding-right: 23px;
  padding-left: 23px;
}

.why-parents__card--stress .why-parents__note {
  padding-right: 28px;
  padding-left: 28px;
}

.why-parents__accent {
  color: var(--color-accent);
}

.why-parents__conclusion {
  max-width: 904px;
  margin: 18px auto 0;
}

/* The map pins hang 18px over the banner, so the decor paints above it. */
.why-parents__path {
  display: block;
  position: relative;
  z-index: 1;
  height: 80px;
  margin-bottom: -18px;
  background-image:
    url("../img/why-parents-path.svg"),
    url("../img/why-parents-mascot.svg"),
    url("../img/why-parents-pin.svg"),
    url("../img/why-parents-pin.svg");
  background-position: 61px 19px, 417px 0, 43px 37px, 830px 37px;
  background-repeat: no-repeat;
}

.why-parents__banner {
  display: flex;
  gap: 35px;
  align-items: center;
  padding: 10px 11px;
  border-radius: 20px;
  background-color: var(--color-accent);
}

.why-parents__banner-picture {
  flex-shrink: 0;
  width: 95px;
  height: 98px;
  border-radius: 11px;
  background-repeat: no-repeat;
}

.why-parents__banner-picture--school {
  background-color: #ffffff;
  background-image: url("../img/why-parents-school.png");
  background-position: 0 -10px;
  background-size: 165px 113px;
}

.why-parents__banner-picture--diploma {
  background-image: url("../img/why-parents-diploma.png");
  background-size: 95px 98px;
}

/* Figma trims the text box to the cap line; the group it centres also holds the white plate under the last line. */
.why-parents__banner-text {
  flex: 1 1 0;
  min-width: 0;
  margin: -6px 0 -1px;
  color: #ffffff;
  font-size: 19px;
  line-height: 27px;
  font-weight: 600;
  text-align: center;
}

/* The designer's white plate reaches 3px past the text on both sides. */
.why-parents__banner-accent {
  padding: 0 3px;
  border-radius: 5px;
  color: var(--color-text);
  background-color: #ffffff;
}

@media (max-width: 1199.98px) {
  .why-parents__inner {
    padding-top: 90px;
    padding-bottom: 43px;
  }

  .why-parents__list {
    flex-wrap: wrap;
    margin-top: 48px;
    margin-right: 0;
  }

  .why-parents__card {
    flex: 0 1 calc((100% - 23px) / 2);
  }

  .why-parents__picture {
    margin-right: auto;
    margin-left: auto;
  }

  .why-parents__path {
    background-position: center 19px, center top, left 25px top 37px, right 25px top 37px;
    background-size: calc(100% - 120px) 48px, auto, auto, auto;
  }

  .why-parents__banner {
    gap: 24px;
  }
}

@media (max-width: 767.98px) {
  .why-parents__inner {
    padding-top: 64px;
    padding-bottom: 32px;
  }

  .why-parents__list {
    gap: 16px;
    margin-top: 32px;
  }

  .why-parents__card {
    flex: 1 1 100%;
    min-height: 0;
  }

  .why-parents__note {
    min-height: 0;
    padding-bottom: 16px;
  }

  .why-parents__path {
    height: 62px;
    margin-bottom: 0;
    background-image: url("../img/why-parents-mascot.svg");
    background-position: center top;
    background-size: auto;
  }

  .why-parents__banner {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }

  .why-parents__banner-text {
    flex: none;
  }
}

/* ==== block: what-you-get ==== */
/* ==== what-you-get ==== */
/* The pale violet ellipse of the page decor (1289px, #f3edff 53%) is a background of the section,
   so it is clipped to the block without any extra element. */
.what-you-get {
  padding: 66px 0 76px;
  background-image: radial-gradient(circle 644px at calc(50% + 280px) 1062px, rgb(243 237 255 / 53%) 0 100%, transparent 100%);
  background-repeat: no-repeat;
}

.what-you-get__inner {
  display: flex;
  flex-direction: column;
}

/* z-index (the panel is a flex item) keeps the purple panel over the «А также» card it overlaps. */
.what-you-get__panel {
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding: 66px 46px 44px;
  border-radius: 20px;
  background-color: var(--color-violet);
  background-image:
    radial-gradient(circle 544px at 1054px -22px, var(--color-violet-muted) 0 100%, transparent 100%),
    radial-gradient(circle 418px at -56px 424px, var(--color-violet-muted) 0 100%, transparent 100%);
  background-repeat: no-repeat;
}

/* The orange plate behind the last word is 41px tall in the design. */
.what-you-get__title-mark {
  line-height: 41px;
}

.what-you-get__cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.what-you-get__card {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 8px 8px 8px 7px;
  overflow: hidden;
  border-radius: 14px;
  background-color: #ffffff;
}

.what-you-get__card--docs {
  border-right: 18px solid var(--color-accent);
}

.what-you-get__card--curator {
  border-right: 18px solid var(--color-green);
}

/* The designer let the tallest icon reach 2px closer to the bottom edge. */
.what-you-get__card--exams {
  padding-bottom: 6px;
  border-right: 18px solid #e3a900;
}

.what-you-get__card-icon {
  flex-shrink: 0;
  width: 117px;
  background-repeat: no-repeat;
  background-size: contain; /* the composite icons ship at scale 2 */
}

.what-you-get__card-icon--docs {
  height: 139px;
  padding: 21px 17px 20px 16px;
  border: 1px solid var(--color-accent);
  border-radius: 9px;
  background-color: rgb(249 110 51 / 22%);
}

/* The picture of the first icon is an image fill the designer cropped. */
.what-you-get__card-icon--docs::before {
  content: "";
  display: block;
  width: 82px;
  height: 96px;
  background-image: url("../img/what-you-get-documents.png");
  background-repeat: no-repeat;
  background-position: -11px -39px;
  background-size: 272px 180px;
}

.what-you-get__card-icon--curator {
  height: 105px;
  background-image: url("../img/what-you-get-curator.png");
}

.what-you-get__card-icon--exams {
  height: 158px;
  background-image: url("../img/what-you-get-exams.png");
}

.what-you-get__card-body {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}

.what-you-get__card-title {
  margin-top: -3px; /* Figma cap-trim of the 18/18 title */
  margin-bottom: -2px;
  font-weight: 700;
  font-size: 18px;
  line-height: 18px;
  text-transform: uppercase;
}

.what-you-get__card-title--docs {
  color: var(--color-accent);
}

.what-you-get__card-title--curator {
  color: var(--color-green);
}

.what-you-get__card-title--exams {
  color: #e4a900;
}

.what-you-get__card-title--also {
  color: var(--color-accent);
}

/* The features of a card are one list the designer laid out in columns: grid gives it those
   columns without a wrapper per column. The widths are his — they set where each text breaks. */
.what-you-get__feature-list {
  display: grid;
  row-gap: 17px;
}

.what-you-get__feature {
  min-width: 0;
}

.what-you-get__feature-list--docs {
  grid-template-columns: 210px 175px 146px 255px;
  column-gap: 22px;
}

.what-you-get__feature-list--curator {
  grid-template-columns: 210px 221px auto;
  column-gap: 47px;
}

/* 248 and 210 where Figma measures 245 and 207 (Chrome needs 219px of text to keep the designer's
   line breaks); the 41px gap instead of 44 leaves the other two columns where he put them. */
.what-you-get__feature-list--exams {
  grid-template-columns: 248px 210px auto;
  column-gap: 41px;
}

/* The two long features stand beside the three short ones of the last column. */
.what-you-get__feature--tall {
  grid-row: span 3;
}

.what-you-get__feature-list--also {
  grid-template-columns: 243px auto;
  column-gap: 36px;
}

/* The «А также» card: the panel above overlaps its top by 53px, its own decor is stacked in one grid cell. */
.what-you-get__also {
  display: grid;
  margin: -53px 46px 0;
  overflow: hidden;
  border: 2px solid var(--color-violet);
  border-radius: 20px;
  background-color: var(--color-violet-surface);
  background-image:
    radial-gradient(circle 248px at 918px 322px, rgb(236 230 255 / 60%) 0 100%, transparent 100%),
    radial-gradient(circle 152px at 56px 212px, #ece6ff 0 100%, transparent 100%);
  background-repeat: no-repeat;
}

.what-you-get__also-decor {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  width: 181px;
  height: 204px;
  margin: 40px 0 -20px 9px; /* the illustration reaches past the card, which clips it */
  background-image: url("../img/what-you-get-cat.png");
  background-repeat: no-repeat;
  background-size: 181px 204px;
}

.what-you-get__gift {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  background-image: url("../img/what-you-get-gift.png");
  background-repeat: no-repeat;
  background-size: contain;
}

.what-you-get__gift--lg {
  width: 51px;
  height: 51px;
  margin: 27px 0 0 698px;
  transform: rotate(-69deg);
}

.what-you-get__gift--sm {
  width: 37px;
  height: 37px;
  margin: 70px 0 0 524px;
  transform: rotate(21deg);
}

.what-you-get__also-content {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 96px 0 46px 224px;
}

.what-you-get__actions {
  display: grid;
  justify-content: center;
  margin-top: 53px;
}

/* The design fixes the width of this button. */
.what-you-get__cta {
  grid-area: 1 / 1;
  width: 380px;
}

.what-you-get__cta-hand {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  width: 34px;
  height: 34px;
  margin: 26px 0 0 274px;
  background-image: url("../img/what-you-get-hand.png");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.43;
  transform: rotate(-26deg);
}

@media (max-width: 1199.98px) {
  .what-you-get {
    padding: 50px 0 56px;
  }

  .what-you-get__panel {
    gap: 32px;
    padding: 48px 32px 32px;
  }

  .what-you-get__feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 24px;
  }

  .what-you-get__feature--tall {
    grid-row: auto;
  }

  .what-you-get__also-decor {
    width: 120px;
    height: 135px;
    margin: 40px 0 0 8px;
    background-size: 120px 135px;
  }

  .what-you-get__gift {
    display: none;
  }

  .what-you-get__also-content {
    padding: 84px 32px 32px 148px;
  }
}

@media (max-width: 767.98px) {
  .what-you-get {
    padding: 36px 0 40px;
  }

  .what-you-get__panel {
    gap: 24px;
    padding: 32px 16px 24px;
  }

  .what-you-get__cards {
    gap: 16px;
  }

  .what-you-get__card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-right-width: 10px;
  }

  .what-you-get__card--exams {
    padding-bottom: 16px;
  }

  .what-you-get__feature-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .what-you-get__also {
    margin-top: -32px;
  }

  .what-you-get__also-decor {
    display: none;
  }

  .what-you-get__also-content {
    padding: 56px 16px 24px;
  }

  .what-you-get__actions {
    justify-content: stretch;
    margin-top: 32px;
  }

  .what-you-get__cta {
    width: 100%;
  }

  .what-you-get__cta-hand {
    display: none;
  }
}

/* ==== block: your-path ==== */
/* ==== your-path — the school year timeline on the purple frame ==== */
.your-path {
  border-radius: 50px 50px 0 0;
  overflow: hidden;
  background-color: var(--color-violet);
  /* the export used to bake the heading's orange plate into this picture, hidden by a purple patch
     of a fixed size; the plate is erased from the file itself, so nothing has to line up with it.
     `cover` keeps the artwork spanning the section at any width — it is exactly 1520x1350 at the
     design width, so this changes nothing there and stops the cropping everywhere else. */
  background-image: url("../img/your-path-bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.your-path__inner {
  padding-top: 66px;
  padding-bottom: 47px;
}

.your-path__title {
  max-width: 585px;
  margin-right: auto;
  margin-left: auto;
}

/* two rows — the band of numbers and the band of cards; every step spans both of them,
   so the four numbers keep one line and the four cards share their top and bottom edge.
   The dotted connector is the background of that band. */
.your-path__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 27px;
  row-gap: 23px;
  margin-top: 47px;
  background-image: url("../img/your-path-line.svg");
  background-repeat: no-repeat;
  background-position: 162px 22px;
  background-size: 820px 15px;
}

.your-path__step {
  /* the designer spreads the numbers over 927px, narrower than the row of cards,
     so every number keeps its own distance from the left edge of its card */
  --your-path-marker-x: 116px;

  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}

.your-path__step:nth-child(2) {
  --your-path-marker-x: 110px;
}

.your-path__step:nth-child(3) {
  --your-path-marker-x: 103px;
}

.your-path__step:nth-child(4) {
  --your-path-marker-x: 97px;
}

.your-path__marker {
  display: grid;
  place-items: center;
  justify-self: start;
  width: 55px;
  height: 55px;
  margin-left: var(--your-path-marker-x);
  padding-bottom: 1px; /* the design sets the digits 1px above the middle of the circle */
  border-radius: 50%;
  color: #ffffff;
  font-size: 22px;
  line-height: 24px;
  background-color: rgb(255 255 255 / 11%);
  -webkit-backdrop-filter: blur(34px);
  backdrop-filter: blur(34px);
}

/* The design rings the circle with a 1px stroke that fades from white to nothing at 206deg
   (node 3766:2197 — design.md reports it as solid #000000, which is why it was left out at first).
   A gradient cannot be a border-color, and the usual two-background trick needs an opaque fill to
   hide the middle, which this circle has not: it is 11% white over the panel. So the ring is its own
   layer, and the mask cuts its own middle away, leaving the 1px rim. */
.your-path__marker::before {
  content: "";
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  padding: 1px;
  border-radius: 50%;
  background-image: linear-gradient(206deg, #ffffff 0%, rgb(255 255 255 / 0%) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.your-path__marker-value {
  grid-area: 1 / 1;
}

.your-path__marker--last {
  color: var(--color-violet);
  font-weight: 600;
  background-color: #ffffff;
}

.your-path__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 14px 13px 18px;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 10px;
  overflow: hidden;
  background-color: #5d4790;
}

.your-path__card--exam {
  border-color: rgb(255 255 255 / 50%);
  background-color: #ffffff;
}

/* negative margins: the white plate of the header covers the card border, as in the design */
.your-path__head {
  display: flex;
  height: 70px;
  margin: -1px -15px 23px -19px;
  padding: 5px;
  background-color: #ffffff;
}

.your-path__card--exam .your-path__head {
  background-color: var(--color-accent);
}

.your-path__period {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  padding-top: 1px; /* the design centres the label 1px below the middle of the box */
  border: 1px solid var(--color-green);
  border-radius: 6px 6px 0 0;
  color: var(--color-green);
  font-weight: 700;
  font-size: 18px;
  line-height: 18px;
  text-align: center;
  text-transform: uppercase;
}

.your-path__card--exam .your-path__period {
  border-color: #ffa57e;
  color: #ffffff;
}

.your-path__list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.your-path__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* the last step frames its second item */
.your-path__item--framed {
  margin: -8px -6px 0 -10px;
  padding: 7px 5px 26px 9px;
  border: 1px solid rgb(249 110 51 / 40%);
  border-radius: 12px;
  background-color: rgb(249 110 51 / 8%);
}

.your-path__icon {
  width: 41px;
  height: 41px;
  background-image: url("../img/your-path-step.png");
  background-repeat: no-repeat;
  background-size: 41px 41px;
}

.your-path__card--exam .your-path__icon {
  background-image: url("../img/your-path-step-exam.png");
}

/* Figma trims the text box to the cap line: 3px above and 4px below the line box */
.your-path__text {
  margin: -3px 0 -4px;
  color: #ffffff;
  font-size: 18px;
  line-height: 20px;
}

/* the designer set a narrower measure for this one text (Figma box 207px) */
.your-path__text--narrow {
  max-width: 211px;
}

.your-path__card--exam .your-path__text {
  color: var(--color-text);
}

.your-path__text--strong {
  font-weight: 600;
}

.your-path__accent {
  font-weight: 700;
}

.your-path__card--exam .your-path__accent {
  font-weight: 600;
}

/* the decorations of the last step overlap: one grid cell holds them all */
.your-path__gallery {
  display: grid;
  width: 230px;
  height: 266px;
  margin: -38px 0 0 -8px;
}

/* the peach circle behind the pictures, clipped by the card */
.your-path__gallery::before {
  content: "";
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  width: 285px;
  height: 285px;
  margin: 72px 0 0 -35px;
  border-radius: 50%;
  background-color: #fff4ef;
}

/* the mascot, drawn over both pictures */
.your-path__gallery::after {
  content: "";
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  width: 138px;
  height: 206px;
  margin-top: 60px;
  background-image: url("../img/your-path-mascot.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.your-path__attestat {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  width: 90px;
  height: 124px;
  margin-left: 140px;
  border-radius: 4px;
  background-image: url("../img/hero-certificate-secondary.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 0 3px #ccb4ff;
  transform: rotate(-13.82deg);
}

.your-path__diploma {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  width: 90px;
  height: 132px;
  margin: 113px 0 0 127px;
  border-radius: 4px;
  background-image: url("../img/hero-certificate-basic.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 128px 163px; /* the crop the designer set, scaled from the source */
  box-shadow: 0 0 0 3px #ccb4ff;
  transform: rotate(10.39deg);
}

/* the hand and the curved arrow lie over the button: one grid cell again */
.your-path__cta {
  display: grid;
  width: 380px;
  max-width: 100%;
  margin: 47px auto 0;
}

/* anchored at the bottom with a negative margin, so it does not make the button row taller */
.your-path__arrow {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: start;
  width: 44px;
  height: 57px;
  margin: 0 0 -6px -73px;
  background-image: url("../img/your-path-arrow.svg");
  background-repeat: no-repeat;
  background-size: 44px 57px;
}

.your-path__button {
  grid-area: 1 / 1;
}

.your-path__hand {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: end;
  width: 34px;
  height: 34px;
  margin: 26px 19px 0 0;
  background-image: url("../img/what-you-get-hand.png");
  background-repeat: no-repeat;
  background-size: 34px 34px;
  opacity: 0.43;
  transform: rotate(-26.07deg);
  pointer-events: none;
}

.your-path__note {
  margin: 18px 0 -4px; /* the bottom margin is the cap trim of the Figma text box */
  color: #ffffff;
  font-size: 18px;
  line-height: 20px;
  text-align: center;
}

/* full-bleed: the wave spans the viewport at every width */
.your-path__wave {
  width: 100%;
  aspect-ratio: 1520 / 249;
  background-image: url("../img/your-path-wave.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}

@media (max-width: 1199.98px) {
  .your-path__inner {
    padding-top: 50px;
    padding-bottom: 36px;
  }

  /* two cards per row; the connector of the numbers belongs to the four-up row only */
  .your-path__steps {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 27px;
    margin-top: 36px;
    background-image: none;
  }

  /* each number now travels with its card instead of standing in a band of its own */
  .your-path__step {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-row: auto;
  }

  .your-path__marker {
    margin-left: 0;
  }

  .your-path__card {
    flex: 1 1 auto;
  }

  /* the cards are wider here, so the designer's desktop measure no longer applies */
  .your-path__text--narrow {
    max-width: none;
  }

  .your-path__cta {
    margin-top: 36px;
  }
}

@media (max-width: 767.98px) {
  .your-path {
    border-radius: 30px 30px 0 0;
  }

  .your-path__inner {
    padding-top: 36px;
    padding-bottom: 28px;
  }

  .your-path__steps {
    grid-template-columns: 1fr;
    row-gap: 20px;
    margin-top: 28px;
  }

  .your-path__cta {
    margin-top: 28px;
  }

  .your-path__arrow {
    display: none;
  }

  .your-path__note {
    margin-top: 16px;
    font-size: 16px;
  }
}

/* ==== block: tariffs ==== */
/* ==== tariffs — three price cards and the comparison link ==== */
/* The two pale decor ellipses of the page belong to this section and are clipped to it. */
.tariffs {
  /* no clipping here: the lower ellipse runs 340px into the next section, as it does in the design.
     The padding moved to __inner so this box starts at the section's own top edge and the decor
     child below can use the design's offsets unchanged at every breakpoint. */
  background-image: radial-gradient(closest-side circle, #f2edff 100%, transparent 100%);
  background-repeat: no-repeat;
  background-position: right -272px top 12px;
  background-size: 709px 709px;
}

/* The second ellipse of the page background is 1235px tall and starts 197px down, so it reaches
   340px past this section. A background cannot leave its own box, so it is painted by a child that
   is as tall as the ellipse and gives that height back through a negative bottom margin: the
   section's height is unchanged, and the tail is drawn over whatever follows — which is exactly
   the layer order of the design, where the page frame owns the ellipse and the sections sit on it. */
.tariffs__decor {
  display: block;
  height: 1432px;
  margin-bottom: -1432px;
  background-image: radial-gradient(closest-side circle, #f8f5ff 100%, transparent 100%);
  background-repeat: no-repeat;
  background-position: left -769px top 197px;
  background-size: 1235px 1235px;
}

.tariffs__inner {
  padding-top: 57px;
  padding-bottom: 89px;
}

.tariffs__heading {
  max-width: 776px; /* the designer's line break */
  margin: 0 auto;
}

.tariffs__list {
  display: flex;
  gap: 40px;
  max-width: 1100px;
  margin: 66px auto 0;
}

.tariffs__item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
}

/* The badge of the middle card hangs 10px over the card edge. */
.tariffs__item--featured {
  margin-top: -10px;
}

.tariffs__badge {
  z-index: 1;
  align-self: center;
  margin-bottom: -15px;
}

/* the card fills the column but never shrinks below its content */
.tariffs__card {
  flex: 1 0 auto;
}

.tariffs__compare {
  display: flex;
  max-width: 1100px;
  margin: 52px auto 0;
}

/* ==== tariff-card — one price card ==== */
.tariff-card {
  display: flex;
  flex-direction: column;
  min-height: 700px;
  overflow: hidden;
  border-radius: 15px;
  background-color: #ffffff;
  box-shadow: 0 0 40px rgb(0 0 0 / 13%);
}

/* The coloured head: wave, three pale ellipses, all clipped by the card. */
.tariff-card__top {
  display: flex;
  flex-direction: column;
  padding: 26px 20px 70px;
  text-align: center;
  background-color: #f2edff;
  background-image:
    url("../img/tariffs-wave.svg"),
    radial-gradient(closest-side circle, #eee6ff 100%, transparent 100%),
    radial-gradient(closest-side circle, #eee6ff 100%, transparent 100%),
    radial-gradient(closest-side circle, #eee6ff 100%, transparent 100%);
  background-repeat: no-repeat;
  background-position:
    left -213px bottom,
    left -179px top -198px,
    left 176px top -141px,
    left -137px top 255px;
  background-size: 570px 57px, 314px 314px, 383px 383px, 383px 383px;
}

.tariff-card__heading {
  display: flex;
  flex-direction: column;
}

.tariff-card__eyebrow {
  /* the vertical margins undo Figma's cap trim, the right one the trailing letter-space */
  margin: -3px -4px -2px 0;
  color: var(--color-violet-dark);
  font-size: 14px;
  line-height: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.tariff-card__title {
  max-width: 282px; /* the designer's line break */
  margin: 37px auto 0;
}

.tariff-card__audience {
  margin-top: 34px;
  padding: 11px 0 14px;
  background-image: url("../img/tariffs-divider.svg"), url("../img/tariffs-divider.svg");
  background-repeat: no-repeat;
  background-position: center top, center bottom;
  background-size: 100% 1px;
}

.tariff-card__audience-label {
  margin: -2px 0;
  color: var(--color-violet-dark);
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  text-transform: uppercase;
}

.tariff-card__audience-text {
  max-width: 291px; /* the designer's line breaks */
  margin: 9px auto -3px;
  color: var(--color-violet-dark);
  font-size: 14px;
  line-height: 15px;
}

.tariff-card__price {
  display: flex;
  flex-direction: column;
  margin: 20px 18px 0 16px; /* the designer put the box 1px left of the card centre */
  padding: 21px 0 20px;
  border: 1px solid rgb(255 255 255 / 60%);
  border-radius: 10px;
  background-color: rgb(127 103 180 / 14%);
  -webkit-backdrop-filter: blur(34px);
  backdrop-filter: blur(34px);
}

.tariff-card__price-label {
  margin: -3px -4px -2px 0;
  color: var(--color-violet-dark);
  font-size: 14px;
  line-height: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.tariff-card__price-values {
  display: flex;
  flex-direction: column;
  margin-top: 19px;
}

/* the padding keeps the hand-drawn stroke, which rises above the digits, from being clipped */
.tariff-card__old-price {
  margin: -8px 0 -5px;
  padding-top: 4px;
  color: #6c5f8c;
  font-family: "Unbounded", Arial, sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 23px;
  white-space: nowrap;
  text-decoration: none; /* the crossing line is the designer's hand-drawn stroke */
  background: url("../img/tariffs-strike.svg") no-repeat calc(50% - 2px) 0 / 146px 25px;
  opacity: 0.64;
}

.tariff-card__new-price {
  margin: 9px 0 -6px;
  color: var(--color-violet-dark);
  font-family: "Unbounded", Arial, sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 32px;
  white-space: nowrap;
}

/* zero leading keeps the smaller sign from making the price line box taller */
.tariff-card__currency {
  font-size: 13px;
  line-height: 0;
}

.tariff-card__currency--lg {
  font-size: 18px;
}

/* The padding carries the cap-trim (2px above, 3px below) so the pill is 19px tall. */
.tariff-card__period {
  align-self: center;
  margin-top: 6px;
  padding: 2px 6px 3px;
  border-radius: 7px;
  color: #ffffff;
  font-family: "Unbounded", Arial, sans-serif;
  font-size: 13px;
  line-height: 14px;
  background-color: var(--color-violet-dark);
}

.tariff-card__content {
  padding: 34px 26px 0;
}

.tariff-card__content-label {
  margin: -3px -4px -2px 0;
  color: var(--color-text);
  font-size: 14px;
  line-height: 15px;
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
}

.tariff-card__list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 18px;
}

.tariff-card__item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.tariff-card__item::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: url("../img/tariffs-check.svg") no-repeat center / 16px 16px;
}

.tariff-card__item-text {
  max-width: 257px; /* the designer's line breaks */
  margin: -2px 0 -3px;
  color: var(--color-text);
  font-size: 16px;
  line-height: 18px;
}

.tariff-card__accent {
  font-weight: 600;
}

.tariff-card__accent--bold {
  font-weight: 700;
}

.tariff-card__button {
  margin-top: auto;
  border-radius: 0; /* the card footer button is flush with the clipped card edges */
}

/* ---- the middle card: violet head, white text, yellow price ---- */
.tariff-card--featured .tariff-card__top {
  background-color: var(--color-violet);
  background-image:
    url("../img/tariffs-wave.svg"),
    radial-gradient(closest-side circle, #7761aa 100%, transparent 100%),
    radial-gradient(closest-side circle, #7761aa 100%, transparent 100%),
    radial-gradient(closest-side circle, #7761aa 100%, transparent 100%);
}

.tariff-card--featured .tariff-card__eyebrow {
  color: #ffffff;
}

.tariff-card--featured .tariff-card__title {
  margin-top: 22px;
}

.tariff-card--featured .tariff-card__audience {
  margin-top: 32px;
  background-image: url("../img/tariffs-divider-light.svg"), url("../img/tariffs-divider-light.svg");
}

.tariff-card--featured .tariff-card__audience-label {
  color: #ffffff;
}

.tariff-card--featured .tariff-card__audience-text {
  color: #ffffff;
}

.tariff-card--featured .tariff-card__price {
  margin-top: 22px;
  border-color: rgb(255 255 255 / 12%);
  background-color: rgb(255 255 255 / 9%);
}

.tariff-card--featured .tariff-card__price-label {
  color: #ffffff;
}

.tariff-card--featured .tariff-card__old-price {
  color: #ffffff;
  opacity: 1;
}

.tariff-card--featured .tariff-card__new-price {
  color: #fabd00;
}

.tariff-card--featured .tariff-card__period {
  color: #343434;
  background-color: #fabd00;
}

@media (max-width: 1199.98px) {
  .tariffs__inner {
    padding-top: 43px;
    padding-bottom: 67px;
  }

  .tariffs__list {
    flex-wrap: wrap;
    margin-top: 50px;
  }

  .tariffs__item {
    flex: 0 0 calc(50% - 20px);
  }

  .tariffs__compare {
    margin-top: 40px;
  }
}

@media (max-width: 767.98px) {
  .tariffs__inner {
    padding-top: 32px;
    padding-bottom: 48px;
  }

  .tariffs__list {
    gap: 28px;
    margin-top: 36px;
  }

  .tariffs__item {
    flex-basis: 100%;
  }

  .tariffs__item--featured {
    margin-top: 0;
  }

  .tariffs__compare {
    margin-top: 28px;
  }

  .tariff-card {
    min-height: 0;
  }

  .tariff-card__top {
    padding-bottom: 56px;
  }

  .tariff-card__content {
    padding-right: 20px;
    padding-bottom: 24px;
    padding-left: 20px;
  }
}

/* ==== block: tariff-attestat ==== */
/* ==== tariff-attestat — detailed description of the «Аттестат» tariff ==== */
.tariff-attestat {
  padding-bottom: 80px;
}

/* The two violet ellipses of the design are backgrounds of the card, which clips them. */
.tariff-attestat__card {
  max-width: 1300px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--color-violet-border);
  border-radius: 50px;
  background-color: var(--color-violet-surface);
  background-image:
    radial-gradient(circle 323px at 127px 766px, rgb(228 216 255 / 28%) 100%, rgb(228 216 255 / 0) 100%),
    radial-gradient(circle 554px at calc(100% - 104px) 941px, rgb(228 216 255 / 44%) 100%, rgb(228 216 255 / 0) 100%);
  background-repeat: no-repeat;
  background-origin: border-box;
}

.tariff-attestat__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 43px; /* 44px in Figma, less the 1px border of the card */
  padding-bottom: 52px;
}

.tariff-attestat__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  margin: 0; /* hgroup keeps the browser's block margins */
}

.tariff-attestat__lead {
  max-width: 986px; /* f2h wraps: the designer's two lines break at 953..1019px */
  margin-top: 27px; /* 32px under the badge, less the 5px cap-trim of this text */
  font-weight: 500;
  font-size: 23px;
  line-height: 28px;
  text-align: center;
}

.tariff-attestat__benefits {
  display: flex;
  align-self: stretch;
  gap: 22px;
  margin-top: 38px;
}

.tariff-attestat__benefit {
  flex: 1 1 0;
  min-width: 0;
}

/* The four cards share one icon. It is set on a mix class of this block, because
   Chrome resolves a url() handed to a component through a custom property against
   foundation/components.css, where the property is read. */
.tariff-attestat__benefit-icon {
  background-image: url("../img/tariff-attestat-benefit.png");
}

/* The designer's line breaks differ per card; the component ships one fixed measure. */
.tariff-attestat__benefit-text--admission {
  max-width: 212px;
}

.tariff-attestat__benefit-text--deadlines {
  max-width: 154px;
}

.tariff-attestat__benefit-text--official {
  max-width: 154px;
}

.tariff-attestat__benefit-text--curator {
  max-width: 215px;
}

.tariff-attestat__subtitle {
  margin-top: 67px;
}

.tariff-attestat__groups {
  display: flex;
  align-self: stretch;
  gap: 27px;
  margin-top: 43px;
}

.tariff-attestat__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 23px;
  padding: 26px 24px 32px 25px;
  border: 1px solid #ddd2f4;
  border-radius: 14px;
  background-color: #ffffff;
  box-shadow: 0 0 40px 0 rgb(114 92 164 / 10%);
}

.tariff-attestat__group--documents {
  flex: 0 1 446px;
}

.tariff-attestat__group--curator {
  flex: 0 1 316px;
}

.tariff-attestat__group--extra {
  flex: 1 1 auto;
  margin-left: 6px; /* the designer left 33px here against 27px between the first two */
}

.tariff-attestat__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 77px;
  height: 77px;
  overflow: hidden;
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  background-color: rgb(249 110 51 / 22%);
}

.tariff-attestat__icon--documents {
  padding: 7px 11px 5px 10px;
}

/* The curator icon is a composite: frame, photo and its orange frame ship as one file. */
.tariff-attestat__icon--curator {
  background-image: url("../img/tariff-attestat-curator.png");
  background-repeat: no-repeat;
  background-position: center;
  background-origin: border-box;
  background-size: 77px 77px;
}

.tariff-attestat__icon--gift {
  padding: 15px 12px 10px 13px;
}

.tariff-attestat__picture {
  background-repeat: no-repeat;
}

.tariff-attestat__picture--documents {
  width: 54px;
  height: 63px;
  background-image: url("../img/what-you-get-documents.png");
  background-position: -7px -26px;
  background-size: 179px 119px;
}

.tariff-attestat__picture--gift {
  width: 44px;
  height: 44px;
  background-image: url("../img/what-you-get-gift.png");
  background-position: center;
  background-size: cover;
  transform: rotate(8.39deg);
}

.tariff-attestat__group-title {
  margin-top: -3px; /* Figma cap-trim of the 18/20 text */
  margin-bottom: -4px;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  text-transform: uppercase;
}

.tariff-attestat__checks {
  display: flex;
  flex-direction: column;
  gap: 17px;
  margin-top: 1px; /* the designer left 24px under the group title and 23px above it */
}

.tariff-attestat__check--papers {
  max-width: 346px;
}

.tariff-attestat__check--attestation {
  max-width: 324px;
}

.tariff-attestat__check--webinars {
  max-width: 251px;
}

/* The last line of the first group is the only bold one: a <strong> inside the
   component's text element, which pins its own weight at 400. */
.tariff-attestat__check-accent {
  font-weight: 600;
}

.tariff-attestat__cta {
  width: 594px;
  margin-top: 47px;
}

@media (max-width: 1199.98px) {
  .tariff-attestat {
    padding-bottom: 60px;
  }

  .tariff-attestat__card {
    margin: 0 24px;
    border-radius: 40px;
  }

  .tariff-attestat__inner {
    padding-top: 36px;
    padding-bottom: 40px;
  }

  .tariff-attestat__lead {
    max-width: 780px;
    margin-top: 24px;
    font-size: 20px;
    line-height: 26px;
  }

  .tariff-attestat__benefits {
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 32px;
  }

  .tariff-attestat__benefit {
    flex-basis: calc(50% - 10px);
  }

  /* Wide cards and single-column lists drop the designer's desktop measures. */
  .tariff-attestat__benefit-text {
    max-width: none;
  }

  .tariff-attestat__subtitle {
    margin-top: 48px;
  }

  .tariff-attestat__groups {
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 32px;
  }

  .tariff-attestat__group--documents,
  .tariff-attestat__group--curator,
  .tariff-attestat__group--extra {
    flex: 1 1 300px;
    margin-left: 0;
  }

  .tariff-attestat__check {
    max-width: none;
  }

  .tariff-attestat__cta {
    margin-top: 36px;
  }
}

@media (max-width: 767.98px) {
  .tariff-attestat {
    padding-bottom: 40px;
  }

  .tariff-attestat__card {
    margin: 0 12px;
    border-radius: 24px;
  }

  .tariff-attestat__inner {
    padding-top: 28px;
    padding-bottom: 32px;
  }

  .tariff-attestat__heading {
    gap: 16px;
  }

  .tariff-attestat__lead {
    margin-top: 20px;
    font-size: 16px;
    line-height: 22px;
  }

  .tariff-attestat__benefits {
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
  }

  .tariff-attestat__benefit {
    flex: 0 0 auto;
  }

  .tariff-attestat__subtitle {
    margin-top: 32px;
  }

  .tariff-attestat__groups {
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
  }

  .tariff-attestat__group {
    gap: 18px;
    padding: 20px 16px 24px;
  }

  .tariff-attestat__group--documents,
  .tariff-attestat__group--curator,
  .tariff-attestat__group--extra {
    flex: 0 0 auto;
  }

  .tariff-attestat__checks {
    gap: 14px;
  }

  .tariff-attestat__cta {
    width: 100%;
    margin-top: 28px;
  }
}

/* ==== block: tariff-preparation-1 ==== */
/* The clip belongs to this part only: it cuts the yellow ribbon to the rounded top.
   The two pale ellipses (nodes 3766:2679, 3766:2680) are children of the wrapper that
   it clips; this part paints its share of them, the shared class stays free of them. */
.tariff-preparation-1__card {
  overflow: hidden;
  padding-bottom: 53px;
  background-image:
    radial-gradient(circle at 1181px 1120px, rgb(228 216 255 / 44%) 530px, transparent 531px),
    radial-gradient(circle at 61px 1297px, rgb(228 216 255 / 42%) 383px, transparent 384px);
  background-repeat: no-repeat;
  background-origin: border-box; /* Figma measures both from the card's outer edge */
}

/* Figma draws the ribbon 46px tall inside the card's 2px top border. */
.tariff-preparation-1__ribbon {
  padding-top: 12px;
  padding-bottom: 12px;
}

.tariff-preparation-1__inner {
  display: flex;
  flex-direction: column;
}

.tariff-preparation-1__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 31px;
}

.tariff-preparation-1__eyebrow {
  color: rgb(74 53 114 / 60%);
}

.tariff-preparation-1__title {
  margin-top: 25px;
}

.tariff-preparation-1__lead {
  max-width: 1088px;
  margin-top: 27px;
  margin-right: auto;
  margin-left: auto;
  font-weight: 500;
  font-size: 23px;
  line-height: 28px;
  text-align: center;
}

.tariff-preparation-1__benefits {
  display: flex;
  gap: 22px;
  margin-top: 44px;
}

.tariff-preparation-1__benefit {
  flex: 1 1 0;
  min-width: 0;
}

/* All four cards carry the same certificate icon. */
.tariff-preparation-1__benefit-icon {
  background-image: url("../img/benefit-icon-demo.png");
}

/* The four measures the designer set for the card texts. */
.tariff-preparation-1__benefit-text {
  max-width: 181px;
}

.tariff-preparation-1__benefit-text--control {
  max-width: 214px;
}

.tariff-preparation-1__benefit-text--support {
  max-width: 183px;
}

.tariff-preparation-1__benefit-text--full {
  max-width: 215px;
}

.tariff-preparation-1__steps-title {
  margin-top: 100px;
}

.tariff-preparation-1__steps {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%; /* auto side margins would otherwise shrink the column to its content */
  max-width: 1088px;
  margin-top: 61px;
  margin-right: auto;
  margin-left: auto;
}

/* A step stacks two panels: the white card spans the row, the orange note is pulled
   back over its right end and sets the row height. */
.tariff-preparation-1__step {
  display: flex;
  align-items: center;
}

.tariff-preparation-1__step--testing {
  --step-height: 170px;
  --step-card-height: 143px;
  --step-image-indent: 33px;
  --step-image-gap: 96px;
  --step-image-overhang: -21px -30px;
  --step-title-width: 188px;
  --step-note-indent: 66px;
  --step-note-gap: 15px;
}

.tariff-preparation-1__step--course {
  --step-height: 268px;
  --step-card-height: 225px;
  --step-image-indent: 33px;
  --step-image-gap: 99px;
  --step-title-width: 217px;
  --step-note-indent: 63px;
  --step-note-measure: 381px;
}

.tariff-preparation-1__step--program {
  --step-height: 314px;
  --step-card-height: 272px;
  --step-image-indent: 27px;
  --step-image-gap: 104px;
  --step-title-width: 246px;
  --step-note-indent: 63px;
  --step-note-measure: 439px;
}

.tariff-preparation-1__step-card {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--step-image-gap);
  min-height: var(--step-card-height);
  margin-top: 2px; /* Figma centres the white panel one pixel below the row's centre */
  padding-left: var(--step-image-indent);
  border-radius: 30px;
  background-color: #ffffff;
  background-image: radial-gradient(circle at 23px 50%, #fff1eb 197px, transparent 198px);
}

/* In the first step the illustration is taller than the white panel: it overhangs
   instead of stretching it. */
.tariff-preparation-1__step-image {
  flex-shrink: 0;
  margin-block: var(--step-image-overhang, 0);
}

.tariff-preparation-1__step-title {
  max-width: var(--step-title-width);
  color: #000000;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
}

.tariff-preparation-1__step-title-accent {
  color: var(--color-accent);
}

/* The note keeps the row's design height and overlaps the white card it follows. */
.tariff-preparation-1__step-note {
  display: flex;
  flex: 0 0 567px;
  flex-direction: column;
  /* 14px between line boxes is the designer's 13px: his lead-in text box is 1px taller. */
  gap: var(--step-note-gap, 14px);
  justify-content: center;
  min-height: var(--step-height);
  margin-left: -567px;
  padding: 38px 40px 38px var(--step-note-indent);
  border: 1px solid #ffb799;
  border-radius: 30px;
  background-color: #fff1eb;
}

.tariff-preparation-1__note-text,
.tariff-preparation-1__note-intro,
.tariff-preparation-1__note-item {
  color: #000000;
  font-size: 20px;
  line-height: 24px;
}

.tariff-preparation-1__note-text--narrow {
  max-width: 370px;
}

.tariff-preparation-1__note-accent {
  font-weight: 600;
}

.tariff-preparation-1__note-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: var(--step-note-measure);
}

.tariff-preparation-1__note-item {
  display: flex;
  gap: 7px;
  padding-left: 7px;
}

.tariff-preparation-1__note-item::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-top: 9px;
  border-radius: 50%;
  background-color: #000000;
}

@media (max-width: 1199.98px) {

  .tariff-preparation-1__card {
    padding-bottom: 40px;
  }

  .tariff-preparation-1__heading {
    margin-top: 24px;
  }

  .tariff-preparation-1__title {
    margin-top: 20px;
  }

  .tariff-preparation-1__lead {
    margin-top: 22px;
    font-size: 20px;
    line-height: 26px;
  }

  .tariff-preparation-1__benefits {
    flex-wrap: wrap;
    margin-top: 34px;
  }

  .tariff-preparation-1__benefit {
    flex-basis: calc(50% - 11px);
  }

  /* Two cards per row are far wider than the designer's measures: they are dropped
     here for the base class and, being later in the file, for every modifier too. */
  .tariff-preparation-1__benefit-text {
    max-width: none;
  }

  .tariff-preparation-1__steps-title {
    margin-top: 72px;
  }

  .tariff-preparation-1__steps {
    gap: 24px;
    margin-top: 44px;
  }

  /* The two panels stop overlapping and stack, each as wide as the row. */
  .tariff-preparation-1__step {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .tariff-preparation-1__step-card {
    gap: 32px;
    min-height: 0;
    padding: 24px;
  }

  .tariff-preparation-1__step-image {
    margin-block: 0;
  }

  .tariff-preparation-1__step-title {
    max-width: none;
  }

  .tariff-preparation-1__step-note {
    flex: 0 0 auto;
    min-height: 0;
    margin-left: 0;
    padding: 28px 32px;
  }

  .tariff-preparation-1__note-text--narrow {
    max-width: none;
  }

  .tariff-preparation-1__note-list {
    max-width: none;
  }
}

@media (max-width: 767.98px) {

  .tariff-preparation-1__card {
    padding-bottom: 32px;
  }

  .tariff-preparation-1__heading {
    margin-top: 20px;
  }

  .tariff-preparation-1__title {
    margin-top: 16px;
  }

  .tariff-preparation-1__lead {
    margin-top: 16px;
    font-size: 16px;
    line-height: 22px;
  }

  .tariff-preparation-1__benefits {
    gap: 16px;
    margin-top: 24px;
  }

  .tariff-preparation-1__benefit {
    flex-basis: 100%;
    min-height: 0;
  }

  .tariff-preparation-1__steps-title {
    margin-top: 44px;
  }

  .tariff-preparation-1__steps {
    gap: 20px;
    margin-top: 28px;
  }

  .tariff-preparation-1__step-card {
    gap: 16px;
    padding: 16px;
    background-image: radial-gradient(circle at 16px 50%, #fff1eb 110px, transparent 111px);
  }

  .tariff-preparation-1__step-image {
    width: 96px;
  }

  .tariff-preparation-1__step-title {
    font-size: 17px;
    line-height: 21px;
  }

  .tariff-preparation-1__step-note {
    padding: 20px 16px;
  }

  .tariff-preparation-1__note-text,
  .tariff-preparation-1__note-intro,
  .tariff-preparation-1__note-item {
    font-size: 16px;
    line-height: 21px;
  }

  .tariff-preparation-1__note-item::before {
    margin-top: 8px;
  }
}

/* ==== block: tariff-preparation-2 ==== */
/* The two pale ellipses of the shared card end inside this part: their tails are backgrounds of
   the card, which clips them as Figma does. The x positions are the ones the card is measured by,
   less its 2px side border, because a background starts inside the border.
   The card also clips the white frame the screenshots carry inside their picture. */
.tariff-preparation-2__card {
  overflow: hidden;
  background-image:
    radial-gradient(circle closest-side, rgb(228 216 255 / 44%) 100%, transparent 100%),
    radial-gradient(circle closest-side, rgb(228 216 255 / 42%) 100%, transparent 100%);
  background-position: 648px -984px, -325px -660px;
  background-size: 1061px 1061px, 767px 767px;
  background-repeat: no-repeat;
}

.tariff-preparation-2__inner {
  display: flex;
  flex-direction: column;
  padding-top: 32px;
  padding-bottom: 54px;
}

.tariff-preparation-2__subtitle {
  display: flow-root;
  max-width: 523px; /* the designer's line break */
  margin-top: 18px;
  margin-inline: auto;
  color: var(--color-violet-dark);
  font-family: "Unbounded", Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 20px;
  text-align: center;
  text-transform: uppercase;
}

/* Figma cap-trim of the 17/20 text: the box starts at the cap line, 1px down as the reference shows it */
.tariff-preparation-2__subtitle-text {
  display: block;
  margin: -3px 0 -4px;
}

.tariff-preparation-2__teachers {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  margin-top: 41px;
}

/* the basis is the width below which the photo and the name stop fitting side by side:
   narrower than two of them, the row wraps into one column */
.tariff-preparation-2__teacher {
  flex: 1 1 400px;
  min-width: 0;
}

/* the second photo is cropped differently from the one the component ships */
.tariff-preparation-2__teacher-image {
  width: 183px;
  height: 328px;
  margin: -18px 0 0;
}

/* both subject pills are one fixed size in the design, with the label centred in it */
.tariff-preparation-2__subject {
  width: 146px;
  padding-inline: 0;
  text-align: center;
}

.tariff-preparation-2__teacher-fact {
  max-width: 480px; /* the designer's line breaks */
}

.tariff-preparation-2__title--learning {
  margin-top: 95px;
}

.tariff-preparation-2__platform {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-top: 39px;
}

/* the design draws the label plate at a fixed width with the text 23px inside it */
.tariff-preparation-2__caption {
  width: 277px;
  padding: 6px 0 6px 23px;
  border-radius: 100px;
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  background-color: var(--color-accent);
}

.tariff-preparation-2__caption--wide {
  width: 419px;
}

.tariff-preparation-2__frame {
  align-self: stretch;
  margin-inline: 8px; /* the 8px white ring reaches the container edges */
  overflow: hidden;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 0 0 8px #ffffff, 0 0 38px 0 rgb(114 92 164 / 10%);
}

.tariff-preparation-2__platform-image {
  width: 1127px;
  height: 489px;
}

.tariff-preparation-2__shots {
  display: flex;
  flex-wrap: wrap;
  gap: 41px;
  margin-top: 84px;
}

.tariff-preparation-2__shot {
  flex: 1 1 400px;
  min-width: 0;
}

.tariff-preparation-2__figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
}

/* Swiper adds the class .swiper to this root on init, and its own stylesheet says
   .swiper { display: block; margin-left: auto; margin-right: auto } at one class of weight. Whoever
   is loaded last wins such a tie, and in a CMS the vendor stylesheet is usually enqueued after the
   theme's — so the grid would die the moment the slider starts and the arrows would drop out of
   their cell into the flow. The second selector takes the weight from Swiper's own class and settles
   the tie by specificity instead of by load order. */
.tariff-preparation-2__slider,
.tariff-preparation-2__slider.swiper {
  display: grid; /* one cell: the arrows lie over the screenshot */
  grid-template-columns: minmax(0, 1fr); /* the cell keeps the picture's width, not the track's */
  width: 100%; /* the figure is align-items: flex-start, so without this the grid shrinks to fit */
  margin-inline: 0; /* .swiper centres itself with auto side margins; pin them to the layout */
  overflow: hidden; /* the clip Swiper sets itself, so the track shows one slide before it starts */
}

.tariff-preparation-2__slides {
  display: flex;
  grid-area: 1 / 1;
}

.tariff-preparation-2__slide {
  flex: 0 0 100%;
}

/* the box belongs to the layout, not to the file: the slide fills the column and its height comes
   from the aspect ratio of the design, so a screenshot of any resolution changes nothing around it.
   contain, not cover, because a screenshot must not be cropped. */
.tariff-preparation-2__shot-image {
  width: 100%;
  height: auto;
  aspect-ratio: 637 / 400;
  object-fit: contain;
}

/* real controls drawn over the arrows painted into the screenshot: a light circle with a
   chevron, kept 10.8% of the picture from each side so it covers the painted circle at every
   width; z-index lifts them over the Swiper track, which carries a z-index of its own */
.tariff-preparation-2__arrow {
  z-index: 2;
  display: flex;
  grid-area: 1 / 1;
  align-self: center;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #eeedf2;
  color: var(--color-text);
  transition:
    background-color 0.2s,
    color 0.2s,
    opacity 0.2s;
}

/* the chevron is two sides of a square turned 45 degrees: no asset, crisp at any zoom */
.tariff-preparation-2__arrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-bottom: 2px solid currentcolor;
  border-left: 2px solid currentcolor;
}

.tariff-preparation-2__arrow--prev {
  justify-self: start;
  margin-left: calc(10.8% - 17px);
}

/* optical centring: the mass of a chevron sits away from its point */
.tariff-preparation-2__arrow--prev::before {
  margin-left: 3px;
  transform: rotate(45deg);
}

.tariff-preparation-2__arrow--next {
  justify-self: end;
  margin-right: calc(10.8% - 17px);
}

.tariff-preparation-2__arrow--next::before {
  margin-right: 3px;
  transform: rotate(-135deg);
}

@media (hover: hover) {
  .tariff-preparation-2__arrow:hover {
    background-color: var(--color-accent);
    color: #ffffff;
  }
}

.tariff-preparation-2__arrow:focus-visible {
  outline: 2px solid var(--color-violet-dark);
  outline-offset: 3px;
}

.tariff-preparation-2__arrow:active {
  background-color: #e35a1f;
  color: #ffffff;
}

/* Swiper marks the control that cannot move the track (first or last slide) with aria-disabled.
   Such a control is barely visible and must not light up under the pointer, so the hover and
   active colours are restored here; an attribute weighs as much as a class, so these selectors
   outweigh them. */
.tariff-preparation-2__arrow[aria-disabled="true"] {
  cursor: default;
  opacity: 25%;
}

.tariff-preparation-2__arrow[aria-disabled="true"]:active {
  background-color: #eeedf2;
  color: var(--color-text);
}

@media (hover: hover) {
  .tariff-preparation-2__arrow[aria-disabled="true"]:hover {
    background-color: #eeedf2;
    color: var(--color-text);
  }
}

@media (max-width: 1199.98px) {

  .tariff-preparation-2__inner {
    padding-top: 28px;
    padding-bottom: 44px;
  }

  .tariff-preparation-2__subtitle {
    margin-top: 14px;
  }

  .tariff-preparation-2__teachers {
    gap: 24px;
    margin-top: 32px;
  }

  .tariff-preparation-2__title--learning {
    margin-top: 72px;
  }

  /* narrower columns: the label plates follow their text instead of the design's fixed width */
  .tariff-preparation-2__caption,
  .tariff-preparation-2__caption--wide {
    width: auto;
    padding-right: 23px;
  }

  .tariff-preparation-2__platform {
    gap: 24px;
    margin-top: 30px;
  }

  .tariff-preparation-2__platform-image {
    width: 100%;
    height: auto;
  }

  .tariff-preparation-2__shots {
    gap: 24px;
    margin-top: 64px;
  }

  .tariff-preparation-2__figure {
    gap: 20px;
  }

}

@media (max-width: 767.98px) {
  .tariff-preparation-2__inner {
    padding-top: 20px;
    padding-bottom: 32px;
  }

  .tariff-preparation-2__subtitle {
    max-width: none;
    margin-top: 12px;
    font-size: 14px;
    line-height: 17px;
  }

  .tariff-preparation-2__subtitle-text {
    margin: -2px 0 -3px;
  }

  .tariff-preparation-2__teachers {
    gap: 20px;
    margin-top: 24px;
  }

  .tariff-preparation-2__title--learning {
    margin-top: 48px;
  }

  .tariff-preparation-2__caption {
    padding: 5px 16px;
    font-size: 14px;
    line-height: 17px;
  }

  .tariff-preparation-2__platform {
    gap: 16px;
    margin-top: 24px;
  }

  .tariff-preparation-2__shots {
    gap: 32px;
    margin-top: 40px;
  }

  .tariff-preparation-2__figure {
    gap: 14px;
  }

  .tariff-preparation-2__arrow {
    width: 44px;
    height: 44px;
  }

  .tariff-preparation-2__arrow--prev {
    margin-left: calc(10.8% - 22px);
  }

  .tariff-preparation-2__arrow--next {
    margin-right: calc(10.8% - 22px);
  }
}

/* ==== block: tariff-preparation-3 ==== */
/* Below the card: plain page background. */
.tariff-preparation-3 {
  padding-bottom: 80px;
}

.tariff-preparation-3__card {
  padding-top: 26px;
  padding-bottom: 59px;
}

.tariff-preparation-3__banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  margin: 0 -1px; /* the banner is 1px wider than the container on each side */
  padding: 41px 57px 28px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: 20px;
  background-color: var(--color-accent);
  background-image:
    url("../img/tariff-preparation-3-cat.png"),
    url("../img/tariff-preparation-3-books.svg"),
    radial-gradient(circle closest-side, #fc7d48 0 99.6%, rgb(252 125 72 / 0) 100%),
    radial-gradient(circle closest-side, #fc7d48 0 99.6%, rgb(252 125 72 / 0) 100%);
  background-position: right 202px top 20px, right -16px top 163px, right -179px top 26px, left 175px top -489px;
  background-size: 238px 254px, 155px 145px, 763px 763px, 618px 618px;
  background-repeat: no-repeat;
  background-origin: border-box;
}

.tariff-preparation-3__banner-title {
  max-width: 604px;
}

.tariff-preparation-3__banner-text {
  max-width: 604px;
  margin: -4px 0; /* Figma cap-trim of the 22/24 text */
  color: #ffffff;
  font-weight: 500;
  font-size: 22px;
  line-height: 24px;
}

.tariff-preparation-3__banner-link {
  width: 270px;
  max-width: 100%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 45%); /* Figma draws this ring inside the button */
}

.tariff-preparation-3__panel {
  display: flex;
  flex-direction: column;
  margin-top: 80px;
  padding: 47px 36px 35px;
  overflow: hidden;
  border: 1px solid #d6ccf8;
  border-radius: 20px;
  color: #ffffff;
  background-color: var(--color-violet);
  background-image:
    radial-gradient(circle closest-side, rgb(114 93 162 / 58%) 0 99.6%, rgb(114 93 162 / 0) 100%),
    radial-gradient(circle closest-side, rgb(114 93 162 / 58%) 0 99.6%, rgb(114 93 162 / 0) 100%);
  background-position: right -369px top 35px, left -98px top -59px;
  background-size: 798px 798px, 639px 639px;
  background-repeat: no-repeat;
  background-origin: border-box;
  box-shadow: 0 0 40px rgb(114 92 164 / 10%);
}

/* One grid cell: the «+» badge is stacked over the seam between the two lists. */
.tariff-preparation-3__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 19px;
  margin-top: 45px;
  margin-left: 11px; /* the designer offsets the two lists to the right of the panel centre */
}

.tariff-preparation-3__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 360px; /* the design fixes the height of both columns */
  padding-bottom: 22px; /* keeps the last line off the rounded bottom when the list grows */
  overflow: hidden;
  border-radius: 20px;
}

.tariff-preparation-3__col--attestat {
  grid-area: 1 / 1;
  background-color: #9d84c7;
}

.tariff-preparation-3__col--prep {
  grid-area: 1 / 2;
  background-color: #ffffff;
}

.tariff-preparation-3__col-title {
  padding: 21px 37px 16px; /* 25/21 in Figma, less the cap-trim of the 20/24 text */
  color: #ffffff;
  font-family: "Unbounded", Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
}

.tariff-preparation-3__col-title--attestat {
  background-color: #655191;
}

.tariff-preparation-3__col-title--prep {
  background-color: var(--color-green-dark);
}

.tariff-preparation-3__list {
  display: flex;
  flex-direction: column;
  gap: 17px;
  margin-top: 22px;
  padding: 0 37px;
}

.tariff-preparation-3__list--prep {
  color: var(--color-text-strong);
}

.tariff-preparation-3__check--attestat::before {
  background-color: #ffffff;
}

.tariff-preparation-3__check--prep::before {
  background-color: var(--color-green-dark);
}

/* Line breaks set by the designer. */
.tariff-preparation-3__check--school {
  max-width: 424px;
}

.tariff-preparation-3__check--program {
  max-width: 439px;
}

.tariff-preparation-3__accent {
  font-weight: 600;
}

.tariff-preparation-3__plus {
  grid-area: 1 / 1 / 2 / 3;
  align-self: start;
  justify-self: center;
  width: 60px;
  height: 60px;
  margin: 3px 10px 0 0; /* the designer sets the badge 5px left of the seam centre */
  background: url("../img/tariff-preparation-3-plus.svg") no-repeat center / contain;
}

.tariff-preparation-3__choose {
  align-self: center;
  width: 594px;
  max-width: 100%;
  margin-top: 34px;
  box-shadow: 0 0 0 1px #ff8585; /* the red form of the button carries a red ring */
}

@media (max-width: 1199.98px) {

  .tariff-preparation-3 {
    padding-bottom: 60px;
  }

  .tariff-preparation-3__card {
    padding-top: 20px;
    padding-bottom: 44px;
  }

  /* The books stack is dropped and the cat shrinks into the reserved right padding. */
  .tariff-preparation-3__banner {
    gap: 24px;
    padding: 32px 230px 32px 40px;
    background-image:
      url("../img/tariff-preparation-3-cat.png"),
      radial-gradient(circle closest-side, #fc7d48 0 99.6%, rgb(252 125 72 / 0) 100%),
      radial-gradient(circle closest-side, #fc7d48 0 99.6%, rgb(252 125 72 / 0) 100%);
    background-position: right 20px top 24px, right -179px top 26px, left 175px top -489px;
    background-size: 190px 203px, 763px 763px, 618px 618px;
  }

  .tariff-preparation-3__panel {
    margin-top: 60px;
    padding: 36px 32px 28px;
  }

  .tariff-preparation-3__columns {
    margin-top: 36px;
    margin-left: 0;
  }

  .tariff-preparation-3__col-title {
    padding: 18px 24px 15px;
    font-size: 18px;
    line-height: 22px;
  }

  .tariff-preparation-3__list {
    margin-top: 18px;
    padding: 0 24px;
  }

  .tariff-preparation-3__choose {
    margin-top: 28px;
  }
}

@media (max-width: 767.98px) {

  .tariff-preparation-3 {
    padding-bottom: 40px;
  }

  .tariff-preparation-3__card {
    padding-top: 16px;
    padding-bottom: 32px;
  }

  .tariff-preparation-3__banner {
    gap: 20px;
    padding: 24px 20px;
    background-image: none;
  }

  .tariff-preparation-3__banner-title {
    max-width: none;
  }

  .tariff-preparation-3__banner-text {
    max-width: none;
    margin: -3px 0;
    font-size: 16px;
    line-height: 20px;
  }

  .tariff-preparation-3__panel {
    margin-top: 40px;
    padding: 24px 16px;
  }

  .tariff-preparation-3__columns {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }

  .tariff-preparation-3__col {
    min-height: 0;
  }

  .tariff-preparation-3__col--prep {
    grid-area: 2 / 1;
  }

  .tariff-preparation-3__col-title {
    padding: 16px 20px 13px;
    font-size: 17px;
    line-height: 22px;
  }

  .tariff-preparation-3__list {
    gap: 14px;
    margin-top: 16px;
    padding: 0 20px;
  }

  .tariff-preparation-3__check--school,
  .tariff-preparation-3__check--program {
    max-width: none;
  }

  .tariff-preparation-3__plus {
    display: none;
  }

  .tariff-preparation-3__choose {
    margin-top: 24px;
  }
}

/* ==== block: tariff-maximum-1 ==== */
/* ==== tariff-maximum-1 ==== */
.tariff-maximum-1__card {
  overflow: hidden;
  /* The two pale ellipses clipped to the card (3766:2480, 3766:2481), measured from its outer edge. */
  background-image:
    radial-gradient(circle 554px at calc(100% + 14px) 375px, rgb(228 216 255 / 44%) 553px, rgb(228 216 255 / 0%) 554px),
    radial-gradient(circle 323px at 127px 766px, rgb(228 216 255 / 28%) 322px, rgb(228 216 255 / 0%) 323px);
  background-origin: border-box;
}

.tariff-maximum-1__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 43px; /* 44px in Figma, less the card's 1px top border */
  padding-bottom: 52px;
}

.tariff-maximum-1__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

/* Figma sets this layer to 60% opacity (design.md omits it; design.json has it). */
.tariff-maximum-1__eyebrow {
  color: rgb(74 53 114 / 60%);
}

/* Figma draws this badge 397px wide around its 368px text: 14px sides, not the component's 11px. */
.tariff-maximum-1__title {
  padding-right: 14px;
  padding-left: 14px;
}

.tariff-maximum-1__lead {
  width: 100%;
  max-width: 950px; /* the designer's line breaks */
  margin-top: 27px; /* 32px below the badge, less the 5px Figma cap-trim of the 23/28 text */
  margin-bottom: -6px;
  font-weight: 500;
  font-size: 23px;
  line-height: 28px;
  text-align: center;
}

.tariff-maximum-1__list {
  display: flex;
  width: 100%;
  margin-top: 44px;
  gap: 22px;
}

.tariff-maximum-1__item {
  flex: 1 1 0;
  min-width: 0;
}

.tariff-maximum-1__benefit-icon {
  background-image: url("../img/tariff-maximum-1-certificate.png");
}

.tariff-maximum-1__benefit-text {
  max-width: none; /* the card width sets the measure here, not the component default */
}

/* Two cards break earlier than their card width would: the designer's line breaks. */
.tariff-maximum-1__benefit-text--control {
  max-width: 207px;
}

.tariff-maximum-1__benefit-text--weak-spots {
  max-width: 215px;
}

@media (max-width: 1199.98px) {

  .tariff-maximum-1__inner {
    padding-top: 33px;
    padding-bottom: 39px;
  }

  .tariff-maximum-1__heading {
    gap: 19px;
  }

  .tariff-maximum-1__lead {
    margin-top: 18px;
    margin-bottom: -5px;
    font-size: 20px;
    line-height: 26px;
  }

  .tariff-maximum-1__list {
    flex-wrap: wrap;
    margin-top: 33px;
  }

  .tariff-maximum-1__item {
    flex-basis: calc(50% - 11px);
  }

  /* Wider cards: the text uses the whole card again. */
  .tariff-maximum-1__benefit-text--control,
  .tariff-maximum-1__benefit-text--weak-spots {
    max-width: none;
  }
}

@media (max-width: 767.98px) {

  .tariff-maximum-1__inner {
    padding-top: 28px;
    padding-bottom: 32px;
  }

  .tariff-maximum-1__heading {
    gap: 16px;
  }

  .tariff-maximum-1__lead {
    margin-top: 15px;
    font-size: 17px;
    line-height: 22px;
  }

  .tariff-maximum-1__list {
    margin-top: 28px;
    gap: 16px;
  }

  .tariff-maximum-1__item {
    flex-basis: 100%;
  }
}

/* ==== block: tariff-maximum-2 ==== */
/* The two pale ellipses of the card frame reach into this slice; the wrapper's own fill stays underneath. */
.tariff-maximum-2__card {
  padding: 5px 69px 53px;
  overflow: hidden;
  background-image:
    radial-gradient(322px 322px at 127px 298px, rgb(228 216 255 / 28%) 0 100%, transparent 100%),
    radial-gradient(553px 553px at 1314px -93px, rgb(228 216 255 / 44%) 0 100%, transparent 100%);
  background-origin: border-box;
  background-repeat: no-repeat;
}

.tariff-maximum-2__panel {
  padding: 47px 28px 51px;
  border: 1px solid #fff4d3;
  border-radius: 20px;
  background-image: radial-gradient(70.7% 70.7% at 50% 50%, #fff6db 0%, #fad15c 100%);
  box-shadow: 0 0 40px 0 rgb(114 92 164 / 10%);
}

.tariff-maximum-2__title {
  color: var(--color-text);
}

.tariff-maximum-2__features {
  display: flex;
  gap: 21px;
  margin: 35px 12px 0 16px;
}

.tariff-maximum-2__feature {
  flex: 0 1 344px;
  min-height: 134px;
  padding: 19px 46px 19px 19px;
  border: 1px solid #dac58a;
  border-radius: 16px;
  color: var(--color-text-strong);
  background-color: #fff4d6;
}

.tariff-maximum-2__feature--lessons {
  padding: 20px 16px 24px 20px;
  border: 0;
  background-color: #ffffff;
}

/* Figma gives the 16px range its own auto line height (19px) inside the 20px text. */
.tariff-maximum-2__note {
  display: block;
  margin-top: -1px;
  font-size: 16px;
  line-height: 19px;
}

.tariff-maximum-2__lessons {
  display: flex;
  align-items: flex-start;
  margin: 42px -14px 0 13px;
}

.tariff-maximum-2__lessons-text {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 13px;
}

.tariff-maximum-2__lessons-title {
  color: var(--color-text);
  text-align: left;
}

.tariff-maximum-2__mark {
  display: inline-block;
  padding: 0 4px;
  border-radius: 5px;
  color: #ffffff;
  background-color: var(--color-accent);
}

/* The plate hangs 4px into the left margin so its capitals line up with the line above. */
.tariff-maximum-2__mark--flush {
  margin-left: -4px;
}

.tariff-maximum-2__lesson-list {
  display: flex;
  flex-direction: column;
  gap: 17px;
  margin-top: 41px;
}

.tariff-maximum-2__lesson {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--color-text-strong);
  font-size: 20px;
  line-height: 22px;
}

.tariff-maximum-2__lesson::before {
  content: "";
  flex-shrink: 0;
  width: 25px;
  height: 27px;
  background-image: url("../img/tariff-maximum-2-check.png");
  background-repeat: no-repeat;
  background-size: 25px 27px;
}

/* The laptop render carries a wide transparent margin: Figma lets the heading plate run under it. */
.tariff-maximum-2__screen {
  flex: 0 0 603px;
  margin-left: -40px;
}

.tariff-maximum-2__fit-title {
  max-width: 461px;
  margin: 66px auto 0;
  color: var(--color-text);
}

/* The mascot is a background of the panel, so the panel's own box clips it exactly as Figma does;
   the exported file already carries the 30% opacity of the Figma group. */
.tariff-maximum-2__panel-inner {
  margin-top: 40px;
  padding: 15px 12px 17px 15px;
  overflow: hidden;
  border-radius: 22px;
  background-color: #fff2cc;
  background-image: url("../img/tariff-maximum-2-mascot.png");
  background-position: 726px 437px;
  background-repeat: no-repeat;
  background-size: 148px 278px;
}

.tariff-maximum-2__reasons {
  display: flex;
  gap: 41px;
  padding: 34px 75px 34px 33px;
  border-radius: 16px;
  background-color: #ffffff;
}

.tariff-maximum-2__reason {
  color: var(--color-text-strong);
}

/* Flex bases are the widths the designer's line breaks need. */
.tariff-maximum-2__reason--gaps {
  flex-basis: 191px;
}

.tariff-maximum-2__reason--motivation {
  flex-basis: 242px;
}

.tariff-maximum-2__reason--control {
  flex-basis: 163px;
}

.tariff-maximum-2__reason--result {
  flex-basis: 247px;
}

.tariff-maximum-2__columns {
  display: flex;
  align-items: flex-start;
  gap: 19px;
  margin-top: 19px;
}

.tariff-maximum-2__column {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 20px;
}

.tariff-maximum-2__column--attestat {
  background-color: #ffe599;
}

.tariff-maximum-2__column--exams {
  background-color: #ffffff;
}

.tariff-maximum-2__column-title {
  padding: 20px 37px 17px;
  color: #272424;
  font-family: "Unbounded", Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
}

.tariff-maximum-2__column--attestat .tariff-maximum-2__column-title {
  background-color: #ffd966;
}

.tariff-maximum-2__column--exams .tariff-maximum-2__column-title {
  color: #ffffff;
  background-color: var(--color-green-dark);
}

.tariff-maximum-2__column-list {
  display: flex;
  flex-direction: column;
  gap: 17px;
  max-width: 513px;
  padding: 22px 37px 39px;
  color: #272424;
}

.tariff-maximum-2__column--exams .tariff-maximum-2__column-list {
  max-width: 483px;
  padding-bottom: 37px;
  color: var(--color-text-strong);
}

.tariff-maximum-2__column-item::before {
  background-color: #272424;
}

.tariff-maximum-2__column--exams .tariff-maximum-2__column-item::before {
  background-color: var(--color-green-dark);
}

.tariff-maximum-2__column-item--lessons {
  max-width: 346px;
}

.tariff-maximum-2__accent {
  font-weight: 600;
}

.tariff-maximum-2__cta {
  display: flex;
  max-width: 594px;
  margin: 41px auto 0;
}

@media (max-width: 1199.98px) {

  .tariff-maximum-2__card {
    padding: 5px 32px 40px;
  }

  .tariff-maximum-2__panel {
    padding: 36px 20px 40px;
  }

  .tariff-maximum-2__features {
    flex-wrap: wrap;
    margin-top: 28px;
  }

  .tariff-maximum-2__feature {
    flex: 0 1 calc(50% - 11px);
    min-height: 0;
    padding: 19px;
  }

  .tariff-maximum-2__feature--lessons {
    padding: 20px;
  }

  .tariff-maximum-2__lessons {
    gap: 24px;
    margin: 32px 0 0;
  }

  .tariff-maximum-2__lessons-text {
    padding-top: 0;
  }

  .tariff-maximum-2__lesson-list {
    margin-top: 28px;
  }

  /* min-width: 0 — without it the laptop keeps its intrinsic 603px and squeezes the text column. */
  .tariff-maximum-2__screen {
    flex: 0 1 45%;
    min-width: 0;
    margin-left: 0;
  }

  .tariff-maximum-2__fit-title {
    margin-top: 48px;
  }

  .tariff-maximum-2__panel-inner {
    margin-top: 28px;
    padding: 15px;
    background-position: right 40px bottom 0;
  }

  .tariff-maximum-2__reasons {
    flex-wrap: wrap;
    gap: 20px 32px;
    padding: 24px;
  }

  .tariff-maximum-2__reason {
    flex-basis: calc(50% - 16px);
  }

  .tariff-maximum-2__columns {
    gap: 16px;
  }

  .tariff-maximum-2__column-title {
    padding: 18px 24px 15px;
    font-size: 18px;
    line-height: 22px;
  }

  .tariff-maximum-2__column-list {
    max-width: none;
    padding: 20px 24px 28px;
  }

  .tariff-maximum-2__column--exams .tariff-maximum-2__column-list {
    max-width: none;
    padding-bottom: 24px;
  }

  .tariff-maximum-2__column-item--lessons {
    max-width: none;
  }

  .tariff-maximum-2__cta {
    margin-top: 32px;
  }
}

@media (max-width: 767.98px) {

  .tariff-maximum-2__card {
    padding: 4px 12px 28px;
  }

  .tariff-maximum-2__panel {
    padding: 24px 12px 28px;
    border-radius: 16px;
  }

  .tariff-maximum-2__features {
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
  }

  .tariff-maximum-2__feature {
    flex: 0 1 auto;
    padding: 16px;
  }

  .tariff-maximum-2__feature--lessons {
    padding: 16px;
  }

  .tariff-maximum-2__note {
    font-size: 14px;
    line-height: 18px;
  }

  .tariff-maximum-2__lessons {
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
  }

  .tariff-maximum-2__lesson-list {
    gap: 12px;
    margin-top: 20px;
  }

  .tariff-maximum-2__lesson {
    gap: 9px;
    font-size: 17px;
    line-height: 20px;
  }

  .tariff-maximum-2__lesson::before {
    width: 21px;
    height: 23px;
    background-size: 21px 23px;
  }

  .tariff-maximum-2__screen {
    flex: 0 1 auto;
    width: 100%;
    max-width: 603px;
    margin-inline: auto;
  }

  .tariff-maximum-2__fit-title {
    margin-top: 32px;
  }

  .tariff-maximum-2__panel-inner {
    margin-top: 20px;
    padding: 12px;
    border-radius: 16px;
    background-image: none;
  }

  .tariff-maximum-2__reasons {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .tariff-maximum-2__reason {
    flex-basis: auto;
  }

  .tariff-maximum-2__columns {
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
  }

  .tariff-maximum-2__column {
    flex: 0 1 auto;
    border-radius: 16px;
  }

  .tariff-maximum-2__column-title {
    padding: 14px 16px 12px;
    font-size: 17px;
    line-height: 22px;
  }

  .tariff-maximum-2__column-list {
    gap: 12px;
    padding: 16px 16px 20px;
  }

  .tariff-maximum-2__column--exams .tariff-maximum-2__column-list {
    padding-bottom: 20px;
  }

  .tariff-maximum-2__cta {
    max-width: none;
    margin-top: 24px;
  }
}

/* ==== block: tariffs-comparison ==== */
/* ==== tariffs-comparison ==== */
/* The lavender field and the white wave start 27px below the block top, where the page frame begins.
   The wave is stretched to the band rather than fitted into it (`preserveAspectRatio="none"` in the
   file): with a 100% width and a fixed height, an SVG that keeps its own proportions matches the box
   at exactly one viewport width and stands off both edges at every other one. */
.tariffs-comparison {
  padding: 234px 0 33px;
  background-image: url("../img/tariffs-comparison-wave.svg"), linear-gradient(var(--color-violet-surface), var(--color-violet-surface));
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 27px, 0 27px;
  background-size: 100% 174px, 100% calc(100% - 27px);
}

.tariffs-comparison__title {
  margin-bottom: 54px;
}

/* The designer drew the plate as a rectangle behind the word: it takes no room in the line. */
.tariffs-comparison__title-mark {
  margin: 0 -4px 0 -2px;
  padding: 0 4px 0 2px;
}

.tariffs-comparison__scroller {
  overflow-x: auto;
  border: 1px solid #cbc2e8;
  border-radius: 20px;
  background-color: #faf9ff;
}

.tariffs-comparison__scroller:focus-visible {
  outline: 2px solid var(--color-violet-dark);
  outline-offset: 2px;
}

/* Separate borders: the rules are drawn per cell, so the first column can stick while scrolling. */
.tariffs-comparison__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  color: #1b1b1b;
}

.tariffs-comparison__head-cell {
  width: 20.9%;
  padding: 36px 0 17px 19px;
  border-left: 2px solid #d4cfe3;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.tariffs-comparison__head-cell--feature {
  width: 37.3%;
  border-left: 0;
}

.tariffs-comparison__head-cell--popular {
  padding-top: 10px;
}

/* Block-level, so the pill does not sit on a line box of its own and push the title down. */
.tariffs-comparison__badge {
  display: block;
  width: max-content;
  margin-bottom: 6px;
}

.tariffs-comparison__col-name {
  display: block;
  max-width: 170px;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  text-transform: uppercase;
}

.tariffs-comparison__col-note {
  display: block;
  margin-top: 3px;
  font-size: 16px;
  line-height: 18px;
}

/* The designer set the line breaks of every note with its own text width. */
.tariffs-comparison__col-note--attestat {
  max-width: 170px;
}

.tariffs-comparison__col-note--complex {
  max-width: 186px;
}

.tariffs-comparison__col-note--max {
  max-width: 208px;
}

.tariffs-comparison__feature {
  padding: 20px 0 22px 19px;
  border-top: 2px solid #d4cfe3;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.tariffs-comparison__feature-title {
  display: block;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
}

.tariffs-comparison__feature-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 3px;
  font-size: 16px;
  line-height: 18px;
}

.tariffs-comparison__feature-list--narrow {
  max-width: 363px;
}

.tariffs-comparison__feature-item {
  display: flex;
}

.tariffs-comparison__feature-item::before {
  content: "•";
  flex: 0 0 24px;
  text-align: center;
}

.tariffs-comparison__cell {
  border-top: 2px solid #d4cfe3;
  border-left: 2px solid #d4cfe3;
}

/* The tick is content: it says which tariff includes the row, so it carries its own alt. */
.tariffs-comparison__tick {
  margin: 0 auto;
}

.tariffs-comparison__foot-cell {
  padding: 18px 15px 27px;
  border-top: 2px solid #d4cfe3;
  border-left: 2px solid #d4cfe3;
  text-align: center;
  background-color: #ffecec;
}

.tariffs-comparison__foot-cell--feature {
  padding: 0;
  border-left: 0;
  background-color: transparent;
}

.tariffs-comparison__price {
  margin-bottom: 7px;
  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
  white-space: nowrap;
}

.tariffs-comparison__price-old {
  color: rgb(27 27 27 / 50%);
}

/* The tight line height keeps the 24px price inside the 30px line box of the row. */
.tariffs-comparison__price-new {
  font-size: 24px;
  line-height: 22px;
}

.tariffs-comparison__currency {
  font-size: 14px;
  line-height: 24px;
}

.tariffs-comparison__currency--new {
  font-size: 16px;
}

@media (max-width: 1199.98px) {
  .tariffs-comparison {
    padding: 176px 0 24px;
    background-size: 100% 120px, 100% calc(100% - 27px);
  }

  .tariffs-comparison__title {
    margin-bottom: 40px;
  }

  /* Wider than the wrapper: the table keeps its columns readable and scrolls sideways. */
  .tariffs-comparison__table {
    min-width: 1000px;
  }

  .tariffs-comparison__head-cell {
    width: 24.6%;
  }

  .tariffs-comparison__head-cell--feature {
    width: 26.2%;
  }

  /* The feature column stays in place while the tariff columns scroll. */
  .tariffs-comparison__head-cell--feature,
  .tariffs-comparison__feature,
  .tariffs-comparison__foot-cell--feature {
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 2px solid #d4cfe3;
    background-color: #faf9ff;
  }

  /* The 11px design badge is raised one step so it stays legible on small screens. */
  .tariffs-comparison__badge {
    font-size: 12px;
  }
}

@media (max-width: 767.98px) {
  .tariffs-comparison {
    padding: 120px 0 20px;
    background-size: 100% 80px, 100% calc(100% - 27px);
  }

  .tariffs-comparison__title {
    margin-bottom: 28px;
  }

  .tariffs-comparison__table {
    min-width: 880px;
  }

  .tariffs-comparison__head-cell {
    width: auto;
    padding: 30px 0 16px 16px;
  }

  .tariffs-comparison__head-cell--feature {
    width: 180px;
  }

  .tariffs-comparison__head-cell--popular {
    padding-top: 4px;
  }

  .tariffs-comparison__col-name {
    font-size: 16px;
    line-height: 18px;
  }

  .tariffs-comparison__col-note {
    font-size: 14px;
    line-height: 16px;
  }

  .tariffs-comparison__feature {
    padding: 16px 0 16px 16px;
  }

  .tariffs-comparison__feature-title {
    font-size: 16px;
    line-height: 19px;
  }

  .tariffs-comparison__feature-list {
    font-size: 14px;
    line-height: 17px;
  }

  .tariffs-comparison__feature-item::before {
    flex-basis: 18px;
  }

  .tariffs-comparison__foot-cell {
    padding: 16px 12px 20px;
  }

  .tariffs-comparison__price {
    font-size: 16px;
    line-height: 26px;
  }

  .tariffs-comparison__price-new {
    font-size: 20px;
    line-height: 20px;
  }
}

/* ==== block: help-cta ==== */
/* ==== help-cta — purple «Нужна помощь?» panel with the mascot ==== */
.help-cta {
  /* the block box keeps 26px of page background under the purple frame */
  padding-bottom: 26px;
}

/* the Figma frame: it clips the mascot and carries the blurred ellipses */
.help-cta__panel {
  display: flex;
  flex-direction: column;
  min-height: 649px;
  overflow: hidden;
  background-color: var(--color-violet);
  background-image: url("../img/help-cta-background.png");
  background-repeat: no-repeat;
  background-size: 100% 675px;
}

/* the white plate the next section starts on; it also cuts the mascot off */
.help-cta__panel::after {
  content: "";
  flex: 0 0 auto;
  height: 59px;
  border-radius: 49px 49px 0 0;
  background-color: #ffffff;
}

.help-cta__inner {
  display: flex;
  flex: 1 1 auto;
  padding-top: 120px;
}

.help-cta__content {
  display: flex;
  flex: 0 1 553px;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  /* the designer set the text column 1px left of the shared container */
  margin-top: 16px;
  margin-left: -1px;
}

.help-cta__title {
  margin-left: 6px;
  color: #ffd4c6;
  font-size: 42px;
  line-height: 55px;
}

/* cap-trim of the 42/55 heading: 11px above the caps, 12px below */
.help-cta__title-text {
  margin: -11px 0 -12px;
}

.help-cta__note {
  width: 100%;
  margin-top: 31px;
  /* the plate bleeds left of the text column so its own text keeps the column edge */
  margin-left: -14px;
  padding: 12px 18px 17px 13px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 10px;
  color: #ffffff;
  font-weight: 500;
  font-size: 22px;
  line-height: 24px;
  background-color: rgb(255 255 255 / 9%);
  -webkit-backdrop-filter: blur(34px);
  backdrop-filter: blur(34px);
}

.help-cta__lead {
  max-width: 539px;
  margin-top: 16px;
  color: #ffffff;
  font-weight: 500;
  font-size: 22px;
  line-height: 24px;
}

.help-cta__accent {
  color: #ffe6de;
  font-weight: 600;
}

.help-cta__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.help-cta__tag {
  padding: 6px 10px;
  border-radius: 40px;
  color: #745fa4;
  font-weight: 600;
  font-size: 15px;
  line-height: 15px;
  background-color: #ffffff;
}

.help-cta__cta {
  width: 380px;
  margin-top: 28px;
  padding-right: 20px;
  padding-left: 20px;
}

/* the mascot: one stack of exported layers, the question marks are live text */
.help-cta__art {
  display: grid;
  flex: 0 0 auto;
  width: 525px;
  height: 539px;
  /* the last 69px of the mascot are cut off by the white plate below */
  margin-right: 15px;
  margin-bottom: -69px;
  margin-left: auto;
}

.help-cta__mascot {
  grid-area: 1 / 1;
  justify-self: start;
  align-self: start;
  width: 412px;
  height: 465px;
  margin: 14px 0 0 35px;
  background-image: url("../img/help-cta-mascot.png");
  background-repeat: no-repeat;
  background-size: 412px 465px;
}

/* the far-side claws, painted under the question mark */
.help-cta__claws {
  grid-area: 1 / 1;
  background-image:
    url("../img/help-cta-claw-1.svg"),
    url("../img/help-cta-claw-2.svg"),
    url("../img/help-cta-claw-3.svg"),
    url("../img/help-cta-claw-4.svg"),
    url("../img/help-cta-claw-5.svg");
  background-repeat: no-repeat;
  background-position: 195px 284px, 206px 282px, 216px 281px, 225px 284px, 234px 288px;
}

/* the paws that hold the question mark, painted over it */
.help-cta__paws {
  grid-area: 1 / 1;
  background-image:
    url("../img/help-cta-paw-nail.svg"),
    url("../img/help-cta-paw-thumb.svg"),
    url("../img/help-cta-hand-finger-2.svg"),
    url("../img/help-cta-hand-finger-1.svg"),
    url("../img/help-cta-paw-finger-2.svg"),
    url("../img/help-cta-paw-finger-1.svg"),
    url("../img/help-cta-paw-outline.svg"),
    url("../img/help-cta-paw-shade.svg"),
    url("../img/help-cta-paw-fill.svg"),
    url("../img/help-cta-claw-6.svg");
  background-repeat: no-repeat;
  background-position:
    229px 288px, 179px 299px, 52px 275px, 38px 279px, 136px 273px,
    124px 275px, 118px 271px, 119px 284px, 119px 273px, 186px 292px;
}

/* the designer tilted each mark and ringed it with a 6px outside stroke:
   -webkit-text-stroke has no unprefixed form, and paint-order keeps the ring outside */
.help-cta__mark {
  grid-area: 1 / 1;
  justify-self: start;
  align-self: start;
  color: var(--color-green);
  font-family: "Gasoek One", Arial, sans-serif;
  paint-order: stroke fill;
  -webkit-text-stroke: 12px #f9f9f9;
}

.help-cta__mark--lg {
  margin: 215px 0 0 53px;
  font-size: 174px;
  line-height: 134px;
  transform: rotate(14.76deg);
}

.help-cta__mark--md {
  margin: 58px 0 0 358px;
  font-size: 91px;
  line-height: 70px;
  transform: rotate(-31.14deg);
}

.help-cta__mark--sm {
  margin: 314px 0 0 474px;
  font-size: 70px;
  line-height: 54px;
  -webkit-text-stroke-width: 8px;
  transform: rotate(22.56deg);
}

@media (max-width: 1199.98px) {
  .help-cta__panel {
    min-height: 0;
  }

  .help-cta__inner {
    flex-wrap: wrap;
    row-gap: 32px;
    padding-top: 80px;
    padding-bottom: 48px;
  }

  .help-cta__content {
    flex: 1 1 553px;
    margin-top: 12px;
  }

  .help-cta__title {
    margin-left: 0;
    font-size: 34px;
    line-height: 44px;
  }

  .help-cta__title-text {
    margin: -9px 0 -10px;
  }

  .help-cta__note {
    margin-top: 26px;
    margin-left: 0;
    padding: 12px 16px 14px;
    font-size: 19px;
    line-height: 22px;
  }

  .help-cta__lead {
    margin-top: 14px;
    font-size: 19px;
    line-height: 22px;
  }

  .help-cta__tags {
    margin-top: 20px;
  }

  .help-cta__cta {
    margin-top: 24px;
  }

  .help-cta__art {
    /* the stack is built in design pixels: zoom keeps its layout box in step */
    zoom: 0.7;
    margin-right: 0;
    margin-bottom: 0;
  }
}

@media (max-width: 767.98px) {
  .help-cta__inner {
    flex-direction: column;
    align-items: center;
    padding-top: 56px;
    padding-bottom: 32px;
  }

  .help-cta__content {
    flex: 0 1 auto;
    width: 100%;
    margin-top: 8px;
  }

  .help-cta__title {
    font-size: 26px;
    line-height: 34px;
  }

  .help-cta__title-text {
    margin: -7px 0 -8px;
  }

  .help-cta__note {
    margin-top: 20px;
    padding: 10px 14px 12px;
    font-size: 16px;
    line-height: 20px;
  }

  .help-cta__lead {
    margin-top: 12px;
    font-size: 16px;
    line-height: 20px;
  }

  .help-cta__tags {
    gap: 8px;
    margin-top: 16px;
  }

  .help-cta__tag {
    font-size: 14px;
    line-height: 14px;
  }

  .help-cta__cta {
    width: 100%;
    margin-top: 20px;
  }

  .help-cta__art {
    zoom: 0.55;
    margin-left: 0;
  }
}

/* ==== block: results-stats ==== */
/* ==== results-stats — statistics panel «Наши ученики успешно проходят все этапы ГИА» ==== */

/* The two page-decor ellipses of the design are drawn as backgrounds and clipped to the section. */
.results-stats {
  overflow: hidden;
  padding: 38px 0 66px;
  background-image:
    radial-gradient(circle 355px at calc(100% - 41px) 412px, rgb(254 227 216 / 55%) 0 100%, transparent 100%),
    radial-gradient(circle 504px at 90px 496px, rgb(255 246 242 / 87%) 0 100%, transparent 100%);
  background-repeat: no-repeat;
}

.results-stats__title {
  max-width: 846px;
  margin-right: auto;
  margin-left: auto;
}

.results-stats__title-accent {
  color: #ef6136;
}

/* The designer drew the panel group 1162px wide inside the 1160px container. */
.results-stats__panels {
  display: flex;
  flex-direction: column;
  margin-top: 48px;
  margin-right: -2px;
}

/* z-index keeps the orange card over the summary panel that is pulled up under it. */
.results-stats__highlight {
  display: flex;
  z-index: 1;
  justify-content: space-between;
  align-items: flex-start;
  overflow: hidden;
  padding: 22px 16px 22px 43px;
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: 20px;
  background-color: var(--color-accent);
  background-image: radial-gradient(circle 375px at 170px 387px, rgb(252 125 72 / 88%) 0 100%, transparent 100%);
  background-origin: border-box;
}

.results-stats__figures {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 20px;
}

/* Negative margins undo Figma's cap-line trim, so the box matches the design. */
.results-stats__percent {
  margin: -20px 0 -21px;
  color: #ffffff;
  font-family: "Unbounded", Arial, sans-serif;
  font-weight: 700;
  font-size: 74px;
  line-height: 96px;
  white-space: nowrap;
}

.results-stats__lead {
  max-width: 455px;
  margin: -6px 0 -7px;
  color: #ffffff;
  font-family: "Unbounded", Arial, sans-serif;
  font-weight: 700;
  font-size: 23px;
  line-height: 30px;
}

.results-stats__source {
  display: flex;
  flex: 0 1 596px;
  flex-direction: column;
  gap: 33px;
  padding: 28px 19px 40px 23px;
  border: 1px solid #ffa078;
  border-radius: 12px;
  background-color: #ff804b;
}

.results-stats__source-title {
  margin: -5px 0;
  color: #ffffff;
  font-weight: 600;
  font-size: 25px;
  line-height: 28px;
  text-transform: uppercase;
}

.results-stats__source-text {
  max-width: 420px;
  margin: -4px 0;
  color: #ffffff;
  font-weight: 600;
  font-size: 21px;
  line-height: 23px;
}

/* The designer drew a white plate 4px wider than the range it highlights. */
.results-stats__mark {
  margin: 0 -4px;
  padding: 1px 4px 2px;
  border-radius: 5px;
  color: var(--color-accent);
  background-color: #ffffff;
}

.results-stats__summary {
  display: flex;
  flex-direction: column;
  gap: 33px;
  overflow: hidden;
  margin-top: -74px;
  padding: 111px 33px 35px;
  border: 1px solid var(--color-accent);
  border-radius: 20px;
  background-image: linear-gradient(126deg, #fefefe 35%, #fce5cd 68%);
}

.results-stats__summary-title {
  width: 100%;
  max-width: 688px;
  margin: -5px auto;
  color: #111827;
  font-weight: 600;
  font-size: 25px;
  line-height: 28px;
  text-align: center;
}

.results-stats__cards {
  display: flex;
  gap: 16px;
}

/* Half of the row minus half the gap: a 0 basis would be floored by the card's own padding. */
.results-stats__card {
  display: flex;
  flex: 1 1 calc(50% - 8px);
  flex-direction: column;
  gap: 17px;
  min-width: 0;
  overflow: hidden;
  padding: 23px 35px 23px 24px;
  border: 1px solid var(--color-accent);
  border-radius: 20px;
  background-color: #ffffff;
}

/* The mascot and the books are decoration: they stay in CSS and the card clips them. */
.results-stats__card--list {
  padding-right: 158px;
  background-image: url("../img/results-stats-books.png"), url("../img/results-stats-mascot.png");
  background-repeat: no-repeat;
  background-position: 462px 98px, 309px 100%;
  background-size: 77px 62px, 183px auto;
  background-origin: border-box;
}

.results-stats__card-title {
  max-width: 454px;
  margin: -3px 0 -4px;
  color: #111827;
  font-weight: 600;
  font-size: 18px;
  line-height: 20px;
}

.results-stats__card-text {
  margin: -3px 0 -4px;
  color: #111827;
  font-size: 18px;
  line-height: 20px;
}

.results-stats__accent {
  color: var(--color-accent);
}

.results-stats__points {
  display: flex;
  flex-direction: column;
  margin: -3px 0 -4px;
  color: #111827;
  font-size: 18px;
  line-height: 20px;
}

.results-stats__point {
  display: flex;
  gap: 8px;
  padding-left: 14px;
}

.results-stats__point::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  margin-top: 8px;
  border-radius: 50%;
  background-color: #111827;
}

@media (max-width: 1199.98px) {
  .results-stats {
    padding: 32px 0 50px;
  }

  .results-stats__panels {
    margin-top: 36px;
    margin-right: 0;
  }

  /* Wrapping puts the source panel on its own line where the row no longer fits. */
  .results-stats__highlight {
    flex-wrap: wrap;
    gap: 24px;
    padding: 22px 24px;
  }

  .results-stats__figures {
    flex: 1 1 320px;
    gap: 24px;
    margin-top: 8px;
  }

  .results-stats__percent {
    margin: -17px 0 -16px;
    font-size: 60px;
    line-height: 78px;
  }

  .results-stats__lead {
    max-width: none;
    margin: -5px 0 -6px;
    font-size: 20px;
    line-height: 26px;
  }

  .results-stats__source {
    flex: 1 1 460px;
    gap: 24px;
    padding: 24px 20px 28px;
  }

  .results-stats__source-title {
    margin: -4px 0;
    font-size: 20px;
    line-height: 24px;
  }

  .results-stats__source-text {
    max-width: none;
    margin: -4px 0;
    font-size: 18px;
    line-height: 22px;
  }

  .results-stats__summary {
    gap: 24px;
    margin-top: -60px;
    padding: 92px 24px 32px;
  }

  .results-stats__summary-title {
    font-size: 21px;
    line-height: 26px;
  }

  .results-stats__card {
    padding: 20px;
  }

  .results-stats__card--list {
    padding-right: 20px;
    background-image: none;
  }
}

@media (max-width: 767.98px) {
  .results-stats {
    padding: 24px 0 36px;
  }

  .results-stats__panels {
    margin-top: 24px;
  }

  /* Stacked, the two parts take the full width instead of shrinking to their text. */
  .results-stats__highlight {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 20px 16px;
  }

  .results-stats__figures {
    flex: 0 1 auto;
    gap: 16px;
    margin-top: 0;
  }

  .results-stats__percent {
    margin: -14px 0 -13px;
    font-size: 48px;
    line-height: 62px;
  }

  .results-stats__lead {
    margin: -4px 0 -5px;
    font-size: 18px;
    line-height: 24px;
  }

  .results-stats__source {
    flex: 0 1 auto;
    gap: 16px;
    padding: 20px 16px 24px;
  }

  .results-stats__source-title {
    margin: -3px 0;
    font-size: 17px;
    line-height: 21px;
  }

  .results-stats__source-text {
    margin: -3px 0;
    font-size: 16px;
    line-height: 20px;
  }

  .results-stats__summary {
    gap: 20px;
    margin-top: -40px;
    padding: 60px 16px 24px;
  }

  .results-stats__summary-title {
    margin: -4px auto -3px;
    font-size: 18px;
    line-height: 24px;
  }

  .results-stats__cards {
    flex-direction: column;
    gap: 12px;
  }

  .results-stats__card {
    gap: 12px;
    padding: 20px 16px;
  }

  .results-stats__card--list {
    padding-right: 16px;
  }

  .results-stats__card-title {
    max-width: none;
    font-size: 16px;
  }

  .results-stats__card-text {
    font-size: 16px;
  }

  .results-stats__points {
    font-size: 16px;
  }
}

/* ==== block: student-results ==== */
/* ==== student-results ==== */

.student-results {
  /* page-decor ellipse 1007x1007 #fff6f2 87%, its centre 781px above the block */
  background-image: radial-gradient(circle closest-side, rgb(255 246 242 / 87%) 100%, rgb(255 246 242 / 0%) 100%);
  background-repeat: no-repeat;
  background-position: -414px -781px;
  background-size: 1007px 1007px;
}

.student-results__inner {
  display: flex;
  flex-direction: column;
  gap: 39px;
  padding-top: 40px;
  padding-bottom: 83px;
}

/* the case is a slider: one cell holds the track, the arrows lie over it */
/* Swiper adds the class .swiper to this root on init, and its own stylesheet says
   .swiper { display: block; margin-left: auto; margin-right: auto } at one class of weight. Whoever
   is loaded last wins such a tie, and in a CMS the vendor stylesheet is usually enqueued after the
   theme's — so the grid would die the moment the slider starts and the arrows would drop out of
   their cell into the flow. The second selector takes the weight from Swiper's own class and settles
   the tie by specificity instead of by load order. */
.student-results__case,
.student-results__case.swiper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);

  /* the same tie: .swiper centres itself with auto side margins, which turns this stretched flex
     item into a shrink-to-fit box — the card collapsed from 1160px to 120px when the vendor
     stylesheet came last */
  margin-inline: 0;
  overflow: hidden; /* the clip Swiper sets itself, so the track shows one slide before it starts */

  /* Swiper also marks the root .swiper-horizontal, and that rule sets touch-action: pan-y, which
     forbids a horizontal gesture to everything inside — including the sideways scroll of the picture
     below 1200px. The slides are paged by the arrows here, so the gesture goes back to the picture;
     the paired selector above outweighs .swiper-horizontal whatever the load order. */
  touch-action: auto;
}

.student-results__slides {
  display: flex;
  grid-area: 1 / 1;
}

.student-results__slide {
  flex: 0 0 100%;
}

/* the same rule as in the other slider: the box is the layout's and the file is fitted into it, so a
   replacement of any resolution leaves the height of the block and of both slides alone */
.student-results__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1160 / 653;
  object-fit: contain;
}

.student-results__arrow {
  z-index: 2;
  display: flex;
  grid-area: 1 / 1;
  align-self: center;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #eeedf2;
  color: var(--color-text);
  transition:
    background-color 0.2s,
    color 0.2s,
    opacity 0.2s;
}

/* the chevron is two sides of a square turned 45 degrees: no asset, crisp at any zoom */
.student-results__arrow::before {
  content: "";
  width: 11px;
  height: 11px;
  border-bottom: 2px solid currentcolor;
  border-left: 2px solid currentcolor;
}

.student-results__arrow--prev {
  justify-self: start;
  margin-left: 16px;
}

/* optical centring: the mass of a chevron sits away from its point */
.student-results__arrow--prev::before {
  margin-left: 4px;
  transform: rotate(45deg);
}

.student-results__arrow--next {
  justify-self: end;
  margin-right: 16px;
}

.student-results__arrow--next::before {
  margin-right: 4px;
  transform: rotate(-135deg);
}

@media (hover: hover) {
  .student-results__arrow:hover {
    background-color: var(--color-accent);
    color: #ffffff;
  }
}

.student-results__arrow:focus-visible {
  outline: 2px solid var(--color-violet-dark);
  outline-offset: 3px;
}

.student-results__arrow:active {
  background-color: #e35a1f;
  color: #ffffff;
}

/* Swiper marks the control that cannot move the track (first or last slide) with aria-disabled.
   Such a control is barely visible and must not light up under the pointer, so the hover and
   active colours are restored here; an attribute weighs as much as a class, so these selectors
   outweigh them. */
.student-results__arrow[aria-disabled="true"] {
  cursor: default;
  opacity: 25%;
}

.student-results__arrow[aria-disabled="true"]:active {
  background-color: #eeedf2;
  color: var(--color-text);
}

@media (hover: hover) {
  .student-results__arrow[aria-disabled="true"]:hover {
    background-color: #eeedf2;
    color: var(--color-text);
  }
}

@media (max-width: 1199.98px) {
  .student-results__inner {
    gap: 32px;
    padding-top: 34px;
    padding-bottom: 62px;
  }

  /* the case is one picture of text: below 900px it scrolls instead of shrinking further.
     The scroll sits on the slide — the slider root is clipped by Swiper. */
  .student-results__slide {
    overflow-x: auto;
  }

  .student-results__image {
    min-width: 900px;
  }
}

@media (max-width: 767.98px) {
  .student-results__inner {
    gap: 24px;
    padding-top: 28px;
    padding-bottom: 48px;
  }
}

/* ==== block: abroad-banner ==== */
/* ==== abroad-banner — violet card with the seal illustration and the tariffs CTA ==== */

.abroad-banner {
  padding-bottom: 32px;
}

.abroad-banner__card {
  display: grid;
  overflow: hidden; /* Figma clips the card: both decorations run past its edges */
  border: 1px solid rgb(127 103 180 / 35%);
  border-radius: 20px;
  /* the two #e6e0fa 88% ellipses of the design, anchored to the card edges */
  background-color: var(--color-violet-surface);
  background-image:
    radial-gradient(375px 375px at right 112px top 454px, rgb(230 224 250 / 88%) 100%, transparent 0),
    radial-gradient(375px 375px at left 205px top -130px, rgb(230 224 250 / 88%) 100%, transparent 0);
  background-repeat: no-repeat;
  background-origin: border-box;
}

.abroad-banner__content,
.abroad-banner__illustration,
.abroad-banner__tower {
  grid-area: 1 / 1; /* the decorations lie over the card background, beside the text column */
}

.abroad-banner__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 20px 40px;
}

.abroad-banner__title {
  color: var(--color-violet-muted);
  font-weight: 700;
  font-size: 29px;
  font-family: "Unbounded", Arial, sans-serif;
  line-height: 38px;
  text-align: center;
  text-transform: uppercase;
}

.abroad-banner__lead {
  max-width: 460px; /* the designer's line break after «аттестат» */
  margin-left: 10px; /* the designer set this line 5px right of the card centre */
  color: #1a1a1a;
  font-weight: 600;
  font-size: 22px;
  line-height: 24px;
  text-align: center;
}

/* the design's CTA is a smaller form of btn-primary-green: 58px tall, 15/17 type */
.abroad-banner__cta {
  gap: 7px;
  min-height: 58px;
  margin-top: 14px;
  padding: 10px 34px 11px; /* +2 under the label: Figma centres the 15px line 1px higher */
  font-size: 15px;
  line-height: 17px;
}

/* both decorations end on the card's outer bottom edge, where Figma clips them */
.abroad-banner__illustration {
  align-self: end;
  justify-self: start;
  width: 318px;
  height: 236px;
  margin-bottom: -12px; /* the card clips the lower 11px of the illustration */
  margin-left: 22px;
  background: url("../img/abroad-banner-seal.png") no-repeat center / 100% 100%;
}

.abroad-banner__tower {
  align-self: end;
  justify-self: end;
  width: 99px;
  height: 242px;
  margin-right: 104px;
  margin-bottom: -1px;
  background: url("../img/abroad-banner-tower.svg") no-repeat center / 100% 100%;
}

@media (max-width: 1199.98px) {
  .abroad-banner {
    padding-bottom: 24px;
  }

  .abroad-banner__content {
    gap: 10px;
    padding: 40px 130px 36px;
  }

  .abroad-banner__title {
    font-size: 24px;
    line-height: 32px;
  }

  .abroad-banner__lead {
    max-width: 400px;
    margin-left: 0; /* the designer's 5px offset is a desktop detail */
    font-size: 19px;
    line-height: 22px;
  }

  .abroad-banner__illustration {
    width: 239px;
    height: 177px;
    margin-left: 0;
  }

  .abroad-banner__tower {
    width: 75px;
    height: 183px;
    margin-right: 40px;
  }
}

@media (max-width: 767.98px) {
  .abroad-banner {
    padding-bottom: 20px;
  }

  .abroad-banner__content {
    gap: 8px;
    padding: 28px 16px;
  }

  .abroad-banner__title {
    font-size: 20px;
    line-height: 26px;
  }

  .abroad-banner__lead {
    max-width: none;
    font-size: 16px;
    line-height: 20px;
  }

  .abroad-banner__cta {
    width: 100%;
    margin-top: 10px;
    padding-right: 20px;
    padding-left: 20px;
  }

  /* the seal and the tower would cover the stacked text on a phone */
  .abroad-banner__illustration,
  .abroad-banner__tower {
    display: none;
  }
}

/* ==== block: video-form ==== */
/* ==== video-form — purple lead-magnet section with the page form and the callback popup ==== */

.video-form {
  display: flex;
  flex-direction: column;
  padding-bottom: 66px;
  color: #ffffff;
  background-color: var(--color-violet);
  background-image: url("../img/video-form-background.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

/* the white rounded skirt of the section above, which Figma draws inside this frame */
.video-form::before {
  content: "";
  height: 59px;
  border-radius: 0 0 49px 49px;
  background-color: #ffffff;
}

.video-form__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 80px;
  background-image: url("../img/video-form-arrow.svg");
  background-repeat: no-repeat;
  background-position: 361px 10px;
  background-size: 212px 38px;
}

.video-form__intro {
  display: flex;
  flex-direction: column;
  flex: 0 1 556px;
  margin-top: 21px;
}

.video-form__heading {
  display: flex;
  flex-direction: column;
}

.video-form__title {
  max-width: 542px;
  margin: -10px 0;
  font-family: "Unbounded", Arial, sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 49px;
  text-transform: uppercase;
}

.video-form__mark {
  display: inline-block;
  height: 43px;
  margin-left: -5px;
  padding: 0 6px 0 5px;
  border-radius: 5px;
  line-height: 41px;
  background-color: var(--color-accent);
}

.video-form__lead {
  margin: 36px 0 -5px;
  font-weight: 700;
  font-size: 22px;
  line-height: 26px;
  text-transform: uppercase;
}

.video-form__list-title {
  margin: 27px 0 -4px;
  font-weight: 500;
  font-size: 22px;
  line-height: 24px;
}

.video-form__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.video-form__list-item {
  display: flex;
  gap: 12px;
  max-width: 420px;
  margin: -4px 0;
  padding-left: 15px;
  font-weight: 500;
  font-size: 22px;
  line-height: 24px;
}

.video-form__list-item--narrow {
  max-width: 383px;
}

.video-form__list-item::before {
  content: "";
  flex: 0 0 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background-color: #ffffff;
}

/* one grid cell: the mascot is drawn over the top edge of the card */
.video-form__card-wrap {
  display: grid;
  flex: 0 0 585px;
  margin-right: -1px;
}

.video-form__card {
  display: flex;
  flex-direction: column;
  gap: 29px;
  grid-area: 1 / 1;
  padding: 4px 31px 36px;
  border-radius: 20px;
  background-color: #ffffff;
}

.video-form__card::before {
  content: "";
  height: 166px;
  margin: 0 -27px;
  border-radius: 16px;
  background-color: var(--color-accent);
  background-image: url("../img/video-form-banner.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.video-form__mascot {
  grid-area: 1 / 1;
  justify-self: start;
  align-self: start;
  width: 168px;
  height: 179px;
  margin: -26px 0 0 209px;
  background-image: url("../img/video-form-cat.png");
  background-repeat: no-repeat;
  background-size: 168px 179px;
}

@media (max-width: 1199.98px) {
  .video-form {
    padding-bottom: 50px;
  }

  .video-form::before {
    height: 44px;
    border-radius: 0 0 36px 36px;
  }

  .video-form__inner {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-top: 56px;
    background-image: none;
  }

  .video-form__intro {
    flex: 0 1 auto;
    width: 100%;
    max-width: 640px;
    margin-top: 0;
  }

  .video-form__title {
    max-width: none;
    margin: -9px 0;
    font-size: 32px;
    line-height: 42px;
  }

  .video-form__mark {
    height: 37px;
    line-height: 35px;
  }

  .video-form__lead {
    margin: 28px 0 -5px;
    font-size: 20px;
    line-height: 24px;
  }

  .video-form__list-title {
    margin: 24px 0 -5px;
    font-size: 20px;
    line-height: 24px;
  }

  .video-form__list {
    gap: 16px;
    margin-top: 16px;
  }

  .video-form__list-item {
    max-width: none;
    margin: -5px 0;
    font-size: 20px;
    line-height: 24px;
  }

  .video-form__list-item--narrow {
    max-width: none;
  }

  .video-form__list-item::before {
    margin-top: 8px;
  }

  .video-form__card-wrap {
    width: 100%;
    max-width: 585px;
    margin-right: 0;
  }

  .video-form__card::before {
    height: auto;
    aspect-ratio: 577 / 166;
  }
}

@media (max-width: 767.98px) {
  .video-form {
    padding-bottom: 36px;
  }

  .video-form::before {
    height: 32px;
    border-radius: 0 0 24px 24px;
  }

  .video-form__inner {
    gap: 28px;
    margin-top: 32px;
  }

  .video-form__title {
    margin: -7px 0;
    font-size: 26px;
    line-height: 34px;
  }

  .video-form__mark {
    height: 30px;
    line-height: 28px;
  }

  .video-form__lead {
    margin: 20px 0 -4px;
    font-size: 17px;
    line-height: 21px;
  }

  .video-form__list-title {
    margin: 20px 0 -4px;
    font-size: 17px;
    line-height: 21px;
  }

  .video-form__list {
    gap: 14px;
    margin-top: 14px;
  }

  .video-form__list-item {
    gap: 10px;
    margin: -4px 0;
    padding-left: 4px;
    font-size: 17px;
    line-height: 21px;
  }

  .video-form__list-item::before {
    margin-top: 7px;
  }

  .video-form__card {
    gap: 20px;
    padding: 4px 16px 24px;
  }

  .video-form__card::before {
    margin: 0 -12px;
  }

  .video-form__mascot {
    width: 120px;
    height: 128px;
    margin: -20px 0 0 130px;
    background-size: 120px 128px;
  }

}

/* ==== block: faq ==== */
/* ==== faq — the accordion with the frequent questions, on the light violet skirt of the page ==== */

/* the purple band of the section above shows through the rounded top corners of the skirt */
.faq {
  background-color: var(--color-violet);
}

.faq__body {
  padding: 81px 0 105px;
  border-radius: 50px 50px 0 0;
  background-color: var(--color-violet-surface);
}

.faq__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 975px;
  margin-right: auto;
  margin-left: auto;
}

.faq__item {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 35px 45px 35px 40px;
  border-radius: 20px;
  background-color: #ffffff;
}

/* the designer gave the first card 6px more room under its answer */
.faq__item--roomy {
  padding-bottom: 41px;
}

.faq__toggle {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 31px;
  width: 100%;
  text-align: left;
  font-size: 22px;
  line-height: 24px;
  font-weight: 600;
  transition: opacity 0.2s;
}

/* The chevron is centred on the question and hangs over the card: its margins cancel its height,
   so its outer box is 0 tall and the row keeps the height of the question text alone. */
.faq__toggle::after {
  content: "";
  align-self: center;
  flex-shrink: 0;
  width: 18px;
  height: 38px;
  margin-top: -19px;
  margin-bottom: -19px;
  background-image: url("../img/faq-chevron.svg");
  background-repeat: no-repeat;
  transition: transform 0.25s;
}

.faq__toggle[aria-expanded="true"]::after {
  transform: rotate(90deg);
}

.faq__toggle:focus-visible {
  outline: 2px solid var(--color-violet);
  outline-offset: 4px;
}

.faq__toggle:active {
  opacity: 0.5;
}

/* margins trim the half-leading Figma cuts away from its text boxes */
.faq__toggle-text {
  max-width: 556px;
  margin-top: -4px;
  margin-bottom: -4px;
}

.faq__answer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 841px;
  margin-top: -3px;
  margin-bottom: -4px;
}

.faq__text {
  font-size: 18px;
  line-height: 20px;
}

.faq__points {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq__point {
  display: flex;
  gap: 10px;
  padding-left: 12px;
  font-size: 18px;
  line-height: 20px;
}

.faq__point::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background-color: var(--color-text);
}

@media (hover: hover) {
  .faq__toggle:hover {
    opacity: 0.7;
  }
}

@media (max-width: 1199.98px) {
  .faq__body {
    padding: 64px 0 80px;
  }

  .faq__inner {
    gap: 40px;
  }

  /* the shorthand comes after the desktop --roomy rule, so every card is even again */
  .faq__item {
    gap: 22px;
    padding: 30px 32px;
  }

  .faq__toggle {
    gap: 24px;
    font-size: 20px;
    line-height: 22px;
  }

  .faq__toggle::after {
    width: 14px;
    height: 30px;
    margin-top: -15px;
    margin-bottom: -15px;
    background-size: 14px 30px;
  }
}

@media (max-width: 767.98px) {
  .faq__body {
    padding: 48px 0 56px;
    border-radius: 30px 30px 0 0;
  }

  .faq__inner {
    gap: 28px;
  }

  .faq__item {
    gap: 14px;
    padding: 18px 16px 22px;
  }

  /* the touch target grows to 44px and the shorter chevron now fits inside the row */
  .faq__toggle {
    align-items: center;
    gap: 16px;
    min-height: 44px;
    font-size: 18px;
    line-height: 22px;
  }

  .faq__toggle::after {
    width: 12px;
    height: 26px;
    margin-top: 0;
    margin-bottom: 0;
    background-size: 12px 26px;
  }

  .faq__text,
  .faq__point {
    font-size: 16px;
    line-height: 20px;
  }
}

/* ==== block: site-footer ==== */
/* ==== site-footer ==== */
.site-footer {
  padding-top: 84px;
  background-color: var(--color-violet);
}

.site-footer__inner {
  display: flex;
  align-items: flex-start;
  padding-bottom: 64px;
}

.site-footer__company {
  display: flex;
  flex-direction: column;
  flex: 0 1 261px;
  gap: 58px;
  margin-top: 15px;
}

/* Figma trims the text boxes to the cap line: the 25px line box is 6px taller above and below. */
.site-footer__title {
  margin: -6px 0;
  color: rgb(255 255 255 / 91%);
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  text-transform: uppercase;
}

.site-footer__legal {
  margin: -6px 0;
  color: rgb(255 255 255 / 70%);
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
}

/* 249px is the designer's distance from the legal column; the auto margin keeps the
   contacts column on the container edge and absorbs the shrinking of narrower screens. */
.site-footer__logo {
  flex-shrink: 0;
  margin-top: 26px;
  margin-right: auto;
  margin-left: 249px;
  transition: opacity 0.2s;
}

.site-footer__logo:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

.site-footer__logo:active {
  opacity: 0.5;
}

.site-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 43px;
}

.site-footer__actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

/* the icon sits 1px below the top of the 43px button, as in the design */
.site-footer__social {
  flex-shrink: 0;
  width: 41px;
  height: 40px;
  margin-top: 1px;
  background-image: url("../img/site-footer-vk.svg");
  background-repeat: no-repeat;
  transition: opacity 0.2s;
}

.site-footer__social:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.site-footer__social:active {
  opacity: 0.5;
}

.site-footer__docs {
  margin: -6px 0;
  color: rgb(255 255 255 / 70%);
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
  text-align: right;
}

.site-footer__doc:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.site-footer__doc:active {
  opacity: 0.7;
}

.site-footer__bottom {
  padding-top: 27px;
  padding-bottom: 33px;
  border-top: 1px solid rgb(167 150 205 / 40%);
}

.site-footer__copyright {
  margin: -6px 0;
  color: rgb(255 255 255 / 10%);
  font-size: 18px;
  line-height: 25px;
  text-align: center;
}

@media (hover: hover) {
  .site-footer__logo:hover {
    opacity: 0.7;
  }

  .site-footer__social:hover {
    opacity: 0.7;
  }

  .site-footer__doc:hover {
    text-decoration: none;
  }
}

@media (max-width: 1199.98px) {
  .site-footer {
    padding-top: 64px;
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: center;
    gap: 36px;
    padding-bottom: 48px;
  }

  /* the column stacks: the 261px basis would become a height in a column flex parent */
  .site-footer__company {
    align-items: center;
    flex-basis: auto;
    gap: 24px;
    margin-top: 0;
    text-align: center;
  }

  .site-footer__logo {
    margin: 0;
  }

  .site-footer__contacts {
    align-items: center;
    gap: 24px;
  }

  .site-footer__docs {
    text-align: center;
  }

  .site-footer__bottom {
    padding-top: 20px;
    padding-bottom: 28px;
  }
}

@media (max-width: 767.98px) {
  .site-footer {
    padding-top: 44px;
  }

  .site-footer__inner {
    gap: 28px;
    padding-bottom: 32px;
  }

  .site-footer__company {
    gap: 16px;
  }

  .site-footer__title {
    font-size: 16px;
    line-height: 24px;
  }

  .site-footer__legal {
    font-size: 16px;
    line-height: 24px;
  }

  .site-footer__logo-image {
    width: 132px;
  }

  .site-footer__contacts {
    gap: 20px;
  }

  .site-footer__actions {
    align-items: center;
    gap: 12px;
  }

  .site-footer__social {
    width: 44px;
    height: 44px;
    margin-top: 0;
    background-position: center;
  }

  .site-footer__docs {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
  }

  /* 24px of line plus 2 x 10px keeps every document link at a 44px touch target. */
  .site-footer__doc {
    display: inline-block;
    padding: 10px 0;
  }

  .site-footer__bottom {
    padding-top: 16px;
    padding-bottom: 24px;
  }

  .site-footer__copyright {
    font-size: 16px;
    line-height: 24px;
  }
}