.transcript-page {
    margin: 0 auto;
    max-width: 960px;
    padding: 32px 24px 64px;
}

.transcript-page__title {
    color: #171615;
    font-size: 36px;
    line-height: 1.2;
    margin: 0 0 32px;
}

.transcript-content {
    color: #333;
    font-size: 16px;
    line-height: 1.65;
}

.transcript-content > :first-child {
    margin-top: 0;
}

.transcript-content > :last-child {
    margin-bottom: 0;
}

.video-transcript {
    margin: 0;
}

.video-transcript__cue {
    border-top: 1px solid #ddd;
    display: grid;
    gap: 8px 24px;
    grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
    padding: 20px 0;
}

.video-transcript__cue:first-child {
    border-top: 0;
    padding-top: 0;
}

.video-transcript__speaker {
    color: #171615;
    font-weight: 700;
}

.video-transcript__speaker time {
    color: #666;
    display: block;
    font-size: 14px;
    font-weight: 400;
}

.video-transcript__dialogue {
    margin: 0;
}

.video-transcript__dialogue p {
    margin: 0 0 16px;
}

.video-transcript__dialogue p:last-child {
    margin-bottom: 0;
}

.video-transcript__cue--description {
    color: #666;
}

.transcript-modal-popup .modal-inner-wrap {
    max-width: 900px;
}

.transcript-modal-popup .modal-content {
    padding-bottom: 32px;
}

@media (max-width: 767px) {
    .transcript-page {
        padding: 24px 16px 48px;
    }

    .transcript-page__title {
        font-size: 28px;
        margin-bottom: 24px;
    }

    .video-transcript__cue {
        grid-template-columns: 1fr;
    }

    .video-transcript__speaker time {
        display: inline;
        margin-left: 8px;
    }
}