/* METOD «Подробнее» — полный блок стилей из mini_app/styles.css */
/* Картинки: images/mtd/ (позже) */

@font-face { 
 font-family: 'Montserrat'; 
 src: url('fonts/Montserrat-Regular.ttf') format('truetype'); 
 font-weight: 400; 
 font-style: normal; 
} 
 
@font-face { 
 font-family: 'Montserrat'; 
 src: url('fonts/Montserrat-Medium.ttf') format('truetype'); 
 font-weight: 500; 
 font-style: normal; 
} 
 
* { 
 margin: 0; 
 padding: 0; 
 box-sizing: border-box; 
} 
 
html { 
 background: #f7f7f7; 
 width: 100%; 
 max-width: 100%; 
 min-height: 100%; 
 overflow-x: hidden; 
} 
 
/* Вход из бота с ?route=… — без мигания главной до applyTelegramBotEntryRoute */ 
html[data-bot-entry-route] .page { 
 visibility: hidden; 
} 
 
html.bot-entry-route-ready .page { 
 visibility: visible; 
} 
 
body { 
 min-height: 100vh; 
 min-height: 100dvh; 
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
 background: #f7f7f7; 
 color: var(--tg-theme-text-color, #000); 
 overflow-x: hidden; 
} 
 
/* КОНЦЕПЦИИ: фиксированный фон на весь viewport (и по бокам, и по высоте) */ 
body.is-concepts { 
 position: relative; 
 background: #f7f7f7 !important; 
} 
body.is-concepts::before { 
 content: ''; 
 position: fixed; 
 left: 0; 
 top: 0; 
 width: 100vw; 
 height: 100vh; 
 height: 100dvh; 
 background: #f7f7f7; 
 z-index: 0; 
 pointer-events: none; 
} 
 
body:has(.page.view-detail) { 
 background: #f2f2f2; 
} 
 
button.is-loading { 
 position: relative; 
 opacity: 0.9; 
} 
 
button.is-loading::after { 
 content: ''; 
 display: inline-block; 
 width: 14px; 
 height: 14px; 
 margin-left: 8px; 
 border: 2px solid currentColor; 
 border-right-color: transparent; 
 border-radius: 50%; 
 animation: spin-mini-app 0.8s linear infinite; 
 vertical-align: -2px; 
} 
 
@keyframes spin-mini-app { 
 to { 
 transform: rotate(360deg); 
 } 
} 
 
/* Масштаб по ширине экрана (база 375px), чтобы на 360–430px всё сохраняло вид */ 
.page { 
 position: relative; 
 width: 100vw; 
 max-width: 100vw; 
 overflow-x: hidden; 
 /* Нижняя граница контента ~832px кнопки + запас, всё в масштабе макета 375 */ 
 min-height: calc(100vw * 920 / 375); 
 margin: 0 auto; 
 background: #f7f7f7; 
 zoom: 1; 
 z-index: 1; 
} 

.header-wrap { 
 position: relative; 
 z-index: 1; 
 width: 100%; 
} 
 
/* Шапка: всегда на всю ширину экрана, без отступов по бокам */ 
.shapka { 
 display: block; 
 width: 100vw; 
 margin-left: calc(50% - 50vw); 
 height: auto; 
 aspect-ratio: 375 / 384; 
 object-fit: cover; 
 object-position: top; 
 vertical-align: top; 
} 
 
/* Элементы поверх шапки: позиция в % от высоты/ширины шапки (база 375×384) */ 
.logo { 
 position: absolute; 
 top: 5.21%; /* 20/384 */ 
 left: 4.27%; /* 16/375 */ 
 width: 46.67%; 
 max-width: 175px; 
 height: auto; 
 object-fit: contain; 
} 
 
/* На экране «Подробнее» — тот же Logo.svg, позиция как в макете */ 
.logo--detail { 
 display: none; 
 top: 20px; 
 left: 16px; 
 width: auto; 
 max-width: 175px; 
 height: auto; 
} 

/* METOD → «Посмотри наши кейсы»: как экран Адепт после второго «Подробнее» — только бургер, «Назад», Logo_2; без shapka и без контента */ 
.metod-cases-sub-surface { 
 display: none; 
} 
 
.page.view-packages--metod.view-metod-cases-sub-open { 
 overflow-x: hidden; 
 overflow-y: auto; 
 background: #f7f7f7 !important; 
 min-height: 100dvh !important; 
} 
 
.page.view-packages--metod.view-metod-cases-sub-open::before { 
 background: #f7f7f7 !important; 
} 
 
/* Подэкран «Посмотри наши кейсы»: скрываем только контент METOD/пакетов, не всех детей .page */ 
.page.view-packages--metod.view-metod-cases-sub-open .metod-main-flow, 
.page.view-packages--metod.view-metod-cases-sub-open .packages-blocks-wrap, 
.page.view-packages--metod.view-metod-cases-sub-open .detail-scroll, 
.page.view-packages--metod.view-metod-cases-sub-open .content-main { 
 display: none !important; 
} 
 
.page.view-packages--metod.view-metod-cases-sub-open .shapka, 
.page.view-packages--metod.view-metod-cases-sub-open .detail-shapka-overlay, 
.page.view-packages--metod.view-metod-cases-sub-open .cases-shapka-overlay, 
.page.view-packages--metod.view-metod-cases-sub-open .concepts-hero-overlay, 
.page.view-packages--metod.view-metod-cases-sub-open .hero-text, 
.page.view-packages--metod.view-metod-cases-sub-open .intro-text, 
.page.view-packages--metod.view-metod-cases-sub-open .cta-btn, 
.page.view-packages--metod.view-metod-cases-sub-open .packages-metod-hero { 
 display: none !important; 
} 
 
.page.view-packages--metod.view-metod-cases-sub-open .header-wrap { 
 position: relative; 
 z-index: 55; 
 width: 100%; 
 margin-left: 0; 
 min-height: 72px; 
} 
 
.page.view-packages--metod.view-metod-cases-sub-open .logo-main { 
 display: none !important; 
} 
 
.page.view-packages--metod.view-metod-cases-sub-open .logo--detail { 
 display: block !important; 
 position: absolute; 
 left: 16px; 
 top: 20px; 
 z-index: 60; 
} 
 
.page.view-packages--metod.view-metod-cases-sub-open .burger { 
 top: 20px; 
 left: calc(100vw * 335 / 375); 
 right: auto; 
 width: 24px; 
 min-width: 24px; 
 height: 17px; 
 min-height: 17px; 
 z-index: 60; 
} 
 
.page.view-packages--metod.view-metod-cases-sub-open .burger span { 
 height: 0; 
 background: transparent; 
 border-top: 1.5px solid #000000; 
} 
 
.page.view-packages--metod.view-metod-cases-sub-open .packages-metod-back { 
 display: inline-flex !important; 
 flex-direction: row; 
 z-index: 60; 
} 
 
.page.view-packages--metod.view-metod-cases-sub-open .packages-metod-back__label { 
 color: #000000; 
} 
 
.page.view-packages--metod.view-metod-cases-sub-open .packages-metod-back__icon { 
 filter: brightness(0); 
} 
 
.page.view-packages--metod.view-metod-cases-sub-open .metod-cases-sub-surface { 
 display: block; 
 position: relative; 
 left: auto; 
 top: auto; 
 width: 100%; 
 min-height: calc(100dvh - 72px); 
 max-height: none; 
 height: auto; 
 box-sizing: border-box; 
 padding-top: 0; 
 background: #f7f7f7; 
 z-index: 1; 
 overflow: visible; 
 pointer-events: auto; 
} 
 
.metod-cases-sub-surface__inner { 
 box-sizing: border-box; 
 padding: 0 0 calc(100vw * 24 / 375); 
 width: 100%; 
 max-width: 100vw; 
 margin: 0 auto; 
} 
 
/* Белая карточка подэкрана METOD-кейсы (макет 375) */ 
.metod-cases-sub-panel { 
 position: relative; 
 width: 100%; 
 max-width: 100%; 
 margin-top: calc(100vw * 18 / 375); 
 box-sizing: border-box; 
 border-radius: calc(100vw * 30 / 375); 
 background: #ffffff; 
 overflow: hidden; 
} 
 
.metod-cases-sub-hero { 
 position: relative; 
 width: calc(100vw * 347 / 375); 
 height: calc(100vw * 218 / 375); 
 margin: calc(100vw * 14 / 375) auto 0; 
 box-sizing: border-box; 
 border-radius: calc(100vw * 20 / 375); 
 background: #383838; 
} 
 
.metod-cases-sub-hero__logo { 
 position: absolute; 
 top: calc(100vw * 49 / 375); 
 left: 50%; 
 transform: translateX(-50%); 
 width: calc(100vw * 98 / 375); 
 height: calc(100vw * 28 / 375); 
 margin: 0; 
 padding: 0; 
 display: block; 
 object-fit: contain; 
 object-position: center; 
} 
 
.metod-cases-sub-hero__lead { 
 position: absolute; 
 top: calc(100vw * 101 / 375); 
 left: calc(100vw * 43 / 375); 
 width: calc(100vw * 262 / 375); 
 margin: 0; 
 padding: 0; 
 box-sizing: border-box; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 400; 
 font-style: normal; 
 font-size: calc(100vw * 14 / 375); 
 line-height: 122%; 
 letter-spacing: 0; 
 text-align: center; 
 color: #ffffff; 
} 
 
.metod-cases-sub-copy { 
 margin: 0 auto; 
 padding: 0; 
 box-sizing: border-box; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 400; 
 font-style: normal; 
 font-size: calc(100vw * 17 / 375); 
 line-height: 110%; 
 letter-spacing: 0; 
 text-align: center; 
 text-transform: uppercase; 
} 
 
.metod-cases-sub-copy--intro { 
 width: calc(100vw * 296 / 375); 
 min-height: calc(100vw * 114 / 375); 
 margin-top: calc(100vw * 40 / 375); 
} 
 
.metod-cases-sub-copy--intro .metod-cases-sub-copy__muted { 
 color: #808080; 
} 
 
.metod-cases-sub-copy--intro .metod-cases-sub-copy__dark { 
 color: #000000; 
} 
 
.metod-cases-sub-copy--note { 
 width: calc(100vw * 327 / 375); 
 min-height: calc(100vw * 95 / 375); 
 margin-top: calc(100vw * 30 / 375); 
} 
 
.metod-cases-sub-copy--note .metod-cases-sub-copy__body { 
 color: #1e1e1e; 
} 
 
.metod-cases-sub-copy--note .metod-cases-sub-copy__muted { 
 color: #808080; 
} 
 
/* Три превью концепций (макет 375): карточка 343×202, бейдж поверх */ 
.metod-cases-sub-tiles { 
 width: 100%; 
 margin-top: calc(100vw * 40 / 375); 
} 
 
.metod-cases-sub-tile { 
 position: relative; 
 width: calc(100vw * 343 / 375); 
 height: calc(100vw * 202 / 375); 
 margin-left: auto; 
 margin-right: auto; 
 box-sizing: border-box; 
 border-radius: calc(100vw * 20 / 375); 
 overflow: hidden; 
 background: #f2f2f2; 
} 
 
.metod-cases-sub-tile + .metod-cases-sub-tile { 
 margin-top: calc(100vw * 10 / 375); 
} 
 
.metod-cases-sub-tile__img { 
 display: block; 
 width: 100%; 
 height: 100%; 
 margin: 0; 
 padding: 0; 
 object-fit: cover; 
 object-position: center; 
} 
 
.metod-cases-sub-tile__badge { 
 position: absolute; 
 top: calc(100vw * 12 / 375); 
 left: calc(100vw * 12 / 375); 
 height: calc(100vw * 26 / 375); 
 box-sizing: border-box; 
 border-radius: calc(100vw * 8 / 375); 
 background: #ffffff; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 padding: 0 calc(100vw * 8 / 375); 
} 
 
.metod-cases-sub-tile__badge--249 { 
 width: calc(100vw * 249 / 375); 
} 
 
.metod-cases-sub-tile__badge--234 { 
 width: calc(100vw * 234 / 375); 
} 
 
.metod-cases-sub-tile__badge--238 { 
 width: calc(100vw * 238 / 375); 
} 
 
.metod-cases-sub-tile__label { 
 margin: 0; 
 padding: 0; 
 max-width: 100%; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 500; 
 font-style: normal; 
 font-size: calc(100vw * 12 / 375); 
 line-height: 100%; 
 letter-spacing: 0; 
 text-align: center; 
 color: #1e1e1e; 
} 
 
.metod-cases-sub-section-title { 
 width: calc(100vw * 203 / 375); 
 min-height: calc(100vw * 48 / 375); 
 margin: calc(100vw * 40 / 375) auto 0; 
 margin-bottom: 0; 
 padding: 0; 
 box-sizing: border-box; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 400; 
 font-style: normal; 
 font-size: calc(100vw * 22 / 375); 
 line-height: 110%; 
 letter-spacing: 0; 
 text-align: center; 
 color: #000000; 
} 
 
/* Блок «Что даёт доступ METOD ремонта»: карточки + иллюстрации (макет 375) */ 
.metod-cases-sub-benefits { 
 width: 100%; 
 margin-top: calc(100vw * 16 / 375); 
 padding-bottom: calc(100vw * 24 / 375); 
} 
 
.metod-cases-sub-benefit-card { 
 width: calc(100vw * 343 / 375); 
 margin-left: auto; 
 margin-right: auto; 
 box-sizing: border-box; 
 border: 1px solid #cccccc; 
 border-radius: calc(100vw * 20 / 375); 
 background: #ffffff; 
 padding: calc(100vw * 20 / 375) calc(100vw * 16 / 375) calc(100vw * 16 / 375); 
} 
 
.metod-cases-sub-benefit-card__num { 
 margin: 0; 
 padding: 0; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 500; 
 font-style: normal; 
 font-size: calc(100vw * 16 / 375); 
 line-height: 115%; 
 letter-spacing: 0; 
 text-align: left; 
 text-transform: uppercase; 
 color: #cccccc; 
} 
 
.metod-cases-sub-benefit-card__title { 
 margin: calc(100vw * 21 / 375) 0 0; 
 padding: 0; 
 max-width: calc(100vw * 310 / 375); 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 500; 
 font-style: normal; 
 font-size: calc(100vw * 15 / 375); 
 line-height: 115%; 
 letter-spacing: 0; 
 text-transform: uppercase; 
 color: #000000; 
} 
 
.metod-cases-sub-benefit-card__desc { 
 margin: calc(100vw * 12 / 375) 0 0; 
 padding: 0; 
 max-width: calc(100vw * 327 / 375); 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 400; 
 font-style: normal; 
 font-size: calc(100vw * 12 / 375); 
 line-height: 115%; 
 letter-spacing: 0; 
 color: #000000; 
} 
 
.metod-cases-sub-benefit-card--h136 { 
 min-height: calc(100vw * 136 / 375); 
} 
 
.metod-cases-sub-benefit-card--h150 { 
 min-height: calc(100vw * 150 / 375); 
} 
 
.metod-cases-sub-benefit-card--h167 { 
 min-height: calc(100vw * 167 / 375); 
} 
 
.metod-cases-sub-benefit-card--h223 { 
 min-height: calc(100vw * 223 / 375); 
} 
 
.metod-cases-sub-illus { 
 display: block; 
 width: calc(100vw * 343 / 375); 
 height: calc(100vw * 194 / 375); 
 margin: 0 auto; 
 padding: 0; 
 box-sizing: border-box; 
 border: 1px solid #cccccc; 
 border-radius: calc(100vw * 20 / 375); 
 overflow: hidden; 
 background: #f2f2f2; 
} 
 
.metod-cases-sub-illus__img { 
 display: block; 
 width: 100%; 
 height: 100%; 
 margin: 0; 
 padding: 0; 
 object-fit: cover; 
 object-position: center; 
} 
 
.metod-cases-sub-benefits__illus { 
 margin-top: calc(100vw * 8 / 375); 
} 
 
.metod-cases-sub-benefits__card { 
 margin-top: calc(100vw * 12 / 375); 
} 
 
/* «Сколько нового вы получаете» + карточка с 11.svg (макет 375) */ 
.metod-cases-sub-updates-heading { 
 width: calc(100vw * 341 / 375); 
 margin: calc(100vw * 40 / 375) 0 0 calc(100vw * 17 / 375); 
 padding: 0; 
 box-sizing: border-box; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 400; 
 font-style: normal; 
 font-size: calc(100vw * 22 / 375); 
 line-height: 110%; 
 letter-spacing: 0; 
 color: #000000; 
} 
 
.metod-cases-sub-updates { 
 position: relative; 
 width: 100%; 
 height: calc(100vw * 726 / 375); 
 min-height: calc(100vw * 726 / 375); 
 margin-top: calc(100vw * 16 / 375); 
 margin-left: 0; 
 margin-right: 0; 
 box-sizing: border-box; 
 border-radius: calc(100vw * 30 / 375); 
 overflow: hidden; 
 background: #383838; 
} 
 
.metod-cases-sub-updates__bg { 
 position: absolute; 
 left: 0; 
 top: 0; 
 width: 100%; 
 height: 100%; 
 margin: 0; 
 padding: 0; 
 display: block; 
 object-fit: cover; 
 object-position: center; 
 z-index: 0; 
 pointer-events: none; 
} 
 
.metod-cases-sub-updates__overlay { 
 position: absolute; 
 left: 0; 
 top: 0; 
 z-index: 1; 
 width: 100%; 
 height: 100%; 
 box-sizing: border-box; 
 pointer-events: none; 
} 
 
.metod-cases-sub-updates__overlay .metod-cases-sub-updates__title, 
.metod-cases-sub-updates__overlay .metod-cases-sub-updates__text { 
 pointer-events: auto; 
} 
 
.metod-cases-sub-updates__segment { 
 position: absolute; 
 margin: 0; 
 padding: 0; 
 box-sizing: border-box; 
 text-align: center; 
 background: transparent; 
 pointer-events: auto; 
} 
 
.metod-cases-sub-updates__segment--1 { 
 top: calc(100vw * 80 / 375); 
 left: calc(100vw * 44 / 375); 
 width: calc(100vw * 288 / 375); 
 height: calc(100vw * 78 / 375); 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 justify-content: flex-start; 
} 
 
.metod-cases-sub-updates__segment--2 { 
 top: calc(100vw * 318 / 375); 
 left: calc(100vw * 32 / 375); 
 width: calc(100vw * 312 / 375); 
 height: calc(100vw * 84 / 375); 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 justify-content: center; 
 padding: 0 calc(100vw * 4 / 375); 
} 
 
.metod-cases-sub-updates__segment--3 { 
 top: calc(100vw * 562 / 375); 
 left: calc(100vw * 25 / 375); 
 width: calc(100vw * 325 / 375); 
 height: calc(100vw * 84 / 375); 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 justify-content: center; 
 padding: 0 calc(100vw * 4 / 375); 
} 
 
.metod-cases-sub-updates__title { 
 margin: 0; 
 padding: 0; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 500; 
 font-style: normal; 
 font-size: calc(100vw * 18 / 375); 
 line-height: 110%; 
 letter-spacing: 0; 
 text-align: center; 
 color: #ffffff; 
} 
 
.metod-cases-sub-updates__text { 
 margin: calc(100vw * 16 / 375) 0 0; 
 padding: 0; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 400; 
 font-style: normal; 
 font-size: calc(100vw * 12 / 375); 
 line-height: 120%; 
 letter-spacing: 0; 
 text-align: center; 
 color: #ffffff; 
} 
 
.metod-cases-sub-updates__segment--2 .metod-cases-sub-updates__text, 
.metod-cases-sub-updates__segment--3 .metod-cases-sub-updates__text { 
 margin-top: calc(100vw * 8 / 375); 
} 
 
.metod-cases-sub-updates__rule { 
 position: absolute; 
 left: calc(100vw * 101 / 375); 
 width: calc(100vw * 173 / 375); 
 height: 0; 
 margin: 0; 
 padding: 0; 
 border: none; 
 border-top: 1px solid #ffffff; 
 opacity: 1; 
} 
 
.metod-cases-sub-updates__overlay > .metod-cases-sub-updates__rule:nth-child(2) { 
 top: calc(100vw * 238 / 375); 
} 
 
.metod-cases-sub-updates__overlay > .metod-cases-sub-updates__rule:nth-child(4) { 
 top: calc(100vw * 482 / 375); 
} 
 
.metod-cases-sub-more { 
 width: 100%; 
 margin: 0; 
 padding: 0 0 calc(100vw * 32 / 375); 
 box-sizing: border-box; 
 background: #f7f7f7; 
 margin-top: calc(100vw * 40 / 375); 
} 
 
.metod-cases-sub-more__title { 
 width: calc(100vw * 333 / 375); 
 min-height: calc(100vw * 48 / 375); 
 margin: 0 auto; 
 padding: 0; 
 box-sizing: border-box; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 400; 
 font-style: normal; 
 font-size: calc(100vw * 22 / 375); 
 line-height: 110%; 
 letter-spacing: 0; 
 text-align: center; 
 color: #000000; 
} 
 
.metod-cases-sub-more-card { 
 width: calc(100vw * 343 / 375); 
 min-height: calc(100vw * 136 / 375); 
 margin: calc(100vw * 16 / 375) auto 0; 
 padding: calc(100vw * 20 / 375) calc(100vw * 16 / 375) calc(100vw * 16 / 375); 
 box-sizing: border-box; 
 border: 1px solid #cccccc; 
 border-radius: calc(100vw * 20 / 375); 
 background: #ffffff; 
} 
 
.metod-cases-sub-more-card--second { 
 margin-top: calc(100vw * 12 / 375); 
} 
 
.metod-cases-sub-more-card__pill { 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 margin: 0 auto; 
 box-sizing: border-box; 
 border-radius: calc(100vw * 8 / 375); 
 background: #a05035; 
 padding: 0 calc(100vw * 8 / 375); 
} 
 
.metod-cases-sub-more-card__pill--partners { 
 width: calc(100vw * 229 / 375); 
 height: calc(100vw * 34 / 375); 
} 
 
.metod-cases-sub-more-card__pill--promo { 
 width: calc(100vw * 212 / 375); 
 height: calc(100vw * 34 / 375); 
} 
 
.metod-cases-sub-more-card__pill-text { 
 display: block; 
 margin: 0; 
 padding: 0; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 500; 
 font-style: normal; 
 font-size: calc(100vw * 14 / 375); 
 line-height: 115%; 
 letter-spacing: 0; 
 text-align: center; 
 text-transform: uppercase; 
 color: #ffffff; 
} 
 
.metod-cases-sub-more-card__desc { 
 margin: calc(100vw * 14 / 375) auto 0; 
 padding: 0; 
 max-width: calc(100vw * 285 / 375); 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 400; 
 font-style: normal; 
 font-size: calc(100vw * 14 / 375); 
 line-height: 115%; 
 letter-spacing: 0; 
 text-align: center; 
 color: #000000; 
} 
 
.metod-cases-sub-more-card--second .metod-cases-sub-more-card__desc { 
 max-width: calc(100vw * 222 / 375); 
} 
 
/* METOD кейсы: «Зачем вам METOD» + тёмные карточки (макет 375) */ 
.metod-cases-sub-why { 
 width: 100%; 
 margin: calc(100vw * 40 / 375) 0 0; 
 padding: 0; 
 box-sizing: border-box; 
 background: #f7f7f7; 
} 
 
.metod-cases-sub-why__title { 
 width: calc(100vw * 333 / 375); 
 min-height: calc(100vw * 24 / 375); 
 margin: 0 auto; 
 padding: 0; 
 box-sizing: border-box; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 400; 
 font-style: normal; 
 font-size: calc(100vw * 22 / 375); 
 line-height: 110%; 
 letter-spacing: 0; 
 text-align: center; 
 color: #000000; 
} 
 
.metod-cases-sub-why-card { 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 width: calc(100vw * 343 / 375); 
 height: calc(100vw * 91 / 375); 
 margin: calc(100vw * 16 / 375) auto 0; 
 padding: calc(100vw * 20 / 375) calc(100vw * 16 / 375); 
 box-sizing: border-box; 
 border-radius: calc(100vw * 20 / 375); 
 background: #383838; 
} 
 
.metod-cases-sub-why-card + .metod-cases-sub-why-card { 
 margin-top: calc(100vw * 8 / 375); 
} 
 
.metod-cases-sub-why-card__text { 
 margin: 0; 
 padding: 0; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 400; 
 font-style: normal; 
 font-size: calc(100vw * 14 / 375); 
 line-height: 122%; 
 letter-spacing: 0; 
 text-align: center; 
 color: #ffffff; 
} 
 
.metod-cases-sub-why-card__text--w241 { 
 max-width: calc(100vw * 241 / 375); 
} 
 
.metod-cases-sub-why-card__text--w297 { 
 max-width: calc(100vw * 297 / 375); 
} 
 
/* «Как это работает» — шаги (макет 375) */ 
.metod-cases-sub-how { 
 width: 100%; 
 margin: calc(100vw * 40 / 375) 0 0; 
 padding: 0 0 calc(100vw * 32 / 375); 
 box-sizing: border-box; 
 background: #f7f7f7; 
} 
 
.metod-cases-sub-how__title { 
 width: calc(100vw * 333 / 375); 
 min-height: calc(100vw * 24 / 375); 
 margin: 0 auto; 
 padding: 0; 
 box-sizing: border-box; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 400; 
 font-style: normal; 
 font-size: calc(100vw * 22 / 375); 
 line-height: 110%; 
 letter-spacing: 0; 
 text-align: center; 
 color: #000000; 
} 
 
.metod-cases-sub-how-step { 
 width: calc(100vw * 343 / 375); 
 min-height: calc(100vw * 159 / 375); 
 margin: calc(100vw * 16 / 375) auto 0; 
 padding: calc(100vw * 16 / 375); 
 box-sizing: border-box; 
 border: 1px solid #cccccc; 
 border-radius: calc(100vw * 20 / 375); 
 background: #ffffff; 
} 
 
.metod-cases-sub-how-step + .metod-cases-sub-how-step { 
 margin-top: calc(100vw * 8 / 375); 
} 
 
.metod-cases-sub-how-step__badge { 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 width: calc(100vw * 37 / 375); 
 height: calc(100vw * 37 / 375); 
 box-sizing: border-box; 
 border-radius: calc(100vw * 6 / 375); 
 background: #a05035; 
} 
 
.metod-cases-sub-how-step__num { 
 margin: 0; 
 padding: 0; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 600; 
 font-style: normal; 
 font-size: calc(100vw * 22 / 375); 
 line-height: 115%; 
 letter-spacing: 0; 
 text-align: center; 
 color: #ffffff; 
} 
 
.metod-cases-sub-how-step__text { 
 margin: calc(100vw * 16 / 375) 0 0; 
 padding: 0; 
 box-sizing: border-box; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 400; 
 font-style: normal; 
 font-size: calc(100vw * 12 / 375); 
 line-height: 115%; 
 letter-spacing: 0; 
 text-align: left; 
 color: #000000; 
} 
 
.metod-cases-sub-how-step__text--w280 { 
 max-width: calc(100vw * 280 / 375); 
} 
 
.metod-cases-sub-how-step__text--w227 { 
 max-width: calc(100vw * 227 / 375); 
} 
 
.metod-cases-sub-how-step__text--w300 { 
 max-width: calc(100vw * 300 / 375); 
} 
 
/* METOD vs дизайн-проект — сравнение (макет 375) */ 
.metod-cases-sub-compare { 
 width: 100%; 
 margin: calc(100vw * 40 / 375) 0 0; 
 padding: 0 0 calc(100vw * 40 / 375); 
 box-sizing: border-box; 
 background: #f7f7f7; 
} 
 
.metod-cases-sub-compare__title { 
 width: calc(100vw * 355 / 375); 
 min-height: calc(100vw * 48 / 375); 
 margin: 0 auto; 
 padding: 0; 
 box-sizing: border-box; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 400; 
 font-style: normal; 
 font-size: calc(100vw * 22 / 375); 
 line-height: 110%; 
 letter-spacing: 0; 
 text-align: center; 
 color: #000000; 
} 
 
.metod-cases-sub-compare-card { 
 width: calc(100vw * 343 / 375); 
 min-height: calc(100vw * 178 / 375); 
 margin: calc(100vw * 16 / 375) auto 0; 
 padding: calc(100vw * 16 / 375); 
 box-sizing: border-box; 
 border: 1px solid #cccccc; 
 border-radius: calc(100vw * 20 / 375); 
 background: #ffffff; 
} 
 
.metod-cases-sub-compare-card--metod { 
 min-height: calc(100vw * 210 / 375); 
} 
 
.metod-cases-sub-compare-card + .metod-cases-sub-compare-card { 
 margin-top: calc(100vw * 12 / 375); 
} 
 
.metod-cases-sub-compare-card__pill { 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 box-sizing: border-box; 
 border-radius: calc(100vw * 8 / 375); 
 background: #a05035; 
} 
 
.metod-cases-sub-compare-card__pill--design { 
 width: calc(100vw * 152 / 375); 
 height: calc(100vw * 34 / 375); 
} 
 
.metod-cases-sub-compare-card__pill--metod { 
 width: calc(100vw * 155 / 375); 
 height: calc(100vw * 34 / 375); 
} 
 
.metod-cases-sub-compare-card__pill-text { 
 display: block; 
 margin: 0; 
 padding: 0 calc(100vw * 8 / 375); 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 500; 
 font-style: normal; 
 font-size: calc(100vw * 14 / 375); 
 line-height: 115%; 
 letter-spacing: 0; 
 text-align: center; 
 text-transform: uppercase; 
 color: #ffffff; 
} 
 
.metod-cases-sub-compare-card__list { 
 list-style: none; 
 margin: calc(100vw * 12 / 375) 0 0; 
 padding: 0; 
 max-width: calc(100vw * 267 / 375); 
 box-sizing: border-box; 
} 
 
.metod-cases-sub-compare-card__list li { 
 position: relative; 
 margin: 0; 
 padding: 0 0 0 calc(100vw * 18 / 375); 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 400; 
 font-style: normal; 
 font-size: calc(100vw * 14 / 375); 
 line-height: 115%; 
 letter-spacing: 0; 
 color: #000000; 
} 
 
.metod-cases-sub-compare-card__list li + li { 
 margin-top: calc(100vw * 2 / 375); 
} 
 
.metod-cases-sub-compare-card__list li::before { 
 content: "–"; 
 position: absolute; 
 left: 0; 
} 
 
/* Тарифы — тёмный блок (макет 375) */ 
.metod-cases-sub-tariffs { 
 width: 100%; 
 margin: calc(100vw * 40 / 375) 0 0; 
 padding: calc(100vw * 40 / 375) 0 calc(100vw * 32 / 375); 
 box-sizing: border-box; 
 background: #383838; 
} 
 
.metod-cases-sub-tariff-card + .metod-cases-sub-tariff-card { 
 margin-top: calc(100vw * 10 / 375); 
} 
 
.metod-cases-sub-tariffs__title { 
 width: calc(100vw * 90 / 375); 
 min-height: calc(100vw * 24 / 375); 
 margin: 0 auto; 
 padding: 0; 
 box-sizing: border-box; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 400; 
 font-style: normal; 
 font-size: calc(100vw * 22 / 375); 
 line-height: 110%; 
 letter-spacing: 0; 
 text-align: center; 
 color: #ffffff; 
} 
 
.metod-cases-sub-tariff-card { 
 width: calc(100vw * 343 / 375); 
 margin: calc(100vw * 16 / 375) auto 0; 
 padding: 0; 
 box-sizing: border-box; 
 border-radius: calc(100vw * 20 / 375); 
 background: #fdfdfd; 
 overflow: hidden; 
} 
 
.metod-cases-sub-tariff-card__sheet { 
 width: 100%; 
 min-height: calc(100vw * 227 / 375); 
 padding: 0 calc(100vw * 14 / 375) calc(100vw * 14 / 375); 
 box-sizing: border-box; 
 background: #ffffff; 
 border-radius: calc(100vw * 20 / 375) calc(100vw * 20 / 375) 0 0; 
} 
 
.metod-cases-sub-tariff-card__price-slab { 
 display: flex; 
 flex-direction: column; 
 align-items: flex-start; 
 width: calc(100vw * 315 / 375); 
 height: calc(100vw * 140 / 375); 
 margin: calc(100vw * 14 / 375) auto 0; 
 padding: calc(100vw * 16 / 375); 
 box-sizing: border-box; 
 border-radius: calc(100vw * 15 / 375); 
 background: #f7f7f7; 
} 
 
.metod-cases-sub-tariff-card__price-slab--tint { 
 background: rgba(160, 80, 53, 0.102); 
} 
 
.metod-cases-sub-tariff-card__period { 
 margin: 0; 
 padding: 0; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 500; 
 font-style: normal; 
 font-size: calc(100vw * 14 / 375); 
 line-height: 100%; 
 letter-spacing: 0; 
 text-transform: uppercase; 
 color: #1e1e1e; 
} 
 
.metod-cases-sub-tariff-card__price { 
 margin: calc(100vw * 46 / 375) 0 0; 
 padding: 0; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 600; 
 font-style: normal; 
 font-size: calc(100vw * 26 / 375); 
 line-height: 100%; 
 letter-spacing: 0; 
 text-transform: uppercase; 
 color: #1e1e1e; 
} 
 
.metod-cases-sub-tariff-card__sub { 
 margin: calc(100vw * 8 / 375) 0 0; 
 padding: 0; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 400; 
 font-style: normal; 
 font-size: calc(100vw * 14 / 375); 
 line-height: 100%; 
 letter-spacing: 0; 
 text-transform: uppercase; 
 color: #1e1e1e; 
} 
 
.metod-cases-sub-tariff-card__cta { 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 width: calc(100vw * 315 / 375); 
 height: calc(100vw * 45 / 375); 
 margin: calc(100vw * 14 / 375) auto 0; 
 padding: 0; 
 box-sizing: border-box; 
 border: none; 
 border-radius: calc(100vw * 89 / 375); 
 background: #383838; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 500; 
 font-style: normal; 
 font-size: calc(100vw * 14 / 375); 
 line-height: 100%; 
 letter-spacing: 0; 
 color: #ffffff; 
 cursor: pointer; 
} 
 
.metod-cases-sub-tariff-card__disclaimer { 
 margin: calc(100vw * 24 / 375) 0 0; 
 padding: 0 calc(100vw * 24 / 375) calc(100vw * 16 / 375); 
 max-width: calc(100vw * 276 / 375); 
 box-sizing: border-box; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 400; 
 font-style: normal; 
 font-size: calc(100vw * 12 / 375); 
 line-height: 120%; 
 letter-spacing: 0; 
 color: #1e1e1e; 
} 
 
.metod-cases-sub-tariffs-outro { 
 width: 100%; 
 margin: 0; 
 padding: calc(100vw * 24 / 375) calc(100vw * 28 / 375) calc(100vw * 40 / 375); 
 box-sizing: border-box; 
 background: #f7f7f7; 
} 
 
.metod-cases-sub-tariffs-outro__text { 
 width: calc(100vw * 320 / 375); 
 max-width: 100%; 
 margin: 0 auto; 
 padding: 0; 
 box-sizing: border-box; 
 font-family: 'Montserrat', sans-serif; 
 font-weight: 400; 
 font-style: normal; 
 font-size: calc(100vw * 12 / 375); 
 line-height: 115%; 
 letter-spacing: 0; 
 text-align: center; 
 color: #000000; 
}