/* ==========================================================================
   Legal pages: /privacy.html and /terms.html
   ==========================================================================
   These two pages are the same page with different text, so their styling
   lives here rather than in a <style> block copied into each. The copies were
   byte-identical, which is the kind of duplication that stays identical right
   up until somebody edits one of them.

   Loaded after styles.css, which supplies the brand variables and all the
   .legal-* type styles the policy body already uses. Only the difference
   between "in a modal" and "on a page" is described below.
   ========================================================================== */

body {
    /* styles.css paints the body near-black for the marketing page. These are
       navy, matching the modal these pages replaced. */
    background: var(--brand-navy, #11294b);
    color: #fff;
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    margin: 0;
}

.legal-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 20px 72px;
}

.legal-page-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 24px;
}

/* The logo file is dark artwork. Every dark surface on the site inverts it to
   white, and these pages are one, so they do the same. */
.legal-page-nav img {
    height: 34px;
    width: auto;
    filter: brightness(0) invert(1);
}

.legal-page-back {
    color: var(--brand-yellow, #f8ee53);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.legal-page-back:hover {
    text-decoration: underline;
}

.legal-page h1 {
    font-size: 1.9rem;
    margin: 0 0 4px;
}

/* The body was written for a modal, which scrolls inside itself against a
   fixed height. On a page the document scrolls, so those are released. */
.legal-modal-body.compact-body {
    max-height: none;
    overflow: visible;
    padding: 0;
}

.legal-page-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 48px;
    padding-top: 20px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    opacity: 0.75;
}

.legal-page-footer a {
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}