.section-light {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 0;
    scroll-margin-top: 100px;
    overflow: clip;
}

.section-indents {
    padding: 64px 0;
}

.section-rounding {
    border-radius: 64px;
}

.section-wrapper {
    padding-right: 48px;
    padding-left: 48px;
}

.light-background {
    background: #F2F2F2;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #ffffff;
    overflow-x: clip;
}

/*
 * На мобильных логотипу нужно уметь сжиматься, иначе он выталкивает
 * гамбургер и кнопку «Войти» за край карточки.
 * Поля самой шапки задаются ниже, в блоке АДАПТИВ в конце файла.
 */
@media (max-width: 991px) {
    .header .logo {
        min-width: 0;
        flex-shrink: 1;
        max-width: calc(100% - 52px);
    }

    .header .logo img {
        max-width: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }
}

.gallery-container {
    max-width: 1400px;
    margin: 0 auto;
}

h1 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--heading-color);
    font-size: 2.5rem;
}

/* 4-колоночная сетка */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
}

/* Fallback для старых браузеров */
.no-grid .gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.no-grid .image-card {
    width: calc(25% - 15px);
    margin-bottom: 20px;
}

.image-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    break-inside: avoid;
}

/* Промо-блоки в ленте пинов (форум, регистрация) */
.forum-promo-card .forum-promo-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    text-align: center;
    background: linear-gradient(145deg, #f8fbfc 0%, #e8f2f6 100%);
    border: 1px solid color-mix(in srgb, var(--accent-color, #388da8), transparent 80%);
}

.forum-promo-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-color, #388da8);
    margin-bottom: 0.5rem;
}

.forum-promo-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--heading-color);
    line-height: 1.3;
}

.forum-promo-text {
    font-size: 0.9rem;
    line-height: 1.45;
    color: #555;
    margin: 0;
}

.forum-promo-card .read-more {
    margin-top: 0.25rem;
}

.image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.image-wrapper::before {
    content: "";
    display: block;
    padding-top: 75%; /* Соотношение 4:3 */
}

/* Только прямой потомок: иначе правило растягивает на всю карточку и
   иконки внутри кнопок оверлея — они уезжают в левый верхний угол
   ближайшего позиционированного предка. */
.image-card > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.image-info {
    padding: 16px;
}

.image-info h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: var(--heading-color);
    font-weight: 600;
}

.image-info p {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

.loading {
    text-align: center;
    padding: 40px;
    font-size: 18px;
    color: #666;
    grid-column: 1 / -1;
}

.pins-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--nav-font);
    font-size: 15px;
    color: #8a8a8a;
}

.pins-loading__house {
    width: 40px;
    height: 40px;
    animation: pins-loading-spin 1.1s linear infinite;
}

.pins-loading__house img {
    width: 40px;
    height: 40px;
    display: block;
}

@keyframes pins-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Разные высоты для разнообразия */
.tall .image-wrapper::before {
    padding-top: 150%; /* Высокое изображение */
}

.wide .image-wrapper::before {
    padding-top: 56.25%; /* Широкое 16:9 */
}

.large {
    grid-column: span 2;
    grid-row: span 2;
}

.large .image-wrapper::before {
    padding-top: 100%; /* Квадратное */
}

