/* ==========================================================================
   Legal pages (Terms & Conditions + Privacy Policy) — creative redesign
   Loaded only on those two pages. Brand: #1e08c4 · #21c7f7
   ========================================================================== */

.legal-page-sec {
    position: relative;
    background: #f5f7fb;
    padding: 6rem 0 7rem;
    overflow: hidden;
}
/* soft decorative glows */
.legal-page-sec::before,
.legal-page-sec::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.legal-page-sec::before {
    width: 440px; height: 440px; top: -150px; right: -130px;
    background: radial-gradient(circle, rgba(33,199,247,.20), transparent 70%);
}
.legal-page-sec::after {
    width: 480px; height: 480px; bottom: -170px; left: -150px;
    background: radial-gradient(circle, rgba(30,8,196,.15), transparent 70%);
}
.legal-page-sec .container { position: relative; z-index: 1; }

/* ---- Card ---- */
.legal-card {
    position: relative;
    background: #fff;
    border-radius: 24px;
    padding: 3.75rem 4rem;
    box-shadow: 0 24px 60px rgba(23,12,132,.09);
    border: 1px solid rgba(23,12,132,.05);
    overflow: hidden;
    animation: legalCardIn .7s cubic-bezier(.22,.61,.36,1) both;
}
.legal-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: linear-gradient(90deg, #1e08c4, #21c7f7);
}
@keyframes legalCardIn {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
}

/* ---- "Last updated" pill ---- */
.legal-updated {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .78rem !important; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: #1e08c4;
    background: rgba(30,8,196,.06); border: 1px solid rgba(30,8,196,.15);
    border-radius: 50px; padding: 7px 16px; margin-bottom: 1.9rem !important;
}
.legal-updated::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: linear-gradient(135deg, #1e08c4, #21c7f7);
    box-shadow: 0 0 0 4px rgba(33,199,247,.15);
}

/* ---- Body copy ---- */
.legal-card > p {
    color: #4a4f60; font-size: 1rem; line-height: 1.9; margin-bottom: 1.4rem;
}

/* ---- Section headings with animated accent bar ---- */
.legal-card h2 {
    position: relative;
    font-family: var(--font-heading);
    font-size: 1.5rem; font-weight: 800; color: #141329;
    margin-top: 2.8rem; margin-bottom: 1rem; padding-left: 1.15rem; line-height: 1.3;
}
.legal-card h2::before {
    content: "";
    position: absolute; left: 0; top: .12em; bottom: .12em; width: 5px;
    border-radius: 5px; background: linear-gradient(180deg, #1e08c4, #21c7f7);
    transform: scaleY(.35); transform-origin: top; transition: transform .5s ease;
}
.legal-card h2.revealed::before { transform: scaleY(1); }

/* ---- Scroll reveal (only active once JS adds .reveal-init) ---- */
.legal-card.reveal-init h2,
.legal-card.reveal-init > p,
.legal-card.reveal-init .legal-contact-list {
    opacity: 0; transform: translateY(26px);
    transition: opacity .6s ease, transform .6s ease;
}
.legal-card.reveal-init h2.revealed,
.legal-card.reveal-init > p.revealed,
.legal-card.reveal-init .legal-contact-list.revealed {
    opacity: 1; transform: none;
}

/* ---- Contact card ---- */
.legal-contact-list {
    list-style: none; padding: 1.7rem 1.9rem; margin-top: 1.2rem;
    background: linear-gradient(135deg, rgba(30,8,196,.05), rgba(33,199,247,.07));
    border-radius: 16px; border: 1px solid rgba(30,8,196,.08);
}
.legal-contact-list li {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Poppins', sans-serif; font-size: .98rem; color: #3a3f52;
    margin-bottom: .7rem;
}
.legal-contact-list li:last-child { margin-bottom: 0; }
.legal-contact-list li a {
    color: #1e08c4; font-weight: 600; transition: color .3s ease;
}
.legal-contact-list li a:hover { color: #21c7f7; }

@media (max-width: 768px) {
    .legal-page-sec { padding: 3.5rem 0 4.5rem; }
    .legal-card { padding: 2.3rem 1.4rem; border-radius: 18px; }
    .legal-card h2 { font-size: 1.3rem; }
}

/* ---- Bullet lists (Privacy) ---- */
.legal-list { list-style: none; padding: 0; margin: .4rem 0 1.4rem; }
.legal-list li {
    position: relative; padding-left: 1.7rem; margin-bottom: .55rem;
    font-family: 'Poppins', sans-serif; font-size: .97rem; color: #4a4f60; line-height: 1.8;
}
.legal-list li::before {
    content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px;
    border-radius: 50%; background: linear-gradient(135deg, #1e08c4, #21c7f7);
}
.legal-list li strong { color: #141329; }
.legal-card.reveal-init .legal-list {
    opacity: 0; transform: translateY(26px);
    transition: opacity .6s ease, transform .6s ease;
}
.legal-card.reveal-init .legal-list.revealed { opacity: 1; transform: none; }

/* Remove the card "box" — let content flow directly on the page (keep animations) */
.legal-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    animation: none !important;
}
.legal-card::before { display: none !important; }

/* ---- Sticky table of contents ---- */
html { scroll-padding-top: 110px; }
.legal-toc { position: sticky; top: 110px; }
.legal-toc::before {
    content: "On this page"; display: block;
    font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: #1e08c4; margin-bottom: 1rem; padding-left: 1.1rem;
}
.legal-toc ul { list-style: none; padding: 0; margin: 0; border-left: 2px solid rgba(30,8,196,.12); }
.legal-toc li { margin: 0; }
.legal-toc a {
    display: block; padding: .5rem 0 .5rem 1.1rem; margin-left: -2px;
    border-left: 2px solid transparent; color: #6b7183; font-size: .9rem; line-height: 1.45;
    text-decoration: none; transition: color .25s ease, border-color .25s ease;
}
.legal-toc a:hover { color: #1e08c4; }
.legal-toc a.active { color: #1e08c4; border-left-color: #1e08c4; font-weight: 600; }

/* Fix sticky TOC: position:sticky fails inside an overflow:hidden ancestor.
   Drop the clip on the section and keep the glows within bounds instead. */
.legal-page-sec { overflow: visible; }
.legal-page-sec::before { top: 10px; right: 0; width: 360px; height: 360px; }
.legal-page-sec::after  { bottom: 10px; left: 0; width: 380px; height: 380px; }