/* ============================================
   yeety - Subpages Styles (pricing, imprint, privacy, terms)
   ============================================ */

body {
    overflow: auto;
}

.page-container {
    min-height: 100dvh;
    padding: 5rem 4ch 4rem 4ch;
    max-width: 70ch;
}

h1 {
    margin-bottom: 1rem;
}

h2 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

p {
    margin-bottom: 1rem;
    max-width: 60ch;
}

ul {
    margin-left: 2ch;
    margin-bottom: 1rem;
    list-style: none;
}

ul li {
    margin-bottom: 0.5rem;
    max-width: 60ch;
}

ul li::before {
    content: "• ";
}

/* Pricing page specific */
.plans {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
}

.plan {
    border: 1px solid var(--border);
    padding: 1.5rem 2ch;
    max-width: 40ch;
}

.plan-name {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.plan-price {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.plan-features {
    list-style: none;
    margin-bottom: 1.5rem;
}

.plan-features li {
    margin-bottom: 0.5rem;
}

.plan-features li::before {
    content: "• ";
}

.plan-cta {
    display: inline-block;
    padding: 0.25rem 1ch;
    border: 1px solid var(--border);
    text-decoration: none;
    background: var(--bg);
    color: var(--text);
}

.plan-cta:hover {
    background: var(--bg75);
    color: var(--bg);
}

.plan-cta.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.plan-cta.disabled:hover {
    background: var(--bg);
    color: var(--text);
}

/* Mobile */
@media (max-width: 600px) {
    .page-container {
        padding: 2rem 2ch 4rem 2ch;
    }
}