/* Dashboard home reel — “Learn the system”: journey label, primary CTA, 6-step story bar, tap-to-flip, minimal nav on small screens */

body.app-dashboard-home .home-reel-journey {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #3dd68c;
}

/* Six steps: override landing walkthrough (5 slides × 20%) */
body.app-dashboard-home .marketing-reel--dashboard .reel-vid--1 .reel-demo-progress-fill {
    width: calc(100% / 6);
}
body.app-dashboard-home .marketing-reel--dashboard .reel-vid--2 .reel-demo-progress-fill {
    width: calc(200% / 6);
}
body.app-dashboard-home .marketing-reel--dashboard .reel-vid--3 .reel-demo-progress-fill {
    width: 50%;
}
body.app-dashboard-home .marketing-reel--dashboard .reel-vid--4 .reel-demo-progress-fill {
    width: calc(400% / 6);
}
body.app-dashboard-home .marketing-reel--dashboard .reel-vid--5 .reel-demo-progress-fill {
    width: calc(500% / 6);
}
body.app-dashboard-home .marketing-reel--dashboard .reel-vid--6 .reel-demo-progress-fill {
    width: 100%;
}

/* Primary CTA: one strong action per clip */
body.app-dashboard-home .marketing-reel--dashboard .reel-cta-btn.reel-cta-btn--primary {
    margin-top: 0.55rem;
    padding: 0.65rem 1.15rem;
    font-size: 0.88rem;
    font-weight: 800;
    background: #ffffff !important;
    color: #0f172a !important;
    border: none !important;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    animation: none !important;
    align-self: stretch;
    text-align: center;
}

body.app-dashboard-home .marketing-reel--dashboard .reel-cta-btn.reel-cta-btn--primary:hover {
    filter: brightness(1.05);
}

/* Tap-to-flip demo on flashcards slide */
body.app-dashboard-home .marketing-reel--dashboard .home-reel-visual--cards {
    cursor: pointer;
    perspective: 520px;
}

body.app-dashboard-home .marketing-reel--dashboard .home-reel-visual--cards:focus-visible {
    outline: 2px solid #3dd68c;
    outline-offset: 3px;
}

body.app-dashboard-home .marketing-reel--dashboard .home-reel-flip-card {
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-visual--cards.home-reel-cards--tapped .home-reel-flip-card--a,
body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-visual--cards.home-reel-cards--tapped .home-reel-flip-card--b {
    animation: none !important;
}

body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-visual--cards.home-reel-cards--tapped .home-reel-flip-card--a {
    transform: rotateY(172deg) rotate(-5deg) translateZ(0);
}

body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-visual--cards.home-reel-cards--tapped .home-reel-flip-card--b {
    transform: rotateY(172deg) rotate(7deg) translateZ(0);
}

/* Mobile-first: dots stay; arrows hide to reduce chrome */
@media (max-width: 720px) {
    body.app-dashboard-home #homeReelNav.reel-nav--minimal .reel-nav-arrow {
        display: none;
    }
    body.app-dashboard-home #homeReelNav.reel-nav--minimal {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.app-dashboard-home .marketing-reel--dashboard .home-reel-flip-card {
        transition: none;
    }
}