/* =====================================================
   FixAmNow | Legal pages (Privacy Policy, Terms)
   Scoped under .legal so nothing leaks into other pages.
   Mobile-first. Reusable for the Terms page: same classes.
   ===================================================== */

.legal {
    --fx-green-900: #0B3D2E;
    --fx-green-800: #0F4F3B;
    --fx-green-700: #14664D;
    --fx-accent: #F2B705;
    --fx-ink: #1B2420;
    --soft: #F6F8F7;
    --line: #e0e8e4;
    --muted: #5a6761;
    --body: #33413b;
    --mint: #E3F1EA;
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--body);
    overflow-x: clip;
}

.legal h1, .legal h2, .legal h3 {
    font-family: "Space Grotesk", "DM Sans", system-ui, sans-serif;
    color: var(--fx-green-900);
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.legal p { text-wrap: pretty; }
.legal strong { color: var(--fx-green-900); }
.legal a { color: var(--fx-green-800); }

/* Placeholders the owner still has to fill in */
.legal .ph { background: #FFF3CD; padding: 0.05rem 0.35rem; border-radius: 0.3rem; font-weight: 600; }

/* ---------- Hero ---------- */
.legal-hero {
    position: relative; overflow: hidden;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.25rem, 5vw, 3.5rem);
    background: radial-gradient(44rem 20rem at 0% 0%, var(--mint) 0%, transparent 62%), var(--soft);
    border-bottom: 1px solid var(--line);
}
.legal-kicker {
    display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.1rem;
    background: var(--mint); color: var(--fx-green-800); font-weight: 600; font-size: 0.9rem;
    padding: 0.4rem 1rem; border-radius: 999px;
}
.legal-hero h1 { font-size: clamp(2rem, 5.5vw, 3.2rem); font-weight: 700; line-height: 1.08; margin-bottom: 0.9rem; max-width: 20ch; }
.legal-hero .lead { color: #4d5b55; font-size: clamp(1rem, 1.7vw, 1.15rem); line-height: 1.7; max-width: 44rem; margin: 0; }
.legal-hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.legal-btn {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.55rem 1.1rem;
    background: #fff; color: var(--fx-green-900); font: inherit; font-weight: 600; font-size: 0.95rem;
    border: 1px solid var(--fx-green-900); border-radius: 0.75rem; cursor: pointer; text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.legal-btn:hover, .legal-btn:focus-visible { background: var(--fx-green-900); color: #fff; }

/* ---------- Page layout ---------- */
.legal-wrap { padding-block: clamp(1.75rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }
.legal-layout { display: grid; gap: 1.5rem; }
@media (min-width: 992px) {
    .legal-layout { grid-template-columns: 17rem minmax(0, 1fr); gap: 3.5rem; align-items: start; }
}

/* ---------- Table of contents ---------- */
.toc {
    background: #fff; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden;
}
.toc summary {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.95rem 1.1rem; cursor: pointer; list-style: none;
    font-family: "Space Grotesk", sans-serif; font-weight: 700; color: var(--fx-green-900);
    min-height: 3rem;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary .chev { transition: transform 0.2s ease; color: var(--fx-green-800); }
.toc[open] summary .chev { transform: rotate(180deg); }
.toc ol { list-style: none; margin: 0; padding: 0 0.6rem 0.8rem; display: grid; gap: 0.1rem; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
    display: flex; gap: 0.6rem; align-items: baseline; padding: 0.5rem 0.6rem; border-radius: 0.6rem;
    color: var(--muted); text-decoration: none; font-size: 0.95rem; line-height: 1.35;
    border-left: 3px solid transparent;
}
.toc a::before { content: counter(toc) "."; flex: none; min-width: 1.4rem; font-weight: 700; color: var(--fx-accent); }
.toc a:hover { background: var(--soft); color: var(--fx-green-900); }
.toc a.is-current { background: var(--mint); color: var(--fx-green-900); font-weight: 600; border-left-color: var(--fx-green-800); }

@media (min-width: 992px) {
    .toc { position: sticky; top: 6rem; max-height: calc(100vh - 7.5rem); overflow-y: auto; }
    .toc summary { pointer-events: none; cursor: default; }
    .toc summary .chev { display: none; }
}

/* ---------- Short-version card ---------- */
.short-version {
    background: var(--mint); border: 1px solid #cfe4d9; border-radius: 1.25rem;
    padding: clamp(1.25rem, 4vw, 2.25rem); margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.short-version h2 { font-size: 1.25rem; margin: 0 0 1rem; display: flex; align-items: center; gap: 0.5rem; }
.short-version h2 i { color: #C99700; }
.short-version ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.short-version li { display: flex; gap: 0.65rem; line-height: 1.6; color: #24312b; }
.short-version li i { flex: none; margin-top: 0.2rem; color: var(--fx-green-800); }

/* ---------- Body ---------- */
.legal-body { min-width: 0; max-width: 50rem; }
.legal-section { scroll-margin-top: 6rem; padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.legal-section:first-of-type { padding-top: 0; }
.legal-section + .legal-section { border-top: 1px solid var(--line); }
.legal-section h2 {
    font-size: clamp(1.25rem, 2.6vw, 1.5rem); line-height: 1.25; margin: 0 0 0.9rem;
    display: flex; gap: 0.75rem; align-items: center;
}
.sec-num {
    flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--fx-green-900); color: var(--fx-accent); font-size: 0.95rem; font-weight: 700;
}
.legal-section h3 { font-size: 1.05rem; margin: 1.5rem 0 0.4rem; }
.legal-section p { line-height: 1.8; margin-bottom: 1rem; font-size: clamp(1rem, 1.4vw, 1.05rem); }
.legal-section ul { line-height: 1.75; padding-left: 1.3rem; margin-bottom: 1rem; display: grid; gap: 0.45rem; }
.legal-section li::marker { color: var(--fx-green-800); }
.legal-section p:last-child, .legal-section ul:last-child { margin-bottom: 0; }

/* ---------- Who-sees-what table (becomes cards on phones) ---------- */
.who-table { width: 100%; border-collapse: collapse; margin: 1.1rem 0 1.4rem; font-size: 0.97rem; }
.who-table th {
    text-align: left; background: var(--fx-green-900); color: #fff;
    padding: 0.75rem 0.95rem; font-family: "Space Grotesk", sans-serif; font-size: 0.88rem; letter-spacing: 0.02em;
}
.who-table th:first-child { border-top-left-radius: 0.75rem; }
.who-table th:last-child { border-top-right-radius: 0.75rem; }
.who-table td { padding: 0.8rem 0.95rem; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.55; }
.who-table tbody tr:nth-child(even) td { background: var(--soft); }
.who-table td:first-child { font-weight: 600; color: var(--fx-green-900); }

@media (max-width: 767.98px) {
    .who-table, .who-table tbody, .who-table tr, .who-table td { display: block; width: 100%; }
    .who-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .who-table tr {
        margin-bottom: 0.9rem; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; background: #fff;
    }
    .who-table td { border-bottom: 1px solid var(--line); padding: 0.7rem 1rem; }
    .who-table td:last-child { border-bottom: 0; }
    .who-table td::before {
        content: attr(data-label); display: block; margin-bottom: 0.15rem;
        font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fx-green-700);
    }
    .who-table td:first-child { background: var(--mint); font-size: 1.02rem; }
    .who-table tbody tr:nth-child(even) td { background: #fff; }
    .who-table tbody tr:nth-child(even) td:first-child { background: var(--mint); }
}

/* ---------- Contact card ---------- */
.contact-card {
    background: var(--soft); border: 1px solid var(--line); border-radius: 1.25rem;
    padding: clamp(1.25rem, 3vw, 1.75rem); margin-top: 1.25rem;
}
.contact-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
.contact-card li { display: flex; gap: 0.75rem; align-items: flex-start; line-height: 1.6; overflow-wrap: anywhere; }
.contact-card li i { flex: none; color: var(--fx-green-800); margin-top: 0.2rem; }

/* ---------- Back to top ---------- */
.to-top {
    position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 1020;
    width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--fx-green-900); color: var(--fx-accent); border: 0; font-size: 1.25rem; cursor: pointer;
    box-shadow: 0 10px 24px rgba(11, 61, 46, 0.3);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }

/* ---------- Print: clean, ink-friendly copy ---------- */
@media print {
    .toc, .to-top, .legal-hero-actions { display: none !important; }
    .legal-layout { display: block; }
    .legal-hero { background: none; border: 0; padding: 0 0 1rem; }
    .short-version, .contact-card { background: none; border: 1px solid #999; }
    .legal .ph { background: none; }
    .legal-section { break-inside: avoid-page; }
    .who-table th { background: #eee; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
    .toc summary .chev, .to-top, .legal-btn { transition: none; }
    html { scroll-behavior: auto !important; }
}