.directions-group {
    position: relative;
    /* line-height: 1.75em; */
}

.custom-breakpoint-tutorial {
    position: absolute;
    top: calc(100% + 0.9rem);
    left: 50%;
    z-index: 20;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px) scaleY(0.9);
    transform-origin: top center;
    transition: none;
}

.custom-breakpoint-tutorial.open {
    opacity: 1;
    max-height: 4rem;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scaleY(1);

    /* Delay produceds by ease 2s */
    transition: opacity 1s ease 2s, transform 1s ease 2s, max-height 1s ease 2s;
}

.watch-learn-button {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(0.85rem, 2.6vw, 1rem);
    font-weight: 700
    ;
    color: #2d1a00;
    background: linear-gradient(180deg, #ffe58f 0%, #ffd162 100%);
    border: 2px solid #8a5a00;
    
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    box-shadow: 0 8px 18px rgba(58, 36, 0, 0.22);
    
    cursor: pointer;
    white-space: nowrap;
}

.watch-learn-button:hover {
    filter: brightness(1.03);
}

.tutorial-video-dialog {
    width: min(90vw, 58rem);
    border: 0;
    border-radius: 0.9rem;
    padding: 0.85rem;
    background: #111;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
    left: 50%;
    transform: translateX(-50%);
}

.tutorial-video-dialog::backdrop {
    background: rgba(0, 0, 0, 0.7);
}

#tutorial-video-player {
    width: 100%;
    max-height: 78vh;
    display: block;
    border-radius: 0.5rem;
    background: #000;
}

.close-tutorial-video {
    display: inline-block;
    margin: 0 0 0.5rem auto;
    padding: 0.3rem 0.7rem;
    border-radius: 0.45rem;
    border: 1px solid #ccc;
    background: #eee;
    color: #111;
    cursor: pointer;
}