@font-face{font-family:"Anek Bangla";font-style:normal;font-weight:400;font-display:swap;src:url(../font/anek-bangla-400-bengali.woff2) format("woff2");unicode-range:U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1}
@font-face{font-family:"Anek Bangla";font-style:normal;font-weight:400;font-display:swap;src:url(../font/anek-bangla-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:"Anek Bangla";font-style:normal;font-weight:400;font-display:swap;src:url(../font/anek-bangla-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:"Anek Bangla";font-style:normal;font-weight:700;font-display:swap;src:url(../font/anek-bangla-700-bengali.woff2) format("woff2");unicode-range:U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1}
@font-face{font-family:"Anek Bangla";font-style:normal;font-weight:700;font-display:swap;src:url(../font/anek-bangla-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:"Anek Bangla";font-style:normal;font-weight:700;font-display:swap;src:url(../font/anek-bangla-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:"Baloo Da";font-style:normal;font-weight:800;font-display:swap;src:url(../font/baloo-da-800-bengali.woff2) format("woff2");unicode-range:U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1}
@font-face{font-family:"Baloo Da";font-style:normal;font-weight:800;font-display:swap;src:url(../font/baloo-da-800-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:"Baloo Da";font-style:normal;font-weight:800;font-display:swap;src:url(../font/baloo-da-800-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:"Baloo Da";font-style:normal;font-weight:800;font-display:swap;src:url(../font/baloo-da-800-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}

:root{
  --night:#141033; --night-2:#1b1646; --slab:#221c58;
  --slab-2:#2a2266; --line:rgba(169,155,255,.20); --line-2:rgba(169,155,255,.34);
  --mint:#4fe3b0; --amber:#ffb54a; --rose:#ff7597; --lilac:#a99bff;
  --text:#efecff; --text-2:#c9c3ee; --text-3:#9a93c8;
  --r1:12px; --r2:20px; --r3:30px;
  --disp:"Baloo Da","Segoe UI",system-ui,sans-serif;
  --body:"Anek Bangla","Segoe UI",system-ui,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--night); color:var(--text); font-family:var(--body);
  font-size:17px; line-height:1.72;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22%3E%3Cg fill=%22%23a99bff%22 fill-opacity=%22.10%22%3E%3Ccircle cx=%2218%22 cy=%2226%22 r=%221.6%22/%3E%3Ccircle cx=%2274%22 cy=%2214%22 r=%221.1%22/%3E%3Ccircle cx=%2246%22 cy=%2272%22 r=%221.4%22/%3E%3Ccircle cx=%22100%22 cy=%2290%22 r=%221.1%22/%3E%3Ccircle cx=%2288%22 cy=%2248%22 r=%221.7%22/%3E%3Ccircle cx=%2224%22 cy=%22104%22 r=%221.2%22/%3E%3C/g%3E%3Cpath d=%22M0 108C34 84 74 96 120 62%22 fill=%22none%22 stroke=%22%234fe3b0%22 stroke-opacity=%22.07%22 stroke-width=%221.4%22/%3E%3C/svg%3E"); background-size:120px 120px}
body.has-bar{padding-bottom:78px}
img{max-width:100%; height:auto; display:block}
a{color:var(--mint); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px}
a:hover{color:var(--amber)}
h1,h2,h3{font-family:var(--disp); line-height:1.22; margin:0}
h1{font-weight:800; font-size:clamp(29px,4.4vw,44px); letter-spacing:0}
h2{font-weight:800; font-size:clamp(23px,3.1vw,33px)}
h3{font-family:var(--body); font-weight:700; font-size:19px}
p{margin:0 0 16px}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px}
.lb{text-transform:lowercase !important; color:inherit; font:inherit;
  display:inline !important}
.skip{position:absolute; left:-9999px; top:0; background:var(--mint); color:#10122b;
  padding:12px 18px; border-radius:0 0 var(--r1) 0; z-index:60}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px}
main{display:block}
.sec{padding:34px 0 8px}
.sec__h{display:flex; align-items:center; gap:14px; margin:0 0 16px}
.sec__n{flex:none; width:38px; height:38px; border-radius:50%; background:var(--slab);
  box-shadow:inset 0 0 0 1px var(--line-2); position:relative}
.sec__n::before{content:""; position:absolute; left:9px; top:8px; width:20px; height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22%3E%3Cpath d=%22M20 3c7 9 12 14 12 21a12 12 0 0 1-24 0c0-7 5-12 12-21z%22 fill=%22%234fe3b0%22/%3E%3C/svg%3E") center/contain no-repeat; opacity:.85}
/* Длина строки. На десктопе абзац занимал всю колонку — 103–123 знака, а
   бенгальская вязь с её верхней чертой теряется уже после 80: глаз не
   находит начало следующей строки. Ограничение только на текстовые блоки;
   карточки, таблицы и шаги остаются во всю ширину. */
.sec p, .sec ul.plain, .sec ol.plain, .note-box, .ans p, .ans ul, .hero__t .lead{
  max-width:56ch}
.lead{font-size:19px; color:var(--text-2)}
.prog i{display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--mint),var(--amber))}
.near-wrap{margin:26px 0 0}
.near-wrap h2{font-size:clamp(20px,2.4vw,26px); margin-bottom:12px}
strong{color:#fff; font-weight:700}

/* --- шапка ---------------------------------------------------- */
.top{position:sticky; top:0; z-index:40; background:rgba(20,16,51,.96);
  box-shadow:0 1px 0 var(--line)}
.top__in{display:flex; align-items:center; gap:16px; padding-top:12px; padding-bottom:12px}
/* меню — гибкое и сжимаемое: иначе на узком экране кнопка справа
   выдавливается за поле страницы */
.menu{flex:1 1 auto; min-width:0}
.top__in>.btn{flex:none}
.mark{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit;
  flex:0 1 auto; min-width:0}
.mark svg{width:40px; height:40px; flex:none}
.mark__t b{display:block; font:800 19px/1.05 var(--disp); color:#fff}
.mark__t span{display:block; font-size:11.5px; color:var(--text-3)}
.menu{display:flex; gap:4px; margin-inline-start:auto; overflow-x:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; max-width:100%}
.menu::-webkit-scrollbar{display:none}
/* Меню — подчёркиванием, а не пилюлями: пилюля с активным пунктом стоит у
   соседнего кита, и в сети это уже узнаваемый приём. */
.menu a{white-space:nowrap; padding:10px 2px; margin:0 8px; font-size:15px;
  color:var(--text-2); text-decoration:none; box-shadow:inset 0 -2px 0 transparent}
.menu a:hover{color:#fff; box-shadow:inset 0 -2px 0 var(--line-2)}
.menu a[aria-current]{color:#fff; box-shadow:inset 0 -2px 0 var(--amber)}
/* кнопка языка: ТЗ требует переключения кнопкой, а не редиректом */
.lang{flex:none; margin-inline-start:4px; padding:9px 14px; border-radius:999px;
  font-size:14.5px; text-decoration:none; color:var(--text-2);
  box-shadow:inset 0 0 0 1px var(--line-2)}
.lang:hover{color:#fff; background:var(--slab)}
.prog{height:2px; background:linear-gradient(90deg,var(--mint),var(--amber),var(--rose))}
.crumbs{display:flex; align-items:center; gap:6px; font-size:14px; color:var(--text-3);
  padding:10px 0 0; flex-wrap:wrap}
.crumbs a{color:var(--text-2); text-decoration:none; display:inline-block;
  padding:12px 8px; margin-inline-start:-8px; border-radius:10px}
.crumbs a:hover{color:#fff; background:var(--slab)}
.crumbs span{padding:12px 0}

/* --- герой ---------------------------------------------------- */
.hero{padding:26px 0 6px}
.hero__g{display:grid; gap:26px 40px; grid-template-columns:minmax(0,1fr);
  align-items:start}
.hero__t p.lead{margin-bottom:0}
.hero__a{display:flex; flex-direction:column; align-items:flex-start}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; padding:0; list-style:none}
.tags li{font:400 13.5px/1 var(--body); color:var(--text-2); background:var(--slab);
  box-shadow:inset 0 0 0 1px var(--line); border-radius:999px; padding:9px 13px}
.hero__b{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:18px 0 6px}
.note{margin:14px 0 0; font-size:14.5px; color:var(--text-3)}
.qlinks{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:20px 0 0;
  width:100%;
  padding:16px 0 0; list-style:none; box-shadow:0 -1px 0 var(--line)}
.qlinks__c{font-size:14px; color:var(--text-3)}
.qlinks a{display:inline-block; padding:9px 14px; border-radius:999px; font-size:15px;
  text-decoration:none; color:var(--text-2); background:var(--night-2);
  box-shadow:inset 0 0 0 1px var(--line)}
.qlinks a:hover{color:#fff; box-shadow:inset 0 0 0 1px var(--line-2)}
/* профиль платформы — широкий блок в теле страницы */
.prof{margin:6px 0 24px}
.prof__g{display:grid; gap:2px; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0;
  border-radius:var(--r2); overflow:hidden; background:var(--line)}
.prof__g>div{background:var(--night-2); padding:14px 16px}
.prof dt{font-size:13.5px; color:var(--text-3)}
.prof dd{margin:4px 0 0; font-size:16.5px; color:#fff}
.prof__f{margin:12px 0 0; font-size:13.5px; color:var(--text-3)}
/* полоса фактов в герое */
.facts{display:grid; gap:14px 22px; grid-template-columns:repeat(2,minmax(0,1fr));
  margin:24px 0 0; padding:18px 0 0; list-style:none;
  box-shadow:0 -1px 0 var(--line)}
.facts b{display:block; font:400 13px/1.3 var(--body); color:var(--text-3);
  margin-bottom:4px}
.facts span{display:block; font:700 15.5px/1.4 var(--body); color:#fff}

/* --- карточки, списки, таблицы -------------------------------- */
.cards{display:grid; gap:16px; grid-template-columns:minmax(0,1fr); margin:8px 0 22px}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{border-radius:var(--r2); background:var(--night-2); padding:20px 19px 16px;
  box-shadow:inset 0 0 0 1px var(--line)}
.card__ic{width:42px; height:42px; border-radius:13px; background:var(--slab-2);
  box-shadow:inset 0 0 0 1px var(--line-2); display:flex; align-items:center;
  justify-content:center; font-size:19px; color:var(--amber); margin-bottom:12px}
.card h3{margin-bottom:7px; color:#fff}
.card p{margin:0; font-size:15.5px; color:var(--text-2)}
.card--wide{grid-column:1/-1}
ul.plain,ol.plain{margin:0 0 20px; padding-inline-start:22px; color:var(--text-2)}
ul.plain li,ol.plain li{margin-bottom:9px}
.pairs{display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr));
  margin:6px 0 22px}
.pairs--one{grid-template-columns:minmax(0,1fr)}
.pairs div{border-radius:var(--r1); background:var(--night-2); padding:13px 15px;
  box-shadow:inset 0 0 0 1px var(--line)}
.pairs b{display:block; font:700 15px/1.3 var(--body); color:#fff}
.pairs span{font-size:14.5px; color:var(--text-2)}
/* шаги: столбик с соединительной линией */
.steps{margin:6px 0 22px; padding:0; list-style:none; counter-reset:s}
.steps li{position:relative; padding:0 0 18px 52px}
.steps li::before{counter-increment:s; content:counter(s); position:absolute; left:0; top:0;
  width:34px; height:34px; border-radius:50%; background:var(--slab-2); color:var(--mint);
  font:700 15px/34px var(--body); text-align:center;
  box-shadow:inset 0 0 0 1px var(--line-2)}
.steps li::after{content:""; position:absolute; left:17px; top:38px; bottom:2px; width:2px;
  background:linear-gradient(180deg,var(--line-2),transparent)}
.steps li:last-child::after{display:none}
.steps b{display:block; font:700 16.5px/1.35 var(--body); color:#fff}
.steps span{font-size:15.5px; color:var(--text-2)}
/* таблица */
table caption{caption-side:top; text-align:start; padding:12px 14px 10px;
  font:700 14px/1.35 var(--body); color:var(--text-3)}
.tsc{overflow-x:auto; margin:8px 0 24px; border-radius:var(--r2);
  box-shadow:inset 0 0 0 1px var(--line)}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:15.5px}
th,td{text-align:start; padding:12px 14px; box-shadow:0 1px 0 var(--line)}
th{font:700 14px/1.3 var(--body); color:var(--text-3); background:var(--night-2)}
td{color:var(--text-2)}
td:first-child{color:#fff}
tr:last-child th,tr:last-child td{box-shadow:none}
/* врезка и предупреждение */
.note-box{border-radius:var(--r2); background:var(--night-2); padding:16px 18px;
  margin:6px 0 22px; box-shadow:inset 0 0 0 1px var(--line);
  border-inline-start:3px solid var(--amber); font-size:15.5px; color:var(--text-2)}
.note-box strong{color:#fff}
/* короткий ответ под заголовком */
.ans{border-radius:var(--r3); background:linear-gradient(150deg,var(--slab),var(--night-2));
  box-shadow:inset 0 0 0 1px var(--line-2); padding:22px 22px 10px; margin:0 0 24px}
.ans p{color:var(--text-2)}
.ans p:first-child{font-size:18.5px; color:#fff}
.ans ul{margin:0 0 16px; padding-inline-start:20px}
.ans li{margin-bottom:7px; color:var(--text-2)}
/* да/нет */
.check{margin:6px 0 24px; padding:0; list-style:none; display:grid; gap:10px}
.check li{display:flex; gap:12px; align-items:flex-start; border-radius:var(--r1);
  background:var(--night-2); padding:13px 15px; box-shadow:inset 0 0 0 1px var(--line)}
.check i{flex:none; width:26px; height:26px; border-radius:50%; font:700 15px/26px var(--body);
  text-align:center; font-style:normal}
.check .ok i{background:rgba(79,227,176,.16); color:var(--mint)}
.check .no i{background:rgba(255,117,151,.16); color:var(--rose)}
.check b{display:block; font:700 16px/1.35 var(--body); color:#fff}
.check span{font-size:15px; color:var(--text-2)}
/* макет телефона для страницы приложения */
.phone{margin:8px 0 24px; display:grid; gap:18px; grid-template-columns:minmax(0,1fr)}
.phone__box{border-radius:28px; background:var(--night-2); padding:14px;
  box-shadow:inset 0 0 0 1px var(--line-2); max-width:280px}
.phone__scr{border-radius:20px; background:linear-gradient(170deg,var(--slab-2),var(--night));
  padding:16px 14px; box-shadow:inset 0 0 0 1px var(--line)}
.phone__row{display:flex; align-items:center; gap:10px; padding:9px 0;
  box-shadow:0 1px 0 var(--line)}
.phone__row:last-child{box-shadow:none}
.phone__row i{flex:none; width:26px; height:26px; border-radius:9px; background:var(--slab);
  font-style:normal; font-size:14px; line-height:26px; text-align:center; color:var(--amber)}
.phone__row b{font:700 14.5px/1.2 var(--body); color:#fff; display:block}
.phone__row span{font-size:12.5px; color:var(--text-3)}
/* FAQ */
.faq{margin:6px 0 26px}
.faq details{border-radius:var(--r2); background:var(--night-2); margin-bottom:10px;
  box-shadow:inset 0 0 0 1px var(--line)}
.faq summary{cursor:pointer; padding:15px 18px; font:700 16.5px/1.4 var(--body); color:#fff;
  list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--mint); font-size:20px;
  line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0; padding:0 18px 16px; color:var(--text-2); font-size:15.5px}
/* картинка-полоса */
.band{margin:22px 0; border-radius:var(--r2); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line)}
.band img{width:100%}
/* схема по теме страницы: экран приложения, зал, касса */
/* навигация на 404: приёмка соседа 22.09 — ссылки были 31px, на телефоне
   в них трудно попасть; чипы с min-height 44px */
.links404{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0;
  margin:16px 0 20px}
.links404 a{display:inline-flex; align-items:center; min-height:44px;
  padding:10px 17px; border-radius:999px; text-decoration:none;
  color:var(--text-2); box-shadow:inset 0 0 0 1px var(--line-2)}
.links404 a:hover{color:#fff; background:var(--slab)}
.shot{margin:26px 0 22px}
.shot img{width:100%; height:auto; display:block; border-radius:var(--r2);
  box-shadow:inset 0 0 0 1px var(--line-2)}
.shot figcaption{margin-top:11px; font-size:15.5px; color:var(--text-2);
  max-width:56ch; line-height:1.5}
/* соседние страницы */
.near{display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); margin:10px 0 8px}
.near a{display:block; text-decoration:none; border-radius:var(--r2); padding:16px 17px;
  background:var(--night-2); box-shadow:inset 0 0 0 1px var(--line); color:inherit}
.near a:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.near b{display:block; font:700 16.5px/1.3 var(--body); color:#fff; margin-bottom:5px}
.near span{font-size:14.5px; color:var(--text-3)}

/* --- кнопки и призывы ----------------------------------------- */
/* Кнопка тёплая: у соседнего кита на 8022 главный призыв салатовый на
   почти чёрном, и два сайта сети не должны читаться как один. */
.btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  border-radius:14px; padding:14px 26px; font:700 16.5px/1 var(--body); color:#2a1206;
  background:linear-gradient(120deg,var(--amber),var(--rose));
  box-shadow:0 12px 30px rgba(255,140,110,.28)}
.btn:hover{color:#2a1206; transform:translateY(-1px);
  box-shadow:0 16px 36px rgba(255,140,110,.36)}
.btn--sm{padding:11px 18px; font-size:15px; min-height:40px}  /* 40px — нижняя граница удобного нажатия на телефоне */
.btn--go{background:linear-gradient(120deg,var(--amber),var(--rose))}
.btn--ghost{background:none; color:var(--text-2); box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--ghost:hover{color:#fff}
.ctamini{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:18px 0 24px;
  padding:16px 18px; border-radius:var(--r2); background:var(--night-2);
  box-shadow:inset 0 0 0 1px var(--line-2)}
.ctamini b{font:700 17px/1.3 var(--body); color:#fff; display:block}
.ctamini span{font-size:15px; color:var(--text-2)}
.ctamini .btn{margin-inline-start:auto}
.ctabox{margin:26px 0 8px; padding:26px 24px; border-radius:var(--r3);
  background:linear-gradient(140deg,var(--slab),var(--night-2));
  box-shadow:inset 0 0 0 1px var(--line-2)}
.ctabox h2{margin-bottom:8px}
.ctabox p{color:var(--text-2); margin-bottom:16px}
.bar{position:fixed; left:0; right:0; bottom:0; z-index:45; display:flex; gap:12px;
  align-items:center; padding:11px 18px; background:rgba(27,22,70,.97);
  box-shadow:0 -1px 0 var(--line-2)}
.bar>span{font-size:14.5px; color:var(--text-2)}
.bar .btn{margin-inline-start:auto; padding:11px 20px; font-size:15px}

/* --- подвал --------------------------------------------------- */
.foot{margin-top:34px; padding:30px 0 26px; background:var(--night-2);
  box-shadow:0 -1px 0 var(--line)}
.foot__g{display:grid; gap:20px; grid-template-columns:repeat(4,minmax(0,1fr))}
.fcap{display:block; font:700 14px/1.3 var(--body); color:#fff; margin-bottom:9px}
.foot ul{margin:0; padding:0; list-style:none}
.foot li{margin-bottom:7px}
.foot a{color:var(--text-2); text-decoration:none; display:inline-block; padding:9px 0;
  font-size:15px}
.foot a:hover{color:#fff; text-decoration:underline}
.foot__note{margin-top:22px; padding-top:18px; box-shadow:0 -1px 0 var(--line);
  font-size:14px; color:var(--text-3)}
.foot__note p{margin:0 0 8px}
.age{display:inline-block; border-radius:999px; padding:5px 12px; background:var(--slab-2);
  color:var(--amber); font:700 13px/1 var(--body)}

/* --- экраны --------------------------------------------------- */
@media (min-width:861px){
  .hero__g{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .hero__t{max-width:34rem}
  .hero__a{padding-top:6px}
  .phone{grid-template-columns:280px minmax(0,1fr); align-items:start}
}
@media (max-width:1000px){
  .cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .near{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .prof__g{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .facts{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  /* горизонтальная прокрутка меню прятала пункты, и человек об этом не знал:
     на узком экране пункты переносятся на вторую строку */
  .top__in{flex-wrap:wrap}
  .menu{order:3; width:100%; flex-wrap:wrap; overflow:visible; gap:2px 0;
    margin-inline-start:0; padding-top:4px; box-shadow:0 -1px 0 var(--line)}
  .menu a{margin:0 14px 0 0}
  .mark{margin-inline-end:auto}
}
@media (max-width:620px){
  body{font-size:16.5px}
  /* на узком экране подпись под названием съедает место, и кнопка
     справа вылезала за поле страницы */
  .mark__t{display:none}
  .cards,.cards--2,.cards--3,.cards--4{grid-template-columns:minmax(0,1fr)}
  .pairs{grid-template-columns:minmax(0,1fr)}
  .foot__g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctamini .btn{margin-inline-start:0}
  .bar>span{display:none}
  .bar .btn{margin-inline-start:0; width:100%; justify-content:center}
}
@media (max-width:420px){
  .foot__g{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .btn:hover{transform:none}
}