/*
 * Homepage-only Editorial Trust redesign.
 * Scoped to .seo-landing-index so comparison, review, and article pages stay unchanged.
 */

.seo-landing-index {
    --editorial-ink: #12324a;
    --editorial-navy: #0a2a44;
    --editorial-paper: #fbf7f0;
    --editorial-paper-deep: #f3eadc;
    --editorial-mist: #e7f2f1;
    --editorial-teal: #0db8b6;
    --editorial-teal-dark: #087f83;
    --editorial-brass: #b68a4b;
    --editorial-slate: #50616b;
    --editorial-line: rgba(18, 50, 74, 0.14);
    --editorial-shadow: 0 24px 70px rgba(18, 50, 74, 0.14);
    background:
        radial-gradient(circle at top left, rgba(13, 184, 182, 0.08), transparent 34rem),
        linear-gradient(180deg, var(--editorial-paper) 0%, #ffffff 42%, #f8fbfb 100%);
    color: var(--editorial-ink);
    overflow-x: hidden;
}

.seo-landing-index .bar {
    background: var(--editorial-navy);
}

.seo-landing-index .header-bar-section {
    position: sticky;
    top: 0;
    z-index: 20;
    border-top: 6px solid var(--editorial-navy) !important;
    background: rgba(251, 247, 240, 0.92) !important;
    border-bottom: 1px solid var(--editorial-line);
    box-shadow: 0 12px 32px rgba(18, 50, 74, 0.08);
    backdrop-filter: blur(16px);
}

.seo-landing-index .navbar {
    min-height: 72px;
}

.seo-landing-index .navbar.bg-white,
.seo-landing-index .navbar-light.bg-white {
    background: transparent !important;
}

.seo-landing-index .navbar-brand img,
.seo-landing-index .navbar-logo {
    filter: saturate(0.9) contrast(1.08);
}

.seo-landing-index .navbar-light .navbar-nav .nav-link {
    color: var(--editorial-ink) !important;
    font-size: 0.83rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.seo-landing-index .nav-item:hover .nav-link,
.seo-landing-index .nav-item .nav-link.active {
    color: var(--editorial-teal-dark) !important;
    text-decoration: none !important;
}

.seo-landing-index .dropdown-menu {
    border: 1px solid var(--editorial-line);
    border-radius: 16px;
    box-shadow: var(--editorial-shadow);
    padding: 0.65rem;
}

.seo-landing-index .dropdown-item {
    border-radius: 10px;
    color: var(--editorial-ink);
}

.seo-landing-index .dropdown-item:hover {
    background: var(--editorial-mist);
    color: var(--editorial-teal-dark) !important;
}

.seo-landing-index .expanded-header-wrapper {
    min-height: 520px;
    height: auto !important;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--editorial-paper) !important;
    background-image: url("/cdn-assets/generated/homepage-editorial-hero.png") !important;
    background-size: cover !important;
    background-position: left center !important;
    border-bottom: 1px solid var(--editorial-line);
}

.seo-landing-index .expanded-header-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: transparent !important;
    background:
        linear-gradient(90deg, rgba(251, 247, 240, 0.03) 0%, rgba(251, 247, 240, 0.04) 36%, rgba(251, 247, 240, 0.7) 58%, #fbf7f0 100%),
        radial-gradient(circle at 80% 20%, rgba(13, 184, 182, 0.12), transparent 16rem);
}

.seo-landing-index .expanded-header-wrapper::after {
    content: "";
    position: absolute;
    right: clamp(22px, 5vw, 86px);
    top: 64px;
    bottom: 64px;
    z-index: -1;
    width: min(500px, 42vw);
    border: 1px solid rgba(18, 50, 74, 0.12);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(234, 245, 244, 0.9)),
        linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.42));
    box-shadow: 0 22px 58px rgba(18, 50, 74, 0.12);
}

.seo-landing-index .expanded-header-content {
    position: relative;
    justify-content: center !important;
    align-items: flex-end !important;
    width: 100% !important;
    max-width: 1220px !important;
    min-height: 520px;
    padding: clamp(40px, 6vw, 76px) clamp(18px, 4vw, 44px) !important;
    margin: 0 auto !important;
}

.seo-landing-index .expanded-header-content::before {
    content: "Independent treatment intelligence";
    display: block;
    width: min(460px, 42vw);
    margin-bottom: 0.9rem;
    color: var(--editorial-brass);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-align: left;
    text-transform: uppercase;
}

.seo-landing-index .expanded-header-content h1,
.seo-landing-index .expanded-header-content p.home-subtitle {
    width: min(460px, 42vw) !important;
    padding: 0 !important;
    text-align: left !important;
}

.seo-landing-index .expanded-header-content h1 {
    color: var(--editorial-ink) !important;
    font-family: "Google Sans Flex", "Poppins", sans-serif;
    font-size: clamp(40px, 4.2vw, 60px) !important;
    font-weight: 820 !important;
    line-height: 1.02;
    letter-spacing: -0.052em;
    margin-bottom: 1rem;
}

