/* =========================================================
   CLICK2CLAIMHELP
   GLOBAL DESIGN SYSTEM
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

/* =========================================================
   CLICK2CLAIMHELP
   GLOBAL BRAND SYSTEM
   BLUE + RED THEME
========================================================= */

:root {

    /* =====================================================
       PRIMARY BLUE
    ====================================================== */

    --blue-700: #1d4ed8;
    --indigo-700: #4338ca;

    --blue-dark: #172554;
    --blue-deep: #0f1f3d;

    /* =====================================================
       RED BRAND
    ====================================================== */

    --red-primary: #ef4444;
    --red-dark: #b91c1c;
    --red-deep: #991b1b;

    /* Red gradient inspired by supplied reference image */
    --red-gradient:
        linear-gradient(135deg,
            #ef4444 0%,
            #dc2626 45%,
            #b91c1c 100%);

    /* =====================================================
       BLUE GRADIENT
    ====================================================== */

    --blue-gradient:
        linear-gradient(135deg,
            #1d4ed8 0%,
            #4338ca 100%);

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

    --text-dark: #111827;
    --text: #334155;
    --text-muted: #64748b;
    --text-light: #94a3b8;

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

    --white: #ffffff;

    --background: #f8fafc;

    --surface: #ffffff;

    --surface-soft: #f1f5f9;

    /* =====================================================
       BORDERS
    ====================================================== */

    --border: #e2e8f0;

    --border-dark: #cbd5e1;

    /* =====================================================
       SHADOWS
    ====================================================== */

    --shadow-sm:
        0 2px 10px rgba(15, 23, 42, 0.06);

    --shadow-md:
        0 10px 30px rgba(15, 23, 42, 0.08);

    --shadow-lg:
        0 20px 50px rgba(15, 23, 42, 0.12);

    /* =====================================================
       RADIUS
    ====================================================== */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    --radius-full: 999px;

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

    --container-width: 1240px;

    /* =====================================================
       TRANSITIONS
    ====================================================== */

    --transition-fast: 180ms ease;

    --transition: 250ms ease;

    --transition-slow: 350ms ease;

}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* =========================================================
   HTML
========================================================= */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}


/* =========================================================
   BODY
========================================================= */

body {

    min-height: 100vh;

    background: var(--background);

    color: var(--text);

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 16px;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

}


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

h1,
h2,
h3,
h4,
h5,
h6 {

    color: var(--text-dark);

    font-family:
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.2;

}


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

a {

    color: inherit;

    text-decoration: none;

}


button,
input,
select,
textarea {

    font: inherit;

}


/* =========================================================
   BUTTON
========================================================= */

button {

    border: 0;

}


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

.container {

    width: min(calc(100% - 40px),
            var(--container-width));

    margin-inline: auto;

}


/* =========================================================
   PAGE PLACEHOLDER
========================================================= */

.page-placeholder {

    min-height: 520px;

    display: flex;

    align-items: center;

    padding: 120px 0;

    background:
        radial-gradient(circle at 80% 20%,
            rgba(60, 128, 108, 0.08),
            transparent 35%),
        var(--background);

}


.page-placeholder .container {

    max-width: 800px;

}


.placeholder-label {

    display: inline-flex;

    align-items: center;

    padding: 7px 13px;

    margin-bottom: 22px;

    border: 1px solid var(--border);

    border-radius: var(--radius-full);

    background: var(--white);

    color: var(--primary);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.12em;

}


.page-placeholder h1 {

    max-width: 700px;

    margin-bottom: 20px;

    font-size: clamp(42px,
            6vw,
            72px);

    letter-spacing: -0.045em;

}


.page-placeholder p {

    max-width: 620px;

    color: var(--text-muted);

    font-size: 18px;

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

:focus-visible {

    outline: 3px solid rgba(60, 128, 108, 0.35);

    outline-offset: 3px;

}


/* =========================================================
   SELECTION
========================================================= */

::selection {

    background: var(--primary);

    color: var(--white);

}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {

    width: 10px;

}


::-webkit-scrollbar-track {

    background: #eef2f0;

}


::-webkit-scrollbar-thumb {

    background: #a9b9b4;

    border-radius: var(--radius-full);

}


::-webkit-scrollbar-thumb:hover {

    background: var(--primary);

}


/* =========================================================
   RESPONSIVE CONTAINER
========================================================= */

@media (max-width: 767px) {

    .container {

        width: min(calc(100% - 30px),
                var(--container-width));

    }

    .page-placeholder {

        min-height: 450px;

        padding: 100px 0;

    }

}



/* =========================================================
   TRUST & SUPPORT SECTION
========================================================= */

.trust-support-section {
    background: #ffffff;
    overflow: hidden;
}


/* =========================================================
   SUPPORT BAR
========================================================= */

.support-bar {
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.support-container {
    max-width: 1200px;
    margin: 0 auto;
    min-height: 150px;
    padding: 28px 24px;

    display: grid;
    grid-template-columns: 1.5fr 0.9fr 1fr;
    align-items: center;
    gap: 30px;
}


/* Heading */

.support-heading {
    display: flex;
    align-items: center;
    gap: 18px;
}

.support-icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    color: #1d4ed8;
    background: #eff6ff;
}

.support-icon svg {
    width: 27px;
    height: 27px;
}

.support-label {
    display: block;
    margin-bottom: 4px;

    color: #dc2626;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.support-heading h2 {
    margin: 0;

    color: #0f172a;
    font-size: 27px;
    line-height: 1.25;
    font-weight: 800;
}


/* Hours */

.support-hours {
    min-height: 68px;
    padding: 14px 18px;

    display: flex;
    align-items: center;
    gap: 12px;

    border: 1px solid #dbeafe;
    border-radius: 18px;
    background: #eff6ff;
}

.status-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;

    border-radius: 50%;
    background: #16a34a;

    box-shadow: 0 0 0 5px #dcfce7;
}

.support-hours strong {
    display: block;
    color: #0f766e;
    font-size: 14px;
}

.support-hours small {
    display: block;
    margin-top: 3px;
    color: #475569;
    font-size: 13px;
}


/* Phone */

.support-phone {
    min-height: 68px;
    padding: 13px 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1.5px solid #1d4ed8;
    border-radius: 16px;

    color: #0f172a;
    background: #ffffff;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.support-phone:hover {
    transform: translateY(-3px);
    border-color: #dc2626;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
}

.support-phone span {
    color: #475569;
    font-size: 13px;
}

.support-phone strong {
    color: #1d4ed8;
    font-size: 17px;
}

.support-phone svg {
    width: 19px;
    height: 19px;
    color: #dc2626;
}


/* =========================================================
   BENEFIT AREA
========================================================= */

.trust-benefits {
    position: relative;

    background:
        radial-gradient(circle at 10% 10%,
            rgba(59, 130, 246, 0.22),
            transparent 30%),
        radial-gradient(circle at 90% 80%,
            rgba(220, 38, 38, 0.18),
            transparent 30%),
        linear-gradient(135deg,
            #0f2d5c 0%,
            #1e3a8a 50%,
            #172554 100%);

    color: #ffffff;
}

.trust-benefits-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 45px 24px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}


/* Cards */

.trust-card {
    min-height: 150px;

    padding: 24px 20px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

.trust-card:hover {
    transform: translateY(-6px);

    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.3);
}


/* Icons */

.trust-card-icon {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;
}

.trust-card-icon svg {
    width: 24px;
    height: 24px;
}

.blue-icon {
    color: #2563eb;
    background: #dbeafe;
}

.red-icon {
    color: #dc2626;
    background: #fee2e2;
}


/* Card text */

.trust-card strong {
    display: block;

    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
}

.trust-card span {
    display: block;
    margin-top: 7px;

    color: #dbeafe;
    font-size: 13px;
    line-height: 1.55;
}


/* =========================================================
   CTA
========================================================= */

.trust-cta {
    max-width: 1150px;
    margin: 0 auto 45px;

    padding: 25px 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 22px;

    background: rgba(255, 255, 255, 0.08);
}

.trust-cta-eyebrow {
    display: block;
    margin-bottom: 5px;

    color: #93c5fd;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.trust-cta h3 {
    margin: 0;

    color: #ffffff;
    font-size: 23px;
    font-weight: 800;
}

.trust-cta p {
    margin: 6px 0 0;

    color: #dbeafe;
    font-size: 14px;
}


.trust-cta-button {
    flex-shrink: 0;

    padding: 14px 20px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    border-radius: 12px;

    color: #ffffff;
    background: linear-gradient(90deg,
            #dc2626,
            #ef4444);

    font-size: 14px;
    font-weight: 800;
    text-decoration: none;

    box-shadow: 0 10px 25px rgba(220, 38, 38, 0.25);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.trust-cta-button:hover {
    transform: translateY(-2px);

    box-shadow: 0 14px 30px rgba(220, 38, 38, 0.35);
}

.trust-cta-button svg {
    width: 18px;
    height: 18px;
}


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

@media (max-width: 900px) {

    .support-container {
        grid-template-columns: 1fr 1fr;
    }

    .support-heading {
        grid-column: 1 / -1;
    }

    .trust-benefits-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-cta {
        margin-left: 20px;
        margin-right: 20px;
    }
}


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

@media (max-width: 640px) {

    .support-container {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 25px 18px;
    }

    .support-heading {
        grid-column: auto;
        align-items: flex-start;
    }

    .support-heading h2 {
        font-size: 21px;
    }

    .support-icon {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .support-hours {
        width: 100%;
    }

    .support-phone {
        width: 100%;
    }

    .trust-benefits-container {
        grid-template-columns: 1fr;
        padding: 30px 18px;
    }

    .trust-card {
        min-height: auto;
        padding: 21px;
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }

    .trust-card-icon {
        flex-shrink: 0;
    }

    .trust-cta {
        margin: 0 18px 30px;
        padding: 22px 20px;

        flex-direction: column;
        align-items: stretch;
    }

    .trust-cta-button {
        justify-content: center;
        width: 100%;
    }
}