/* Privacy and Terms, in the same world as the shop page. Shared parts come from shops.css. */
.legal { width: min(820px, 100% - 2 * var(--gutter)); margin-inline: auto; padding-bottom: 72px; }

/* The title sits on the ring, like a message on the shop page */
.legal-top { min-height: 56svh; display: grid; place-items: center; padding: 104px 0 36px; text-align: center; text-shadow: 0 1px 2px rgba(5, 6, 8, .9), 0 4px 18px rgba(5, 6, 8, .8), 0 12px 50px rgba(5, 6, 8, .85); }
.legal-top .inner { gap: 14px; }
.legal h1 { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(3.4rem, 11vw, 7.4rem); line-height: .92; letter-spacing: .005em; }
.legal .updated { margin: 0; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); }

/* The reading panel is solid, so the words never compete with the motion */
.legal-body { padding: clamp(22px, 5vw, 52px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, .14); background: #0c0d10; box-shadow: 0 40px 90px -40px #000, 0 0 70px -40px var(--hot); }
.legal-body > :first-child { margin-top: 0; }
.legal-body h2 { margin: 44px 0 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1; letter-spacing: .01em; color: var(--text); }
.legal-body h3 { margin: 26px 0 0; font-family: var(--mono); font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ember); }
.legal-body p, .legal-body li { color: var(--text-soft); font-size: 1rem; line-height: 1.65; }
.legal-body p { margin: 14px 0 0; }
.legal-body ul { margin: 12px 0 0; padding-left: 1.2em; list-style: square; }
.legal-body li + li { margin-top: 9px; }
.legal-body li::marker { color: var(--hot); }
.legal-body strong { color: var(--text); font-weight: 600; }
.legal-body a { color: var(--text); text-decoration-color: var(--ember); text-underline-offset: 3px; transition: color .25s var(--ease); }
.legal-body a:hover { color: var(--ember); }

/* Draft markers, until the review is done */
.legal-body .draft { margin: 0 0 22px; padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--ember); background: rgba(255, 138, 42, .08); color: var(--text); font-size: .94rem; }
.legal-body .todo { padding: 1px 6px; border-radius: 6px; background: rgba(255, 138, 42, .16); color: #ffc48a; font-family: var(--mono); font-size: .86em; }

/* Footer */
.legal-foot { position: relative; z-index: 10; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 18px; padding: 0 var(--gutter) 44px; font-family: var(--mono); font-size: .68rem; color: var(--text-soft); text-shadow: 0 1px 3px #000; }
.legal-foot p { width: 100%; margin: 0 0 4px; text-align: center; }
.legal-foot a { display: inline-flex; align-items: center; min-height: 28px; color: var(--text-soft); }
@media (pointer: coarse) { .legal-foot a { min-height: 44px; } }

/* Long page on a small screen: corner readouts would float over the words */
@media (max-width: 979px) { .legal-page .hud { display: none; } }
.audit .legal-top, .audit .legal-top * { color: transparent !important; text-shadow: none !important; } /* used by tests/legal_test.mjs */

/* Long reading pages scroll text under the top bar, so the bar needs a more solid backing. */
.legal-page .bar::before { inset: 0 0 -22px 0; background: linear-gradient(#08090b 72%, rgba(8, 9, 11, 0)); }