.services {
    position: relative;
    border-bottom: 1px solid var(--border);
    transition: background-color var(--transition-speed);
}

.services .background {
    background: linear-gradient(to bottom, rgb(var(--white)), var(--palette-muted-50));
}

.services .background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, var(--palette-muted-900), var(--palette-muted-800));
    opacity: 0;
    transition: opacity var(--transition-speed);
}

[data-theme="dark"] .services .background::after {
    opacity: 1;
}

.services .content {
    position: relative;
}

.services .cards {
    width: 100%;
}

.services .card .card-icon {
    margin-bottom: 1rem;
}

.services .card .card-title {
    color: var(--content-primary);
    font-weight: 600;
    transition: color var(--transition-speed);
}

.services .card .icon-link {
    width: max-content;
    margin-left: auto;
    margin-top: auto;
}

.monthly-plan {
    position: relative;
}

.monthly-plan::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid var(--border);
}

.monthly-plan .background {
    background: linear-gradient(to bottom, #fff, var(--palette-primary-50));
}

.monthly-plan .background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, var(--palette-muted-900), rgb(15, 25, 38));
    opacity: 0;
    transition: opacity var(--transition-speed);
}

[data-theme="dark"] .monthly-plan .background::before {
    opacity: 1;
}

.monthly-plan .content {
    position: relative;
}

.monthly-plan .cards {
    list-style-type: none;
}

.monthly-plan .card .card-icon {
    margin-bottom: 1rem;
}

.monthly-plan .card .card-title {
    color: var(--content-primary);
    font-weight: 600;
    transition: color var(--transition-speed);
}

@media screen and (min-width: 1000px) {
    .monthly-plan {
        padding-top: 0;
        padding-bottom: 0;
    }

    .monthly-plan .background {
        right: 50vw;
        background: linear-gradient(to top right, #fff, var(--palette-primary-50));
    }

    .monthly-plan .background::before {
        background: linear-gradient(to top right, var(--palette-muted-900), rgb(15, 25, 38));
    }

    .monthly-plan .content {
        gap: 0;
    }

    .monthly-plan .copy-container {
        padding-left: 4rem;
        order: 2;
    }

    .monthly-plan .list-container {
        padding-right: 4rem;
    }

    .monthly-plan .gutter {
        position: sticky;
        top: var(--scroll-header-height);
        padding: var(--section-padding) 0;
    }

    .monthly-plan .cards {
        padding: var(--section-padding) 0;
    }

    .monthly-plan .card {
        position: sticky;
        top: calc(var(--scroll-header-height) + var(--section-padding));
        border-color: rgb(204,205,206);
    }

    .monthly-plan .card::after {
        box-shadow: 0 1px 1px 0 rgb(204,205,206);
    }

    [data-theme="dark"] .monthly-plan .card {
        border-color: rgb(45,47,49);
    }

    [data-theme="dark"] .monthly-plan .card::after {
        box-shadow: 0 1px 1px 0 rgb(45,47,49);
    }
}

.about {
    background-color: var(--background-secondary);
    border-bottom: 1px solid var(--border);
    transition: background-color var(--transition-speed), border var(--transition-speed);
}

.about .quote {
    padding: 3rem 2rem;
}

.about .quote-icon {
    height: 2rem;
    width: 3rem;
    fill: var(--accent);
    transform: rotateY(180deg) rotateX(180deg);
    transition: fill var(--transition-speed);
}

.about .quote footer {
    position: relative;
    font-size: .875em;
    line-height: 1.375em;
    color: var(--content-secondary);
    transition: color var(--transition-speed);
}

.about .quote footer b {
    display: block;
    font-weight: 600;
}

.about .quote .avatar {
    width: 3.5rem;
    height: 3.5rem;
    padding: 0.25rem;
    border-radius: 1.75rem;
    object-fit: cover;
    object-position: center center;
    background-color: rgb(var(--primary), 0.333);
    border: 1px solid var(--accent);
}

.pricing {
    border-bottom: 1px solid var(--border);
    transition: border var(--transition-speed);
}


.pricing .cards {
    list-style-type: none;
}

.pricing .card {
    position: relative;
    padding: 3rem 2rem;
}

.pricing .card > * {
    position: relative;
}

.pricing .shine {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
}

.pricing .shine::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 600%;
    opacity: 1;
    background: linear-gradient(60deg, transparent 40%, white 50%, transparent 60%);
    animation: shine 8s forwards linear infinite 1ms;
}

[data-theme="dark"] .pricing .shine::before {
    opacity: 0.1;
    background: linear-gradient(60deg, transparent 40%, var(--accent) 50%, transparent 60%);
  
}

@keyframes shine {
    0% {
        transform: translateX(0%);
    }

    20% {
        transform:  translateX(-100%);
    }

    100% {
        transform:  translateX(-100%);
    }
}

.pricing .card .head {
    margin-bottom: 2rem;
}

.pricing .card .head > h3 {
    font-weight: 600;
    margin: 0;
}

.pricing .price {
    margin-bottom: 1rem;
}

.pricing .divider {
    width: 100%;
    height: 1px;
    margin: 2rem 0;
    background-color: var(--border);
    transition: background-color var(--transition-speed);
}

.pricing .card .list {
    list-style-type: none;
    margin: 0;
}

.pricing .card .list .list-item {
    display: flex;
    gap: .5em;
    margin: .5em 0;
}

.pricing .card .list .list-item:first-child,
.pricing .card .list .list-item:last-child {
    margin: 0;
}

.pricing .card .list .list-item svg {
    color: var(--accent);
    width: 24px;
    height: 24px;
    min-width: 24px;
    max-width: 24px;
}

.blog {
    position: relative;
}

.blog .background {
    background: linear-gradient(to bottom, var(--palette-muted-50), rgb(var(--white)));
}

.blog .background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, var(--palette-muted-800), var(--palette-muted-900));
    opacity: 0;
    transition: opacity var(--transition-speed);
}

[data-theme="dark"] .blog .background::after {
    opacity: 1;
}

.blog .content {
    position: relative;
}

.post-card .categories {
    margin: 0;
    flex-wrap: wrap;
    order: -1;
}

.post-card .category {
    padding: .375rem 0.5rem;
    line-height: 1;
    background-color: rgb(var(--primary), 0.1);
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 999px;
}

.post-card h3 {
    color: var(--content-primary);
    font-weight: 600;
    transition: color var(--transition-speed);
    margin: 0;
}

.post-card p {
    margin: 0;
}

.post-card .meta {
    margin-top: auto;
}

.post-card .icon-link {
    padding: 0;
    padding-right: 2rem;
}

.blog .section-cta .icon-link {
    padding: 0;
    padding-right: 2rem;
}

.blog .section-cta p {
    display: none;
}

@media screen and (min-width: 1000px) {
    .blog .featured-posts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .blog .featured-posts .post-card:nth-child(1) {
        grid-column: span 2;
    }

    .blog .featured-posts .post-card p {
        display: none;
    }

    .blog .featured-posts .post-card:nth-child(1) p {
        display: block;
    }

    .blog .section-cta {
        padding: 2rem;
    }

    .blog .section-cta p {
        display: block;
    }
}