/* Speak-Today template (Joomla 5) — concept «Фирменный».
   Loaded after the styles of the former template wall-st.ru (they keep the inner pages built from modules),
   so everything here is prefixed with .st- and wins where the two meet. */

@font-face { font-family: "PRIBAMBAS"; src: url("../../../fonts/PRIBAMBAS.ttf") format("truetype"); font-display: swap; }

:root {
  --st-red: #e8262f;
  --st-red-d: #c41d26;
  --st-red-50: #fdeced;
  --st-navy: #16213e;
  --st-blue: #2f55a4;
  --st-blue-50: #e8eefb;
  --st-ink: #1b1f2a;
  --st-ink-2: #5a6070;
  --st-ink-3: #8a90a0;
  --st-line: #e3e5eb;
  --st-mist: #f4f5f8;
  --st-gradient: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1a1f4b 100%);
  --st-font: "Manrope", "Segoe UI", Roboto, Arial, sans-serif;
  --st-head: "Poppins", "Manrope", Arial, sans-serif;
}

/* ---------- the former template: page frame ---------- */
html, body { min-width: 0 !important; height: auto; }
body.st { display: block; margin: 0; font-family: var(--st-font); font-size: 16px; line-height: 1.5; color: var(--st-ink); background: #fff; }
/* the footer is always at the bottom of the window, also on pages with little content */
body.st { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.st > * { flex-shrink: 0; }
body.st > .st-footer { margin-top: auto; }
.st *, .st *::before, .st *::after { box-sizing: border-box; }
.st img { max-width: 100%; }
.st-wrap { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.st :focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
.st-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* buttons */
.st .st-btn, .st a.st-btn[href="#openModal"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; margin: 0; border: 0; border-radius: 6px; background: var(--st-red); color: #fff; padding: 14px 26px; font: 700 15px/1.2 var(--st-font); text-transform: none; text-decoration: none; cursor: pointer; }
.st .st-btn:hover { background: var(--st-red-d); color: #fff; }

/* ---------- header: utility line, logo, menu, phones on the gradient of the site ---------- */
.st-top { background: var(--st-gradient); color: #fff; overflow: visible; position: relative; z-index: 20; }
.st-util { color: #c9d3ea; font-size: 13.5px; }
.st-util .st-wrap { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; padding-block: 9px; }
.st-util .st-sp { flex: 1; }
.st-util a { color: #fff; }
.st-eye { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0; color: #fff; font: inherit; cursor: pointer; }
.st #specialButton.st-eye { filter: none; float: none; margin: 0; } /* the former template inverted its picture of an eye */
.st-eye span { text-decoration: underline; text-underline-offset: 3px; }
.st-cabinet { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.st-m-only { display: none; font-weight: 700; font-size: 18px; text-decoration: none; }

.st-head .st-wrap { display: flex; align-items: center; gap: 16px 30px; padding-block: 10px; }
.st-logo { display: inline-grid; justify-items: start; color: #fff; text-decoration: none; line-height: 1; font-family: "PRIBAMBAS", "Arial Narrow", Arial, sans-serif; font-weight: 400; flex: 0 0 auto; }
.st-logo:hover { color: #fff; }
.st-logo b { font-weight: 400; font-size: 51px; line-height: .9; white-space: nowrap; }
.st-logo small { font-weight: 400; font-size: 17px; margin-top: 4px; color: #c9d3ea; white-space: nowrap; } /* fitted to the width of the name by template.js */

.st-phones { display: grid; gap: 2px; text-align: right; }
.st-phones a { font-family: var(--st-head); font-weight: 600; font-size: 22px; line-height: 1.2; color: #fff; text-decoration: none; white-space: nowrap; }
.st-phones a:hover { color: #ff8a8f; }

/* main menu (mod_menu, menutype mainmenu): top level in a row, sub-items in a drop-down */
.st-nav { margin-left: auto; }
.st-nav ul { list-style: none; margin: 0; padding: 0; }
.st-nav > ul, .st-nav .mod-menu { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.st-nav li { position: relative; margin: 0; padding: 0; list-style: none; }
.st-nav > ul > li > a, .st-nav > ul > li > span, .st-nav .mod-menu > li > a, .st-nav .mod-menu > li > span { display: block; color: #fff; text-decoration: none; font-size: 17px; font-weight: 600; padding-block: 8px; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.st-nav .mod-menu > li.active > a, .st-nav .mod-menu > li.active > span, .st-nav .mod-menu > li > a:hover, .st-nav .mod-menu > li:hover > span { border-bottom-color: var(--st-red); color: #fff; }
.st-nav .mod-menu > li.parent > a::after, .st-nav .mod-menu > li.parent > span::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .7; }
.st-nav .mod-menu ul { position: absolute; left: -16px; top: 100%; min-width: 260px; max-width: 420px; background: #fff; border-radius: 10px; box-shadow: 0 16px 40px rgba(15, 23, 42, .25); padding: 8px; display: none; z-index: 30; }
.st-nav .mod-menu li:hover > ul, .st-nav .mod-menu li:focus-within > ul { display: block; }
.st-nav .mod-menu ul a, .st-nav .mod-menu ul span { display: block; padding: 9px 12px; border-radius: 6px; color: var(--st-ink); text-decoration: none; font-size: 15px; font-weight: 500; line-height: 1.35; }
.st-nav .mod-menu ul a:hover, .st-nav .mod-menu ul li.active > a { background: var(--st-mist); color: var(--st-red); }
.st-nav .mod-menu > li:last-child > ul { left: auto; right: -16px; }

.st-burger { display: none; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px; background: transparent; margin-left: auto; cursor: pointer; padding: 0; }
.st-burger i { display: block; width: 18px; height: 2px; background: #fff; margin: 4px auto; }

/* ---------- first screen (module in position «hero», home page) ---------- */
.st-hero .custom, .st-hero [class^="custom"] { margin: 0; }
.st-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 20px; }
.st-hero-text { padding-block: 56px 64px; display: grid; gap: 22px; min-width: 0; }
.st-hero-text p { margin: 0; }
.st-langs { display: flex; flex-wrap: wrap; gap: 8px; }
.st-langs span { border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #fff; }
.st .st-hero-title { font-family: var(--st-head); font-size: clamp(34px, 5vw, 64px); line-height: 1.08; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: #fff; margin: 0; padding: 0; display: block; width: auto; text-wrap: balance; }
.st-hero-title mark { background: linear-gradient(90deg, #60a5fa, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.st-lead { font-family: var(--st-head); font-size: 18px; color: #d3d9ea; max-width: 32em; }
.st-hero-photo { align-self: end; display: flex; justify-content: center; }
.st-hero-photo img { max-height: 520px; max-width: 100%; width: auto; height: auto; display: block; }

/* ---------- advantages under the first screen (position «advantages») ---------- */
.st-advantages { background: #fff; border-bottom: 1px solid var(--st-line); }
.st-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-fact { padding: 24px 20px; border-right: 1px solid var(--st-line); display: flex; gap: 14px; align-items: flex-start; }
.st-fact:last-child { border-right: 0; }
.st-fact b { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--st-ink); margin-bottom: 4px; }
.st-fact span { font-size: 13.5px; color: var(--st-ink-2); line-height: 1.45; }
.st-nowrap { white-space: nowrap; }

/* icons: a class on the element itself (st-ic-…) draws the round icon before it, so the module text stays plain HTML
   that the editor (JCE) does not strip */
.st-fact::before, .st-card-facts li::before, .st-level li::before { content: ""; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--st-blue-50) var(--st-icon, none) center / 23px no-repeat; }
[class*="st-ic-license"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
[class*="st-ic-bonus"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M5 12v9h14v-9M12 8v13M12 8C10 4 6.5 4.5 7.5 7c.5 1 2.5 1 4.5 1zM12 8c2-4 5.5-3.5 4.5-1-.5 1-2.5 1-4.5 1z'/%3E%3C/svg%3E"); }
[class*="st-ic-club"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h11a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H9l-4 3v-3H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/%3E%3Cpath d='M17 9h3a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-1v3l-4-3h-4a2 2 0 0 1-2-2v-1'/%3E%3C/svg%3E"); }
[class*="st-ic-events"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.4l-5.2 2.7 1-5.8-4.3-4.1 5.9-.8z'/%3E%3C/svg%3E"); }
[class*="st-ic-lessons"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
[class*="st-ic-course"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
[class*="st-ic-group"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.8c2 .6 3.2 2.4 3.5 5.2'/%3E%3C/svg%3E"); }
[class*="st-ic-schedule"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M9 15.5l2 2 4-4'/%3E%3C/svg%3E"); }
[class*="st-ic-teacher"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c.8-4.2 4-6.5 8-6.5s7.2 2.3 8 6.5'/%3E%3C/svg%3E"); }
[class*="st-ic-book"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z'/%3E%3Cpath d='M4 20.5A2.5 2.5 0 0 0 6.5 23H20v-5'/%3E%3C/svg%3E"); }

[class*="st-ic-price"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); }
[class*="st-ic-award"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.5 14l-1.5 7 5-3 5 3-1.5-7'/%3E%3C/svg%3E"); }
[class*="st-ic-chat"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20.5l1.4-4.9A8 8 0 1 1 21 12z'/%3E%3Cpath d='M8.5 12h.01M12 12h.01M15.5 12h.01'/%3E%3C/svg%3E"); }
[class*="st-ic-craft"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4L8.1 15.9M14.5 14.5L20 20M8.1 8.1L12 12'/%3E%3C/svg%3E"); }
[class*="st-ic-sun"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
[class*="st-ic-table"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='4' rx='1'/%3E%3Cpath d='M6 13v7M18 13v7M7 9V6.5M12 9V5M17 9V6.5'/%3E%3C/svg%3E"); }
[class*="st-ic-discount"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5L5 19'/%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='17' cy='17' r='2.5'/%3E%3C/svg%3E"); }
[class*="st-ic-cup"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h13v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z'/%3E%3Cpath d='M17 10h1.5a2.5 2.5 0 0 1 0 5H17M8 3v3M12 3v3'/%3E%3C/svg%3E"); }
[class*="st-ic-dice"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='M8.5 8.5h.01M15.5 8.5h.01M12 12h.01M8.5 15.5h.01M15.5 15.5h.01'/%3E%3C/svg%3E"); }
[class*="st-ic-test"] { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V2.5h6V4M9 12l2 2 4-4M9 17.5h6'/%3E%3C/svg%3E"); }

/* ---------- inner pages: breadcrumbs and the course block on the gradient (position-2 inside .st-top) ---------- */
.st-pagehead { color: #fff; }
.st .st-crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 14px 0; font-size: 13.5px; color: #c9d3ea; border-top: 1px solid rgba(255, 255, 255, .1); }
.st .st-crumbs a { color: #fff; text-decoration: none; }
.st .st-crumbs a:hover { text-decoration: underline; color: #fff; }
.st-crumbs-sep { opacity: .55; }
.st .st-pagehead .custom-course { margin: 0; padding: 0; width: auto; background: none; }
.st-course { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; } /* text: half of the block, picture: the other half */
.st-course-text { padding-block: 12px 56px; display: grid; gap: 20px; min-width: 0; }
.st .st-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.st-chips span { border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #fff; }
.st .st-course-title { font-family: var(--st-head); font-size: clamp(26px, 3.1vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -.01em; color: #fff; text-transform: none; text-align: left; margin: 0; padding: 0; width: auto; text-wrap: balance; }
.st-course-title mark, .st-hero-title mark { background: linear-gradient(90deg, #60a5fa, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.st .st-course-lead { font-size: 17px; line-height: 1.6; color: #d5d9e0; max-width: 36em; margin: 0; text-align: left; }
.st .st-course-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.st .st-course-facts li { list-style: none; margin: 0; display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 8px 12px 8px 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
/* the icon: a translucent white circle with a white stroke (the blue icon of the template turned white) */
.st-course-facts li::before { content: ""; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .12) var(--st-icon, none) center / 19px no-repeat; filter: brightness(0) invert(1); }
.st-course-facts b, .st-course-facts small { display: block; white-space: nowrap; }
.st-course-facts b { font-size: 16px; font-weight: 800; line-height: 1.2; color: #fff; }
.st-course-facts small { font-size: 12.5px; color: #b9bec8; }
.st-course-facts .st-cf-price b { font-family: var(--st-head); font-size: 21px; font-weight: 600; }
.st .st-course-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0; }
/* «Оплатить занятия»: transparent with a white frame, always /pay/con_universal.htm */
.st .st-btn.st-btn-pay { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.st .st-btn.st-btn-pay:hover { background: rgba(255, 255, 255, .12); }
.st-course-photo { align-self: end; display: flex; justify-content: center; min-width: 0; }
.st .st-course-photo img { display: block; max-width: 100%; max-height: 600px; width: auto; height: auto; margin: -10px 0 0; }
.st-course-photo-card { align-self: center; padding-bottom: 40px; }
.st .st-course-photo-card img { border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
/* Chinese: the characters instead of a photo */
.st-course-glyph { align-self: center; padding-bottom: 40px; }
.st .st-course-glyph p { margin: 0; display: grid; justify-items: center; gap: 6px; text-align: center; }
.st-course-glyph b { font: 400 clamp(110px, 15vw, 200px)/1 "Noto Serif SC", "Songti SC", "SimSun", serif; background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.st-course-glyph small { font-size: 15px; color: #c9d3ea; letter-spacing: .04em; }
/* features of the course: a white strip like the advantages of the home page, full width of the screen */
/* features of the course: the background of the courses section of the home page with a line under it (as the strips of the
   home page), full width of the screen — painted by border-image outset, which does not widen the page */
.st-course-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); color: var(--st-ink);
  border-image: linear-gradient(to top, var(--st-line) 1px, var(--st-mist) 1px) fill 0 / 0 / 0 100vmax; }
.st-cfeat { padding: 24px 20px; border-right: 1px solid var(--st-line); display: flex; gap: 14px; align-items: center; }
.st-cfeat:last-child { border-right: 0; }
.st-cfeat::before { content: ""; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--st-blue-50) var(--st-icon, none) center / 23px no-repeat; }
.st-cfeat b { font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--st-ink); }

/* ---------- the window «Записаться на курсы» (#openModal, Convert Forms 1): the style of the sign-up form ---------- */
.st #openModal > div { width: calc(100% - 32px); max-width: 440px; box-sizing: border-box; border-radius: 12px; padding: 32px 28px 24px; background: #fff; box-shadow: 0 24px 60px rgba(15, 23, 42, .35); }
.st #openModal h3 { font-family: var(--st-font); font-size: 24px; font-weight: 800; line-height: 1.25; text-transform: none; color: var(--st-ink); margin: 0 0 8px; text-align: left; }
.st #openModal p { color: var(--st-ink-2); font-size: 15px; line-height: 1.5; text-align: left; text-transform: none; }
.st #openModal .convertforms, .st #openModal form, .st #openModal .cf-control-group { width: 100%; max-width: none; float: none; margin-left: 0; margin-right: 0; }
.st #openModal .cf-control-group { margin-bottom: 12px; }
.st #openModal input.cf-input:not([type="checkbox"]):not([type="radio"]) { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0;
  border: 1px solid var(--st-line); border-radius: 6px; padding: 10px 14px; font: 400 15px/1.4 var(--st-font); color: var(--st-ink); background: #fff; box-shadow: none; }
.st #openModal .cf-checkbox-group { display: flex; gap: 10px; align-items: flex-start; }
.st #openModal .cf-checkbox-group input[type="checkbox"] { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; float: none; }
.st #openModal .cf-checkbox-group .cf-label { display: block; font-size: 13px; line-height: 1.45; color: var(--st-ink-2); text-transform: none; margin: 0; }
.st #openModal button[type="submit"] { width: auto; margin: 4px 0 0; border: 0; border-radius: 6px; background: var(--st-red); color: #fff; padding: 14px 26px;
  font: 700 15px/1.2 var(--st-font); text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none; }
.st #openModal button[type="submit"]:hover { background: var(--st-red-d); }
.st #openModal .close { color: #fff; font-weight: 600; text-decoration: none; }

/* ---------- inner pages: the page heading (h1 of the menu item) and the article title, in the style of the site ---------- */
.st #content .page-header { margin: 0; padding: 40px 0 0; border: 0; }
.st #content .page-header h1, .st #content .page-header h2 { font-family: var(--st-font); font-size: clamp(26px, 3vw, 36px); font-weight: 800;
  line-height: 1.2; letter-spacing: -.01em; text-transform: none; color: var(--st-ink); margin: 0 0 20px; padding: 0; text-align: left; width: auto; }
.st #content .page-header + .page-header { padding-top: 0; }
.st #content .content-case > .com-content-article { padding-bottom: 48px; }
/* buttons of the content (the level test «Начать», «Далее»…): the red button of the site instead of the orange one */
.st #content input[type="submit"], .st #content input[type="button"], .st #content button.button {
  display: inline-flex; width: auto; margin: 8px 0; border: 0; border-radius: 6px; background: var(--st-red); color: #fff;
  padding: 14px 26px; font: 700 15px/1.2 var(--st-font); text-transform: none; cursor: pointer; box-shadow: none; text-shadow: none; }
.st #content input[type="submit"]:hover, .st #content input[type="button"]:hover, .st #content button.button:hover { background: var(--st-red-d); } /* an ordinary article (not a course page) */
.st #content .page-header + .page-header h2 { font-size: 22px; }

/* ---------- level test (com_levelquiz, overrides in html/com_levelquiz): a card with the question and the answers ---------- */
.st-quiz { padding: 40px 0 24px; } /* full width of the content */
.st #content .st-quiz-card { margin: 0; padding: 32px; width: auto; max-width: none; box-sizing: border-box; }
/* the note under the test (module 109 «Текст под тестом», position-6) */
.st #content .moduletable-test-op { margin: 0 0 56px; padding: 0; width: auto; background: none; }
.st #content .moduletable-test-op p { color: var(--st-ink-3); font-size: 14px; line-height: 1.55; margin: 0 0 6px; text-align: left; }
.st #content .st-quiz-title { font-family: var(--st-font); font-size: clamp(24px, 2.8vw, 32px); font-weight: 800; line-height: 1.2; text-transform: none;
  color: var(--st-ink); margin: 0 0 16px; text-align: left; }
.st-quiz-head { margin-bottom: 20px; }
.st-quiz-progress { display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 700; color: var(--st-ink-2); white-space: nowrap; }
.st-quiz-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--st-mist); overflow: hidden; }
.st-quiz-bar i { display: block; height: 100%; border-radius: inherit; background: var(--st-blue); transition: width .3s; }
.st-quiz-card { background: #fff; border: 1px solid var(--st-line); border-radius: 14px; padding: 28px; box-shadow: 0 12px 32px rgba(22, 33, 62, .08); }
.st #content .st-quiz-card .st-quiz-label { display: inline-block; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px; background: var(--st-red); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: none; }
.st #content .st-quiz-question, .st #content .st-quiz-question p { font-size: 20px; font-weight: 700; line-height: 1.45; color: var(--st-ink); margin: 0 0 20px; text-align: left; }
.st-quiz-answers { display: grid; gap: 10px; margin-bottom: 24px; }
.st #content .st-quiz-answer { position: relative; display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 16px; border: 1px solid var(--st-line);
  border-radius: 10px; background: #fff; cursor: pointer; font-size: 17px; color: var(--st-ink); text-transform: none; transition: border-color .15s, background .15s; }
.st-quiz-answer:hover { border-color: var(--st-blue); background: var(--st-blue-50); }
.st-quiz-answer input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.st-quiz-letter { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--st-mist);
  font-weight: 800; font-size: 14px; color: var(--st-ink-2); }
.st-quiz-answer:has(input:checked) { border-color: var(--st-blue); background: var(--st-blue-50); box-shadow: inset 0 0 0 1px var(--st-blue); }
.st-quiz-answer:has(input:checked) .st-quiz-letter { background: var(--st-blue); color: #fff; }
.st-quiz-answer:has(input:focus-visible) { outline: 3px solid #60a5fa; outline-offset: 2px; }
.st-quiz-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.st #content .st-quiz-actions input { margin: 0; }
.st #content .st-quiz-actions .st-btn-ghost { background: #fff; color: var(--st-ink); box-shadow: inset 0 0 0 1px #c9ced8; }
.st #content .st-quiz-actions .st-btn-ghost:hover { background: var(--st-mist); }
.st #content .st-quiz-intro, .st #content .st-quiz-intro p { color: var(--st-ink-2); font-size: 17px; line-height: 1.6; margin: 0 0 20px; text-align: left; }
.st #content .st-quiz-result, .st #content .st-quiz-result p { font-size: 17px; line-height: 1.6; color: var(--st-ink-2); text-align: left; }
.st #content .st-quiz-level { font-family: var(--st-font); font-size: clamp(24px, 3vw, 34px); font-weight: 800; line-height: 1.2; color: var(--st-ink);
  text-transform: none; text-align: left; margin: 0 0 16px; }
.st #content .st-quiz-level mark { background: none; color: var(--st-blue); }
.st-quiz-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; }
.st-quiz-score b { font-family: var(--st-head); font-size: 40px; font-weight: 600; line-height: 1; color: var(--st-ink); }
.st-quiz-score small { font-size: 20px; color: var(--st-ink-3); }
.st-quiz-score span { font-size: 15px; color: var(--st-ink-2); }
.st-quiz-result .st-quiz-bar { height: 10px; margin-bottom: 24px; }
.st #content .st-quiz-scale { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st #content .st-quiz-scale li { list-style: none; margin: 0; padding: 10px 12px; border: 1px solid var(--st-line); border-radius: 10px; display: grid; gap: 2px; }
.st-quiz-scale b { font-size: 15px; color: var(--st-ink); }
.st-quiz-scale span { font-size: 13px; color: var(--st-ink-3); }
.st #content .st-quiz-scale li.is-current { border-color: var(--st-blue); background: var(--st-blue-50); box-shadow: inset 0 0 0 1px var(--st-blue); }
.st #content .st-quiz-note { font-size: 15px; margin: 0 0 20px; }
.st #content .st-quiz-actions a.st-btn-ghost { background: #fff; color: var(--st-ink); box-shadow: inset 0 0 0 1px #c9ced8; }
.st #content .st-quiz-actions a.st-btn-ghost:hover { background: var(--st-mist); color: var(--st-ink); }

/* ---------- photo gallery (module class «-gallery», e.g. the summer club, position-5): photos in a row ---------- */
.st .content-right:has(.custom-gallery) { float: none; width: auto; max-width: none; margin: 0; padding: 0 0 56px; }
.st .custom-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; width: auto; background: none; }
.st .custom-gallery p { margin: 0; }
.st .custom-gallery a { display: block; border-radius: 12px; overflow: hidden; }
.st .custom-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; transition: transform .3s; }
.st .custom-gallery a:hover img { transform: scale(1.04); }

/* ---------- course page: the article + «Коротко о курсе» (position «course-side») ---------- */
.st-about { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; padding-block: 56px; }
.st-about-text { min-width: 0; }
.st #content .st-about-text h2 { font-family: var(--st-font); font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1.2; margin: 0 0 18px; color: var(--st-ink); text-transform: none; text-align: left; width: auto; }
.st #content .st-about-text h3 { font-family: var(--st-font); font-size: 20px; font-weight: 800; margin: 26px 0 14px; color: var(--st-ink); text-transform: none; text-align: left; }
.st #content .st-about-text p { color: var(--st-ink-2); font-size: 17px; line-height: 1.65; margin: 0 0 14px; text-align: left; }
.st #content .st-about-text ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.st #content .st-about-text li { text-align: left; }
.st #content .st-about-text > article { float: none; width: auto; max-width: none; margin: 0; padding: 0; }
.st-about-text .page-header { display: none; } /* the name of the course is the title of the block above */
.st #content .st-about-text ul li { list-style: none !important; position: relative; margin: 0; padding-left: 34px; color: var(--st-ink-2); font-size: 17px; line-height: 1.55; }
/* ticks, as in the layout */
#content .st-about-text ul li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--st-blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55a4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.st #content .st-about-text ol { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 12px; }
.st #content .st-about-text ol li { color: var(--st-ink-2); font-size: 17px; line-height: 1.55; }
.st-side { position: sticky; top: 24px; background: var(--st-mist); border-radius: 12px; padding: 28px; display: grid; gap: 0; }
.st #content .st-side h3 { font-family: var(--st-font); font-size: 20px; font-weight: 800; line-height: 1.25; margin: 0 0 20px; color: var(--st-ink); text-transform: none; }
.st #content .st-side dl { margin: 0; display: grid; gap: 0; }
.st #content .st-side dl > div { padding: 12px 0; border-top: 1px solid var(--st-line); }
.st #content .st-side dl > div:first-child { padding-top: 0; border-top: 0; }
.st #content .st-side dt { font-size: 13px; line-height: 1.3; color: var(--st-ink-3); font-weight: 400; margin: 0 0 4px; }
.st #content .st-side dd { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--st-ink); }
.st #content .st-side p { margin: 24px 0 0; }

/* ---------- section headings ---------- */
.st-sec { text-align: center; display: grid; gap: 8px; margin-bottom: 28px; }
.st .st-sec h2, .st .st-sec h1 { color: var(--st-ink); line-height: 1.2; padding: 0; text-align: center; font-family: var(--st-font); font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.01em; margin: 0; text-transform: none; width: auto; }
.st-sec p { color: var(--st-ink-2); margin: 0; }

/* ---------- courses (position «courses»): tabs by language + cards ---------- */
.st-courses { background: var(--st-mist); padding-block: 56px; }
.st-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 26px; }
.st-tabs button { border: 1px solid var(--st-line); background: #fff; border-radius: 999px; padding: 9px 18px; font: 700 14px/1.2 var(--st-font); color: var(--st-ink); cursor: pointer; }
.st-tabs button[aria-selected="true"] { background: var(--st-navy); color: #fff; border-color: var(--st-navy); }
.st-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
/* two cards only (German, Chinese pages): two columns in the middle instead of an empty third one */
@media (min-width: 761px) {
  .st-cards:has(> .st-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }
}
.st-card { background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(22, 33, 62, .14), 0 2px 6px rgba(22, 33, 62, .06); padding: 26px; display: flex; flex-direction: column; gap: 14px; border-top: 4px solid var(--st-blue); transition: box-shadow .2s, transform .2s; }
.st-card:hover { box-shadow: 0 18px 40px rgba(22, 33, 62, .2), 0 2px 6px rgba(22, 33, 62, .06); transform: translateY(-2px); }
.st-card[hidden] { display: none; }
.st-card .st-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--st-ink-3); }
.st .st-card h3 { font-family: var(--st-font); font-size: 21px; font-weight: 800; line-height: 1.2; margin: 0; color: var(--st-ink); }
.st .st-card h3 a { color: inherit; text-decoration: none; }
.st .st-card h3 a:hover { color: var(--st-red); }
.st .st-card ul.st-card-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.st .st-card ul.st-card-facts li { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 9px; white-space: nowrap; font-weight: 600; font-size: 15px; }
.st-card-facts li::before { width: 34px; height: 34px; background-size: 18px; }
.st .st-card p.st-desc { font-size: 14.5px; line-height: 1.5; color: var(--st-ink-2); min-height: 4.5em; margin: 0; }
/* course picture 16:9; until a picture is added the block shows the language on the gradient */
.st-cimg { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; margin: 0 -4px; background: var(--st-gradient); display: grid; place-items: center; }
.st-cimg::after { content: attr(data-label); font-family: var(--st-head); font-weight: 600; font-size: 30px; color: rgba(255, 255, 255, .22); letter-spacing: .02em; }
.st .st-cimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; transition: transform .3s; }
/* the picture is a link to the course */
.st a.st-cimg { text-decoration: none; cursor: pointer; }
.st a.st-cimg:hover img { transform: scale(1.04); }
.st a.st-cimg:hover::after { color: rgba(255, 255, 255, .35); }
/* the language label (data-label) is only for a card without a photo */
.st-cimg:has(img)::after { content: none; }
.st-prices { display: grid; gap: 8px; margin-bottom: 4px; }
.st .st-price { display: flex; align-items: baseline; gap: 10px; background: var(--st-mist); border-radius: 8px; padding: 10px 14px; margin: 0; }
.st-price b { font-size: 22px; font-weight: 800; white-space: nowrap; }
.st-price span { font-size: 13px; color: var(--st-ink-2); }
.st .st-card-btn { margin: auto 0 0; display: flex; justify-content: flex-end; }
.st .st-card-btn .st-btn { padding: 11px 22px; }

/* ---------- speaking club (position «club») ---------- */
.st-club { padding-block: 56px; }
.st-club-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; }
.st-club-photo { aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: var(--st-mist); }
.st .st-club-photo img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.st-club-text { display: grid; gap: 16px; }
.st .st-club-text h2 { font-family: var(--st-font); font-size: clamp(26px, 2.8vw, 36px); font-weight: 800; margin: 0; width: auto; }
.st .st-club-text p { color: var(--st-ink-2); font-size: 18px; line-height: 1.6; margin: 0; }
.st-club-prices { display: flex; flex-wrap: wrap; gap: 12px; }
.st-club-prices div { border: 1px solid var(--st-line); border-radius: 10px; padding: 12px 18px; }
.st-club-prices b { display: block; font-size: 24px; font-weight: 800; }
.st-club-prices span { font-size: 13px; color: var(--st-ink-2); }

/* ---------- bonus programme (module 176, head-4, every page) ---------- */
.st .moduletable-bonus { background: var(--st-red); color: #fff; padding: 0; margin: 0; width: auto; }
.st .moduletable-bonus .custom-bonus { max-width: 1240px; margin: 0 auto; padding: 24px max(16px, env(safe-area-inset-left, 0px)); background: none; box-shadow: none; border: 0; }
.st .moduletable-bonus h2 { font-family: var(--st-font); font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; margin: 0 0 6px; color: #fff; text-transform: none; width: auto; }
.st .moduletable-bonus p { color: #ffe3e4; margin: 0; max-width: 60em; font-size: 16px; text-align: left; text-transform: none; font-weight: 400; line-height: 1.5; }
.st .moduletable-bonus a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- sign-up: form (position-7, Convert Forms 2) + levels (position «levels») ---------- */
.st-signup { padding-block: 56px; }
.st-signup-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 36px; align-items: start; }
.st .st-signup .moduletable-new-zakaz { padding: 0; margin: 0; background: none; width: auto; }
.st .st-signup .rsform-new-zakaz { max-width: none; margin: 0; padding: 0; background: none; }
.st .st-signup form, .st .st-signup .convertforms, .st .st-signup .cf-form-wrap, .st .st-signup .cf-fields, .st .st-signup .cf-control-group { width: 100%; max-width: none; float: none; margin-left: 0; margin-right: 0; }
.st .st-signup .convertforms h2 { font-family: var(--st-font); font-size: clamp(22px, 2vw, 26px); font-weight: 800; margin: 0 0 8px; color: var(--st-ink); text-transform: none; text-align: left; }
.st .st-signup .convertforms .cf-control-group[data-type="html"] p { color: var(--st-ink-2); font-size: 16px; margin: 0 0 18px; text-align: left; }
.st .st-signup .convertforms .cf-control-group { margin: 0 0 12px; }
.st .st-signup .convertforms input.cf-input:not([type="checkbox"]):not([type="radio"]), .st .st-signup .convertforms select.cf-input {
  width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0; border: 1px solid var(--st-line); border-radius: 6px; padding: 10px 14px; font: 400 15px/1.4 var(--st-font); color: var(--st-ink); background: #fff; }
.st .st-signup .convertforms .cf-select { display: block; width: 100%; }
.st .st-signup .convertforms .cf-checkbox-group { display: flex; gap: 10px; align-items: flex-start; }
.st .st-signup .convertforms .cf-checkbox-group input[type="checkbox"] { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; float: none; }
/* checkboxes: the former template drew a red frame with input::after over the native box */
.st input[type="checkbox"], .st input[type="radio"] { accent-color: var(--st-blue); }
.st input[type="checkbox"]::before, .st input[type="checkbox"]::after, .st input[type="radio"]::before, .st input[type="radio"]::after { content: none !important; display: none !important; }
.st .st-signup .convertforms .cf-checkbox-group .cf-label { display: block; font-size: 13px; color: var(--st-ink-2); line-height: 1.45; margin: 0; }
.st .st-signup .convertforms button[type="submit"], .st .st-signup .moduletable-new-zakaz .rsform-new-zakaz form button[type="submit"] {
  width: auto; margin: 4px 0 0; border: 0; border-radius: 6px; background: var(--st-red); color: #fff; padding: 14px 26px; font: 700 15px/1.2 var(--st-font); text-transform: none; cursor: pointer; }
.st .st-signup .convertforms button[type="submit"]:hover { background: var(--st-red-d); }

.st-levels { background: var(--st-mist); border-radius: 12px; padding: 28px; display: grid; gap: 16px; align-content: start; }
.st .st-levels h2 { font-family: var(--st-font); font-size: clamp(20px, 2vw, 24px); font-weight: 800; line-height: 1.25; margin: 0; width: auto; text-transform: none; }
.st-lv-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.st-lv-tabs button { border: 1px solid var(--st-line); background: #fff; border-radius: 999px; padding: 7px 12px; font: 700 13.5px/1.2 var(--st-font); color: var(--st-ink); white-space: nowrap; cursor: pointer; }
.st-lv-tabs button[aria-selected="true"] { background: var(--st-blue); border-color: var(--st-blue); color: #fff; }
.st-level { background: #fff; border-radius: 10px; padding: 20px; display: grid; gap: 14px; }
.st-level[hidden] { display: none; }
.st .st-level h3 { font-size: 16px; margin: 0; color: var(--st-ink); }
.st-levels.js .st-level h3 { display: none; } /* the name is on the tab */
.st .st-level ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.st .st-level li { list-style: none; margin: 0; display: flex; gap: 10px; align-items: center; font-weight: 800; font-size: 17px; }
.st-level li::before { width: 40px; height: 40px; background-size: 20px; }
.st-lv-val b { display: block; }
.st-lv-val small { display: block; font-size: 12px; font-weight: 600; color: var(--st-ink-3); }
.st .st-level p { color: var(--st-ink-2); font-size: 15px; line-height: 1.55; margin: 0; }
.st .st-levels-test { color: var(--st-blue); font-weight: 800; text-decoration: none; }
.st .st-levels-test:hover { text-decoration: underline; color: var(--st-blue); }

/* ---------- footer ---------- */
.st-footer { background: var(--st-navy); color: #c3cbe0; font-size: 14px; }
.st-footer .st-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-block: 36px 20px; }
.st-footer a { color: #fff; }
.st-footer p { margin: 10px 0 0; line-height: 1.6; }
.st-footer .st-logo b { font-size: 40px; }
.st-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.st-footer ul li { list-style: none; margin: 0; }
.st-foot-contacts { display: grid; align-content: start; }
.st .st-foot-phone { font-family: var(--st-head); font-size: 22px; font-weight: 600; text-decoration: none; white-space: nowrap; line-height: 1.4; }
.st .st-foot-phone:hover { color: #ff8a8f; }
.st-social { display: flex; gap: 16px; }
.st-dev { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 14px; font-size: 13px; color: #8f9bb8; }

/* ---------- inner pages: content of the former template ---------- */
.st-main { min-height: 1px; }
.st .st-main > .content-case { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.st .moduletable-nav { max-width: none; }
.st .moduletable-nav > * { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.st-home .st-main .content-case:empty { display: none; }

/* ---------- tablet / phone ---------- */
@media (max-width: 1100px) {
  .st-nav > ul, .st-nav .mod-menu { gap: 4px 20px; }
  .st-nav .mod-menu > li > a, .st-nav .mod-menu > li > span { font-size: 16px; }
}
@media (max-width: 980px) {
  .st-burger { display: block; }
  .st-head .st-wrap { flex-wrap: wrap; }
  .st-nav { order: 10; width: 100%; margin: 0; display: none; padding-bottom: 12px; }
  .st-nav.open { display: block; }
  .st-nav .mod-menu { flex-direction: column; gap: 0; }
  .st-nav .mod-menu > li { border-top: 1px solid rgba(255, 255, 255, .12); }
  .st-nav .mod-menu > li > a, .st-nav .mod-menu > li > span { padding-block: 12px; border-bottom: 0; }
  .st-nav .mod-menu ul { position: static; display: block; box-shadow: none; background: transparent; padding: 0 0 10px 14px; min-width: 0; max-width: none; }
  .st-nav .mod-menu ul a, .st-nav .mod-menu ul span { color: #d6deef; padding: 6px 0; font-size: 15px; }
  .st-nav .mod-menu ul a:hover { background: none; color: #fff; }
  .st-nav .mod-menu > li.parent > a::after, .st-nav .mod-menu > li.parent > span::after { display: none; }
  .st-phones a { font-size: 18px; }
  .st-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-fact:nth-child(2) { border-right: 0; }
  .st-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-footer .st-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-course-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-cfeat:nth-child(2) { border-right: 0; }
  .st-cfeat:nth-child(-n+2) { border-bottom: 1px solid var(--st-line); }
  .st-about { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .st-side { position: static; }
}
@media (max-width: 760px) {
  .st-hide-m, .st-phones { display: none; }
  .st-m-only { display: inline; }
  /* phone: both numbers on their own line of the header */
  .st-util { font-size: 12.5px; }
  .st-util .st-wrap { gap: 6px 12px; }
  .st-util .st-m-phones { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; width: 100%; order: 10; }
  .st-m-phones a { font-family: var(--st-head); font-weight: 600; font-size: 15px; line-height: 1.3; text-decoration: none; white-space: nowrap; }
  .st-logo b { font-size: 38px; }
  .st-hero-in, .st-club-in, .st-signup-grid { grid-template-columns: minmax(0, 1fr); }
  .st-hero-text { padding-block: 34px 10px; }
  .st-hero-photo img { max-height: 300px; }
  .st-facts, .st-cards, .st-footer .st-wrap { grid-template-columns: minmax(0, 1fr); }
  .st-fact { border-right: 0; border-bottom: 1px solid var(--st-line); }
  .st .st-card p.st-desc { min-height: 0; }
  .st-courses, .st-club, .st-signup { padding-block: 40px; }
  .st-course { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .st-course-text { padding-block: 4px 24px; }
  .st .st-course-photo img { max-height: 380px; }
  .st-course-facts small { white-space: normal; }
  .st-about { padding-block: 40px; }
  .st .custom-gallery { grid-template-columns: minmax(0, 1fr); }
  .st-quiz { padding: 28px 0 40px; }
  .st #content .st-quiz-card { padding: 20px 16px; }
  .st #content .moduletable-test-op { margin-bottom: 40px; }
  .st #content .st-quiz-question, .st #content .st-quiz-question p { font-size: 18px; }
  .st-quiz-actions input, .st-quiz-actions a { flex: 1 1 auto; }
  .st #content .st-quiz-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* bonus programme: the table of prizes fits a phone */
  .st .bonus-table { width: 100%; }
  .st .bonus-table th, .st .bonus-table td { padding: 8px 6px; font-size: 14px; line-height: 1.35; }
  .st .content-right:has(.custom-gallery) { padding-bottom: 40px; }
  .st-course-photo-card, .st-course-glyph { padding-bottom: 28px; }
  .st-course-features { grid-template-columns: minmax(0, 1fr); }
  .st-cfeat { border-right: 0; border-bottom: 1px solid var(--st-line); }
  .st-cfeat:last-child { border-bottom: 0; }
}