/* ==========================================================================
   Legal pages — terms, privacy, refunds

   These get read in one of two moods: someone checking a specific clause
   before signing, or a payment processor verifying the page exists. Both
   want to find a numbered section fast, so the layout is a single narrow
   column with clear section breaks and nothing decorative in the way.

   Measure is deliberately tighter than the marketing pages. Dense legal
   prose at a wide measure is where the eye loses its place.
   ========================================================================== */

.legal-page {
    /* the site header is fixed at 115px */
    padding: 165px 1.5rem 5rem;
    background: var(--color-dark, #2F2B29);
}

.legal-wrap {
    max-width: 780px;
    margin: 0 auto;
}

.legal-title {
    font-size: clamp(2rem, 4.5vw, 2.9rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-light, #F9FBFF);
    margin: 0 0 0.5rem;
}

.legal-updated {
    font-size: 0.86rem;
    color: rgba(249, 251, 255, 0.55);
    margin: 0 0 2.6rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid rgba(249, 251, 255, 0.10);
}

.legal-h2 {
    font-size: 1.16rem;
    font-weight: 700;
    color: var(--color-light, #F9FBFF);
    margin: 2.6rem 0 0.8rem;
    scroll-margin-top: 140px;
}

.legal-p {
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(249, 251, 255, 0.72);
    margin: 0 0 0.95rem;
}

.legal-list {
    margin: 0 0 1.1rem;
    padding-left: 1.15rem;
}

.legal-list li {
    font-size: 0.98rem;
    line-height: 1.75;
    color: rgba(249, 251, 255, 0.72);
    margin-bottom: 0.4rem;
}

.legal-list li::marker { color: var(--color-orange, #F26430); }

.legal-link {
    color: #F5825A;
    text-decoration: none;
    border-bottom: 1px solid rgba(242, 100, 48, 0.35);
}
.legal-link:hover { border-bottom-color: #F26430; }

@media (max-width: 720px) {
    .legal-page { padding-top: 120px; }
    .legal-updated { margin-bottom: 2rem; }
}