.route-skeleton {
    overflow-y: auto;
    padding: 0;
}

.page-skeleton-variant {
    display: none;
    width: 100%;
    min-height: 100vh;
    padding: 0 clamp(18px, 4vw, 52px) 56px;
}

.page-skeleton-variant.is-active {
    display: block;
}

.page-skeleton-nav {
    width: 100%;
    min-height: 76px;
    display: grid;
    grid-template-columns: 150px 1fr 180px;
    align-items: center;
    gap: 28px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.page-skeleton-brand {
    width: 76px;
    height: 36px;
    border-radius: 9px;
}

.page-skeleton-nav-links {
    display: flex;
    justify-content: center;
    gap: 28px;
}

.page-skeleton-nav-links .skeleton-block {
    width: 64px;
    height: 14px;
    border-radius: 999px;
}

.page-skeleton-nav-action {
    justify-self: end;
    width: 156px;
    height: 42px;
    border-radius: 10px;
}

.home-skeleton-hero {
    min-height: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.home-skeleton-kicker {
    width: 142px;
    height: 28px;
    border-radius: 999px;
}

.home-skeleton-title {
    width: min(760px, 82%);
    height: 60px;
}

.home-skeleton-title.short {
    width: min(560px, 66%);
}

.home-skeleton-copy {
    width: min(690px, 76%);
    height: 18px;
}

.home-skeleton-copy.short {
    width: min(520px, 60%);
}

.home-skeleton-actions {
    display: flex;
    gap: 14px;
    margin-top: 10px;
}

.home-skeleton-actions .skeleton-block {
    width: 180px;
    height: 48px;
    border-radius: 12px;
}

.home-skeleton-section-title {
    width: 260px;
    height: 34px;
    margin: 8px auto 28px;
}

.home-skeleton-feature-grid {
    width: min(1320px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.home-skeleton-feature-grid .skeleton-block {
    height: 190px;
    border-radius: 22px;
}

.plans-skeleton {
    position: relative;
    padding-top: 26px;
}

.plans-skeleton-close,
.auth-skeleton-close {
    position: fixed;
    top: 22px;
    right: 28px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.plans-skeleton-header {
    max-width: 760px;
    margin: 0 auto 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.plans-skeleton-kicker {
    width: 154px;
    height: 28px;
    border-radius: 999px;
}

.plans-skeleton-title {
    width: min(620px, 82vw);
    height: 38px;
}

.plans-skeleton-toggle {
    width: 220px;
    height: 46px;
    margin-top: 8px;
    border-radius: 999px;
}

.plans-skeleton-grid {
    width: min(1500px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(240px, 1fr));
    gap: 18px;
}

.plans-skeleton-card {
    min-height: 500px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 45px rgba(2, 8, 23, 0.2);
}

.plans-skeleton-card.featured {
    border: 2px solid rgba(59, 130, 246, 0.72);
    transform: translateY(-6px);
}

.plans-skeleton-card .skeleton-block,
.auth-skeleton-card .skeleton-block {
    background: linear-gradient(100deg, #e5e7eb 8%, #f3f4f6 18%, #e5e7eb 33%);
    background-size: 220% 100%;
}

.plans-skeleton-card .heading {
    width: 46%;
    height: 30px;
}

.plans-skeleton-card .price {
    width: 64%;
    height: 46px;
    margin-bottom: 16px;
}

.plans-skeleton-card .line {
    width: 100%;
    height: 14px;
}

.plans-skeleton-card .line.short {
    width: 72%;
}

.plans-skeleton-card .button {
    width: 100%;
    height: 48px;
    margin-top: auto;
    border-radius: 12px;
}

.auth-skeleton {
    min-height: 100vh;
    padding: 34px 20px;
    place-items: center;
}

.auth-skeleton.is-active {
    display: grid;
}

.auth-skeleton-card {
    width: min(610px, 100%);
    padding: 32px 40px 30px;
    border: 1px solid rgba(226, 232, 240, 0.88);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(2, 8, 23, 0.34);
}

.auth-skeleton-brand {
    width: 128px;
    height: 38px;
    margin: 0 auto 10px;
}

.auth-skeleton-subtitle {
    width: 205px;
    height: 13px;
    margin: 0 auto 34px;
}

.auth-skeleton-heading {
    width: 116px;
    height: 30px;
    margin: 0 auto 22px;
}

.auth-skeleton-social,
.auth-skeleton-input,
.auth-skeleton-submit {
    width: 100%;
    height: 50px;
    border-radius: 12px;
}

.auth-skeleton-divider {
    display: grid;
    grid-template-columns: 1fr 42px 1fr;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
}

.auth-skeleton-divider span {
    height: 1px;
    background: #e5e7eb;
}

.auth-skeleton-divider i {
    height: 10px;
}

.auth-skeleton-label {
    display: block;
    width: 74px;
    height: 12px;
    margin: 18px 0 8px;
}

.auth-skeleton-label.short {
    width: 62px;
}

.auth-skeleton-submit {
    margin-top: 20px;
}

.blog-skeleton-hero {
    width: min(1180px, 100%);
    margin: 54px auto 42px;
    padding: 36px;
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 42px;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.065);
}

.blog-skeleton-photo {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 24px;
}

.blog-skeleton-intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-skeleton-kicker {
    width: 132px;
    height: 28px;
    border-radius: 999px;
}

.blog-skeleton-title {
    width: 88%;
    height: 48px;
}

.blog-skeleton-title.short {
    width: 62%;
}

.blog-skeleton-line,
.legal-skeleton-line,
.generic-skeleton-line {
    width: 100%;
    height: 15px;
}

.blog-skeleton-line.short,
.legal-skeleton-line.short,
.generic-skeleton-line.short {
    width: 72%;
}

.blog-skeleton-button {
    width: 180px;
    height: 46px;
    margin-top: 8px;
    border-radius: 12px;
}

.blog-skeleton-article {
    width: min(980px, 100%);
    margin: 0 auto;
    padding: 38px 42px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.055);
}

.blog-skeleton-article-title {
    width: 55%;
    height: 34px;
    margin-bottom: 8px;
}

.blog-skeleton-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 18px;
}

.blog-skeleton-info-grid .skeleton-block {
    height: 128px;
    border-radius: 18px;
}

.legal-skeleton-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 42px auto 24px;
}

.legal-skeleton-tabs .skeleton-block {
    width: 150px;
    height: 38px;
    border-radius: 999px;
}

.legal-skeleton-card {
    width: min(980px, 100%);
    min-height: 620px;
    margin: 0 auto;
    padding: 46px 48px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 24px;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.045));
    box-shadow: 0 24px 70px rgba(2, 8, 23, 0.24);
}

.legal-skeleton-title {
    width: 62%;
    height: 50px;
}

.legal-skeleton-date {
    width: 156px;
    height: 13px;
    margin-bottom: 22px;
}

.legal-skeleton-heading {
    width: 34%;
    height: 25px;
    margin-top: 8px;
}

.legal-skeleton-heading.short {
    width: 26%;
}

.legal-skeleton-callout {
    width: 100%;
    height: 88px;
    margin: 8px 0 10px;
    border-radius: 12px;
}

.generic-skeleton-content {
    width: min(1100px, 100%);
    margin: 100px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.generic-skeleton-title {
    width: min(560px, 80%);
    height: 48px;
}

.generic-skeleton-line {
    width: min(680px, 86%);
}

.generic-skeleton-line.short {
    width: min(500px, 68%);
}

.generic-skeleton-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 38px;
}

.generic-skeleton-grid .skeleton-block {
    height: 210px;
    border-radius: 22px;
}

@media (max-width: 1100px) {
    .home-skeleton-feature-grid,
    .plans-skeleton-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plans-skeleton-card:nth-child(n + 3) {
        display: none;
    }
}

@media (max-width: 800px) {
    .page-skeleton-nav {
        min-height: 68px;
        grid-template-columns: 110px 1fr;
    }

    .page-skeleton-nav-links {
        display: none;
    }

    .page-skeleton-nav-action {
        width: 118px;
    }

    .blog-skeleton-hero {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
    }

    .blog-skeleton-photo {
        width: min(280px, 72vw);
        justify-self: center;
    }

    .blog-skeleton-info-grid,
    .generic-skeleton-grid {
        grid-template-columns: 1fr;
    }

    .blog-skeleton-info-grid .skeleton-block:nth-child(n + 2),
    .generic-skeleton-grid .skeleton-block:nth-child(n + 2) {
        display: none;
    }

    .legal-skeleton-card {
        padding: 32px 26px;
    }
}

@media (max-width: 560px) {
    .page-skeleton-variant {
        padding-inline: 14px;
    }

    .home-skeleton-hero {
        min-height: 450px;
    }

    .home-skeleton-title {
        width: 94%;
        height: 46px;
    }

    .home-skeleton-actions {
        width: 100%;
        flex-direction: column;
    }

    .home-skeleton-actions .skeleton-block {
        width: 100%;
    }

    .home-skeleton-feature-grid,
    .plans-skeleton-grid {
        grid-template-columns: 1fr;
    }

    .home-skeleton-feature-grid .skeleton-block:nth-child(n + 3),
    .plans-skeleton-card:nth-child(n + 2) {
        display: none;
    }

    .auth-skeleton-card {
        padding: 28px 20px 24px;
    }

    .legal-skeleton-tabs .skeleton-block {
        width: 30%;
    }

    .legal-skeleton-card {
        padding: 28px 20px;
    }

    .legal-skeleton-title {
        width: 86%;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .plans-skeleton-card.featured {
        transform: none;
    }
}