/**
 * Getting started onboarding journey
 * Token-based, no shadows, animated timeline connector.
 */

.ifinsta-start-page {
    --ifinsta-start-font-hero: 700 2rem/1.12 var(--ifinsta-font-sans);
    --ifinsta-start-font-lead: 400 0.929rem/1.6 var(--ifinsta-font-sans);
    --ifinsta-start-font-title: 600 1rem/1.35 var(--ifinsta-font-sans);
    --ifinsta-start-font-copy: 400 0.929rem/1.55 var(--ifinsta-font-sans);
    min-height: 100vh;
    color: var(--ifinsta-text);
}

.ifinsta-start-container {
    width: min(48rem, calc(100% - var(--ifinsta-space-8)));
    margin: 0 auto;
}

.ifinsta-start-hero {
    padding: var(--ifinsta-space-12) 0 var(--ifinsta-space-8);
    border-bottom: 1px solid var(--ifinsta-border-light);
    text-align: center;
}

.ifinsta-start-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 var(--ifinsta-space-4);
    border: 1px solid var(--ifinsta-primary);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-primary-alpha-08);
    color: var(--ifinsta-primary);
    font: var(--ifinsta-text-overline);
    text-transform: uppercase;
}

.ifinsta-start-hero h1 {
    margin: var(--ifinsta-space-5) 0 0;
    color: var(--ifinsta-text);
    font: var(--ifinsta-start-font-hero);
}

.ifinsta-start-hero p {
    max-width: 36rem;
    margin: var(--ifinsta-space-4) auto 0;
    color: var(--ifinsta-text-secondary);
    font: var(--ifinsta-start-font-lead);
}

.ifinsta-start-video {
    max-width: 36rem;
    margin: var(--ifinsta-space-8) auto 0;
    overflow: hidden;
    border: 1px solid var(--ifinsta-border-light);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-bg-secondary);
}

.ifinsta-start-video video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.ifinsta-start-journey {
    padding: var(--ifinsta-space-8) 0 var(--ifinsta-space-16);
}

.ifinsta-start-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ifinsta-start-timeline {
    position: relative;
    display: grid;
    gap: var(--ifinsta-space-12);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ifinsta-start-timeline::before,
.ifinsta-start-timeline::after {
    content: "";
    position: absolute;
    top: var(--ifinsta-space-5);
    bottom: var(--ifinsta-space-8);
    left: 1.5rem;
    width: 1px;
    background: var(--ifinsta-border);
}

.ifinsta-start-timeline::after {
    bottom: auto;
    height: calc(100% - var(--ifinsta-space-12));
    background: var(--ifinsta-primary);
    transform-origin: top;
    animation: ifinsta-start-line 6s ease-in-out infinite;
}

.ifinsta-start-step {
    position: relative;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--ifinsta-space-5);
}

.ifinsta-start-step__marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 2px solid var(--ifinsta-primary);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-bg);
    color: var(--ifinsta-primary);
    font: var(--ifinsta-text-label);
}

.ifinsta-start-step__content {
    display: grid;
    gap: var(--ifinsta-space-3);
}

.ifinsta-start-step__content h3 {
    margin: 0;
    color: var(--ifinsta-text);
    font: var(--ifinsta-start-font-title);
}

.ifinsta-start-step__content p {
    margin: 0;
    color: var(--ifinsta-text-secondary);
    font: var(--ifinsta-start-font-copy);
}

.ifinsta-start-tips {
    display: grid;
    gap: var(--ifinsta-space-3);
    margin-top: var(--ifinsta-space-1);
    padding: var(--ifinsta-space-4) var(--ifinsta-space-5);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-sm);
    background: var(--ifinsta-bg);
}

.ifinsta-start-tips strong {
    color: var(--ifinsta-primary);
    font: var(--ifinsta-text-overline);
    text-transform: uppercase;
}

.ifinsta-start-tips ul {
    display: grid;
    gap: var(--ifinsta-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ifinsta-start-tips li {
    position: relative;
    padding-left: var(--ifinsta-space-4);
    color: var(--ifinsta-text);
    font: var(--ifinsta-start-font-copy);
}

.ifinsta-start-tips li::before {
    content: "";
    position: absolute;
    top: 0.65em;
    left: 0;
    width: var(--ifinsta-space-1);
    height: var(--ifinsta-space-1);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-primary);
}

@keyframes ifinsta-start-line {
    0% {
        transform: scaleY(0);
    }

    55% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ifinsta-start-timeline::after {
        animation: none;
    }
}

@media (min-width: 640px) {
    .ifinsta-start-page {
        --ifinsta-start-font-hero: 700 2.5rem/1.1 var(--ifinsta-font-sans);
        --ifinsta-start-font-lead: 400 1rem/1.65 var(--ifinsta-font-sans);
        --ifinsta-start-font-title: 600 1.125rem/1.35 var(--ifinsta-font-sans);
        --ifinsta-start-font-copy: 400 1rem/1.55 var(--ifinsta-font-sans);
    }
}

@media (min-width: 1024px) {
    .ifinsta-start-page {
        --ifinsta-start-font-hero: 700 3rem/1.08 var(--ifinsta-font-sans);
    }

    .ifinsta-start-hero {
        padding-top: var(--ifinsta-space-16);
    }
}

@media (max-width: 640px) {
    .ifinsta-start-container {
        width: min(100% - var(--ifinsta-space-4), 48rem);
    }

    .ifinsta-start-video {
        margin-top: var(--ifinsta-space-6);
    }

    .ifinsta-start-timeline {
        gap: var(--ifinsta-space-8);
    }

    .ifinsta-start-step {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        gap: var(--ifinsta-space-4);
    }

    .ifinsta-start-step__marker {
        width: 2.5rem;
        height: 2.5rem;
    }

    .ifinsta-start-timeline::before,
    .ifinsta-start-timeline::after {
        left: 1.25rem;
    }

    .ifinsta-start-tips {
        padding: var(--ifinsta-space-4);
    }
}