.seo-landing-index .expanded-header-content p.home-subtitle {
    color: var(--editorial-slate) !important;
    font-size: clamp(15px, 1.28vw, 18px) !important;
    font-weight: 400;
    line-height: 1.52;
    max-width: 460px;
}

.seo-landing-index .landing-sections {
    position: relative;
    z-index: 1;
}

.seo-landing-index .landing-sections::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -54px;
    z-index: -1;
    width: min(1120px, calc(100% - 36px));
    height: 108px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(251, 247, 240, 0.92);
    box-shadow: 0 -20px 50px rgba(18, 50, 74, 0.06);
}

.seo-landing-index .service-category {
    padding: clamp(68px, 8vw, 112px) 18px clamp(52px, 7vw, 90px) !important;
}

.seo-landing-index .service-category h2,
.seo-landing-index .why-grid-wrapper h2 {
    color: var(--editorial-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 700 !important;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: clamp(28px, 5vw, 54px);
}

.seo-landing-index .service-category h2::before,
.seo-landing-index .why-grid-wrapper h2::before {
    content: "Compare with confidence";
    display: block;
    margin-bottom: 0.85rem;
    color: var(--editorial-brass);
    font-family: "Poppins", sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.seo-landing-index .category-grid-wrapper {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(128px, 1fr));
    gap: 16px;
    width: min(1280px, 100%) !important;
    max-width: 1280px !important;
    padding: 0 !important;
}

.seo-landing-index #vertical-box1,
.seo-landing-index #vertical-box2,
.seo-landing-index #vertical-box3,
.seo-landing-index #vertical-box4,
.seo-landing-index #vertical-box5,
.seo-landing-index #vertical-box6,
.seo-landing-index #vertical-box7,
.seo-landing-index #vertical-box8,
.seo-landing-index #vertical-box9 {
    grid-area: auto !important;
}

