/* ── Legal pages (giveaway rules, terms, privacy) ──
   Shared design for the long-form policy pages. Terms and privacy are also
   rendered inside the mobile app's WebView at phone width, so everything is
   single-column fluid with no fixed widths. */

/* ── Hero band ── */
.legal-hero {
    background: #f2efea;
    padding: 54px 24px 48px;
    text-align: center;
}

.legal-eyebrow {
    margin: 0 0 12px;
    font-family: var(--font-2), sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #3C6745;
}

.legal-hero h1 {
    margin: 0 auto;
    max-width: 720px;
    color: var(--col-green-0);
}

.legal-updated {
    margin: 14px 0 0;
    font-size: 0.88rem;
    color: #999;
}

/* ── Intro section (photo + welcome text on terms and privacy) ── */
.legal-intro.abt-banner {
    padding-top: 3.5rem;
    padding-bottom: 1.5rem;
}

/* ── Body column ── */
.legal-body {
    background: white;
    padding: 2rem 24px 5.5rem;
}

.legal-text {
    text-align: left;
}

.legal-text p,
.legal-text li {
    color: #555;
    line-height: 1.7;
}

/* Document-scale headings: noticeably smaller than the site's article
   headings, with a clear step down from section (h2) to subsection (h3). */
.legal-text h2 {
    font-size: 1.5rem;
    letter-spacing: 0.2px;
    padding-top: 1.8rem;
    padding-bottom: 0.4rem;
}

.legal-text h3 {
    font-family: var(--font-2), sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--col-green-1);
    padding-top: 1.5rem;
    padding-bottom: 0.2rem;
}

/* Links keep the site's classic green underline (the .article-text inset
   box-shadow); no text-decoration on top of it. */
.legal-text a {
    text-decoration: none;
}

/* The article base already colors ul markers green; give them room inside
   the column (the base ul has padding-left 0, which hangs markers outside). */
.legal-text ul {
    padding-left: 1.35rem;
}

.legal-text ul > li {
    margin-bottom: 10px;
    padding-left: 6px;
}

.legal-text ul li ul {
    margin-top: 10px;
}

/* Deep links (e.g. /terms#contact-section) must clear the sticky navbar. */
.legal-text h2[id],
.legal-text h3[id] {
    scroll-margin-top: 90px;
}

/* ── "On this page" quick links ── */
.legal-toc {
    max-width: 600px;
    margin: 0 auto 1.5rem;
    background: #f7f5f1;
    border-radius: 16px;
    padding: 24px 28px;
}

.legal-toc-title {
    margin: 0 0 10px;
    font-family: var(--font-2), sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #3C6745;
}

.legal-toc ol {
    columns: 2;
    column-gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.legal-toc li {
    margin: 5px 0;
    break-inside: avoid;
}

.legal-toc a {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
    text-decoration: none;
}

.legal-toc a:hover {
    color: #3C6745;
    text-decoration: underline;
}

/* ── Compact layout for phones and the app WebView ── */
@media only screen and (max-width: 768px) {
    .legal-hero {
        padding: 36px 20px 32px;
    }

    .legal-hero h1 {
        font-size: 2.4rem;
    }

    .legal-text h2 {
        font-size: 1.35rem;
    }

    .legal-body {
        padding: 1.5rem 20px 4rem;
    }

    .legal-toc ol {
        columns: 1;
    }
}