/* ==========================================================================
   vm-legal.css — terms.php and privacy.php
   Same paper / ink / brass palette and type as login.php, as a single
   readable column.
   ========================================================================== */
:root {
    --paper:       #FBF9F5;
    --ink-900:     #16232E;
    --ink-700:     #24384A;
    --ink-500:     #5B6B78;
    --ink-300:     #9AA6AC;
    --line:        #E4DFD3;
    --brass:       #B4884A;
    --brass-deep:  #8A6530;
    --f-display: 'Source Serif 4', 'IBM Plex Sans', serif;
    --f-body: 'IBM Plex Sans', sans-serif;
    --f-cond: 'IBM Plex Sans Condensed', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background: var(--paper);
    color: var(--ink-700);
    font-family: var(--f-body);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.legal { max-width: 680px; margin: 0 auto; padding: 48px 16px 64px; }

.brand { margin-bottom: 40px; }
.brand .mark {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 22px;
    color: var(--ink-900);
    text-decoration: none;
}
.brand .mark sup { font-size: 10px; color: var(--brass-deep); }

.legal h1 {
    font-family: var(--f-display);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink-900);
}
.legal .updated {
    display: inline-block;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 2px solid var(--brass);
    font-family: var(--f-cond);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-300);
}
.legal .intro { margin: 24px 0 8px; font-size: 16px; color: var(--ink-700); }

.legal h2 {
    margin: 32px 0 8px;
    font-family: var(--f-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--ink-900);
}
.legal p { margin-bottom: 10px; }
.legal ul { margin: 0 0 10px 20px; }
.legal li { margin-bottom: 4px; }
.legal a { color: var(--brass-deep); text-underline-offset: 2px; }
.legal a:hover { color: var(--ink-900); }

.legal-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-family: var(--f-cond);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.legal-foot a { color: var(--ink-500); text-decoration: none; }
.legal-foot a:hover { color: var(--brass-deep); }

@media (max-width: 480px) {
    .legal { padding-top: 32px; }
    .legal h1 { font-size: 27px; }
}