/* Legal / policy pages (privacy policy).
   Long-form prose using the site's type scale and container width, so these
   pages sit inside the design system rather than looking like a bare document. */

.legal-hero__inner {
    max-width: var(--w-page);
    margin: 0 auto;
    padding: 3rem 2rem 1rem;
}

.legal-hero__title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extra-bold);
    line-height: var(--line-height-tight);
    margin: 0;
}

.legal-body__inner {
    max-width: var(--w-page);
    margin: 0 auto;
    padding: 0 2rem 3.5rem;
}

/* Measure-limited so long policy text stays readable on wide screens */
.legal-body__inner > * {
    max-width: 68ch;
}

.legal-body h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin: 2.25rem 0 0.75rem;
}

.legal-body h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin: 1.5rem 0 0.5rem;
}

.legal-body p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    margin: 0 0 1rem;
}

.legal-body ul {
    margin: 0 0 1.25rem;
    padding-left: 1.35rem;
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}

.legal-body li {
    margin-bottom: 0.4rem;
}

.legal-body a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-body a:hover {
    text-decoration-thickness: 2px;
}

/* Cookie-settings action, matched to the .route-tips panel treatment */
.legal-callout {
    margin: 1.75rem 0 2rem;
    padding: 1.5rem;
    background: rgba(23, 114, 75, 0.05);
    border: 1px solid rgba(23, 114, 75, 0.16);
    border-radius: var(--radius);
}

.legal-callout .btn-trail {
    /* <button> does not inherit the anchor styling the class was written for */
    font: inherit;
    cursor: pointer;
}

.legal-updated {
    margin-top: 2.5rem;
    font-size: var(--font-size-sm);
    color: #888;
}

@media (max-width: 768px) {
    .legal-hero__inner { padding: 1.75rem 1.25rem 0.75rem; }
    .legal-hero__title { font-size: var(--font-size-2xl); }
    .legal-body__inner { padding: 0 1.25rem 2rem; }
}