/* lost route — legal-style error page: giant faint code watermark, eyebrow rule, lifted square button (no colors) */
.lost-route {
    overflow-x: clip;
}

.lost-route__frame {
    max-width: 72rem;
}

.lost-route__band {
    padding-inline: 1.5rem;
}

.lost-route__hero {
    min-height: 80vh;
    padding-top: 6rem;
    padding-bottom: 4rem;
}

.lost-route__code {
    font-size: clamp(12rem, 38vw, 30rem);
    letter-spacing: -0.05em;
    opacity: 0.1;
    transform: translate(10%, -12%);
}

.lost-route__lead {
    max-width: 56rem;
}

.lost-route__eyebrow,
.lost-route__btn {
    letter-spacing: 0.1em;
}

.lost-route__rule {
    width: 2rem;
    height: 2px;
}

.lost-route__title {
    font-size: clamp(3rem, 9vw, 6rem);
    line-height: 0.9;
    letter-spacing: -0.05em;
}

.lost-route__intro {
    max-width: 42rem;
    line-height: 1.625;
}

.lost-route__btn {
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: transform 200ms ease;
}

.lost-route__btn:hover {
    transform: translate(4px, -4px);
}

.lost-route__segment {
    width: 6rem;
    height: 0.25rem;
    transform: translateX(1.5rem);
}

.lost-route__bar {
    height: 0.5rem;
}

@media (min-width: 768px) {
    .lost-route__hero {
        padding-bottom: 6rem;
    }
}

@media (min-width: 1024px) {
    .lost-route__band {
        padding-inline: 4rem;
    }

    .lost-route__segment {
        transform: translateX(4rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lost-route__btn {
        transition: none;
    }

    .lost-route__btn:hover {
        transform: none;
    }
}