/* Cruze Games — legal/policy document pages (privacy, terms). Uses the same
   design tokens as the rest of the site, so these pages inherit every theme
   (including light mode) automatically instead of carrying their own. */

.legal-hero {
    padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
    text-align: center;
}

.legal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    background: var(--surface-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.9rem;
    margin-bottom: 1.1rem;
}

.legal-badge span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-cyan);
}

.legal-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 0.6rem;
}

.legal-hero-sub {
    color: var(--text-muted);
    max-width: 34rem;
    margin: 0 auto;
}

.legal-date {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.8rem;
}

.legal-content {
    max-width: 46rem;
    width: min(46rem, calc(100% - 2rem));
    margin: 0 auto;
    padding-block: 2.5rem 4.5rem;
}

.legal-toc {
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: 1.4rem;
    margin-bottom: 2.5rem;
}

.legal-toc-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 0.7rem;
}

.legal-toc ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    counter-reset: legaltoc;
}

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

.legal-toc a {
    font-size: 0.85rem;
    color: var(--accent-cyan);
}

.legal-toc a::before {
    content: counter(legaltoc) ". ";
    color: var(--text-muted);
}

.legal-section {
    margin-bottom: 2.6rem;
}

.legal-section h2 {
    font-size: 1.2rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line-soft);
    scroll-margin-top: calc(var(--nav-height) + 1rem);
}

.legal-section p,
.legal-section li {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
}

.legal-section ul,
.legal-section ol {
    padding-left: 1.4rem;
    margin-bottom: 0.6rem;
}

.legal-section strong {
    color: var(--text-primary);
}

.legal-section a {
    color: var(--accent-cyan);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-callout {
    background: var(--surface-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    margin: 1rem 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.legal-callout strong {
    color: var(--accent-cyan);
    display: block;
    margin-bottom: 0.25rem;
}

.legal-contact-icons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 1.25rem;
}