/* Shared layout for the standalone legal pages: terms.html, privacy.html, refunds.html */

/* Top padding clears the fixed #navbar: ~72px collapsed on desktop, ~95px on
   tablet/mobile where the nav-row is always open. */
.legal-main {
    max-width: 760px;
    margin: 0 auto;
    padding: calc(var(--spacing-3xl) + var(--spacing-xl)) var(--spacing-lg) var(--spacing-4xl);
    color: var(--silver-text);
    font-family: var(--font-sans);
    line-height: 1.7;
}

.legal-eyebrow {
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin: 0 0 var(--spacing-xs);
}

.legal-main h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(32px, 6vw, 48px);
    color: var(--light-text);
    margin: 0 0 var(--spacing-xs);
    letter-spacing: 1px;
}

.legal-updated {
    color: var(--gray-text);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--spacing-2xl);
}

.legal-main h2 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: var(--font-size-xl, 1.25rem);
    color: var(--light-text);
    margin: var(--spacing-2xl) 0 var(--spacing-sm);
}

.legal-main p,
.legal-main li {
    margin: 0 0 var(--spacing-sm);
}

.legal-main ul {
    padding-left: 1.3em;
}

.legal-main a {
    color: var(--light-text);
    text-decoration: underline;
    text-decoration-color: var(--primary-color);
}

.legal-main a:hover {
    color: var(--primary-hover);
}

.legal-nav-links {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin: var(--spacing-xl) 0 0;
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.legal-nav-links a {
    color: var(--silver-text);
    text-decoration: none;
    font-size: var(--font-size-sm);
}

.legal-nav-links a:hover {
    color: var(--light-text);
}

.legal-callout {
    background: var(--card-bg);
    border-left: 3px solid var(--primary-color);
    padding: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.legal-callout p:last-child {
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .legal-main {
        padding: calc(var(--spacing-3xl) + var(--spacing-lg)) var(--spacing-md) var(--spacing-3xl);
    }
}