/* Terms and Privacy pages. Long-form prose rather than a tool UI, so this is
   deliberately narrow (a comfortable reading measure) and leans on
   styles.css for all colours/tokens -- nothing here introduces a new colour,
   it only sets reading rhythm. Shared by /terms and /privacy. */

/* These pages need their own header rule rather than borrowing .trade-header
   or .pr-header: those live in the per-tool stylesheets, which these pages
   deliberately don't load. Borrowing one silently drops the centring and the
   gradient wordmark, since the class exists in the markup but has no rules
   behind it here. Same visual result, defined where it's actually used. */
.legal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 96%;
    margin: 0 auto 8px;
    padding-top: 10px;
    text-align: center;
}
.legal-header h1 {
    /* inline-block so the gradient spans the text's own width rather than
       the full centred container -- a block element samples only the
       gradient's washed-out middle. Same fix as the other page headers. */
    display: inline-block;
    margin: 0;
    color: var(--text);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(to right, #a78bfa, #60a5fa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.light-theme .legal-header h1 {
    background: linear-gradient(to right, #7c3aed, #2563eb);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.legal-header .header-home-link { text-decoration: none; }

.legal-wrapper {
    max-width: 760px;
    margin: 0 auto;
    padding: 10px 24px 40px;
}

.legal-title-row { text-align: center; margin-bottom: 28px; }
.legal-title-row h2 {
    margin: 0 0 6px;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}
.legal-updated {
    margin: 0;
    font-size: var(--font-sm);
    color: var(--text-muted);
}

/* The "this is not legal advice / plain-English summary" callout at the top
   of each page. Same amber "read this before you rely on it" tone the site
   already uses for sample-data banners and stale-data warnings, so it reads
   as a caveat rather than as body copy. */
.legal-callout {
    background: var(--val-amber-bg);
    border: 1px solid var(--val-amber-txt);
    border-radius: var(--radius-md, 10px);
    padding: 14px 16px;
    margin-bottom: 28px;
    font-size: var(--font-sm);
    line-height: 1.6;
    color: var(--val-amber-txt);
}
.legal-callout strong { font-weight: 700; }

.legal-section { margin-bottom: 26px; }
.legal-section h3 {
    margin: 0 0 8px;
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--text);
}
.legal-section p,
.legal-section li {
    font-size: var(--font-md);
    line-height: 1.7;
    color: var(--text-muted);
}
.legal-section p { margin: 0 0 10px; }
.legal-section ul { margin: 0 0 10px; padding-left: 20px; }
.legal-section li { margin-bottom: 6px; }
.legal-section a { color: var(--primary); }
.legal-section strong { color: var(--text); font-weight: 600; }

/* Data table on the privacy page: what's collected, why, how long. A table
   because "what do you store about me" is a genuinely comparative question
   and prose buries the answer. */
.legal-table-wrap { overflow-x: auto; margin: 0 0 10px; }
.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
    min-width: 460px;
}
.legal-table th,
.legal-table td {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    color: var(--text-muted);
}
.legal-table th {
    color: var(--text);
    font-weight: 700;
    font-size: var(--font-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.legal-table td strong { color: var(--text); font-weight: 600; }

@media (max-width: 640px) {
    .legal-wrapper { padding: 6px 4px 30px; }
    .legal-title-row h2 { font-size: 1.35rem; }
}