/* Лендинг CRM «Сами Мамы». Все классы с приставкой sm-. */

/* Лендинг «Сами Мамы CRM». Все классы с приставкой sm-, чтобы не столкнуться
   со стилями Тильды.  */
.sm-wrap{font-family:'Mulish',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:#14131a;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
.sm-wrap *{box-sizing:border-box}
/* «Администратора» в узкой карточке на телефоне вылезало за край: длинное
   слово не переносится само. Ломаем только то, что иначе не помещается. */
.sm-wrap{overflow-wrap:break-word}
.sm-wrap p{margin:0}
.sm-wrap h1,.sm-wrap h2,.sm-wrap h3{margin:0}
.sm-wrap a{color:#9a51ab;text-decoration:none}
.sm-wrap a:hover{color:#7c3d8c}
.sm-wrap img,.sm-wrap video{max-width:100%;height:auto;display:block}
/* Владелец правит текст в макете шириной 1440, и в разметке остаются жёсткие
   размеры вроде width:960px;height:48px — редактор ставит их сам, когда
   тянешь блок мышью. На сайте колонка резиновая: такие числа либо распирают
   страницу вбок, либо обрезают текст на телефоне. */
.sm-wrap p:not(.sm-col),.sm-wrap h1,.sm-wrap h2:not(.sm-col),.sm-wrap h3{max-width:100%}
.sm-wrap p{height:auto!important}

/* Колонка страницы. В макете ширина жёсткая (1440), здесь — резиновая.
   Боковой отступ задаётся только здесь: в макете он сто пикселей, и на
   телефоне от экрана осталось бы полторы сотни точек под текст. Сборщик
   вырезает горизонтальный отступ из разметки, вертикальный оставляет. */
.sm-sec{max-width:1240px;margin:0 auto;padding-left:40px;padding-right:40px}
/* Колонка с текстом держит свою ширину, картинка занимает остальное. Без
   этого снимок на 2880 px сплющивал текст в полосу шириной в слово: у него
   естественная ширина больше, и flex отдавал место ему. */
/* 640 px из макета — это 55% колонки; снимку тогда остаётся мало, и он
   нечитаем. Пусть текст чуть ужмётся в пользу картинки. */
.sm-col{flex:0 0 auto;max-width:52%}
/* Ряд кнопок: на телефоне вторая кнопка уезжала за край экрана */
.sm-btns{flex-wrap:wrap}
.sm-flex{flex:1 1 0;min-width:0}
.sm-sec>*{min-width:0}
.sm-sec--tint{background:#f1f8f9}
.sm-sec--plum{background:#9a51ab}
/* «2 465 ₽» на телефоне разваливалось на три строки: рядом стоит длинная
   приписка «в месяц при оплате за год», и flex сжимал цену до буквы. */
.sm-price-row{flex-wrap:wrap}
.sm-wrap .sm-price{white-space:nowrap}
.sm-tintwrap{background:#f1f8f9}
.sm-plumwrap{background:#9a51ab}

/* Снимок интерфейса: тень и скругление, чтобы не сливался с фоном */
.sm-shot{border-radius:16px;box-shadow:0 8px 30px -12px rgba(40,25,55,.35);
  border:1px solid #e6e1ea;width:100%}
.sm-wrap .sm-shot--phone{max-width:320px;margin:0 auto;border-radius:26px}
/* Первый экран. Снимок CRM уходит за правый край секции: обрезанный кадр
   читается как «окно в систему», а вписанный целиком — как картинка в рамке.
   Отрицательное поле съедает отступ секции, дальше обрезает overflow. */
.sm-hero-art{position:relative;flex:1 1 0;min-width:0;margin-right:-40px}
.sm-hero-crm{overflow:hidden;border-radius:18px 0 0 18px;border:1px solid #e6e1ea;
  border-right:0;background:#fff;box-shadow:0 18px 44px -20px rgba(40,25,55,.45)}
.sm-wrap .sm-hero-crm img{width:150%;max-width:none;display:block}
/* Телефон — тонкая белая рамка, как у экранов в остальных разделах. Чёрный
   мокап на светлом первом экране читался как чужеродная деталь; от снимка
   расписания под ним рамку отделяют волосяная линия и тень. */
.sm-hero-phone{position:absolute;right:34px;bottom:-30px;width:188px;padding:6px;
  background:#ffffff;border:1px solid #e6e1ea;border-radius:28px;
  box-shadow:0 18px 44px -16px rgba(40,25,55,.42)}
.sm-screen{position:relative;border-radius:22px;overflow:hidden;background:#fff;
  aspect-ratio:420/880}
.sm-wrap .sm-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s ease}
.sm-wrap .sm-slide.sm-on{opacity:1}
@media (max-width:900px){
  /* Композиция та же, что на широком экране: два снимка друг под другом
     читаются как две случайные картинки, а телефон поверх расписания —
     как одна сцена. Меняется только масштаб. */
  /* Снимок встаёт между текстом и кнопками, а не в самом низу: человек
     должен увидеть систему до того, как решит нажимать. Текстовая колонка
     на узком экране перестаёт быть коробкой, и её содержимое вместе со
     снимком выстраивается одним столбцом в нужном порядке. */
  .sm-hero{gap:22px!important;align-items:stretch!important}
  .sm-hero>.sm-col{display:contents!important}
  .sm-hero .sm-col>*:nth-child(1){order:1}
  .sm-hero .sm-col>*:nth-child(2){order:2}
  .sm-hero .sm-col>*:nth-child(3){order:3}
  .sm-hero .sm-hero-art{order:4;margin-top:6px}
  .sm-hero .sm-col>*:nth-child(4){order:5}
  .sm-hero .sm-col>*:nth-child(5){order:6}
  .sm-hero-art{margin-right:-18px}
  .sm-hero-crm{border-radius:14px 0 0 14px}
  .sm-wrap .sm-hero-crm img{width:150%}
  .sm-hero-phone{right:12px;bottom:-16px;width:44%;padding:5px;border-radius:22px}
  .sm-screen{border-radius:17px}
}
.sm-cap{font-size:13px;color:#828282;margin-top:8px;text-align:center}

/* Телефон белой рамкой — для вертикальных роликов внутри разделов */
.sm-frame{width:100%;max-width:300px;margin:0 auto;padding:7px;background:#ffffff;
  border:1px solid #e6e1ea;border-radius:32px;
  box-shadow:0 18px 44px -18px rgba(40,25,55,.42)}
.sm-frame-screen{border-radius:26px;overflow:hidden;background:#ffffff;line-height:0}
.sm-wrap .sm-vid{width:100%;display:block}
/* Подпись под телефоном длиннее самого телефона, и блок получался шире
   картинки: прижатый к краю телефон вставал не по краю, а с отступом в
   полподписи. Ограничиваем подпись шириной экрана. */
.sm-wrap .sm-frame+.sm-cap{max-width:300px;margin-left:auto;margin-right:auto}
/* Снимок занимает всё, что осталось от текстовой колонки. Экран телефона
   уже колонки, и внутри неё встаёт по центру — под серединой абзаца
   сверху, а не у самого края страницы. */
.sm-media{flex:1 1 0;min-width:0}

/* Разделы «Руководитель видит всю картину»: тема слева — экраны справа */
.sm-topic{cursor:pointer;transition:box-shadow .15s,transform .15s;
  position:relative;padding-right:48px!important}
/* Уголок в углу карточки — единственный знак, что по теме надо нажать.
   Больше рядом с ним ничего не ставим: стрелка и так читается. */
.sm-topic::after{content:"";position:absolute;right:22px;top:27px;width:9px;height:9px;
  border-right:2.5px solid #9a51ab;border-bottom:2.5px solid #9a51ab;
  transform:rotate(-45deg);opacity:.45;transition:opacity .15s,transform .2s}
.sm-topic.sm-on::after{opacity:1}
.sm-topic.sm-on{box-shadow:0 0 0 2px #9a51ab}
@media (hover:hover){.sm-topic:hover{box-shadow:0 0 0 2px #d9b8e4}}
/* Стрелка «тема → экраны» переезжает к выбранной теме. Она указывает на
   конкретную карточку, поэтому неподвижная врала бы при любом выборе,
   кроме первого. */
.sm-arrow-i{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){.sm-arrow-i{transition:none}}
.sm-pane{display:none}
.sm-pane.sm-on{display:flex}
/* Экраны выезжают после щелчка по теме, второй чуть позже первого: так
   видно, что это ответ на нажатие, а не страница дёрнулась сама. Смена
   display с none на flex перезапускает анимацию — этого и хватает. */
@keyframes sm-pop{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.sm-pane.sm-on>*{animation:sm-pop .45s cubic-bezier(.22,.61,.36,1) both}
.sm-pane.sm-on>*:nth-child(2){animation-delay:.12s}
@media (prefers-reduced-motion:reduce){.sm-pane.sm-on>*{animation:none}}

/* Вопросы раскрываются по щелчку: девять развёрнутых ответов подряд — это
   стена текста, которую пролистывают не читая. */
.sm-faq-head{cursor:pointer;user-select:none}
.sm-faq-body{display:none}
.sm-faq.sm-open .sm-faq-body{display:block}
.sm-faq-chev{transition:transform .2s;transform:rotate(180deg)}
.sm-faq.sm-open .sm-faq-chev{transform:none}

/* Тарифы: помесячно или за год. Заливка не перекрашивается скачком, а
   переезжает отдельной плашкой под подписями — видно, что это один
   переключатель с двумя положениями, а не две независимые кнопки. */
.sm-per-box{position:relative}
.sm-per-pill{position:absolute;top:6px;left:0;height:calc(100% - 12px);width:0;
  background:#9a51ab;border-radius:20px;pointer-events:none;
  transition:transform .34s cubic-bezier(.34,.8,.3,1),width .34s cubic-bezier(.34,.8,.3,1)}
.sm-per-pill.sm-still{transition:none}
.sm-per{cursor:pointer;color:#4a4750;position:relative;z-index:1;
  transition:color .22s ease}
.sm-per.sm-on{color:#ffffff}
@media (prefers-reduced-motion:reduce){.sm-per-pill{transition:none}}
@media (max-width:900px){
  /* На телефоне ряд «заголовок — переключатель» встаёт колонкой, и коробка
     переключателя растягивается во всю ширину. Подписи при этом жались
     влево, а справа оставалась пустая белая полоса. */
  .sm-per-box{width:100%}
  .sm-per{flex:1 1 0;text-align:center;padding-left:8px!important;padding-right:8px!important}
}

/* Увеличение по щелчку — только для снимков кабинета. Экран телефона и так
   показан в натуральную величину: открывать его во весь экран нечего, а
   слайд-шоу от щелчка ещё и останавливалось бы на полукадре. */
.sm-wrap .sm-shot:not(.sm-shot--phone),
.sm-wrap .sm-shot:not(.sm-shot--phone)+.sm-cap{cursor:zoom-in}
.sm-lb{position:fixed;inset:0;z-index:99999;background:rgba(16,12,20,.92);display:flex;
  align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.sm-lb img,.sm-lb video{max-width:min(1500px,94vw);max-height:92vh;width:auto;height:auto;
  border-radius:12px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.sm-lb-close{position:absolute;top:14px;right:18px;background:none;border:0;color:#fff;
  font-size:34px;line-height:1;cursor:pointer;padding:6px 10px}

/* Появление при прокрутке. Уважает системную настройку «меньше движения». */
.sm-in{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.sm-in.sm-seen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sm-in{opacity:1;transform:none;transition:none}}

/* Карточка приподнимается под мышью — видно, что с ней можно взаимодействовать */
@media (hover:hover){
  .sm-lift{transition:transform .15s,box-shadow .15s}
  .sm-lift:hover{transform:translateY(-2px);box-shadow:0 10px 30px -14px rgba(40,25,55,.4)}
}

/* Раскрывающиеся разделы. Закрытый — только заголовок и строка. */
.sm-acc-body{display:none}
.sm-acc.sm-open .sm-acc-body{display:flex}
.sm-acc-head{cursor:pointer;user-select:none}
/* Название раздела и приписка к нему стоят в строку. На телефоне длинная
   пара «Абонементы и депозиты · без споров с администратором» выталкивала
   стрелку за край экрана — разрешаем переносить. */
.sm-acc-head>div{flex-wrap:wrap;min-width:0}
/* В макете стрелка нарисована «вверх». Закрытый раздел должен звать
   раскрыть, поэтому вниз её поворачиваем именно в закрытом состоянии. */
.sm-acc-chev{transition:transform .2s;transform:rotate(180deg)}
.sm-acc.sm-open .sm-acc-chev{transform:none}

/* Галерея видов расписания */
.sm-gal-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.sm-gal-tab{border:1px solid #e6e1ea;background:#fff;color:#4a4750;font:inherit;
  font-size:15px;font-weight:700;padding:9px 18px;border-radius:20px;cursor:pointer}
.sm-gal-tab.sm-on{background:#9a51ab;color:#fff;border-color:#9a51ab}
.sm-gal-img{display:none}
.sm-gal-img.sm-on{display:block}

/* Планшет и телефон. Секции в макете — горизонтальные ряды с колонками по
   560-640 px; на узком экране они обязаны встать друг под друга, иначе текст
   сжимается до одного слова в строке. */
@media (max-width:900px){
  .sm-sec{padding-left:18px;padding-right:18px;flex-direction:column!important}
  /* Полоса со ссылками и так переносится — колонкой её ставить не надо */
  .sm-sec.sm-strip{flex-direction:row!important}
  .sm-row{flex-direction:column!important;gap:24px!important}
  .sm-row>*{width:100%!important;max-width:none!important}
  .sm-col{flex:1 1 auto!important;width:100%!important;max-width:none!important}
  .sm-flex{flex:1 1 auto!important;width:100%!important}
  .sm-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .sm-h1{font-size:34px!important;line-height:1.12!important}
  .sm-h2{font-size:26px!important;line-height:1.15!important}
  .sm-price{font-size:40px!important}
  .sm-wrap .sm-shot--phone{max-width:260px}
  .sm-frame{max-width:270px}
  /* Снимок встаёт перед подразделами: сначала показать, потом объяснять */
  .sm-media-first .sm-media{order:-1}
  .sm-btns>a{flex:1 1 100%;text-align:center}
  /* Полоса выгод: значок слева, текст справа от него. Столбиком «значок,
     заголовок, абзац» карточка вытягивается вдвое, и четыре выгоды
     превращаются в длинную прокрутку. */
  .sm-benefits>div{display:grid!important;grid-template-columns:34px 1fr;
    column-gap:14px;row-gap:6px;align-items:center}
  .sm-benefits>div>svg{grid-column:1;grid-row:1}
  .sm-benefits>div>div{grid-column:2;grid-row:1}
  .sm-benefits>div>p{grid-column:2;grid-row:2}
  /* Стрелка «тема → экраны» указывает вбок, а колонки уже друг под другом */
  .sm-arrow{display:none!important}
  /* Экраны появляются снизу — уголок и показывает вниз, а у раскрытой
     темы вверх: нажмёшь ещё раз — свернётся */
  .sm-topic::after{transform:rotate(45deg)}
  .sm-topic.sm-on::after{transform:rotate(-135deg)}
  /* Экраны встают под своей темой, а не все скопом после четвёртой: четыре
     карточки подряд и только потом картинки читаются как два разных списка.
     Колонки убираем как коробки (display:contents) — тогда темы и панели
     становятся соседями в одном ряду, и их можно переставить порядком. */
  .sm-topics{gap:14px!important}
  .sm-topics>div:not(.sm-arrow){display:contents!important}
  .sm-topic:nth-child(1){order:1}  .sm-pane:nth-child(1){order:2}
  .sm-topic:nth-child(2){order:3}  .sm-pane:nth-child(2){order:4}
  .sm-topic:nth-child(3){order:5}  .sm-pane:nth-child(3){order:6}
  .sm-topic:nth-child(4){order:7}  .sm-pane:nth-child(4){order:8}
  .sm-topic:nth-child(5){order:9}  .sm-pane:nth-child(5){order:10}
  .sm-topic:nth-child(6){order:11} .sm-pane:nth-child(6){order:12}
}
@media (max-width:600px){
  /* На телефоне даже две колонки — это по три слова в строке */
  .sm-grid{grid-template-columns:1fr!important}
  .sm-sec{padding-left:16px;padding-right:16px}
  /* Вылет снимка за край равен боковому отступу секции — иначе страница
     становится на пару точек шире экрана и едет вбок */
  .sm-hero-art{margin-right:-16px}
  .sm-h1{font-size:29px!important}
}


/*Добавляем  скругления углов у карточек стандартных блоков*/
    .t706__cartwin-content{   /*Сюда вставляем класс блока из таблицы выше*/
        border-radius: 30px !important;    /*Радиус скругления у блока*/
        overflow: hidden; /*Используется для некоторых блоков, к которым не применяется скругление*/
        /*Если нужно скруглить углы, каждый по отдельности, то используйте вместо одного значения четыре,
        написав их через пробел, например 20px 30px 10px 50px*/
    }


.sm-wrap h1,.sm-wrap h2,.sm-wrap h3{font-family:"Mulish",sans-serif;text-transform:none;color:#14131a;font-weight:900}
.crm-page main{overflow:hidden}