/* ============================================================
   DECISIONS ADVISORS
   TERMS OF USE
   PREMIUM LEGAL PAGE
   ============================================================ */


/* ============================================================
   FONT
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;750;800&display=swap');


/* ============================================================
   GLOBAL PAGE FOUNDATION
   ============================================================ */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif !important;
}

.legal-page,
.legal-page * {
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif !important;
}

.legal-page {
    position: relative !important;
    width: 100% !important;
    min-height: calc(100vh - 200px) !important;
    padding: 0 0 90px !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #f3f6f9 !important;
    color: #182735 !important;
}


/* ============================================================
   HERO BACKGROUND
   ============================================================ */

.legal-page::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 465px !important;

    background:
            linear-gradient(
                    90deg,
                    rgba(4,18,31,.88) 0%,
                    rgba(5,25,43,.72) 45%,
                    rgba(5,25,43,.50) 100%
            ),
            url("../images/terms-of-use-bg.png")
            center center / cover no-repeat !important;

    z-index: 0 !important;
}


/* blue atmospheric overlay */

.legal-page::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 55% !important;
    height: 465px !important;

    background:
            radial-gradient(
                    circle at 80% 30%,
                    rgba(48,132,211,.25),
                    transparent 55%
            ),
            linear-gradient(
                    135deg,
                    transparent 45%,
                    rgba(50,132,205,.08) 45%,
                    transparent 46%
            ) !important;

    pointer-events: none !important;
    z-index: 1 !important;
}


/* ============================================================
   MAIN CONTAINER
   ============================================================ */

.legal-page .container {
    position: relative !important;
    z-index: 5 !important;
    width: min(1180px, calc(100% - 40px)) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}


/* ============================================================
   HERO HEADER
   ============================================================ */

.legal-page-header {
    position: relative !important;
    z-index: 2 !important;

    width: 100% !important;
    max-width: 900px !important;
    min-height: 390px !important;

    margin: 0 auto !important;
    padding: 72px 20px 65px !important;

    text-align: center !important;
    color: #fff !important;
}


/* ============================================================
   LEGAL LABEL
   ============================================================ */

.legal-page-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 13px !important;

    margin: 0 0 22px !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;

    color: #65b5f2 !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

.legal-page-label::before,
.legal-page-label::after {
    content: "" !important;
    display: block !important;
    width: 30px !important;
    height: 1px !important;
    background: #3b8bd0 !important;
}


/* ============================================================
   MAIN TITLE
   ============================================================ */

.legal-page-header h1 {
    max-width: 850px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: clamp(42px, 5vw, 62px) !important;
    font-weight: 750 !important;
    line-height: 1.06 !important;
    letter-spacing: -2.2px !important;
}


/* ============================================================
   INTRO DESCRIPTION
   ============================================================ */

.legal-page-header > p:not(.legal-page-updated) {
    max-width: 720px !important;

    margin: 21px auto 0 !important;
    padding: 0 !important;

    color: rgba(255,255,255,.75) !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}


/* ============================================================
   UPDATED DATE
   ============================================================ */

.legal-page-updated {
    display: inline-flex !important;
    align-items: center !important;

    margin: 19px 0 0 !important;
    padding: 13px 0 0 !important;

    border-top: 1px solid rgba(255,255,255,.16) !important;

    color: rgba(255,255,255,.48) !important;

    font-size: 12px !important;
    font-weight: 500 !important;
}

.legal-page-updated span {
    margin-left: 5px !important;
    color: rgba(255,255,255,.82) !important;
    font-weight: 650 !important;
}


/* ============================================================
   MAIN READING CARD
   ============================================================ */

.legal-content {
    position: relative !important;
    z-index: 10 !important;

    width: 100% !important;
    max-width: 950px !important;

    margin: -35px auto 0 !important;
    padding: 58px 72px 40px !important;

    background: #ffffff !important;

    border: 1px solid rgba(11,42,64,.10) !important;
    border-radius: 0 !important;

    box-shadow:
            0 28px 70px rgba(5,28,47,.13),
            0 5px 18px rgba(5,28,47,.06) !important;
}


/* top blue line */

.legal-content::before {
    content: "" !important;
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 4px !important;

    background: linear-gradient(
            90deg,
            #1678b7,
            #48a9df,
            #1678b7
    ) !important;
}


/* ============================================================
   POLICY SECTIONS
   ============================================================ */

.legal-section {
    position: relative !important;

    margin: 0 0 34px !important;
    padding: 0 0 34px !important;

    border-bottom: 1px solid #e5ebef !important;
}

.legal-section:not(.legal-contact-section):last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}


/* ============================================================
   SECTION HEADINGS
   ============================================================ */

.legal-section h2 {
    position: relative !important;

    margin: 0 0 15px !important;
    padding: 0 0 0 17px !important;

    color: #152b3c !important;

    font-size: 21px !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
    letter-spacing: -.35px !important;
}

.legal-section h2::before {
    content: "" !important;

    position: absolute !important;
    top: 2px !important;
    left: 0 !important;

    width: 3px !important;
    height: calc(100% - 4px) !important;

    background: #258bc8 !important;
}


/* ============================================================
   PARAGRAPHS
   ============================================================ */

