/* ── Hero с блоком пробной загрузки ──────────────────────────────────────────
   Разметка героя копирует page-wav-to-text.php из темы visaver. Раскладка
   и отступ под шапкой — в audio-transcription-styles.css, размер заголовка
   (60px → 36px на ≤862) и скрытие <br> в подзаголовке на ≤862 —
   в video-transcription-styles.css. */

/* ── Search across every video you upload ─────────────────────────────────── */

.vtt-search {
    padding: 40px 0;
    /*padding: 88px 0;*/
    position: relative;
    z-index: 1;
}

.vtt-search-container {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 56px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* перебиваем .features-img из landing-styles.css: там max-width 500px и flex: 1
   под флекс-раскладку — в этой сетке скриншот из-за них выходит мельче колонки */
.vtt-search .features-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.vtt-search-title {
    font-weight: 700;
    font-size: 54px;
    line-height: 105%;
    color: var(--ink);
    margin: 0;
}

.vtt-search-desc {
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: var(--muted);
    margin-top: 18px;
}

.vtt-search-desc b {
    color: var(--ink-2);
    font-weight: 500;
}

/* ── Pay per minute, not per month ────────────────────────────────────────── */

.vtt-pricing {
    background: linear-gradient(180deg, rgba(235, 235, 250, 0) 0%, var(--lilac) 50%, rgba(235, 235, 250, 0) 100%);
    padding: 88px 0;
    position: relative;
    z-index: 1;
}

.vtt-pricing-box {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.vtt-pricing-title {
    font-weight: 700;
    font-size: 54px;
    line-height: 105%;
    color: var(--ink);
    margin: 0;
}

.vtt-pricing-desc {
    max-width: 620px;
    margin: 18px auto 36px;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: var(--muted);
}

.vtt-pricing-desc b {
    color: var(--ink-2);
    font-weight: 500;
}

.vtt-pricing-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 38px;
}

.vtt-pricing-fact {
    background: linear-gradient(180deg, #F5F5FA 0%, #FFFFFF 100%);
    border: 1px solid #EBEBF5;
    border-radius: 32px;
    padding: 24px 20px;
}

.vtt-pricing-fact-value {
    font-weight: 700;
    font-size: 32px;
    line-height: 120%;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.vtt-pricing-fact-caption {
    font-weight: 400;
    font-size: 15px;
    line-height: 140%;
    color: var(--muted);
    margin-top: 5px;
}

/* ── Search across / Pay per minute: общие брейкпоинты ─────────────────────── */

@media screen and (max-width: 1024px) {
    .vtt-search,
    .vtt-pricing {
        padding: 60px 0;
    }

    .vtt-search-container {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .vtt-search .features-img {
        max-width: 680px;
    }
}

@media screen and (max-width: 862px) {
    .vtt-search-title,
    .vtt-pricing-title {
        font-size: 36px;
    }

    .vtt-search-desc,
    .vtt-pricing-desc {
        font-size: 16px;
    }

}

@media screen and (max-width: 648px) {
    .vtt-search-container,
    .vtt-pricing-box {
        padding: 0 16px;
    }

    .vtt-pricing-facts {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin: 0 auto 34px;
    }
}

/* ── AI video transcript generator (intro) ────────────────────────────────── */

.vtt-intro {
    background: #FFFFFF;
    padding: 88px 0 0;
    position: relative;
    z-index: 1;
}

.vtt-intro-container {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 56px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.vtt-intro-title {
    font-weight: 700;
    font-size: 44px;
    line-height: 108%;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-align: left;
    margin: 0;
}

.vtt-intro-copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: var(--muted);
}

.vtt-intro-copy p {
    margin: 0;
}

.vtt-intro-copy b {
    color: var(--ink-2);
    font-weight: 500;
}

.vtt-intro-cta-line {
    font-weight: 500;
    color: var(--ink-2);
}

@media screen and (max-width: 1024px) {
    .vtt-intro {
        padding-top: 0;
    }

    .vtt-intro-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media screen and (max-width: 862px) {
    .vtt-intro-title {
        font-size: 36px;
    }

    .vtt-intro-copy {
        font-size: 16px;
    }
}

@media screen and (max-width: 648px) {
    .vtt-intro-container {
        padding: 0 16px;
    }
}