/* ==========================================================================
   /privacy-policy, /terms, /cookie-policy — page styles (Privacy.dc.html,
   Terms.dc.html). Loaded via $pageCss = 'legal' from PageController::policy.
   ========================================================================== */

/* ---------- Hero ---------- */
.legal-kicker { font-weight: 700; font-size: 16px; }
.legal-h1 {
    font-family: var(--f-display); font-weight: 800;
    font-size: clamp(44px, 6.5vw, 88px); line-height: .95; letter-spacing: -.03em;
}
.legal-intro { font-size: 20px; line-height: 1.55; max-width: 640px; text-wrap: pretty; }
.legal-intro > * + * { margin-top: .6em; }
.legal-intro a { text-decoration: underline; font-weight: 700; }

/* The stacked-paper illustration (data-legal-art). Hidden under 1100px by
   .hide-below-1100. Beats `.hero__panel > :not(.blob)` on purpose. */
.hero__panel > .legal-art {
    position: absolute; right: clamp(40px, 7vw, 120px); top: 50%;
    width: 200px; height: 240px;
    transform: translateY(-50%) rotate(6deg);
}
.legal-art__sheet { position: absolute; inset: 0; border: 3px solid var(--c-ink); border-radius: 18px; }
.legal-art__sheet--back { background: var(--c-pink-tint); transform: rotate(-12deg) translate(-18px, 8px); }
.legal-art__sheet--mid  { background: var(--c-yellow-tint); transform: rotate(-5deg) translate(-8px, 4px); }
.legal-art__sheet--front {
    background: var(--c-white); padding: 24px 22px;
    display: flex; flex-direction: column; gap: 12px;
}
.legal-art__line { height: 8px; border-radius: 4px; background: var(--c-ink); opacity: .25; }
.legal-art__line--dark { opacity: 1; }
.legal-art__line--100 { width: 100%; }
.legal-art__line--90  { width: 90%; }
.legal-art__line--80  { width: 80%; }
.legal-art__line--64  { width: 64%; }
.legal-art__line--48  { width: 48%; }
.legal-art__seal {
    position: absolute; right: -22px; bottom: -18px; width: 84px; height: 84px; border-radius: 50%;
    background: var(--c-pink); border: 3px solid var(--c-ink);
    display: flex; align-items: center; justify-content: center;
    transform: rotate(-14deg);
}
.legal-art__seal svg { display: block; }
.legal-art__pencil {
    position: absolute; left: -40px; bottom: 30px; width: 120px; height: 18px;
    background: var(--c-yellow); border: 3px solid var(--c-ink); border-radius: 4px 10px 10px 4px;
    transform: rotate(-38deg);
}
.legal-art__tip {
    position: absolute; left: -14px; top: -3px; width: 0; height: 0;
    border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 14px solid var(--c-ink);
}

/* ---------- Sidebar + copy ---------- */
.legal {
    padding: 56px var(--gutter) 0;
    display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start;
}

.legal-toc {
    flex: 1 1 240px; max-width: 340px;
    position: sticky; top: 24px;
    background: var(--c-lilac-tint); border-radius: var(--r-card); padding: 20px;
    display: flex; flex-direction: column; gap: 2px;
}
.legal-toc__title { font-weight: 700; font-size: 13px; color: var(--c-pink-text); padding: 6px 12px; }
.legal-toc__link { padding: 8px 12px; border-radius: 14px; font-weight: 600; font-size: 15px; }
.legal-toc__link:hover { background: var(--c-cream); color: var(--c-ink); }
.legal-toc__next {
    margin-top: 8px; border-top: 2px solid var(--c-cream);
    padding: 12px 12px 4px; font-weight: 700; font-size: 15px;
}
.legal-toc__title + .legal-toc__next, .legal-toc__next:first-child { margin-top: 0; border-top: 0; }

/* Once the sidebar wraps above the copy, sticking would slide it over the text. */
@media (max-width: 860px) {
    .legal-toc { position: static; max-width: none; }
}

.legal-body {
    flex: 999 1 480px; min-width: 0; max-width: 760px;
    display: flex; flex-direction: column; gap: 16px;
}
.legal-body > * { margin: 0; }
.legal-body h2 {
    margin-top: 24px;
    font-family: var(--f-display); font-weight: 800;
    font-size: clamp(28px, 3vw, 36px); line-height: 1.1; letter-spacing: -.02em;
    scroll-margin-top: 24px;
}
.legal-body h3 { margin-top: 8px; font-family: var(--f-display); font-weight: 800; font-size: 22px; line-height: 1.2; }
.legal-body p { font-size: 18px; line-height: 1.7; text-wrap: pretty; overflow-wrap: break-word; }
.legal-body ul, .legal-body ol {
    padding-left: 22px; display: flex; flex-direction: column; gap: 8px;
    font-size: 18px; line-height: 1.6;
}
.legal-body a { font-weight: 700; text-decoration: underline; }
.legal-body strong { font-weight: 700; }
.legal-body blockquote {
    background: var(--c-yellow-tint); border-radius: 24px 24px 24px 6px; padding: 18px 22px;
    font-size: 17px; line-height: 1.55;
}

.legal-ask {
    margin-top: 24px;
    background: var(--c-pink-tint); border-radius: 24px 24px 24px 6px; padding: 22px 24px;
    font-size: 17px; line-height: 1.55; overflow-wrap: break-word;
}