/* ==========================================================================
   GODZLY — STUDIO LEGAL SURFACES
   --------------------------------------------------------------------------
   Loaded by the four policy pages after legal.css. It replaces the earlier
   editorial bridge (Fraunces, cream paper, squared controls) with the studio
   system used by the public site: Manrope for headings, Inter for prose,
   warm off-white paper, a floating white navigation and emerald accents.

   Nothing here changes the documents themselves, their tables of contents,
   their anchors or the privacy controls.
   ========================================================================== */

.legal-page {
    --sl-paper: #F7F8F4;
    --sl-white: #FFFFFF;
    --sl-ink: #151B18;
    --sl-ink-soft: #39423C;
    --sl-muted: #69736D;
    --sl-forest: #064E3B;
    --sl-emerald: #087D59;
    --sl-emerald-deep: #056246;
    --sl-sage: #E6EFE9;
    --sl-line: rgba(21, 27, 24, 0.13);
    --sl-line-soft: rgba(21, 27, 24, 0.075);
    --font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    background-color: var(--sl-paper);
    background-image:
        radial-gradient(900px 480px at 92% -12%, rgba(8, 125, 89, 0.10), transparent 65%),
        radial-gradient(700px 420px at 0% 4%, rgba(8, 125, 89, 0.05), transparent 60%);
    background-repeat: no-repeat;
    color: var(--sl-ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.legal-page .legal-nav {
    position: fixed;
    inset: 0 0 auto 0;
    left: 0;
    transform: none;
    width: 100%;
    padding: 1rem clamp(1rem, 4vw, 2.5rem);
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.legal-page .legal-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1160px;
    margin-inline: auto;
    padding: 0.55rem 0.65rem 0.55rem 1.1rem;
    border: 1px solid var(--sl-line-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 40px -34px rgba(6, 37, 28, 0.55);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.legal-page .legal-nav .logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--sl-ink);
    text-decoration: none;
}

.legal-page .legal-nav .logo::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sl-emerald);
    box-shadow: 0 0 0 4px rgba(8, 125, 89, 0.10);
}

.legal-page .legal-nav .logo .neon-text {
    font-style: normal;
    font-weight: 800;
    color: var(--sl-ink);
}

.legal-page .legal-nav-links {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.legal-page .legal-nav-links a,
.legal-page .legal-nav-btn {
    padding: 0.45rem 0.7rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--sl-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease;
}

.legal-page .legal-nav-links a:hover,
.legal-page .legal-nav-btn:hover {
    color: var(--sl-ink);
    background: var(--sl-sage);
}

.legal-page .legal-nav-btn {
    margin-left: 0.35rem;
    border: 1px solid var(--sl-line);
    color: var(--sl-ink);
}

/* ── Document shell ─────────────────────────────────────────────────────── */
.legal-page .legal-main {
    max-width: 1160px;
    padding: clamp(8rem, 12vh, 9.5rem) clamp(1.15rem, 4vw, 3rem) clamp(4rem, 8vw, 6.5rem);
}

.legal-page .legal-doc {
    max-width: 880px;
    margin: 0 auto;
}

.legal-page .legal-doc-header {
    padding: 0 0 clamp(1.75rem, 3vw, 2.5rem);
    margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--sl-line);
}

.legal-page .legal-doc-header .section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sl-emerald-deep);
}

.legal-page .legal-doc-header .section-label::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sl-emerald);
}

.legal-page .legal-doc-header h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5.4vw, 4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: var(--sl-ink);
    text-wrap: balance;
}

.legal-page .legal-doc-header .legal-updated {
    margin: 1.15rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sl-muted);
}

/* ── Contents panel ─────────────────────────────────────────────────────── */
.legal-page .legal-doc .legal-toc {
    margin: 0 0 clamp(2.25rem, 4vw, 3rem);
    padding: clamp(1.15rem, 2.4vw, 1.6rem) clamp(1.15rem, 2.4vw, 1.75rem);
    border: 1px solid var(--sl-line-soft);
    border-radius: 18px;
    background: var(--sl-white);
    box-shadow: 0 20px 40px -38px rgba(6, 37, 28, 0.5);
}

.legal-page .legal-doc .legal-toc h2 {
    margin: 0 0 0.9rem;
    padding: 0;
    border: 0;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sl-muted);
}

.legal-page .legal-toc ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}

.legal-page .legal-toc li {
    counter-increment: toc;
}

.legal-page .legal-toc a {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    padding: 0.48rem 0;
    border-bottom: 1px solid var(--sl-line-soft);
    font-size: 0.84rem;
    color: var(--sl-ink-soft);
    text-decoration: none;
    transition: color 160ms ease;
}

.legal-page .legal-toc a::before {
    content: counter(toc, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    color: var(--sl-emerald);
}

.legal-page .legal-toc a:hover {
    color: var(--sl-emerald-deep);
}

/* ── Prose ──────────────────────────────────────────────────────────────── */
.legal-page .legal-doc h2 {
    margin: 2.6rem 0 0.9rem;
    padding: 0;
    border: 0;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.1vw, 1.55rem);
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1.25;
    color: var(--sl-ink);
    scroll-margin-top: 7.5rem;
}