.legal-section p {
    margin: 0 0 15px !important;

    color: #536572 !important;

    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.82 !important;
}

.legal-section p:last-child {
    margin-bottom: 0 !important;
}


/* ============================================================
   LISTS
   ============================================================ */

.legal-section ul {
    margin: 16px 0 20px !important;
    padding: 0 !important;

    list-style: none !important;
}

.legal-section li {
    position: relative !important;

    margin: 0 0 10px !important;
    padding: 0 0 0 25px !important;

    color: #536572 !important;

    font-size: 15px !important;
    line-height: 1.72 !important;
}

.legal-section li:last-child {
    margin-bottom: 0 !important;
}

.legal-section li::before {
    content: "" !important;

    position: absolute !important;
    top: 10px !important;
    left: 2px !important;

    width: 6px !important;
    height: 6px !important;

    background: #2e91cc !important;
}


/* ============================================================
   LINKS
   ============================================================ */

.legal-section a {
    position: relative !important;

    color: #137db7 !important;

    font-weight: 650 !important;
    text-decoration: none !important;

    transition: color .2s ease !important;
}

.legal-section a:hover {
    color: #075d8d !important;
}

.legal-section a::after {
    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    bottom: -2px !important;

    width: 100% !important;
    height: 1px !important;

    background: currentColor !important;
    opacity: .35 !important;

    transition: opacity .2s ease !important;
}

.legal-section a:hover::after {
    opacity: 1 !important;
}


/* ============================================================
   CONTACT SECTION
   ============================================================ */

.legal-contact-section {
    position: relative !important;

    margin-top: 7px !important;
    padding: 28px 30px 60px !important;

    border: 1px solid rgba(37,139,200,.22) !important;
    border-radius: 0 !important;

    background:
            linear-gradient(
                    110deg,
                    #edf7fc,
                    #f8fbfd
            ) !important;

    overflow: hidden !important;
}

.legal-contact-section::after {
    content: "" !important;

    position: absolute !important;

    right: -80px !important;
    bottom: -110px !important;

    width: 230px !important;
    height: 230px !important;

    border: 1px solid rgba(37,139,200,.10) !important;
    border-radius: 50% !important;
}

.legal-contact-section h2 {
    margin-bottom: 12px !important;
}

.legal-contact-section p {
    color: #506673 !important;
}


/* ============================================================
   STRONG TEXT
   ============================================================ */

.legal-section strong {
    color: #263d4e !important;
    font-weight: 700 !important;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 1100px) {

    .legal-section {
        transition: border-color .2s ease !important;
    }

    .legal-section:hover {
        border-bottom-color: #cfdee7 !important;
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .legal-page::before,
    .legal-page::after {
        height: 440px !important;
    }

    .legal-page-header {
        min-height: 370px !important;
        padding: 65px 20px 58px !important;
    }

    .legal-page-header h1 {
        font-size: 48px !important;
        letter-spacing: -1.6px !important;
    }

    .legal-content {
        max-width: 92% !important;
        padding: 48px 48px 55px !important;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {

    .legal-page {
        padding-bottom: 55px !important;
    }

    .legal-page .container {
        width: calc(100% - 24px) !important;
    }

    .legal-page::before {
        height: 410px !important;
    }

    .legal-page::after {
        width: 100% !important;
        height: 410px !important;
    }

    .legal-page-header {
        min-height: 360px !important;
        padding: 52px 10px 55px !important;
    }

    .legal-page-label {
        margin-bottom: 18px !important;
        font-size: 10px !important;
        letter-spacing: 2.3px !important;
    }

    .legal-page-label::before,
    .legal-page-label::after {
        width: 20px !important;
    }

    .legal-page-header h1 {
        font-size: 36px !important;
        line-height: 1.1 !important;
        letter-spacing: -1.2px !important;
    }

    .legal-page-header > p:not(.legal-page-updated) {
        margin-top: 17px !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .legal-page-updated {
        margin-top: 16px !important;
        font-size: 11px !important;
    }

    .legal-content {
        max-width: 100% !important;
        margin-top: -24px !important;
        padding: 36px 24px 42px !important;
    }

    .legal-section {
        margin-bottom: 28px !important;
        padding-bottom: 28px !important;
    }

    .legal-section h2 {
        margin-bottom: 13px !important;
        padding-left: 14px !important;
        font-size: 19px !important;
    }

    .legal-section p,
    .legal-section li {
        font-size: 14px !important;
        line-height: 1.75 !important;
    }

    .legal-section li {
        padding-left: 22px !important;
        margin-bottom: 9px !important;
    }

    .legal-section li::before {
        top: 9px !important;
        width: 5px !important;
        height: 5px !important;
    }

    .legal-contact-section {
        padding: 23px 20px !important;
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 400px) {

    .legal-page .container {
        width: calc(100% - 18px) !important;
    }

    .legal-page-header h1 {
        font-size: 31px !important;
    }

    .legal-content {
        padding: 30px 19px 36px !important;
    }

    .legal-section h2 {
        font-size: 18px !important;
    }

    .legal-section p,
    .legal-section li {
        font-size: 13.5px !important;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .legal-section,
    .legal-section a,
    .legal-section a::after {
        transition: none !important;
    }
}