/* Адаптивность */
@media (max-width: 1200px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .no-grid .image-card {
        width: calc(33.33% - 15px);
    }

    .large {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .no-grid .image-card {
        width: calc(50% - 15px);
    }

    .large {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .no-grid .image-card {
        width: 100%;
    }

    .large {
        grid-column: span 1;
    }
}

/* Safari fixes */
_::-webkit-any-link,
.image-card {
    -webkit-transform: translateZ(0);
}

/* Старый оверлей карточки (.overlay/.icons-container/.icon) удалён вместе
   с разметкой: теперь панель действий описана в .pin-overlay ниже. */

.image-wrapper .pin-save-to-album-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
    transition-delay: 0.1s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.image-wrapper:hover .pin-save-to-album-btn {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (hover: none) {
    .image-wrapper .pin-save-to-album-btn {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

.img-fluid-fix {
    max-width: 500px;
    max-height: 650px;
}

.tag {
    display: inline-block;
    background-color: #f0f0f0;
    padding: 6px 12px;
    border-radius: 8px;
    margin-right: 8px;
    margin-bottom: 8px;
    color: var(--default-color);
    text-decoration: none;
    font-size: 0.9rem;
}

/* Быстрый фильтр ленты над галереей /pins */
.pins-feed-filter {
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem 1rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
}

.pins-feed-filter__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pins-feed-filter__title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--heading-color);
    letter-spacing: 0.02em;
}

.pins-feed-filter__title .bi {
    font-size: 1rem;
    color: var(--accent-color, #388da8);
}

.pins-feed-filter__hint {
    font-size: 0.8rem;
    color: #777;
    flex: 1 1 auto;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.pins-feed-filter__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    row-gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.pins-feed-filter__chip {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    color: #555;
    text-decoration: none;
    white-space: nowrap;
    background: #f4f6f8;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.pins-feed-filter__chip:hover {
    color: var(--k-accent-hover);
    background: color-mix(in srgb, var(--accent-color, #388da8), transparent 90%);
    border-color: color-mix(in srgb, var(--accent-color, #388da8), transparent 70%);
}

.pins-feed-filter__chip.is-active {
    color: var(--contrast-color, #fff);
    background: var(--accent-color, #388da8);
    /* Рамку держим прозрачной, а не убираем: у остальных чипов она 1px,
       и border: 0 укоротил бы активный на 2px — ряд поехал бы. */
    border-color: transparent;
    font-weight: 600;
    box-shadow: none;
    pointer-events: none;
}

.pins-feed-filter__chip.is-active:hover {
    color: var(--contrast-color, #fff);
}

/* Скрытая фильтром карточка. Отдельное правило нужно потому, что у
   .gallery-grid дети — grid-элементы, и на них важно погасить display. */
.gallery-grid .image-card[hidden] {
    display: none;
}

/* Сообщение, когда под выбранную тему ничего не нашлось */
.pins-feed-empty {
    margin: 24px 0 0;
    font-family: var(--nav-font);
    font-size: 16px;
    color: var(--k-muted-color, #767676);
}

/* Конец ленты /pins — только текст и теги без белой карточки */
.pins-feed-end {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
}

.pins-feed-end__chips {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 24px;
    box-sizing: border-box;
}

.pins-feed-end__chips .pins-feed-filter__chips {
    justify-content: center;
}

/* Справка /pins — тихая строка, без карточки */
.pins-source-notice {
    margin: 8px 0 0;
}

.pins-source-notice details {
    margin: 0;
}

.pins-source-notice summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--nav-font);
    font-size: 14px;
    line-height: 1.4;
    color: var(--k-muted-color);
}

.pins-source-notice summary::-webkit-details-marker {
    display: none;
}

/* Иконка «информация» — svg из Figma (16×16). Красится маской по currentColor,
   поэтому затемняется вместе с текстом при наведении и в раскрытом виде. */
.pins-source-notice__icon {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('../img/icon-info.svg') center / contain no-repeat;
    mask: url('../img/icon-info.svg') center / contain no-repeat;
}

.pins-source-notice summary:hover,
.pins-source-notice[open] summary {
    color: #5f5f5f;
}

.pins-source-notice p {
    margin: 4px 0 0 24px;
    max-width: 80ch;
    font-size: 14px;
    line-height: 1.5;
    color: var(--k-muted-color);
}

.pins-source-notice a {
    color: #6a6a6a;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pins-source-notice a:hover {
    color: var(--accent-color);
}

@media (max-width: 575.98px) {
    .pins-feed-end {
        padding: 28px 20px 24px;
        border-radius: 20px;
    }

    .pins-feed-end__title {
        font-size: 18px;
    }

    .pins-feed-end__chips .pins-feed-filter__chips {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .pins-feed-filter {
        padding: 0.75rem 0.85rem 0.9rem;
        margin-left: 0;
        margin-right: 0;
    }

    .pins-feed-filter__hint {
        width: 100%;
        min-width: 0;
    }

    .pins-feed-filter__chips {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    /* Чипы переносятся строками, без горизонтального скролла */
    .pins-feed-filter__chip {
        white-space: normal;
        text-align: center;
        max-width: 100%;
    }
}


.content .read-more {
    background: var(--accent-color);
    color: var(--contrast-color);
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 12px 24px;
    border-radius: 5px;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.content .read-more i {
    font-size: 18px;
    margin-left: 5px;
    line-height: 0;
    transition: 0.3s;
}

.content .read-more:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
    padding-right: 19px;
}

.content .read-more:hover i {
    margin-left: 10px;
}

.features .nav-link i {
    box-shadow: none;
}

/* Features: превью по высоте колонки с табами + без скачка при смене вкладки */
@media (min-width: 992px) {
    .features .row {
        align-items: stretch;
    }

    .features .features-tab-content {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Bootstrap скрывает неактивные панели через display:none — активную растягиваем на всю высоту */
    .features .features-tab-content > .tab-pane.active.show {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
}

.features .features-preview-frame {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 280px;
    border-radius: 15px;
    overflow: hidden;
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.features .features-preview-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

/* На мобильных — комфортная высота без привязки к соседней колонке */
@media (max-width: 991.98px) {
    .features .features-preview-frame {
        min-height: 220px;
        aspect-ratio: 4 / 3;
    }
}

/* Модалка «Сохранить в альбом» (гость): ссылки и кнопки в цветах сайта */
.k-pin-modal {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(17, 17, 17, 0.12);
    overflow: hidden;
}

.k-pin-modal .modal-header {
    padding: 20px 24px 8px;
    border-bottom: 0;
}

.k-pin-modal .modal-title {
    font-family: var(--nav-font);
    font-size: 20px;
    font-weight: 500;
    color: var(--heading-color);
}

.k-pin-modal .modal-body {
    padding: 8px 24px 16px;
    font-size: 15px;
    line-height: 1.5;
    color: #5c5c5c;
}

.k-pin-modal .modal-footer {
    padding: 8px 24px 24px;
    border-top: 0;
    gap: 8px;
}

.k-pin-modal .form-select,
.k-pin-modal .form-control {
    border-radius: 12px;
    border-color: #e0e0e0;
    min-height: 44px;
}

.k-pin-modal .btn-primary,
.k-pin-modal .btn-pin-save-solid {
    background: var(--accent-color);
    border-color: transparent;
    border-radius: 12px;
    min-height: 40px;
    padding: 8px 16px;
    font-family: var(--nav-font);
    font-weight: 500;
}

.k-pin-modal .btn-primary:hover,
.k-pin-modal .btn-pin-save-solid:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.k-pin-modal .btn-pin-save-outline {
    border-radius: 12px;
    min-height: 40px;
    padding: 8px 16px;
    font-family: var(--nav-font);
}

.pin-save-guest-modal__link {
    color: var(--accent-color, #388da8);
    font-weight: 600;
    text-decoration: none;
}

.pin-save-guest-modal__link:hover {
    text-decoration: underline;
}

.pin-save-guest-modal .btn-pin-save-outline {
    color: var(--accent-color, #388da8);
    border-color: var(--accent-color, #388da8);
    background-color: transparent;
}

.pin-save-guest-modal .btn-pin-save-outline:hover,
.pin-save-guest-modal .btn-pin-save-outline:focus {
    color: var(--contrast-color, #fff);
    background-color: var(--accent-color, #388da8);
    border-color: var(--accent-color, #388da8);
}

.pin-save-guest-modal .btn-pin-save-solid {
    color: var(--contrast-color, #fff);
    background-color: var(--accent-color, #388da8);
    border-color: var(--accent-color, #388da8);
}

.pin-save-guest-modal .btn-pin-save-solid:hover,
.pin-save-guest-modal .btn-pin-save-solid:focus {
    color: var(--contrast-color, #fff);
    background-color: color-mix(in srgb, var(--accent-color, #388da8), black 12%);
    border-color: color-mix(in srgb, var(--accent-color, #388da8), black 12%);
}

.auth-footer {
    font-size: 0.95rem;
}

.auth-verify-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Страница «Почта подтверждена» */
.auth-verify-success__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: color-mix(in srgb, #307040, transparent 86%);
    color: #307040;
    font-size: 1.75rem;
    line-height: 1;
}

.auth-verify-success__actions {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    text-align: left;
}

.auth-verify-success__tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fafbfc;
    transition:
        border-color 0.2s,
        box-shadow 0.2s,
        background 0.2s,
        transform 0.15s;
}

.auth-verify-success__tile:hover {
    border-color: color-mix(in srgb, var(--accent-color, #388da8), transparent 55%);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
    background: #fff;
    color: inherit;
    transform: translateY(-1px);
}

.auth-verify-success__tile--forum {
    border-color: color-mix(in srgb, var(--accent-color, #388da8), transparent 70%);
    background: color-mix(in srgb, var(--accent-color, #388da8), transparent 94%);
}

.auth-verify-success__tile--forum:hover {
    background: color-mix(in srgb, var(--accent-color, #388da8), transparent 88%);
}

.auth-verify-success__tile--ideas {
    border-color: color-mix(in srgb, var(--accent-color, #388da8), transparent 78%);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--accent-color, #388da8), transparent 96%) 0%,
        #fafbfc 100%
    );
}

.auth-verify-success__tile--ideas:hover {
    background: #fff;
}

.auth-verify-success__tile--blog {
    border-color: color-mix(in srgb, #6c757d, transparent 65%);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, #6c757d, transparent 94%) 0%,
        #fafbfc 100%
    );
}

.auth-verify-success__tile--blog:hover {
    background: #fff;
}

.auth-verify-success__tile--kb {
    border-color: color-mix(in srgb, #5c6bc0, transparent 60%);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, #5c6bc0, transparent 92%) 0%,
        #fafbfc 100%
    );
}

.auth-verify-success__tile--kb:hover {
    background: #fff;
}

.auth-verify-success__tile-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff;
    color: var(--accent-color, #388da8);
    font-size: 1.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.auth-verify-success__tile-text {
    flex: 1;
    min-width: 0;
}

.auth-verify-success__tile-text strong {
    display: block;
    font-size: 1rem;
    color: var(--heading-color, #333);
    margin-bottom: 0.2rem;
}

.auth-verify-success__tile-text span {
    display: block;
    font-size: 0.82rem;
    line-height: 1.35;
    color: #666;
    font-weight: 400;
}

.auth-verify-success__tile-arrow {
    flex-shrink: 0;
    color: var(--accent-color, #388da8);
    font-size: 1.1rem;
    opacity: 0.85;
}

.auth-form {
    position: relative;
}

.auth-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ---------- Личный кабинет ----------
   Отступ сверху освобождает место под плавающую шапку. */
.k-below-header.section-indents {
    padding-top: 130px;
}

@media (min-width: 992px) {
    .k-below-header.section-indents {
        padding-top: 148px;
    }
}

.profile-page {
    font-family: var(--nav-font);
    min-height: 0;
}

.profile-aside {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-aside + .profile-aside {
    margin-top: 16px;
}

.profile-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.profile-stack .k-notice {
    margin: 0;
}

.profile-stack__title {
    margin: 0 0 20px;
    font-size: 22px;
    line-height: 1.3;
    text-align: left;
    color: var(--heading-color);
}

.profile-aside__title {
    margin: 0 0 4px;
    padding: 0 12px;
    font-family: var(--nav-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--k-muted-color);
}

.profile-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-nav__link {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font-family: var(--nav-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    text-align: start;
    color: var(--default-color);
    text-decoration: none;
    word-break: break-word;
    cursor: pointer;
}

.profile-nav__link:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
    color: var(--k-accent-hover);
}

.profile-nav__link.is-active {
    background: var(--accent-color);
    color: #fff;
}

.profile-logout {
    margin: 12px 0 0;
}

.profile-logout__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e23d3d;
    border-radius: 12px;
    background: transparent;
    color: #e23d3d;
    font-family: var(--nav-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
}

.profile-logout__btn:hover,
.profile-logout__btn:focus {
    background: transparent;
    color: #c62828;
    border-color: #c62828;
}

.profile-aside__hint {
    margin: 4px 0 0;
    padding: 0 12px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--k-muted-color);
}

.profile-aside__cta {
    width: 100%;
    margin-top: 8px;
    padding: 11px 16px;
    font-size: 14px;
}

.profile-aside__scroll {
    max-height: min(52vh, 20rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.profile-aside__scroll .profile-nav__link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
}

.profile-page .form-label {
    font-family: var(--nav-font);
    font-weight: 600;
    font-size: 14px;
    color: var(--default-color);
    margin-bottom: 6px;
}

.profile-page .form-control {
    border-radius: 14px;
    padding: 13px 16px;
    border: 1px solid #e4e4e4;
    background: #f7f7f7;
    font-size: 15px;
    box-shadow: none;
}

.profile-page .form-control:focus {
    background: #fff;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 82%);
}

.profile-page .form-text,
.profile-page .text-muted {
    font-family: var(--nav-font);
    color: var(--k-muted-color);
}

.profile-page .btn-primary {
    background: var(--accent-color);
    border: 2px solid var(--accent-color);
    color: #fff;
    border-radius: 16px;
    font-family: var(--nav-font);
    font-weight: 500;
    font-size: 16px;
    padding: 12px 24px;
}

.profile-page .btn-primary:hover,
.profile-page .btn-primary:focus {
    background: var(--k-accent-hover);
    border-color: var(--k-accent-hover);
    color: #fff;
}

.profile-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
}

.profile-page .btn-outline-primary,
.profile-page .btn-outline-secondary,
.profile-page .btn-outline-danger {
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    background: transparent;
    border-radius: 16px;
    font-family: var(--nav-font);
    font-weight: 500;
    padding: 15px 24px;
}

.profile-page .btn-outline-danger {
    color: #e23d3d;
    border-color: #e23d3d;
}

.profile-page .btn-outline-primary:hover,
.profile-page .btn-outline-primary:focus,
.profile-page .btn-outline-secondary:hover,
.profile-page .btn-outline-secondary:focus {
    color: #fff;
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.profile-page .btn-outline-danger:hover,
.profile-page .btn-outline-danger:focus {
    color: #fff;
    background: #e23d3d;
    border-color: #e23d3d;
}

.profile-page .btn-sm {
    border-radius: 12px;
    font-size: 13px;
    padding: 6px 12px;
}

.k-notice {
    border: 0;
    border-radius: 16px;
    padding: 16px 20px;
    margin: 0 0 24px;
    font-family: var(--nav-font);
    font-size: 15px;
    line-height: 1.5;
}

.k-notice--ok {
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    color: var(--default-color);
}

.k-notice--info {
    background: #f7f7f7;
    color: var(--default-color);
}

.k-profile-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
}

.k-profile-help__text {
    margin: 0;
    max-width: 560px;
    font-size: 15px;
    line-height: 1.5;
}

.k-profile-help__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.k-profile-help .btn {
    min-height: 44px;
    padding: 10px 18px;
}

.k-profile-support {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.k-profile-support__link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #f7f7f7;
    text-decoration: none;
    color: inherit;
}

.k-profile-support__link:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.k-profile-support__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--k-muted-color);
}

.k-profile-support__value {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent-color);
}

.profile-back {
    margin: 0 0 20px;
    font-size: 14px;
}

.profile-back a {
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: none;
}

.profile-back a:hover {
    color: var(--k-accent-hover);
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .profile-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .profile-nav > li {
        flex: 1 1 auto;
        min-width: 140px;
    }

    .profile-nav__link {
        text-align: start;
    }
}

section,
.section-lite {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 10px 10px 10px 10px;
    scroll-margin-top: 100px;
    overflow: clip;
}

/* Баннер согласия на использование cookie */
.cookie-consent {
    position: fixed;
    z-index: 99999;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, #fff 100%);
    border-top: 1px solid color-mix(in srgb, var(--accent-color, #388da8), transparent 75%);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.08);
}

.cookie-consent[hidden] {
    display: none !important;
}

.cookie-consent__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.cookie-consent__text {
    flex: 1 1 280px;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #444;
}

.cookie-consent__text strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 1rem;
    color: #222;
}

.cookie-consent__actions {
    flex: 0 0 auto;
}

.cookie-consent .btn-cookie-accept {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent-color, #388da8);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.cookie-consent .btn-cookie-accept:hover {
    background: color-mix(in srgb, var(--accent-color, #388da8), #000 12%);
}

.cookie-consent .btn-cookie-accept:focus-visible {
    outline: 2px solid var(--accent-color, #388da8);
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .cookie-consent__actions {
        width: 100%;
    }

    .cookie-consent .btn-cookie-accept {
        width: 100%;
    }
}

/* Форма обратной связи */
.feedback-form__hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.feedback-form {
    background-color: var(--surface-color);
    padding: 30px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

@media (max-width: 575px) {
    .feedback-form {
        padding: 20px;
    }
}

.feedback-form .form-label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.feedback-form .form-control,
.feedback-form .form-select {
    font-size: 14px;
    padding: 10px 15px;
    border-radius: 0;
    color: var(--default-color);
    background-color: var(--surface-color);
    border-color: color-mix(in srgb, var(--default-color), transparent 80%);
    box-shadow: none;
}

.feedback-form .form-control:focus,
.feedback-form .form-select:focus {
    border-color: var(--accent-color);
    box-shadow: none;
}

.content button.read-more {
    border: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-decoration: none;
}

.feedback-form .content.button {
    padding-top: 1.5rem;
}

/* Страница «Услуги» */
.services-landing-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.services-landing-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
    background-color: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
}

.services-landing-card__icon {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.services-landing-card__icon .bi {
    font-size: 2rem;
    line-height: 1;
}

.services-landing-card.item-cyan .services-landing-card__icon {
    color: #0dcaf0;
    border: 1px solid #0dcaf0;
    background: rgba(13, 202, 240, 0.1);
}

.services-landing-card.item-teal .services-landing-card__icon {
    color: #20c997;
    border: 1px solid #20c997;
    background: rgba(32, 201, 151, 0.1);
}

.services-landing-card.item-orange .services-landing-card__icon {
    color: #fd7e14;
    border: 1px solid #fd7e14;
    background: rgba(253, 126, 20, 0.1);
}

.services-landing-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.services-landing-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--heading-color);
}

.services-landing-card__lead {
    font-size: 0.95rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    margin-bottom: 1rem;
}

.services-landing-card__points {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.5rem 1.25rem;
}

.services-landing-card__points li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.45;
    margin-bottom: 0.5rem;
    color: color-mix(in srgb, var(--default-color), transparent 10%);
}

.services-landing-card__points li i {
    color: var(--accent-color);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.services-landing-card .read-more {
    align-self: flex-start;
}

.services-process {
    padding-top: 80px;
    padding-bottom: 80px;
}

.services-process .section-title h2 {
    font-size: 1.75rem;
}

.services-process__step {
    height: 100%;
    padding: 1.5rem;
    background: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
    border-radius: 12px;
}

.services-process__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--contrast-color);
    background: var(--accent-color);
    border-radius: 50%;
}

.services-cta {
    padding-bottom: 100px;
}

.page-services .read-more,
.page-services .content .read-more {
    background: #fff;
    color: var(--accent-color);
    border: 1px solid color-mix(in srgb, var(--accent-color), transparent 35%);
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.5px;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.page-services .content .read-more {
    font-size: 15px;
    letter-spacing: 0.5px;
    padding: 10px 20px;
}

.page-services .read-more i,
.page-services .content .read-more i {
    font-size: 16px;
    margin-left: 5px;
    transition: none;
}

.page-services .read-more:hover,
.page-services .content .read-more:hover {
    background: #fff;
    color: var(--accent-color);
    border-color: var(--accent-color);
    padding-right: 20px;
}

.page-services .read-more:hover i,
.page-services .content .read-more:hover i {
    margin-left: 5px;
}

@media (max-width: 767.98px) {
    .services-landing-card {
        flex-direction: column;
        align-items: stretch;
    }

    .services-landing-card__icon {
        margin-bottom: 0.25rem;
    }

    .services-landing-card__points {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   REDESIGN 2026 — по макету Figma «Karkasiki / Ru / Desktop + Mobile»
   Цвета, шрифты и компоненты ниже переопределяют старую тему (main.css).
   ========================================================================== */

:root {
    --heading-font: "Montserrat", sans-serif;
    --nav-font: "Noto Sans", sans-serif;
    --default-font:
        "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Arial, sans-serif;
}

:root {
    --accent-color: #4e935f;
    --heading-color: #111111;
    --default-color: #2b2f2c;
    /* Приглушённый серый для дат и подписей. Раньше #999999 был вписан
       литералом в четырёх местах (даты новостей и журнала, подписи в футере) —
       вынесли в токен, значение не изменилось. */
    --k-muted-color: #999999;
    /* Зелёный для состояния наведения (табы форума, заголовки карточек).
       Это фирменный #4e935f, затемнённый на 18%: тот же тон, но в покое текст
       тёмный (#111), и наведение должно читаться как смена цвета.
       Контраст на белом 5.2:1 — проходит AA для обычного текста. */
    --k-accent-hover: #40794e;
}

:root {
    --nav-color: #111111;
    /* Ховер-цвета темы — тот же тёмно-зелёный, что и у остальных наведений.
       На десктопе меню перекрыто своими правилами ниже, но на мобильных
       и в выпадающих списках работают именно эти переменные. */
    --nav-hover-color: var(--k-accent-hover);
    --nav-dropdown-color: #111111;
    --nav-dropdown-hover-color: var(--k-accent-hover);
}

.dark-background {
    --background-color: #001a06;
    --default-color: #cfe0d3;
    --heading-color: #ffffff;
    --surface-color: #063a13;
    --contrast-color: #ffffff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 800;
}

.section-title h1 {
    font-size: 2.75rem;
    line-height: 1.15;
}

/* ---------- Кнопки ---------- */
.btn-k-primary,
.content .read-more.btn-k-primary {
    background: var(--accent-color);
    color: #fff;
    font-family: var(--nav-font);
    font-weight: 500;
    font-size: 16px;
    padding: 15px 24px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid var(--accent-color);
    transition: 0.25s;
}

.btn-k-primary:hover {
    background: color-mix(in srgb, var(--accent-color), black 12%);
    border-color: color-mix(in srgb, var(--accent-color), black 12%);
    color: #fff;
}

.btn-k-outline {
    background: transparent;
    color: #fff;
    font-family: var(--nav-font);
    font-weight: 500;
    font-size: 16px;
    padding: 15px 24px;
    border-radius: 16px;
    border: 2px solid var(--accent-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s;
}

.btn-k-outline:hover {
    background: var(--k-accent-hover);
    border-color: var(--k-accent-hover);
    color: #fff;
}

/* Приводим старую кнопку .read-more к новому стилю (радиус вместо скругления 5px) */
.content .read-more {
    border-radius: 16px;
    padding: 15px 24px;
    font-family: var(--nav-font);
}

/* ---------- Плавающая шапка ---------- */
.header {
    background: transparent !important;
    padding: 24px 0 0;
}

/* Тема вешает тень на сам .header при прокрутке (.scrolled .header в main.css),
   рассчитывая, что он — сплошная белая полоса во всю ширину. У нас .header
   прозрачный и служит только обёрткой с полями, а тень несёт белая «пилюля»
   внутри. В итоге при скролле под шапкой прорисовывалась вторая тень —
   серая полоса от края до края экрана. Гасим её здесь, а не правкой main.css:
   это файл темы, его держим нетронутым. */
.scrolled .header {
    box-shadow: none;
}

.header .container-fluid.container-xl {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.1);
    padding: 8px 12px 12px 20px;
    max-width: 1224px;
}

.header .logo img {
    max-height: 40px;
}

.header .logo {
    font-family: var(--heading-font);
    font-weight: 800;
    margin-right: 56px;
}

.header-navmenu ul {
    gap: 4px;
}

.header-left .header-navmenu {
    padding-top: 2px;
}

.header-left {
    width: 100%;
}

/* Кнопка «Войти» / «Профиль» — обычная .btn-k-primary в div, вне навигации.
   Чуть компактнее базовой кнопки, чтобы не раздувать высоту шапки. */
.header-cta {
    flex-shrink: 0;
    padding-top: 4px;
}

.header-cta .btn-k-primary {
    padding: 11px 20px;
    font-size: 14px;
    white-space: nowrap;
}

/* Иконка пользователя — svg из Figma (16×16, белая обводка). Размер задаём
   явно, чтобы картинка не растянулась до собственного размера. */
.header-cta .btn-k-primary img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

.header-account {
    position: relative;
}

.header-account__toggle {
    min-width: 48px;
    justify-content: center;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.header-account__initials {
    line-height: 1;
}

.header-account__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    min-width: 240px;
    padding: 8px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
}

.header-account__menu a,
.header-account__logout {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--heading-color);
    font-family: var(--nav-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.header-account__menu a:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
    color: var(--k-accent-hover);
}

.header-account__logout {
    justify-content: center;
    margin-top: 4px;
    border: 1px solid #e23d3d;
    color: #e23d3d;
}

.header-account__logout:hover,
.header-account__logout:focus {
    background: transparent;
    color: #c62828;
    border-color: #c62828;
}

@media (min-width: 1200px) {
    .navmenu a,
    .navmenu a:focus {
        font-family: var(--nav-font);
        font-weight: 500;
        font-size: 14px;
        color: var(--nav-color);
        padding: 14px 16px;
        border-radius: 16px;
    }

    .navmenu li:hover > a,
    .navmenu .active,
    .navmenu .active:focus {
        background: #f2f2f2;
        color: var(--nav-color);
    }

    /* Тема обнуляет правый отступ у последнего пункта — возвращаем общий 16px,
       чтобы «Контакты» подсвечивались при наведении так же, как остальные. */
    .navmenu li:last-child a {
        padding-right: 16px;
    }

    /* ---------- Выпадающие подменю (десктоп, по наведению) ---------- */
    .navmenu .dropdown > ul {
        left: 0;
        margin-top: 10px;
        padding: 8px;
        min-width: 220px;
        border-radius: 16px;
        border: 1px solid #f2f2f2;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    }

    /* Прозрачная «перемычка» в зазоре между пунктом и панелью: без неё курсор,
       двигаясь вниз, выходит из li и меню успевает закрыться. */
    .navmenu .dropdown > ul::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -10px;
        height: 10px;
    }

    .navmenu .dropdown > ul li {
        min-width: 0;
    }

    .navmenu .dropdown > ul a {
        padding: 10px 14px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 500;
        color: var(--nav-color);
    }

    .navmenu .dropdown > ul li:hover > a,
    .navmenu .dropdown > ul a:hover {
        background: #f2f2f2;
        color: var(--nav-color);
    }

    /* Стрелка родительского пункта: вниз — закрыто, вверх — открыто */
    .navmenu .dropdown:hover > a .toggle-dropdown {
        transform: rotate(180deg);
    }
}

@media (max-width: 1199.98px) {
    /* На узких экранах кнопка компактнее, чтобы поместиться рядом
       с логотипом и гамбургером. */
    .header-cta .btn-k-primary {
        padding: 9px 14px;
        font-size: 14px;
        border-radius: 12px;
    }

    /* Пункты меню на мобильных скрыты, и гамбургер оставался висеть вплотную
       к логотипу, посреди пустой шапки. Прижимаем <nav> к правому краю
       .header-left — она упирается в .header-cta, — а зазор до кнопки «Войти»
       задаём правым отступом самой иконки. */
    .header-left .header-navmenu {
        margin-left: auto;
    }

    /* У белой «пилюли» поля сверху 8px, снизу 12px, поэтому её содержимое
       центруется на 2px выше видимой середины. Кнопка «Войти» это уже
       компенсирует своим padding-top: 4px (у центрируемого элемента такой
       отступ даёт ровно 2px сдвига). Гамбургеру опускаем глиф на 3px:
       у иконки-шрифта чернильный прямоугольник ещё на пиксель выше
       середины строки — с этим значением он встаёт ровно на одну линию
       с кнопкой (проверено рендером на 375/768/991). */
    .mobile-nav-toggle {
        margin-right: 24px;
        position: relative;
        top: 3px;
    }

    /* Отступ 56px справа от логотипа нужен только десктопному меню; здесь он
       съедает место и на 375px начинает сжимать сам логотип. */
    .header .logo {
        margin-right: 16px;
    }

    /* ---------- Выпадающие подменю (мобильные, по тапу на стрелку) ---------- */
    /* Тема подкладывает под раскрытое подменю серую заливку и рамку —
       в макете вложенность показана только отступом. */
    .navmenu .dropdown ul,
    .navmenu .dropdown > ul.dropdown-active {
        background-color: transparent;
        border: 0;
    }

    /* Тема отбивает подменю от родителя дважды — 10px внешнего отступа плюс
       10px внутреннего, и вместе с собственным padding ссылки это давало
       30px пустоты. Убираем обе десятки сверху: разделения хватает отступов
       самих ссылок. Снизу отбивку оставляем — она отделяет список
       от следующего пункта меню. */
    .navmenu .dropdown ul {
        margin-top: 0;
        padding-top: 0;
    }


    /* Тема рисует у иконок в меню круглую акцентную подложку — для стрелок
       подменю оставляем чистый шеврон. */
    .navmenu a .toggle-dropdown,
    .navmenu a:focus .toggle-dropdown {
        width: auto;
        height: auto;
        background-color: transparent;
        border-radius: 0;
        font-size: 14px;
    }

    /* Тема поворачивает иконку по классу .active на самой ссылке, но этот же
       класс навешивает scrollspy текущему разделу — стрелка «Идеи» крутилась бы
       при закрытом списке. Поэтому отменяем поворот по .active и завязываем его
       строго на .dropdown-active у самого <ul> (его ставит обработчик в main.js). */
    .navmenu a.active > .toggle-dropdown,
    .navmenu .active:focus > .toggle-dropdown {
        transform: none;
        background-color: transparent;
        color: inherit;
    }

    .navmenu li.dropdown:has(> ul.dropdown-active) > a .toggle-dropdown {
        transform: rotate(180deg);
    }
}

.k-main {
    padding-bottom: 64px;
}

/* ---------- Hero (FirstWindow) ---------- */
.k-hero {
    position: relative;
    isolation: isolate;
    min-height: 840px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 170px 20px 80px;
    overflow: clip;
    color: #fff;
    text-align: center;
}

.k-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--k-hero-image);
    background-size: cover;
    background-position: center 65%;
    z-index: -2;
}

.k-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: -1;
}

.k-hero__inner {
    max-width: 920px;
    margin: 0 auto;
}

.k-hero h1 {
    color: #fff;
    font-size: 72px;
    line-height: 1.15;
    font-weight: 800;
    text-align: center;
    margin-bottom: 24px;
}

.k-hero p {
    font-family: var(--nav-font);
    font-size: 18px;
    line-height: 1.65;
    color: #f2f2f2;
    margin-bottom: 0;
}

.k-hero__btns {
    margin-top: 56px;
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Кнопки на фото (hero, баннер) и в ленте — сплошная фирменная заливка.
   Осветление и полупрозрачность сняты: ховер берётся из .btn-k-primary:hover. */
.k-hero .btn-k-primary:hover,
.k-pins__cta .btn-k-primary:hover,
.k-banner .btn-k-primary:hover {
    color: #fff;
}

@media (max-width: 991.98px) {
    .k-hero {
        min-height: 620px;
        padding: 140px 16px 64px;
    }

    .k-hero h1 {
        font-size: 34px;
    }

    .k-hero p {
        font-size: 15px;
    }
}

/* ---------- About (карточки «кому подходит») ---------- */
.k-about {
    padding: 64px 0;
}

.k-about__photos {
    position: relative;
    min-height: 420px;
}

.k-about__photo {
    position: absolute;
    width: 74%;
    aspect-ratio: 340 / 255;
    border-radius: 24px;
    border: 8px solid #fff;
    overflow: hidden;
}

.k-about__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.k-about__photo--top {
    left: 22%;
    top: 0;
    z-index: 1;
}

.k-about__photo--bottom {
    left: 0;
    top: 50%;
    z-index: 2;
}

@media (max-width: 991.98px) {
    .k-about__photos {
        min-height: 300px;
        margin-bottom: 24px;
    }

    .k-about__photo {
        width: 78%;
    }
}

.k-col-four {
    margin-top: 40px;
    padding: 0 24px;
}

.k-about-card {
    padding: 0;
}

.k-about-card__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    font-size: 24px;
    margin-bottom: 12px;
}

/* Иконки карточек — svg из Figma (32×32, плоский фирменный зелёный).
   Размер задаём явно, иначе картинка растянется до своего натурального. */
.k-about-card__icon img {
    width: 32px;
    height: 32px;
    display: block;
}

.k-about-card h4 {
    font-size: 20px;
    color: var(--heading-color);
    margin-bottom: 8px;
}

.k-about-card p {
    font-size: 14px;
    line-height: 1.45;
    color: var(--default-color);
    margin-bottom: 8px;
}

.k-about-card__tag {
    font-weight: 700;
    font-size: 14px;
    color: var(--accent-color);
    padding-top: 4px;
}

/* ---------- Заголовок секции с иконкой и ссылкой ---------- */
.k-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.k-section-head__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 32px;
    color: var(--heading-color);
    margin: 0;
}

.k-section-head__title i {
    color: var(--accent-color);
    font-size: 28px;
}

/* Иконка раздела — svg из Figma (32×32). Размер задаём явно: на img
   font-size не действует, иначе картинка встанет в натуральную величину. */
.k-section-head__title img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: block;
}

.k-section-head__link {
    font-family: var(--nav-font);
    font-weight: 500;
    font-size: 16px;
    color: var(--default-color);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.k-section-body__link {
    font-family: var(--nav-font);
    font-weight: 500;
    font-size: 14px;
    color: var(--default-color);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.k-section-head__link:hover, .k-section-body__link:hover {
    color: var(--k-accent-hover);
}

@media (max-width: 575.98px) {
    .k-section-head__title {
        font-size: 24px;
    }
}

/* ---------- Идеи (галерея на странице /pins) — карточки под новый радиус ---------- */
.image-card {
    border-radius: 12px;
}

/* ---------- Идеи на главной: крутящаяся лента ----------
   Полоса на всю ширину окна. Набор карточек дублируется, анимация
   сдвигает дорожку на половину — петля без скачка. Зазор задан
   margin-right у карточки, чтобы -50% совпало с началом клонов. */
.k-pins__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
}

/* Секция идей на главной — серая (#F2F2F2). Серый чип на ней пропадает,
   белый на странице /pins тоже. Поэтому здесь белая плашка с тенью. */
.k-pins__tags .pins-feed-filter__chip {
    background: #ffffff;
    border: 1px solid rgba(17, 17, 17, 0.12);
    box-shadow: 0 1px 4px rgba(17, 17, 17, 0.08);
}

.k-pins__tags .pins-feed-filter__chip:hover {
    background: #ffffff;
    border-color: rgba(17, 17, 17, 0.2);
}

.k-pins__scroller {
    margin-top: 24px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
}

.k-pins__row {
    --k-pin-scale: 1;
    --k-pin-gap: calc(24px * var(--k-pin-scale));

    display: flex;
    align-items: center;
    width: max-content;
    animation: k-pins-marquee 55s linear infinite;
    will-change: transform;
}

.k-pins__scroller:hover .k-pins__row,
.k-pins__scroller:focus-within .k-pins__row {
    animation-play-state: paused;
}

@keyframes k-pins-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.k-pins__item {
    position: relative;
    flex: 0 0 calc(232px * var(--k-pin-scale));
    height: calc(236px * var(--k-pin-scale));
    margin-right: var(--k-pin-gap);
    border-radius: 12px;
    overflow: hidden;
}

.k-pins__item--clone {
    pointer-events: none;
}

/* Только прямой потомок: правило описывает саму фотографию, а иконки
   в кнопках оверлея лежат глубже и растягиваться на карточку не должны. */
.k-pins__item > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.k-pins__item:hover > img {
    transform: scale(1.04);
}

/* Панель действий у карточки на главной — тот же компонент .pin-overlay,
   что и в ленте /pins; описан ниже одним блоком на обе страницы. */

/* Ритм высот из макета. Класс, а не nth-child: клоны должны совпасть
   с оригиналами, иначе петля дёрнется. */
.k-pins__item--m1 {
    height: calc(160px * var(--k-pin-scale));
}

.k-pins__item--m2 {
    height: calc(364px * var(--k-pin-scale));
}

.k-pins__item--m3 {
    flex-basis: calc(280px * var(--k-pin-scale));
    height: calc(160px * var(--k-pin-scale));
}

.k-pins__item--m4 {
    height: calc(300px * var(--k-pin-scale));
}

.k-pins__cta {
    margin-top: 32px;
    text-align: center;
}

/* Иконка альбома — svg из Figma (24×24, белая обводка). Размер задаём явно:
   на img font-size не действует, иначе картинка встанет в натуральную величину. */
.k-pins__cta .btn-k-primary img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: block;
}

@media (max-width: 767.98px) {
    /* На телефоне ленту листают пальцем: анимация мешает свайпу и тапу,
       клоны для петли не нужны. */
    .k-pins__row {
        --k-pin-scale: 0.92;
        --k-pin-gap: 12px;
        animation: none;
    }

    .k-pins__item--clone {
        display: none;
    }

    .k-pins__scroller {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-x;
        scroll-snap-type: x proximity;
        padding-left: 16px;
        padding-right: 16px;
    }

    .k-pins__scroller::-webkit-scrollbar {
        display: none;
    }

    .k-pins__item {
        scroll-snap-align: start;
    }

    /* Высоту всей ленты задаёт самая высокая карточка — на узком экране
       она уезжала за край, и первая карточка висела в пустоте. */
    .k-pins__item--m0,
    .k-pins__item--m2,
    .k-pins__item--m4 {
        height: calc(260px * var(--k-pin-scale));
    }

    .k-pins__item--m1,
    .k-pins__item--m3 {
        height: calc(200px * var(--k-pin-scale));
    }
}

@media (prefers-reduced-motion: reduce) {
    .k-pins__row {
        animation: none;
    }

    .k-pins__item--clone {
        display: none;
    }

    .k-pins__scroller {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding-left: calc(50vw - 50%);
        padding-right: calc(50vw - 50%);
    }

    .k-pins__scroller::-webkit-scrollbar {
        display: none;
    }
}

/* ---------- Форум: табы категорий + карточки ---------- */
.k-forum-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 32px;
}

.k-forum-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--default-color);
    font-family: var(--nav-font);
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    transition: color 0.2s;
}

.k-forum-tab:hover {
    color: var(--k-accent-hover);
}

.k-forum-tab__icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    /* inherit вместо #000: цвет иконки берётся у ссылки, чтобы при наведении
       она перекрашивалась вместе с текстом. По умолчанию тот же чёрный. */
    color: inherit;
    flex-shrink: 0;
}

.k-forum-tab__icon--color {
    background: #fff4e8;
}

.k-forum-tab__icon--color img {
    width: 16px;
    height: 16px;
    display: block;
}

/* Перекрашиваемая иконка.
   Цвет внутри svg-файлов зашит намертво, а картинку в <img> средствами CSS
   перекрасить нельзя. Поэтому рисуем не саму картинку, а заливку currentColor,
   обрезанную по форме иконки через mask — тогда иконка меняет цвет вместе
   с текстом ссылки. Путь к файлу приходит из разметки в --k-icon.
   contain — у части иконок ширина не равна высоте, вписываем без искажения.
   ВАЖНО: путь в --k-icon должен быть абсолютным. Относительный url() внутри
   CSS-переменной браузер считает от папки этого файла стилей (assets/css/),
   а не от страницы — и маска молча отваливается, иконка пропадает.
   В шаблоне это обеспечивает asset(), в статике — путь от корня. */
.k-icon {
    display: block;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--k-icon) center / contain no-repeat;
    mask: var(--k-icon) center / contain no-repeat;
}

/* Иконки разделов форума — svg из Figma (16×16). */
.k-forum-tab__icon .k-icon {
    width: 16px;
    height: 16px;
}

.k-news-card {
    background: #f2f2f2;
    border-radius: 24px;
    padding: 20px 24px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.k-news-card__date {
    font-size: 12px;
    color: var(--k-muted-color);
    margin-bottom: 12px;
    display: block;
}

.k-news-card h3 {
    font-size: 20px;
    color: var(--heading-color);
    margin-bottom: 12px;
    line-height: 1.4;
    transition: color 0.2s;
}

.k-news-card:hover h3 {
    color: var(--k-accent-hover);
}

.k-news-card p {
    font-size: 14px;
    color: var(--default-color);
    line-height: 1.4;
    margin-bottom: 16px;
    flex: 1 1 auto;
}

.k-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border-radius: 8px;
    padding: 3px 8px;
    font-size: 11px;
    color: var(--default-color);
    align-self: flex-start;
}

.k-badge i {
    font-size: 12px;
    color: var(--accent-color);
}

/* Иконка бейджа — svg из Figma (12×12). */
.k-badge img {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    display: block;
}

/* ---------- Баннер Telegram ---------- */
/* Фото — фон самого блока, зелёная вуаль — на псевдоэлементе поверх него.
   isolation: isolate обязателен: без своего контекста наложения псевдоэлемент
   с z-index:-1 уходит ПОД фон блока и фотографии не видно вовсе. С ним слои
   ложатся как надо: фото → вуаль → текст и кнопка. */
.k-banner {
    position: relative;
    isolation: isolate;
    border-radius: 40px;
    overflow: clip;
    padding: 72px 40px;
    text-align: center;
    color: #fff;
    background-color: #001a06;
    background-image: var(--k-banner-image);
    background-size: cover;
    background-position: center;
}

.k-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        75deg,
        rgba(0, 34, 4, 0.89) 0%,
        rgba(0, 158, 16, 0.82) 100%
    );
    mix-blend-mode: multiply;
    z-index: -1;
}

.k-banner h2 {
    color: #fff;
    font-size: 34px;
    margin-bottom: 16px;
}

.k-banner p {
    font-family: var(--nav-font);
    font-size: 16px;
    line-height: 1.6;
    max-width: 780px;
    margin: 0 auto 32px;
    color: #eef5f0;
}

.k-banner__ways {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 860px;
    margin: 0 auto;
    text-align: left;
}

.k-banner__way {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-height: 100%;
    padding: 18px 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.k-banner__way:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    transform: translateY(-2px);
}

.k-banner__way-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.k-banner__way-icon .k-icon {
    width: 18px;
    height: 18px;
}

.k-banner__way-title {
    font-family: var(--nav-font);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
}

.k-banner__way-hint {
    font-family: var(--nav-font);
    font-size: 14px;
    line-height: 1.4;
    color: #eef5f0;
}

@media (max-width: 767.98px) {
    .k-banner {
        padding: 48px 20px;
        border-radius: 24px;
    }

    .k-banner h2 {
        font-size: 24px;
    }

    .k-banner__ways {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .k-banner__way {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 14px;
        padding: 16px 18px;
    }

    .k-banner__way-icon {
        margin-bottom: 0;
    }

    .k-banner__way-title {
        flex: 1 1 auto;
    }
}

/* ---------- База знаний — аккордеон-плашки ---------- */
.k-kb-block {
    margin-bottom: 32px;
}

.k-kb-block:last-child {
    margin-bottom: 0;
}

.k-kb-badge {
    display: inline-block;
    background: #f2f2f2;
    border-radius: 8px;
    padding: 3px 10px;
    font-size: 14px;
    color: var(--default-color);
    margin-bottom: 16px;
}

.k-kb-item {
    background: #f2f2f2;
    border-bottom: 1px solid #fff;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: inherit;
}

.k-kb-item:first-child {
    border-radius: 16px 16px 0 0;
}

.k-kb-item:last-child {
    border-radius: 0 0 16px 16px;
    border-bottom: none;
}

.k-kb-item:only-child {
    border-radius: 16px;
}

.k-kb-item h4 {
    font-size: 20px;
    color: var(--heading-color);
    margin-bottom: 8px;
    transition: color 0.2s;
}

.k-kb-item:hover h4 {
    color: var(--k-accent-hover);
}

.k-kb-item p {
    font-size: 14px;
    color: var(--default-color);
    margin: 0;
    line-height: 1.4;
}

.k-kb-item__arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 100px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--heading-color);
    transition: 0.2s;
}

.k-kb-item:hover .k-kb-item__arrow {
    background: var(--k-accent-hover);
    color: #fff;
}

/* Стрелка — svg из Figma (16×16). Через маску, а не <img>: цвет в файле зашит
   чёрным, а при наведении кружок зеленеет и стрелка должна стать белой —
   с currentColor это получается само. */
.k-kb-item__arrow .k-icon {
    width: 16px;
    height: 16px;
}

.k-kb-more {
    font-family: var(--nav-font);
    font-weight: 500;
    font-size: 14px;
    color: var(--default-color);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
}

.k-kb-more:hover {
    color: var(--k-accent-hover);
}

/* ---------- Журнал — карточки статей ---------- */
.k-journal-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.k-journal-card:hover {
    color: inherit;
}

/* Картинка занимает всю ширину карточки: отрицательными полями выходим
   за её padding и повторяем радиус только у верхних углов. Пропорции
   фиксируем, чтобы карточки в ряду были одинаковыми при любых исходниках. */
.k-journal-card__image {
    margin: -24px -24px 12px;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    aspect-ratio: 784 / 640;
}

.k-journal-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.k-journal-card__date {
    font-size: 12px;
    color: var(--k-muted-color);
}

.k-journal-card h3 {
    font-size: 20px;
    color: var(--heading-color);
    margin-bottom: 0;
    line-height: 1.35;
    transition: color 0.2s;
}

.k-journal-card:hover h3 {
    color: var(--k-accent-hover);
}

.k-journal-card p {
    font-size: 14px;
    color: var(--default-color);
    line-height: 1.45;
    margin: 0;
    flex: 1 1 auto;
}

.k-journal-card-badge {
    background: #F2F2F2;
}

#journal .section-rounding {
    border-radius: 24px;
}

.k-journal-head__tools {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.k-journal-nav {
    display: flex;
    gap: 8px;
}

.k-journal-nav__btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #f2f2f2;
    color: var(--heading-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    transition: background 0.2s, color 0.2s, opacity 0.2s;
}

.k-journal-nav__btn:hover {
    color: var(--k-accent-hover);
    background: #e8e8e8;
}

.k-journal-nav__btn.swiper-button-disabled,
.k-journal-nav__btn.swiper-button-lock {
    opacity: 0.35;
    pointer-events: none;
}

.k-journal-slider {
    overflow: hidden;
}

.k-journal-slider .swiper-slide {
    display: flex;
    height: auto;
}

.k-journal-slider .k-journal-card {
    width: 100%;
}

@media (max-width: 575.98px) {
    .k-journal-head__tools {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }
}

/* ---------- Футер: меню как в шапке, схема дома справа ---------- */
.k-footer {
    position: relative;
    padding: 56px 0 32px;
    overflow: hidden;
}

.k-footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
    gap: 32px 40px;
    align-items: end;
    padding-bottom: 24px;
}

.k-footer__nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px 24px;
    min-width: 0;
}

.k-footer__col {
    min-width: 0;
}

.k-footer__col ul {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.k-footer__col-title {
    display: inline-block;
    color: #fff;
    font-family: var(--nav-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

.k-footer__col-title:hover {
    color: #fff;
}

.k-footer__col a {
    color: #cfe0d3;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    word-break: break-word;
}

.k-footer__col a:hover {
    color: #fff;
}

.k-footer__art {
    pointer-events: none;
    align-self: end;
    justify-self: end;
    width: min(280px, 100%);
    margin-bottom: -48px;
    opacity: 0.85;
}

.k-footer__art img {
    display: block;
    width: 100%;
    height: auto;
}

.k-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: var(--k-muted-color);
}

.k-footer__legal {
    display: grid;
    gap: 6px;
}

.k-footer__credits {
    margin: 0;
    color: #9bb6a2;
}

.k-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.k-footer__bottom a {
    color: #fff;
    text-decoration: none;
}

.k-footer__bottom a:hover,
.k-footer__credits a:hover {
    color: #fff;
    text-decoration: underline;
}

.k-footer__credits a {
    color: #e6f3e9;
}

@media (max-width: 991.98px) {
    .k-footer__nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .k-footer__art {
        width: 200px;
        margin-bottom: -32px;
    }
}

@media (max-width: 767.98px) {
    .k-footer {
        padding: 40px 0 28px;
    }

    .k-footer__main {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .k-footer__nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
    }

    .k-footer__art {
        width: 180px;
        justify-self: end;
        margin: -8px 0 -24px;
        opacity: 0.55;
    }

    .k-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- Страницы «Идеи» (галерея) и «Идея» (одно фото) ---------- */
:root {
    --pinterest-red: var(--accent-color);
    --pinterest-gray: #eee;
}

.k-page-hero {
    padding: 130px 0 0;
}

@media (min-width: 992px) {
    .k-page-hero {
        padding-top: 148px;
    }
}

/* ---------- Шапка страницы /pins ---------- */
.k-crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--nav-font);
    font-size: 14px;
    color: var(--default-color);
    margin-bottom: 24px;
}

.k-crumbs a {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.k-crumbs a:hover {
    color: var(--k-accent-hover);
}

.k-crumbs img {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    display: block;
}

/* text-align задан явно: выше в файле остался общий `h1 { text-align: center }`
   из старой демо-галереи, и без этого заголовок страницы уезжает по центру. */
.k-page-hero__title {
    font-size: 40px;
    line-height: 1.3;
    text-align: left;
    color: var(--heading-color);
    margin: 0 0 24px;
}

/* Число с подписью переносится целиком: разрывать «1 546 фотографий»
   посередине некрасиво, а сам пробел внутри числа уже неразрывный. */
.k-page-hero__count {
    white-space: nowrap;
}

.k-page-hero__lead {
    font-size: 16px;
    line-height: 1.6;
    color: var(--default-color);
    max-width: 90ch;
    margin: 0;
}

/* ---------- Фильтр по темам ----------
   Раньше это была белая карточка с рамкой, тенью и подсказкой над чипами.
   В макете — просто ряд плашек, поэтому обёртку разбираем. */
.pins-feed-filter {
    margin: 32px 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.pins-feed-filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pins-feed-filter__chip {
    padding: 12px 16px;
    font-family: var(--nav-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    color: var(--default-color);
    background: #ededed;
    border: 1px solid #d8d8d8;
    border-radius: 12px;
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
}

.pins-feed-filter__chip:hover {
    color: var(--k-accent-hover);
    background: #e4e4e4;
    border-color: #cfcfcf;
}

.pins-feed-filter__chip.is-active,
.pins-feed-filter__chip.is-active:hover {
    color: #ffffff;
    background: #111111;
    border-color: transparent;
    box-shadow: none;
    font-weight: 500;
}

/* /pins: теги как табы «Сообщества» на главной (иконка + текст).
   Плашки на главной в блоке идей остаются обычными чипами. */
.pins-feed-filter__chips.k-forum-tabs {
    gap: 20px 24px;
    margin-bottom: 0;
}

.k-pins-page .pins-feed-filter__chip.k-forum-tab,
.pins-feed-end .pins-feed-filter__chip.k-forum-tab {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--default-color);
    pointer-events: auto;
}

.k-pins-page .pins-feed-filter__chip.k-forum-tab:hover,
.pins-feed-end .pins-feed-filter__chip.k-forum-tab:hover {
    color: var(--k-accent-hover);
    background: none;
    border: 0;
}

.k-pins-page .pins-feed-filter__chip.k-forum-tab.is-active,
.k-pins-page .pins-feed-filter__chip.k-forum-tab.is-active:hover,
.pins-feed-end .pins-feed-filter__chip.k-forum-tab.is-active,
.pins-feed-end .pins-feed-filter__chip.k-forum-tab.is-active:hover {
    color: var(--heading-color);
    background: none;
    border: 0;
    box-shadow: none;
    pointer-events: none;
}

.k-pins-page .pins-feed-filter__chip.k-forum-tab.is-active .k-forum-tab__icon,
.pins-feed-end .pins-feed-filter__chip.k-forum-tab.is-active .k-forum-tab__icon {
    background: #111;
    color: #fff;
}

/* Конец ленты: мягкая плашка, теги как сверху, текущую тему не дублируем */
.k-pins-page .pins-feed-end {
    margin: 40px 0 8px;
    padding: 40px 32px 36px;
    border: 0;
    border-radius: 24px;
    background: #f4f6f4;
    text-align: center;
}

.pins-feed-end__title {
    margin: 0 0 8px;
    font-size: 28px;
    color: var(--heading-color);
}

.pins-feed-end__lead {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.5;
    color: #6a6a6a;
}

.k-pins-page .pins-feed-end .pins-feed-filter__chip.k-forum-tab.is-active {
    display: none;
}

.k-pins-page .pins-feed-end .pins-feed-filter__chips.k-forum-tabs {
    gap: 10px 12px;
}

.k-pins-page .pins-feed-end .pins-feed-filter__chip.k-forum-tab {
    padding: 6px 14px 6px 6px;
    background: #fff;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
}

.k-pins-page .pins-feed-end .pins-feed-filter__chip.k-forum-tab:hover {
    background: #fff;
    border: 0;
    box-shadow: none;
    color: var(--k-accent-hover);
}

.k-pins-page .pins-feed-end .k-forum-tab__icon {
    background: #f2f2f2;
}

.pins-feed-end__cta {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.pins-feed-end__cta-text {
    margin: 0;
    font-family: var(--nav-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--default-color);
}

.pins-feed-end__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 12px;
    background: var(--accent-color);
    color: #fff;
    text-decoration: none;
    font-family: var(--nav-font);
    font-size: 15px;
    font-weight: 500;
}

.pins-feed-end__btn:hover {
    background: var(--accent-color);
    color: #fff;
}

/* ---------- Карточка ленты /pins ---------- */
/* В макете это просто фотография со скруглением: без белой подложки,
   рамки и тени, которые рисовала старая сетка. */
.image-card {
    position: relative;
    background: none;
    border-radius: 12px;
    box-shadow: none;
}

.gallery-grid {
    gap: 16px;
}

/* Masonry: независимые колонки. Новые карточки дописываются в самую
   короткую — уже лежащие на странице не переезжают. Высота ячейки
   заранее из --pin-ratio, поэтому подгрузка снимка страницу не толкает. */
.gallery-masonry.gallery-grid {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.gallery-masonry__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gallery-masonry .image-wrapper::before {
    content: none;
    display: none;
    padding-top: 0;
}

.gallery-masonry .image-wrapper {
    aspect-ratio: var(--pin-ratio, 3 / 4);
    width: 100%;
    background: #ececec;
}

.gallery-masonry .forum-promo-card {
    aspect-ratio: 3 / 4;
}

/* Промо в ленте: мягкая карточка в токенах темы, не старый бирюзовый градиент */
.k-pin-promo {
    background: #eef3ef;
}

.k-pin-promo .forum-promo-inner,
.k-pin-promo.forum-promo-card .forum-promo-inner {
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    padding: 28px 24px;
    background:
        radial-gradient(circle at 112% -8%, color-mix(in srgb, var(--accent-color) 20%, transparent), transparent 46%),
        linear-gradient(180deg, #f7faf7 0%, #e7f0e9 100%);
    border: 0;
}

.k-pin-promo--account .forum-promo-inner,
.k-pin-promo--account.forum-promo-card .forum-promo-inner {
    background:
        radial-gradient(circle at -8% 112%, color-mix(in srgb, var(--accent-color) 16%, transparent), transparent 44%),
        linear-gradient(180deg, #f7f7f5 0%, #eceee9 100%);
}

.k-pin-promo__badge {
    display: inline-flex;
    max-width: 100%;
    padding: 4px 10px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.06);
    color: #4a4a4a;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.k-pin-promo__date {
    margin: 0 0 8px;
    font-family: var(--nav-font);
    font-size: 12px;
    line-height: 1.3;
    color: #6b6b6b;
}

.k-pin-promo__title {
    font-family: var(--nav-font);
    font-size: 22px;
    font-weight: 500;
    color: var(--heading-color);
    margin: 0 0 10px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.k-pin-promo__text {
    font-size: 14px;
    line-height: 1.5;
    color: #5c5c5c;
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.k-pin-promo__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 12px;
    background: var(--accent-color);
    color: #fff;
    text-decoration: none;
    font-family: var(--nav-font);
    font-size: 14px;
    font-weight: 500;
    border: 0;
}

.k-pin-promo__btn:hover {
    background: var(--accent-color);
    color: #fff;
}

/* Панель действий поверх снимка. Затемнение нужно, чтобы белые иконки
   читались на светлых фотографиях. */
/* Ссылка-подложка на всю карточку. Лежит под панелью действий, поэтому
   кнопки перехватывают свои клики сами. */
.pin-cover-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.pin-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: rgba(0, 0, 0, 0.32);
    opacity: 0;
    transition: opacity 0.25s ease;
    /* Затемнение не должно перекрывать ссылку-подложку — клики сквозь него
       проходят, а сами кнопки возвращают себе pointer-events. */
    pointer-events: none;
}

.image-card:hover .pin-overlay,
.image-card:focus-within .pin-overlay,
.k-pins__item:hover .pin-overlay,
.k-pins__item:focus-within .pin-overlay {
    opacity: 1;
}

.pin-overlay__title {
    position: absolute;
    left: 16px;
    right: 56px;
    top: 16px;
    margin: 0;
    color: #fff;
    font-family: var(--nav-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Кнопка «в альбом» лежит внутри .pin-overlay, а не поверх снимка.
   Селектор с .image-wrapper нужен, чтобы перебить общее правило
   .image-wrapper .pin-save-to-album-btn выше (у него та же специфичность,
   и оно задаёт свои размеры, позицию и прозрачность). */
.pin-overlay__fav,
.image-wrapper .pin-overlay__fav {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    padding: 0;
    opacity: 1;
    transform: none;
}

.pin-overlay__bar {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Иконки лежат на тёмных плашках: белая обводка svg иначе теряется
   на светлых снимках. Радиус 8px, не круг. */
.pin-overlay__icon,
.pin-overlay__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    pointer-events: auto;
    transition: background 0.2s;
}

.pin-overlay__icon {
    width: 32px;
    padding: 0;
    cursor: pointer;
}

.pin-overlay__btn {
    gap: 8px;
    padding: 0 12px;
    font-family: var(--nav-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

.pin-overlay__icon img,
.pin-overlay__btn img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

.pin-overlay__icon:hover,
.pin-overlay__btn:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
}

/* На тач-устройствах наведения нет — иначе до кнопок не добраться. */
@media (hover: none) {
    .pin-overlay {
        opacity: 1;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0) 35%,
            rgba(0, 0, 0, 0) 55%,
            rgba(0, 0, 0, 0.45) 100%
        );
    }
}

/* Стили страницы одного фото (/pins/{id}) живут в item.css — он
   подключается после k.css и там же лежит вся её вёрстка. */
/* ==========================================================================
   АДАПТИВ: планшет (≤991px) и телефон (≤575px)
   Блок в конце файла намеренно — правила здесь перебивают всё, что выше,
   и их удобно править в одном месте.
   ========================================================================== */

@media (max-width: 991.98px) {
    /* Поля секций: 48px на узком экране съедают треть ширины */
    .section-wrapper {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Шапка — плавающая белая «пилюля» со скруглением 20px. На десктопе она
       ограничена max-width и висит с большими полями по бокам, а на узких
       экранах упиралась в края экрана: скругления оказывались срезаны рамкой
       окна. Отступ задаём на .header (padding), а не на самой карточке —
       её внутренние поля отвечают за расстояние до логотипа и кнопки. */
    .header {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Внутренние поля карточки на десктопе несимметричны (20 слева, 12 справа) —
       это компенсация под меню. Когда «пилюля» сузилась, перекос стал заметен,
       поэтому выравниваем поля и заодно освобождаем место содержимому. */
    .header .container-fluid.container-xl {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Только вертикаль: шорткат padding обнулил бы боковые поля,
       которые задаёт .section-wrapper на этом же элементе. */
    .section-indents {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .section-rounding {
        border-radius: 40px;
    }

    /* Фото в блоке About.
       На десктопе это две абсолютно спозиционированные карточки внахлёст.
       Ниже 992px колонки складываются в одну, блок становится широким —
       и нижнее фото (top:50% + своя высота) вылезало далеко за min-height
       и наезжало на текст карточек. Поэтому здесь перекладываем их
       в обычную сетку, без абсолютного позиционирования. */
    .k-about__photos {
        position: static;
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 32px;
    }

    .k-about__photo {
        position: static;
        left: auto;
        top: auto;
        width: auto;
        border-width: 8px;
        border-radius: 24px;
    }

    .k-about {
        padding: 48px 0;
    }

    /* Карточки About: 24px по бокам дублируют отступы секции. Оставляем
       ровно 12px — это собственный жёлоб .row в Bootstrap, без него
       тексты соседних карточек сходятся вплотную. */
    .k-col-four {
        margin-top: 24px;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Журнал: три колонки при 768px дают слишком узкие карточки */
    #journal .row > .col {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (max-width: 767.98px) {
    #journal .row > .col {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    /* Не опускать ниже 12px: у .container ровно столько полей, и они гасят
       отрицательные margin'ы у .row. Сделаешь меньше — строка вылезет
       за экран, а section с overflow:clip обрежет её по краю. */
    .section-wrapper {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Кнопка в шапке («Войти» / «Профиль») — только иконка: подпись
       на узком экране сжимает логотип. Прячем не через display:none,
       а визуально — иначе кнопка останется без названия для скринридеров. */
    .header-cta .btn-k-primary {
        position: relative;
        padding: 9px;
        gap: 0;
    }

    .header-cta .header-cta__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        white-space: nowrap;
        clip-path: inset(50%);
    }

    .header-cta .header-account__toggle {
        gap: 6px;
        padding: 9px 12px;
    }

    /* Хлебные крошки — на всех страницах, где они есть */
    .k-crumbs {
        font-size: 12px;
    }

    .k-page-hero__title {
        font-size: 34px;
    }

    .header {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* На 375px карточка всего 343px, и полям приходится ужиматься. */
    .header .container-fluid.container-xl {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Логотип, гамбургер и кнопка в сумме шире карточки, поэтому логотип
       (единственный сжимаемый элемент) немного ужимается. Отступ 12px
       фиксирует зазор до гамбургера: auto-margin у <nav> в этот момент
       схлопывается в ноль и сам его не удержит. */
    .header .logo {
        margin-right: 12px;
    }

    .section-indents {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .section-rounding {
        border-radius: 24px;
    }

    .k-main {
        padding-bottom: 40px;
    }

    /* Фото About в одну колонку — на 375px две становятся слишком мелкими */
    .k-about__photos {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .k-about__photo {
        border-width: 6px;
        border-radius: 24px;
    }

    /* Табы форума: при семи разделах шаг 24px растягивает блок на пол-экрана */
    .k-forum-tabs {
        gap: 12px 16px;
        margin-bottom: 24px;
    }

    .k-section-head {
        margin-bottom: 24px;
    }

    .k-section-head__title {
        font-size: 24px;
    }

    /* Плашки базы знаний: 24px полей + 16px зазора + кружок стрелки
       оставляли тексту совсем узкую колонку */
    .k-kb-item {
        padding: 16px;
        gap: 12px;
    }

    .k-kb-item h4 {
        font-size: 17px;
        margin-bottom: 6px;
    }

    .k-kb-item__arrow {
        width: 28px;
        height: 28px;
    }

    .k-kb-item__arrow .k-icon {
        width: 14px;
        height: 14px;
    }

    .k-news-card,
    .k-journal-card {
        padding: 20px;
    }

    /* Картинка карточки журнала вылезает за поля отрицательными отступами —
       они должны совпадать с padding карточки, иначе появятся щели по краям */
    .k-journal-card__image {
        margin: -20px -20px 8px;
        border-radius: 24px 24px 0 0;
    }

    .k-news-card h3,
    .k-journal-card h3 {
        font-size: 18px;
    }
}

/* ==========================================================================
   Внутренние страницы (вход, профиль, контакты, услуги, 404)
   Те же отступы, карточки и кнопки, что на /pins и главной.
   ========================================================================== */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--accent-color);
    --bs-btn-border-color: var(--accent-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--k-accent-hover);
    --bs-btn-hover-border-color: var(--k-accent-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--k-accent-hover);
    --bs-btn-active-border-color: var(--k-accent-hover);
    --bs-btn-focus-shadow-rgb: 0, 134, 54;
    border-radius: 16px;
    font-family: var(--nav-font);
    font-weight: 500;
    padding: 12px 24px;
}

.btn-outline-primary {
    --bs-btn-color: var(--accent-color);
    --bs-btn-border-color: var(--accent-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--accent-color);
    --bs-btn-hover-border-color: var(--accent-color);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--k-accent-hover);
    --bs-btn-active-border-color: var(--k-accent-hover);
    --bs-btn-focus-shadow-rgb: 0, 134, 54;
    border-radius: 16px;
    font-family: var(--nav-font);
    font-weight: 500;
}

.btn-outline-secondary {
    border-radius: 16px;
    font-family: var(--nav-font);
    font-weight: 500;
}

button.btn-k-primary {
    cursor: pointer;
}

.k-card {
    background: #fff;
    border-radius: 24px;
    padding: 32px;
}

.k-card .form-control,
.profile-page .form-control,
.feedback-form .form-control,
.feedback-form .form-select {
    border-radius: 14px;
    padding: 13px 16px;
    border: 1px solid #e4e4e4;
    background: #f7f7f7;
    font-size: 15px;
    box-shadow: none;
}

.k-card .form-control:focus,
.profile-page .form-control:focus,
.feedback-form .form-control:focus,
.feedback-form .form-select:focus {
    background: #fff;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 82%);
}

.profile-albums-card {
    border-radius: 12px;
}

.profile-albums-table {
    font-family: var(--nav-font);
    font-size: 15px;
}

.profile-albums-table th,
.profile-albums-table td {
    text-align: left;
    vertical-align: middle;
}

.profile-albums-table thead th {
    font-weight: 600;
    font-size: 13px;
    color: var(--k-muted-color);
    background: #f7f7f7;
    border-bottom-color: #ececec;
}

.profile-albums-table tbody td {
    border-color: #f0f0f0;
}

.profile-albums-table__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.profile-albums-table__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--accent-color);
    border-radius: 10px;
    color: var(--accent-color);
    text-decoration: none;
    font-size: 16px;
}

.profile-albums-table__icon:hover,
.profile-albums-table__icon:focus {
    background: var(--accent-color);
    color: #fff;
}

@media (max-width: 575.98px) {
    .profile-albums-table th:nth-child(2),
    .profile-albums-table td:nth-child(2) {
        display: none;
    }

    .profile-albums-table__actions {
        gap: 6px;
    }
}

.feedback-form {
    background: #fff;
    border-radius: 24px;
    box-shadow: none;
    padding: 32px;
}

.services-landing-card,
.services-process__step {
    background: #f2f2f2;
    border: 0;
    border-radius: 24px;
}

.services-landing-card.item-cyan .services-landing-card__icon,
.services-landing-card.item-teal .services-landing-card__icon,
.services-landing-card.item-orange .services-landing-card__icon {
    color: var(--accent-color);
    background: #fff;
    border: 0;
}

.services-landing-card .btn-k-primary {
    align-self: flex-start;
}

.page-services .read-more,
.page-services .content .read-more {
    background: var(--accent-color);
    color: #fff;
    border: 2px solid var(--accent-color);
    border-radius: 16px;
    font-family: var(--nav-font);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0;
    padding: 12px 24px;
}

.page-services .read-more:hover,
.page-services .content .read-more:hover {
    background: var(--k-accent-hover);
    border-color: var(--k-accent-hover);
    color: #fff;
    padding-right: 24px;
}

.services-process {
    padding-top: 64px;
    padding-bottom: 64px;
}

.services-cta {
    padding-bottom: 0;
}

.k-error-links .k-news-card {
    background: #f2f2f2;
}

.profile-album-item-card {
    box-shadow: none !important;
    border-radius: 16px;
}

.k-card.p-0 {
    overflow: hidden;
}

.k-card.p-0 .table {
    margin-bottom: 0;
}

.form-check-input:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

@media (max-width: 575.98px) {
    .k-card,
    .feedback-form {
        padding: 20px;
    }

    .k-page-hero + .section-light {
        padding-top: 24px;
    }
}

/* ==========================================================================
   Вход и регистрация — разворот: фото + форма
   ========================================================================== */

.k-auth {
    padding: 130px 0 80px;
    background:
        radial-gradient(900px 320px at 8% 0%, rgba(0, 134, 54, 0.1), transparent 62%),
        #f2f2f2;
}

@media (min-width: 992px) {
    .k-auth {
        padding-top: 148px;
    }
}

.k-auth__grid {
    display: grid;
    grid-template-columns: 1fr;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    min-height: 0;
    box-shadow: 0 28px 80px rgba(0, 26, 10, 0.1);
}

@media (min-width: 992px) {
    .k-auth__grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        min-height: 700px;
        border-radius: 16px;
    }
}

.k-auth__visual {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 240px;
    padding: 28px 24px;
    color: #fff;
    background-color: #001a06;
}

.k-auth__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--k-auth-image);
    background-size: cover;
    background-position: center 40%;
    filter: brightness(1.12) saturate(1.04);
    z-index: -2;
}

.k-auth__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 26, 10, 0.04) 0%,
        rgba(0, 26, 10, 0.18) 48%,
        rgba(0, 26, 10, 0.58) 100%
    );
    z-index: -1;
}

@media (min-width: 992px) {
    .k-auth__visual {
        min-height: 0;
        padding: 40px 36px;
    }
}

.k-auth__eyebrow {
    font-family: var(--nav-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d7eadc;
    margin: 0 0 12px;
}

.k-auth__visual-title {
    color: #fff;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15;
    margin: 0 0 12px;
    text-align: left;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.k-auth__visual-lead {
    font-family: var(--nav-font);
    font-size: 16px;
    line-height: 1.55;
    color: #e8f3eb;
    margin: 0 0 28px;
    max-width: 36ch;
}

.k-auth__benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.k-auth__benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--nav-font);
    font-size: 14px;
    line-height: 1.35;
    color: #fff;
}

.k-auth__benefit-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.k-auth__benefit-icon img {
    width: 20px;
    height: 20px;
    display: block;
}

.k-auth__panel {
    padding: 32px 24px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 992px) {
    .k-auth__panel {
        padding: 48px 48px 48px 40px;
    }
}

.k-auth__crumbs {
    margin-bottom: 20px;
}

.k-auth__title {
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.15;
    text-align: left;
    color: var(--heading-color);
    margin: 0 0 8px;
}

.k-auth__subtitle {
    font-family: var(--nav-font);
    font-size: 16px;
    color: var(--k-muted-color);
    margin: 0 0 24px;
}

.k-auth__panel .alert {
    margin-bottom: 16px;
    border: 0;
    border-radius: 14px;
}

.k-auth__panel .vkid-one-tap:empty {
    display: none;
    margin: 0;
}

.k-auth__panel .vkid-one-tap:not(:empty) {
    margin-bottom: 20px;
}

.k-auth__panel .vkid-one-tap:not(:empty) + .k-auth__vk {
    display: none;
}

.k-auth__vk {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin-bottom: 20px;
    padding: 12px 20px;
    border-radius: 16px;
    border: 1.5px solid #e4e4e4;
    background: #fff;
    color: var(--heading-color);
    font-family: var(--nav-font);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

.k-auth__vk:hover {
    border-color: #0077ff;
    color: #0077ff;
    background: #f4f8ff;
}

.k-auth__vk svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.k-auth__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    font-family: var(--nav-font);
    font-size: 13px;
    color: var(--k-muted-color);
}

.k-auth__divider::before,
.k-auth__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #ececec;
}

.k-auth__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.k-auth__field {
    margin: 0;
}

.k-auth__field .form-label {
    font-family: var(--nav-font);
    font-weight: 600;
    font-size: 14px;
    color: var(--default-color);
    margin-bottom: 6px;
}

.k-auth__form .form-control {
    border-radius: 14px;
    padding: 13px 16px;
    border: 1px solid #e4e4e4;
    background: #f7f7f7;
    font-size: 15px;
    box-shadow: none;
}

.k-auth__form .form-control:focus {
    background: #fff;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 82%);
}

.k-auth__pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 576px) {
    .k-auth__pair {
        grid-template-columns: 1fr 1fr;
    }
}

.k-auth__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--nav-font);
    font-size: 14px;
}

.k-auth__meta a,
.k-auth__switch a {
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: none;
}

.k-auth__meta a:hover,
.k-auth__switch a:hover {
    color: var(--k-accent-hover);
    text-decoration: underline;
}

.k-auth__panel .form-check-input {
    width: 18px;
    height: 18px;
    margin-top: 0.15em;
    border-color: #cfcfcf;
}

.k-auth__consent {
    font-family: var(--nav-font);
    font-size: 13px;
    line-height: 1.45;
    color: #555;
    margin: 0;
}

.k-auth__consent a {
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: none;
}

.k-auth__consent a:hover {
    color: var(--k-accent-hover);
    text-decoration: underline;
}

.k-auth__consent-note {
    display: block;
    margin-top: 2px;
    color: var(--k-muted-color);
    font-weight: 400;
}

.k-auth__submit {
    width: 100%;
    margin-top: 4px;
}

.k-auth__switch {
    margin: 20px 0 0;
    text-align: center;
    font-family: var(--nav-font);
    font-size: 14px;
    color: #555;
}

.k-auth__note {
    font-family: var(--nav-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--k-muted-color);
    margin: 0 0 20px;
}

.k-auth__secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 12px 20px;
    border-radius: 16px;
    border: 1.5px solid #e4e4e4;
    background: #fff;
    color: var(--heading-color);
    font-family: var(--nav-font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.k-auth__secondary:hover {
    border-color: var(--heading-color);
    color: var(--heading-color);
}

.auth-verify-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-verify-actions form {
    margin: 0;
}

@media (max-width: 991.98px) {
    .k-auth__benefits {
        display: none;
    }

    .k-auth__visual-title {
        font-size: 26px;
    }

    .k-auth__visual-lead {
        margin-bottom: 0;
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .k-auth {
        padding: 118px 0 40px;
    }

    .k-auth__grid {
        border-radius: 16px;
    }

    .k-auth__panel {
        padding: 24px 18px 28px;
    }
}

/* ==========================================================================
   Контакты — каналы связи + форма
   ========================================================================== */

.k-contacts {
    padding: 130px 0 80px;
    background:
        radial-gradient(900px 320px at 8% 0%, rgba(0, 134, 54, 0.1), transparent 62%),
        #f2f2f2;
}

@media (min-width: 992px) {
    .k-contacts {
        padding-top: 148px;
    }
}

.k-contacts__intro {
    margin-bottom: 32px;
}

.k-contacts__title {
    font-size: clamp(32px, 4vw, 40px);
    line-height: 1.2;
    text-align: left;
    color: var(--heading-color);
    margin: 0 0 12px;
}

.k-contacts__lead {
    font-family: var(--nav-font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--k-muted-color);
    margin: 0;
}

@media (min-width: 768px) {
    .k-contacts__lead {
        white-space: nowrap;
    }
}

.k-contacts__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}

@media (min-width: 992px) {
    .k-contacts__grid {
        grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
        gap: 24px;
    }
}

.k-contacts__aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.k-contacts__channel {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: #fff;
    border-radius: 20px;
    text-decoration: none;
    color: var(--default-color);
    box-shadow: 0 12px 32px rgba(0, 26, 10, 0.05);
    transition: 0.2s;
}

.k-contacts__channel:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 26, 10, 0.1);
    color: var(--heading-color);
}

.k-contacts__channel-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent-color), transparent 88%);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.k-contacts__channel-icon .k-icon {
    width: 20px;
    height: 20px;
}

.k-contacts__channel-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.k-contacts__channel-label {
    font-family: var(--nav-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--k-muted-color);
}

.k-contacts__channel-value {
    font-family: var(--nav-font);
    font-size: 16px;
    font-weight: 600;
    color: var(--default-color);
    word-break: break-word;
}

.k-contacts__panel {
    background: #fff;
    border-radius: 28px;
    padding: 28px 24px 32px;
    box-shadow: 0 24px 64px rgba(0, 26, 10, 0.08);
}

@media (min-width: 992px) {
    .k-contacts__panel {
        padding: 36px 40px 40px;
    }
}

.k-contacts__panel-title {
    font-size: 24px;
    line-height: 1.2;
    text-align: left;
    color: var(--heading-color);
    margin: 0 0 6px;
}

.k-contacts__panel-lead {
    font-family: var(--nav-font);
    font-size: 15px;
    color: var(--k-muted-color);
    margin: 0 0 24px;
}

.k-contacts__panel .alert {
    margin-bottom: 16px;
    border: 0;
    border-radius: 14px;
}

.k-contacts .feedback-form {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

.k-contacts__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.k-contacts__pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 576px) {
    .k-contacts__pair {
        grid-template-columns: 1fr 1fr;
    }
}

.k-contacts__field {
    margin: 0;
}

.k-contacts__field .form-label {
    font-family: var(--nav-font);
    font-weight: 600;
    font-size: 14px;
    color: var(--default-color);
    margin-bottom: 6px;
}

.k-contacts__form .form-control {
    border-radius: 14px;
    padding: 13px 16px;
    border: 1px solid #e4e4e4;
    background: #f7f7f7;
    font-size: 15px;
    box-shadow: none;
}

.k-contacts__form textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

.k-contacts__form .form-control:focus {
    background: #fff;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 82%);
}

.k-contacts__submit {
    align-self: flex-start;
    margin-top: 4px;
}

@media (max-width: 575.98px) {
    .k-contacts {
        padding: 118px 0 40px;
    }

    .k-contacts__intro {
        margin-bottom: 24px;
    }

    .k-contacts__panel {
        padding: 24px 18px 28px;
        border-radius: 24px;
    }

    .k-contacts__channel {
        padding: 16px;
    }

    .k-contacts__submit {
        width: 100%;
    }
}

/* ---------- Политика конфиденциальности ---------- */
.k-legal {
    padding: 32px 0 80px;
}

.k-legal__article {
    max-width: 72ch;
}

.k-legal__updated {
    margin: 0 0 28px;
    font-size: 14px;
    color: var(--k-muted-color, #767676);
}

.k-legal__article h2 {
    font-size: 22px;
    line-height: 1.3;
    color: var(--heading-color);
    margin: 32px 0 12px;
}

.k-legal__article h2:first-of-type {
    margin-top: 0;
}

.k-legal__article p,
.k-legal__article li {
    font-size: 16px;
    line-height: 1.65;
    color: var(--default-color);
}

.k-legal__article ul {
    margin: 0 0 8px;
    padding-left: 1.2em;
    display: grid;
    gap: 8px;
}

.k-legal__article a {
    color: var(--accent-color);
    text-underline-offset: 2px;
}

.k-legal__article a:hover {
    color: var(--k-accent-hover);
}

.cookie-consent__text a {
    color: inherit;
    text-underline-offset: 2px;
}

.k-profile-cover-preview {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 16px;
    background: #f3f3f3;
}

.k-profile-sheet__cover,
.k-public-cover {
    height: 180px;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    background: #f3f3f3;
}

.k-public-cover {
    border-radius: 24px;
    margin-bottom: 20px;
}

.k-profile-sheet__cover img,
.k-public-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.k-profile-sheet__body--covered {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -1px;
}

.k-profile-sheet__person {
    display: flex;
    align-items: center;
    gap: 16px;
}

.k-profile-sheet__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #f7f7f7;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #ececec;
}

.k-profile-sheet__body--covered .k-profile-sheet__avatar {
    margin-top: -80px;
}

.k-profile-sheet__name {
    margin: 0;
    font-size: 28px;
    line-height: 1.3;
    text-align: left;
    color: var(--heading-color);
}

.k-profile-sheet__email {
    margin: 4px 0 0;
    color: var(--k-muted-color, #767676);
}

.k-profile-sheet__bio {
    margin: 20px 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 16px;
    line-height: 1.6;
}

.k-profile-sheet__bio--empty {
    color: var(--k-muted-color, #767676);
}

.k-profile-sheet__socials {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.k-profile-sheet__socials span {
    display: inline-block;
    min-width: 7.5em;
    color: var(--k-muted-color, #767676);
}

.k-profile-sheet__socials a {
    color: var(--accent-color);
    text-underline-offset: 2px;
}

.k-profile-sheet__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.k-public-profile {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.k-public-profile__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #f7f7f7;
}

.k-public-profile__name {
    margin: 0 0 8px;
    font-size: 28px;
    line-height: 1.3;
    text-align: left;
    color: var(--heading-color);
}

.k-public-profile__bio {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 16px;
    line-height: 1.6;
}

.k-public-profile__bio--empty {
    color: var(--k-muted-color, #767676);
}

.k-public-profile__socials {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.k-public-profile__social-label {
    display: inline-block;
    min-width: 7.5em;
    color: var(--k-muted-color, #767676);
}

.k-public-profile__socials a,
.k-public-profile__edit a {
    color: var(--accent-color);
    text-underline-offset: 2px;
}

.k-public-profile__edit {
    margin: 20px 0 0;
}

.k-profile-albums {
    margin-top: 28px;
}

.k-profile-albums .k-album-card__body {
    gap: 4px;
    padding: 12px 14px 14px;
}

.k-profile-albums .k-album-card__title {
    font-size: 15px;
}

.k-profile-albums .k-album-card__text {
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.k-profile-albums .k-album-card__meta {
    font-size: 13px;
}

.k-profile-albums .k-album-card__placeholder {
    width: 32px;
    height: 32px;
}

.k-profile-albums__title {
    font-size: 22px;
    line-height: 1.3;
    text-align: left;
    color: var(--heading-color);
    margin: 0 0 16px;
}

.k-album-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.k-album-card__cover {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: #f3f3f3;
    overflow: hidden;
}

.k-album-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.k-album-card__cover img.k-album-card__placeholder {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.k-album-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 20px 24px 24px;
}

.k-album-card:hover {
    color: inherit;
}

.k-album-card__title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: var(--heading-color);
}

.k-album-card__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--default-color);
}

.k-album-card__meta {
    margin: auto 0 0;
    font-size: 14px;
    color: var(--k-muted-color, #767676);
}

@media (max-width: 575px) {
    .k-public-profile {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .k-public-profile__name {
        text-align: center;
    }

    .k-public-profile__social-label {
        min-width: 0;
        display: block;
    }
}

/* ---------- О нас ---------- */
.k-about__intro {
    max-width: 760px;
    margin-bottom: 48px;
}

.k-about__eyebrow {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-color);
}

.k-about__title {
    margin: 0 0 12px;
    font-size: 40px;
    line-height: 1.15;
    text-align: left;
    color: var(--heading-color);
}

.k-about__lead,
.k-about__note {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: var(--default-color);
}

.k-about__heading {
    margin: 0 0 12px;
    font-size: 28px;
    line-height: 1.25;
    text-align: left;
    color: var(--heading-color);
}

.k-about__block {
    margin-top: 56px;
}

.k-about__note {
    margin-bottom: 20px;
    font-size: 16px;
    color: var(--k-muted-color, #767676);
}

.k-about-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    position: relative;
}

.k-about-flow::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: linear-gradient(#a2d0ad, #f0c98a 55%, #e7b2c4);
}

.k-about-step {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.k-about-step__mark {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #fff;
    font-size: 26px;
    line-height: 1;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 6px var(--background-color, #fff);
}

.k-about-step__card {
    border-radius: 20px;
    padding: 16px 20px 18px;
    background: var(--k-about-tint, #f4f4f4);
}

.k-about-step__index {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5d6b60;
}

.k-about-step h3,
.k-about-principle h3 {
    margin: 0 0 6px;
    font-size: 20px;
    line-height: 1.3;
    text-align: left;
    color: var(--heading-color);
}

.k-about-step p,
.k-about-principle p,
.k-about-mission p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
}

.k-about-step--mint { --k-about-tint: #e7f6eb; }
.k-about-step--sky { --k-about-tint: #e7f2fb; }
.k-about-step--sand { --k-about-tint: #fff3e0; }
.k-about-step--peach { --k-about-tint: #fdece6; }
.k-about-step--rose { --k-about-tint: #fde8f0; }
.k-about-step--lilac { --k-about-tint: #f1ecfb; }
.k-about-step--gold { --k-about-tint: #fff6d8; }

.k-about-mission {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 28px;
    border-radius: 24px;
    background: #e7f6eb;
}

.k-about-mission__emoji {
    font-size: 36px;
    line-height: 1;
}

.k-about-mission p {
    font-size: 20px;
    line-height: 1.45;
    color: var(--default-color);
}

.k-about-principles,
.k-about-contacts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.k-about-principle {
    padding: 22px 22px 24px;
    border-radius: 22px;
}

.k-about-principle > span {
    display: block;
    font-size: 28px;
    line-height: 1;
    margin-bottom: 10px;
}

.k-about-principle--mint { background: #e7f6eb; }
.k-about-principle--sky { background: #e7f2fb; }
.k-about-principle--sand { background: #fff3e0; }
.k-about-principle--peach { background: #fdece6; }

.k-about-contact {
    display: flex;
    gap: 14px;
    align-items: center;
    height: 100%;
    padding: 18px 18px;
    border-radius: 20px;
    background: var(--k-about-tint, #f7f7f7);
    color: inherit;
    text-decoration: none;
}

.k-about-contact--mint { --k-about-tint: #e7f6eb; }
.k-about-contact--sky { --k-about-tint: #e7f2fb; }
.k-about-contact--lilac { --k-about-tint: #f1ecfb; }
.k-about-contact--sand { --k-about-tint: #fff3e0; }

.k-about-contact:hover {
    filter: brightness(0.97);
    color: inherit;
}

.k-about-contact > span:first-child {
    font-size: 28px;
    line-height: 1;
}

.k-about-contact strong {
    display: block;
    margin-bottom: 2px;
    color: var(--heading-color);
}

@media (max-width: 767.98px) {
    .k-about__title {
        font-size: 32px;
    }

    .k-about-principles,
    .k-about-contacts {
        grid-template-columns: 1fr;
    }

    .k-about-mission {
        flex-direction: column;
    }
}

/* Полоска «создайте аккаунт» на странице идеи и в чужом альбоме. */
.k-join-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    flex-wrap: wrap;
    margin: 8px 0 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #e7f2fb;
}

.k-join-strip p {
    margin: 0;
    font-family: var(--nav-font);
    font-size: 15px;
    line-height: 1.45;
    color: var(--heading-color);
}

.k-join-strip__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 12px;
    background: var(--accent-color);
    color: #fff;
    text-decoration: none;
    font-family: var(--nav-font);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

.k-join-strip__btn:hover {
    background: color-mix(in srgb, var(--accent-color), black 12%);
    color: #fff;
}

.k-forum-cta {
    margin-top: 32px;
    text-align: center;
}

.k-forum-cta .btn-k-primary img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: block;
}

@media (max-width: 575.98px) {
    .k-join-strip {
        align-items: stretch;
        flex-direction: column;
    }

    .k-join-strip__btn {
        width: 100%;
    }
}