/* ============================================================
   Legal pages — shared layout
   ------------------------------------------------------------
   Used by terms.html, privacy.html, subscription-terms.html,
   ai-disclaimer.html. Keeps the long-form policy pages visually
   consistent with the rest of the TitanKoders site chrome
   (loaded via /css/base.css) while giving long bodies of text
   enough breathing room to be readable.
   ============================================================ */

.doc {
    max-width: 760px;
    margin: 60px auto 80px;
    padding: 0 24px;
}

.doc h1 {
    font-size: 2.2rem;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.doc h2 {
    font-size: 1.35rem;
    margin-top: 44px;
    letter-spacing: -0.01em;
}
.doc h3 {
    font-size: 1.05rem;
    margin-top: 28px;
    color: var(--text);
}

.doc p,
.doc li {
    color: var(--text-mute);
    line-height: 1.7;
}

.doc p + p { margin-top: 14px; }

.doc strong { color: var(--text); }

.doc ul,
.doc ol {
    padding-left: 22px;
    margin: 12px 0 18px;
}
.doc li { margin-bottom: 6px; }

.doc .meta {
    color: var(--text-dim);
    font-size: 0.88rem;
    margin-bottom: 28px;
}

/* Table of contents at the top of long pages. Compact, link-only,
   no bullets — same visual weight as the rest of the body copy. */
.doc .toc {
    list-style: none;
    padding: 18px 22px;
    margin: 22px 0 32px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}
.doc .toc li { margin-bottom: 4px; }
.doc .toc a {
    color: var(--text-mute);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.doc .toc a:hover {
    color: var(--text);
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* Tier / pricing tables. Rendered as proper <table> so they're
   readable when the page is exported to PDF for Play Console.
   Borders are subtle — the legal pages stay text-first. */
.doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 24px;
    font-size: 0.95rem;
}
.doc table th,
.doc table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.doc table th {
    color: var(--text);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.doc table td { color: var(--text-mute); }

/* Highlight callout for the "this is not legal advice" /
   "results may vary" lines. Soft amber so it reads as a
   notice, not an error. */
.doc .notice {
    margin: 22px 0;
    padding: 16px 20px;
    background: rgba(251, 208, 40, 0.07);
    border-left: 3px solid rgba(251, 208, 40, 0.6);
    border-radius: 4px;
    color: var(--text-mute);
}
.doc .notice strong { color: rgba(251, 208, 40, 0.95); }

/* ALL-CAPS limitation-of-liability blocks. Industry convention.
   Letter-spacing + reduced line-height so the wall of caps still
   reads, and a paler colour so it doesn't visually shout louder
   than the regular body copy. */
.doc .legal-caps {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: var(--text-dim);
    text-transform: uppercase;
}

/* Anchor offset so jumping from the TOC doesn't bury the heading
   under the sticky site header on mobile. */
.doc h2[id],
.doc h3[id] {
    scroll-margin-top: 72px;
}