/* ============================================================
   LEGAL — privacy & terms. Quiet, classy, editorial.
   Fraunces headings, ~65ch measure, unhurried rhythm.
   ============================================================ */

.legal-page {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 80% 50% at 10% -10%, rgba(62, 122, 84, 0.1), transparent 55%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(224, 134, 47, 0.05), transparent 55%),
        linear-gradient(180deg, var(--cream-100) 0%, var(--cream-50) 40%, var(--cream-100) 100%);
    color: var(--color-text);
}

/* --- Header --- */
.legal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 780px;
    margin: 0 auto;
    padding: 24px 24px 8px;
}

.legal-brand {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 680;
    letter-spacing: -0.02em;
    color: var(--green-800);
    text-decoration: none;
}

.legal-brand:hover {
    color: var(--green-700);
    text-decoration: none;
}

.legal-nav {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.legal-nav a {
    position: relative;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    padding-bottom: 2px;
    transition: color var(--duration-fast) ease;
}

.legal-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--green-600);
    transition: right var(--duration-base) var(--ease-out);
}

.legal-nav a:hover,
.legal-nav a[aria-current="page"] {
    color: var(--green-700);
    text-decoration: none;
}

.legal-nav a:hover::after,
.legal-nav a[aria-current="page"]::after {
    right: 0;
}

/* --- Article --- */
.legal-main {
    max-width: 780px;
    margin: 0 auto;
    padding: 36px 24px 72px;
    animation: rise-in 0.5s var(--ease-out) both;
}

.legal-main h1 {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 5vw, 2.9rem);
    font-weight: 620;
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin-bottom: 12px;
    max-width: 20ch;
}

/* Last-updated as a field-note stamp */
.legal-updated {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brown-500);
    border: 1.5px dashed var(--cream-300);
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 36px;
    background: var(--cream-50);
}

/* Section headings carry a small route pin */
.legal-main h2 {
    position: relative;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 640;
    letter-spacing: -0.012em;
    margin: 44px 0 12px;
    padding-left: 20px;
    max-width: 30ch;
}

.legal-main h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sun-500);
    box-shadow: 0 0 0 3px var(--sun-100);
}

.legal-main p,
.legal-main li {
    font-size: 1.02rem;
    line-height: 1.72;
    color: var(--brown-700);
    max-width: 65ch;
}

.legal-main p + p {
    margin-top: 12px;
}

.legal-main strong {
    color: var(--brown-900);
    font-weight: 700;
}

.legal-main ul {
    padding-left: 1.3rem;
    margin: 12px 0 18px;
    display: grid;
    gap: 9px;
}

.legal-main li::marker {
    color: var(--green-600);
}

.legal-main a {
    color: var(--green-700);
    text-decoration: underline;
    text-decoration-color: var(--green-200);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--duration-fast) ease;
}

.legal-main a:hover {
    text-decoration-color: var(--green-600);
}

/* --- Footer --- */
.legal-footer {
    max-width: 780px;
    margin: 0 auto;
    padding: 24px 24px 44px;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    border-top: 1px dashed var(--cream-300);
}

.legal-footer a {
    color: var(--green-700);
}

/* --- Responsive --- */
@media (max-width: 600px) {
    .legal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 18px 18px 0;
    }

    .legal-main {
        padding: 26px 18px 56px;
    }

    .legal-main h2 {
        margin-top: 36px;
    }

    .legal-footer {
        padding: 20px 18px 40px;
    }
}