.seo-landing-index a.category-icon-wrapper {
    position: relative;
    grid-area: auto !important;
    width: 100% !important;
    height: 214px !important;
    margin: 0 !important;
    padding: 1.15rem !important;
    justify-content: center !important;
    border: 1px solid var(--editorial-line);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 241, 231, 0.86));
    box-shadow: 0 16px 38px rgba(18, 50, 74, 0.08);
    color: var(--editorial-teal-dark);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.seo-landing-index a.category-icon-wrapper::after {
    content: "Explore";
    margin-top: 0.7rem;
    color: rgba(18, 50, 74, 0.52);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.seo-landing-index a.category-icon-wrapper:hover {
    transform: translateY(-6px);
    border-color: rgba(13, 184, 182, 0.45);
    background:
        linear-gradient(180deg, #ffffff, #edf7f6);
    box-shadow: 0 24px 58px rgba(18, 50, 74, 0.16);
    text-decoration: none;
}

.seo-landing-index .service-icon {
    width: auto !important;
    height: 86px !important;
    padding: 0 !important;
    color: currentColor;
}

.seo-landing-index .service-icon path {
    fill: currentColor !important;
}

.seo-landing-index .service-icon-title {
    color: var(--editorial-ink) !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
    line-height: 1.2;
    margin: 1rem 0 0;
}

.seo-landing-index .why-grid-wrapper {
    padding: clamp(70px, 8vw, 110px) 18px !important;
    background:
        radial-gradient(circle at 20% 10%, rgba(13, 184, 182, 0.12), transparent 22rem),
        linear-gradient(135deg, var(--editorial-navy) 0%, #153e57 56%, #0f2f48 100%) !important;
    color: #ffffff;
}

.seo-landing-index .why-grid-wrapper h2 {
    color: #ffffff;
    padding: 0 !important;
}

.seo-landing-index .why-grid-wrapper h2::before {
    content: "Why readers trust us";
    color: #d8b779;
}

.seo-landing-index .why-us-section {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px !important;
    width: min(1160px, 100%) !important;
    max-width: 1160px !important;
    padding: 0 !important;
}

.seo-landing-index #why-box1,
.seo-landing-index #why-box2,
.seo-landing-index #why-box3 {
    grid-area: auto !important;
}

.seo-landing-index .why-icon-wrapper {
    grid-area: auto !important;
    width: auto !important;
    min-height: 100%;
    margin: 0 !important;
}

.seo-landing-index .why-icon {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: 2;
    width: 96px !important;
    max-width: 96px;
    margin-bottom: -48px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.seo-landing-index .why-content-box {
    width: 100% !important;
    min-height: 236px !important;
    margin: 0 !important;
    padding: 74px 28px 28px !important;
    align-items: flex-start !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(10px);
}

.seo-landing-index .why-content-box h3 {
    color: #ffffff;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-align: left !important;
}

.seo-landing-index .why-content-box p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem !important;
    line-height: 1.65;
    text-align: left !important;
}

.seo-landing-index #Footer-section {
    margin-top: 0 !important;
    background:
        linear-gradient(180deg, #0f2f48 0%, #071d31 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.seo-landing-index #Footer-section .footer-wrapper {
    padding: 1rem 0 1.25rem;
}

.seo-landing-index .footer-nav li a,
.seo-landing-index .copyrights {
    color: rgba(255, 255, 255, 0.82) !important;
}

.seo-landing-index .footer-nav li a:hover {
    color: #ffffff !important;
}

@media screen and (max-width: 1199px) {
    .seo-landing-index .category-grid-wrapper {
        grid-template-columns: repeat(4, minmax(150px, 1fr));
    }

    .seo-landing-index .expanded-header-wrapper::after,
    .seo-landing-index .expanded-header-content::before,
    .seo-landing-index .expanded-header-content h1,
    .seo-landing-index .expanded-header-content p.home-subtitle {
        width: min(500px, 52vw) !important;
    }
}

@media screen and (max-width: 991px) {
    .seo-landing-index .expanded-header-wrapper {
        min-height: 520px;
    }

    .seo-landing-index .expanded-header-wrapper::before {
        background-color: transparent !important;
        background:
            linear-gradient(180deg, rgba(251, 247, 240, 0.12) 0%, rgba(251, 247, 240, 0.72) 42%, #fbf7f0 100%),
            radial-gradient(circle at 50% 18%, rgba(13, 184, 182, 0.18), transparent 18rem);
    }

    .seo-landing-index .expanded-header-wrapper::after {
        inset: auto 18px 28px 18px;
        width: auto;
        height: 56%;
        border-radius: 28px;
    }

    .seo-landing-index .expanded-header-content {
        align-items: center !important;
        justify-content: flex-end !important;
        min-height: 520px;
        padding: 34px 22px 58px !important;
    }

    .seo-landing-index .expanded-header-content::before,
    .seo-landing-index .expanded-header-content h1,
    .seo-landing-index .expanded-header-content p.home-subtitle {
        width: min(620px, 100%) !important;
        text-align: center !important;
    }

    .seo-landing-index .expanded-header-content h1 {
        font-size: clamp(34px, 8vw, 54px) !important;
    }

    .seo-landing-index .expanded-header-content p.home-subtitle {
        font-size: 16px !important;
    }

    .seo-landing-index .why-us-section {
        grid-template-columns: 1fr;
        max-width: 640px !important;
    }
}

@media screen and (max-width: 767px) {
    .seo-landing-index .header-bar-section {
        position: relative;
        background: var(--editorial-paper) !important;
        backdrop-filter: none;
    }

    .seo-landing-index .navbar {
        min-height: 62px;
    }

    .seo-landing-index .navbar-brand img,
    .seo-landing-index .navbar-logo {
        width: min(256px, 72vw) !important;
    }

    .seo-landing-index .customNav {
        background: var(--editorial-navy);
    }

    .seo-landing-index .customNav .nav-item a {
        color: #ffffff !important;
    }

    .seo-landing-index .customNav .dropdown-menu {
        background: transparent;
        box-shadow: none;
    }

    .seo-landing-index .customNav .custom-nav-toggler {
        color: var(--editorial-teal) !important;
    }

    .seo-landing-index .expanded-header-wrapper {
        min-height: 590px;
        background-position: top center !important;
    }

    .seo-landing-index .expanded-header-content {
        min-height: 590px;
        padding-bottom: 42px !important;
    }

    .seo-landing-index .expanded-header-content::before {
        font-size: 0.66rem;
        margin-bottom: 0.7rem;
    }

    .seo-landing-index .expanded-header-content h1 {
        font-size: clamp(32px, 10vw, 44px) !important;
        margin-bottom: 0.9rem;
    }

    .seo-landing-index .expanded-header-content p.home-subtitle {
        font-size: 15px !important;
        line-height: 1.48;
    }

    .seo-landing-index .service-category {
        padding: 58px 16px 46px !important;
    }

    .seo-landing-index .service-category h2,
    .seo-landing-index .why-grid-wrapper h2 {
        max-width: 100%;
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: clamp(30px, 8vw, 38px);
        overflow-wrap: break-word;
        word-break: normal;
    }

    .seo-landing-index .category-grid-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .seo-landing-index a.category-icon-wrapper {
        height: 172px !important;
        padding: 0.9rem !important;
        border-radius: 20px;
    }

    .seo-landing-index .service-icon {
        height: 62px !important;
    }

    .seo-landing-index .service-icon-title {
        font-size: 0.72rem !important;
        margin-top: 0.75rem;
    }

    .seo-landing-index a.category-icon-wrapper::after {
        display: none;
    }

    .seo-landing-index .why-grid-wrapper {
        padding: 58px 16px !important;
    }

    .seo-landing-index .why-content-box {
        min-height: 0 !important;
        padding: 68px 22px 24px !important;
    }

    .seo-landing-index .footer-links {
        margin-top: 1rem !important;
    }
}

@media screen and (max-width: 420px) {
    .seo-landing-index .category-grid-wrapper {
        grid-template-columns: 1fr;
    }

    .seo-landing-index a.category-icon-wrapper {
        height: 150px !important;
    }
}