/* Purpose: Legal pages (Terms & Conditions / Privacy Policy). Ported from axl-terms.html. */

.legal-hero { padding: 150px 48px 50px; border-bottom: 1px solid var(--hair); text-align: center; }
.legal-hero .eyebrow { justify-content: center; margin-bottom: 14px; }
.legal-hero h1 { font-size: clamp(32px, 5vw, 56px); letter-spacing: -.03em; margin-bottom: 12px; }
.legal-hero .upd { color: var(--slate); font-size: 14px; }

.legal-wrap { max-width: 860px; margin: 0 auto; padding: 56px 24px 90px; }
.legal-wrap h2 { font-size: 22px; letter-spacing: -.01em; margin: 40px 0 14px; padding-top: 8px; }
.legal-wrap h2:first-of-type { margin-top: 0; }
.legal-wrap h3 { font-size: 17px; font-weight: 700; margin: 26px 0 10px; color: var(--ink); }
.legal-wrap p { color: #2b2937; font-size: 16px; line-height: 1.75; margin: 0 0 18px; }
.legal-wrap ul { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.legal-wrap ul li { position: relative; padding-left: 26px; color: #2b2937; font-size: 16px; line-height: 1.7; }
.legal-wrap ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; background: var(--grad); border-radius: 2px; transform: rotate(45deg); }
.legal-wrap a { color: var(--accent); font-weight: 500; }

.legal-toc { background: var(--mist); border: 1px solid var(--hair); border-radius: var(--r); padding: 24px 28px; margin-bottom: 40px; }
.legal-toc b { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); display: block; margin-bottom: 12px; }
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.legal-toc ol li { margin-bottom: 7px; font-size: 14.5px; }
.legal-toc a { color: var(--ink); }
.legal-toc a:hover { color: var(--accent); }

.legal-note { background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 16px 20px; border-radius: 8px; margin: 0 0 24px; font-size: 15px; color: #2b2937; }

@media (max-width: 640px) {
  .legal-toc ol { columns: 1; }
  .legal-hero { padding: 120px 16px 40px; }
  .legal-wrap { padding-left: 16px; padding-right: 16px; }
}