/* Планы: вертикальный стек на мобилке с вертикальным скроллом страницы */
html, body{
    height: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Разрешаем вертикальный скролл для страницы с планами */
body{
    overflow-y: auto;  /* именно это включает прокрутку по вертикали */
}

/* Грид тарифов — адаптивный */
#plans-grid{
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr);
}

/* Более узкие экраны — 2 колонки */
@media (max-width: 1024px){
    #plans-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Мобильные — одна колонка */
@media (max-width: 640px){
    #plans-grid{
        grid-template-columns: 1fr;
    }
}

/* Карточки — занимают всю ширину колонки */
#plans-grid .card{
    width: 100%;
}

/* Текст в карточках переносится и не выталкивает ширину */
#plans-grid .title,
#plans-grid .sub,
#plans-grid .price{
    overflow-wrap: anywhere;
}

/* Кнопка в карточке — full-width на очень узких экранах */
@media (max-width: 360px){
    #plans-grid .cta-row .cta{
        width: 100%;
        min-width: 0;
        text-align: center;
    }
}

/* Чтобы модалка не мешала прокрутке фона при открытии */
#modal, #modal-backdrop, #login-modal, #login-backdrop{
    touch-action: none;
}

/* Шапка — фиксированная высота, не вызывает переполнений */
header .brand{
    max-width: 100%;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
}

/* Герой и секция — компактнее на мобильных */
@media (max-width: 640px){
    .hero-lite h1{
        font-size: clamp(22px, 6vw, 28px);
    }
    .hero-lite .sub{
        font-size: clamp(14px, 4vw, 16px);
    }
    .section{
        padding: 16px 16px 24px;
    }
}