.legal-page .legal-doc h2:first-of-type {
    margin-top: 0;
}

.legal-page .legal-doc h3 {
    margin: 1.6rem 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--sl-ink);
}

.legal-page .legal-doc p,
.legal-page .legal-doc li {
    font-size: 0.93rem;
    line-height: 1.75;
    color: #46504A;
}

.legal-page .legal-doc p {
    margin: 0 0 1rem;
}

.legal-page .legal-doc ul,
.legal-page .legal-doc ol {
    margin: 0 0 1.25rem;
    padding-left: 1.1rem;
}

.legal-page .legal-doc ul li {
    position: relative;
    margin-bottom: 0.45rem;
    list-style: none;
}

.legal-page .legal-doc ul li::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 0.72em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sl-emerald);
}

.legal-page .legal-doc strong {
    font-weight: 650;
    color: var(--sl-ink);
}

.legal-page .legal-doc a {
    color: var(--sl-emerald-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(8, 125, 89, 0.35);
}

.legal-page .legal-doc a:hover {
    color: var(--sl-forest);
    text-decoration-color: currentColor;
}

/* Related-document cards close the document; keep them in the studio card
   language rather than the old cream panels. */
.legal-page .legal-related,
.legal-page .legal-doc .legal-related {
    margin-top: 2.5rem;
    padding: 1.25rem;
    border: 1px solid var(--sl-line-soft);
    border-radius: 18px;
    background: var(--sl-white);
}

/* ── Footer — the same dark chapter as the studio site ──────────────────── */
.legal-page .glass-footer {
    margin-top: 0;
    padding: 3.25rem 0 1.5rem;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(640px 300px at 88% 0%, rgba(8, 125, 89, 0.24), transparent 70%),
        linear-gradient(180deg, #08130F 0%, #050D09 100%);
    color: rgba(238, 247, 241, 0.72);
}

.legal-page .glass-footer .footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1.5rem;
}

.legal-page .glass-footer .logo {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #F2F9F4;
    text-decoration: none;
}

.legal-page .glass-footer .logo .neon-text {
    color: #6FE3B4;
}

.legal-page .glass-footer .footer-divider {
    height: 1px;
    background: rgba(238, 247, 241, 0.13);
}

.legal-page .glass-footer .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    padding: 1.4rem 0;
}

.legal-page .glass-footer .footer-legal a,
.legal-page .glass-footer .footer-legal-btn {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.75rem;
    color: rgba(238, 247, 241, 0.6);
    text-decoration: none;
    cursor: pointer;
}

.legal-page .glass-footer .footer-legal a:hover,
.legal-page .glass-footer .footer-legal-btn:hover {
    color: #FFFFFF;
}

.legal-page .glass-footer .footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1.3rem;
    border-top: 1px solid rgba(238, 247, 241, 0.10);
}

.legal-page .glass-footer .footer-bottom p {
    margin: 0;
    font-size: 0.7rem;
    color: rgba(238, 247, 241, 0.45);
}

.legal-page .glass-footer .social-btn {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #F2F9F4;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .legal-page .legal-nav {
        padding: 0.7rem 0.75rem;
    }

    .legal-page .legal-nav-inner {
        padding: 0.5rem 0.55rem 0.5rem 0.85rem;
    }

    .legal-page .legal-nav .logo {
        font-size: 0.92rem;
    }

    .legal-page .legal-nav-links a {
        font-size: 0.72rem;
    }

    .legal-page .legal-toc ol {
        grid-template-columns: minmax(0, 1fr);
    }

    .legal-page .legal-doc-header h1 {
        font-size: clamp(2.1rem, 10vw, 2.7rem);
    }

    .legal-page .glass-footer .footer-legal {
        gap: 0.6rem 1rem;
    }
}

/* Below ~430px the pill cannot hold the wordmark and the three links on one
   line — the group used to run past the right edge and clip Privacy Settings.
   The pill wraps into two rows instead, and the document body starts lower so
   the taller header never covers the title. */
@media (max-width: 430px) {
    .legal-page .legal-nav {
        padding: 0.6rem 0.6rem 0;
    }

    .legal-page .legal-nav-inner {
        flex-wrap: wrap;
        gap: 0.3rem 0.6rem;
        padding: 0.45rem 0.5rem;
        border-radius: 22px;
    }

    .legal-page .legal-nav .logo {
        font-size: 0.86rem;
    }

    .legal-page .legal-nav-links {
        width: 100%;
        justify-content: space-between;
        gap: 0;
    }

    .legal-page .legal-nav-links a,
    .legal-page .legal-nav-btn {
        padding: 0.5rem 0.55rem;
        font-size: 0.72rem;
    }

    .legal-page .legal-nav-btn {
        margin-left: 0;
    }

    .legal-page .legal-main {
        padding-top: 9.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .legal-page *,
    .legal-page *::before,
    .legal-page *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}