/*
 * Legal pages — the shared building blocks of the Privacy Policy and the
 * Terms of Service, in every language (2026-11-01): the short version, the
 * "Looking for something specific?" question cards, "Back to questions", the
 * :target highlight, anchors clear of the sticky header, the tables that
 * become cards on a phone, the Privacy Policy's section counter and Contact.
 * Each page keeps its own legal typography in its <style> block.
 */
.legal-content [id] { scroll-margin-top: 96px; }
/* From 768 px the sticky header is 113 px tall (as on Gifts that give twice) */
@media (min-width: 768px) { .legal-content [id] { scroll-margin-top: 136px; } }
.legal-content .policy-section,
.legal-content .policy-contact { border-radius: 1rem; }
.legal-content :target { animation: privacy-target 2.2s ease-out; }
@keyframes privacy-target {
    0%   { background-color: #e0e7ff; }
    100% { background-color: transparent; }
}

/* Section numbers: a CSS counter, so a new section renumbers the rest */
.policy-sections { counter-reset: policy-section; }
.policy-section { counter-increment: policy-section; }
.policy-section .section-badge::before { content: counter(policy-section); }

/* The short version */
.privacy-glance {
    background: #eef2ff;
    border: 1.5px solid #c7d2fe;
    border-radius: 1rem;
    padding: 1.25rem 1.25rem 1rem;
    margin: 1.5rem 0 2rem;
}
.legal-content .privacy-glance h2 {
    margin-top: 0;
    border-bottom: 0;
    padding-bottom: 0;
    font-size: 1.1rem;
}
.legal-content .privacy-glance ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.legal-content .privacy-glance li {
    position: relative;
    padding-left: 2.1rem;
    color: #334155;
    margin-bottom: 0.6rem;
    line-height: 1.6;
}
.legal-content .privacy-glance li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: #6366f1;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Looking for something specific? */
.privacy-finder, .legal-finder { margin-bottom: 1rem; }
.legal-content .privacy-finder h2,
.legal-content .legal-finder h2 { margin-top: 0.5rem; }
.finder-group { margin-bottom: 1.1rem; }
.legal-content .finder-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    color: #64748b;
    margin: 0 0 0.5rem;
}
.legal-content ul.finder-cards {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.6rem;
}
.legal-content ul.finder-cards li { margin: 0; padding: 0; display: flex; }
.legal-content .finder-cards a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    color: #1e293b;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.35;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.legal-content .finder-cards a::after { content: "\2192"; color: #4f46e5; font-weight: 800; flex-shrink: 0; }
.legal-content .finder-cards a:hover { border-color: #6366f1; box-shadow: 0 4px 14px rgba(79,70,229,.12); transform: translateY(-1px); text-decoration: none; }
.legal-content .finder-cards a:focus-visible { outline: 3px solid #4f46e5; outline-offset: 2px; border-color: #6366f1; }

/* "Back to questions" */
.legal-content a.back-link { display: inline-block; font-size: 0.8rem; font-weight: 700; margin: 0.25rem 0 0.5rem; }
.legal-content a.back-link::before { content: "\2191\00a0"; }
.legal-content a.back-link:focus-visible { outline: 3px solid #4f46e5; outline-offset: 2px; border-radius: 0.25rem; }

/* Tables: rows become cards on a phone */
.policy-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1.5px solid #e2e8f0;
    border-radius: 0.85rem;
    overflow: hidden;
    font-size: 0.9rem;
    margin: 0.75rem 0 1.25rem;
}
.policy-table th, .policy-table td {
    text-align: left;
    vertical-align: top;
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid #e2e8f0;
    line-height: 1.55;
}
.policy-table thead th, .policy-table thead td { background: #f1f5f9; color: #1e293b; font-weight: 800; font-size: 0.8rem; }
.policy-table tbody th { color: #1e293b; font-weight: 700; width: 22%; }
.policy-table td { color: #64748b; }
.policy-table tbody tr:last-child th, .policy-table tbody tr:last-child td { border-bottom: 0; }
.policy-table.two-col tbody th { width: 34%; }
@media (max-width: 640px) {
    .policy-table, .policy-table tbody, .policy-table tr, .policy-table th, .policy-table td { display: block; width: 100% !important; }
    .policy-table thead { display: none; }
    .policy-table { border: 0; border-radius: 0; overflow: visible; }
    .policy-table tbody tr { border: 1.5px solid #e2e8f0; border-radius: 0.85rem; margin-bottom: 0.6rem; padding: 0.35rem 0; background: #fff; }
    .policy-table tbody th { border-bottom: 0; padding-bottom: 0.1rem; font-size: 0.95rem; }
    .policy-table td { border-bottom: 0; padding-top: 0.3rem; padding-bottom: 0.3rem; }
    .policy-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 800;
        color: #334155;
        margin-bottom: 0.1rem;
    }
}

/* Contact */
.policy-contact { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid #e2e8f0; }