/* bottom padding kept large so the overlapping .block card sits correctly */
.single-alternative .hero {
    background: radial-gradient(412.45% 101.88% at 54.06% -1.88%, #050072 0%, #715DFF 60%, #FFF 95%);
    padding: 126px 0 240px;
    text-align: left;
}

@media (min-width: 1200px) {
    .single-alternative .hero .custom-container {
        max-width: 1350px;
    }
}

.single-alternative .hero .inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    max-width: none;
    margin: 0;
    text-align: left;
}

.single-alternative .hero .subtitle {
   color: #FFF031;
   
   /* EYE BROWN */
   font-family: Roboto;
   font-size: 24px;
   font-style: normal;
   font-weight: 900;
   line-height: 28px; /* 116.667% */
   text-transform: uppercase;
   margin-bottom: 25px;
}

.single-alternative .hero h1 {
    color: #FFF;
    font-family: PlutoRegular, Adjusted Verdana Fallback;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 52px;
    letter-spacing: -2.76px;
    margin-bottom: 18px;
    text-align: left;
}

.single-alternative .hero p {
    color: #FFF;
    font-family: Roboto;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 148%;
    margin-bottom: 38px;
}

.single-alternative .hero .ctas {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.single-alternative .hero .ctas .btn {
    margin-bottom: 0;
}

.single-alternative .hero .ctas .trial {
    padding: 9px 35px;
    border-radius: 40px;
    background: #FFF031;
    border: 2px solid #FFF031;
    color: #030038;
    text-align: right;
    font-family: Roboto;
    font-size: 15.4px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px;
    text-transform: capitalize;
    text-decoration: none;
}

.single-alternative .hero .ctas .trial:hover {
    background: white;
    border-color: white;
    text-decoration: none;
}

.single-alternative .hero .ctas .demo {
    padding: 9px 35px;
    border-radius: 40px;
    border: 2px solid #FFF;
    background: rgba(255, 255, 255, 0.49);
    color: #1B1851;
    text-align: center;
    font-family: Roboto;
    font-size: 15.4px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px;
    text-decoration: none;
}

.single-alternative .hero .ctas .demo:hover {
    background: white;
    color: #1b1851;
    text-decoration: none;
}

.single-alternative .hero .inner img {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.doofinder-alternatives .block {
   padding-top: 0;
   max-width: 1350px;
}
/* ---------------------------------------- SECTION EYEBROWS + HEADINGS -- */
.single-alternative .at-a-glance .eyebrow,
.single-alternative .verdict .eyebrow,
.single-alternative .differences .eyebrow {
    color: #8979FF;
    text-align: center;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: 28px; /* 116.667% */
    margin-bottom: 8px;
}


.single-alternative .verdict {
   border-radius: 46px;
   border: 2px solid #FFF;
   background: linear-gradient(0deg, #FFF 68.27%, #E8E7FF 100%);
}
/* verdict/differences h2 aren't in the base heading group — style them here */
.single-alternative .verdict h2,
.single-alternative .differences h2 {
    color: #000;
    text-align: center;
    font-family: Roboto;
    font-size: 36px;
    font-weight: 900;
    line-height: 45px;
    margin-bottom: 24px;
}

.single-alternative .at-a-glance,
.single-alternative .verdict,
.single-alternative .differences {
    padding: 48px 0;
    scroll-margin-top: 24px;
}


/* the metric name has no description here, so keep it vertically centred */
.single-alternative .numbers-table .d-name {
    font-size: 15px;
}

/* "Both include" footer note with green check icons */
.single-alternative .glance-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
    margin-top: 24px;
    color: #6A6A80;
    font-family: Roboto;
    font-size: 14px;
}

.single-alternative .glance-note strong {
    color: #1B1851;
    font-weight: 700;
}

.single-alternative .glance-note .sep {
    color: #C7C7D2;
}

.single-alternative .glance-note .incl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.single-alternative .glance-note .incl svg {
    flex-shrink: 0;
}

/* ------------------------------------------------------ VERDICT CARDS -- */
.single-alternative .verdict-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 16px;
}

.single-alternative .verdict-card {
    background: #fff;
    border: 1px solid #E3E2E9;
    border-radius: 16px;
    padding: 36px 34px;
}

.single-alternative .verdict-card.verdict-doofinder {
    border: 3px solid #4842C1;
}

.single-alternative .top {
   display: flex;
   gap: 12px;
   margin-bottom: 24px;
   align-items: center;
}

.single-alternative .verdict-label {
    display: inline-block;
    color: #5C5C7A;
    font-family: Roboto;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 148%; /* 25.16px */
    text-transform: uppercase;
}

.single-alternative .verdict-card.verdict-doofinder .verdict-label{
   color: #8979FF;
}


.single-alternative .verdict-card p {
    color: #212529;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 148%;
    margin: 0;
}

/* ---------------- REAL DIFFERENCES TABLE (dark header + expandable rows) -- */
.single-alternative .diff-table {
    max-width: 1075px;
    margin: 24px auto 0;
    background: #fff;
    border: 1px solid #ECECF3;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(49, 36, 133, 0.06);
    overflow: hidden;
}

/* shared 3-column grid for header + rows */
.single-alternative .diff-head,
.single-alternative .diff-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
}

.single-alternative .diff-row {
   grid-template-columns: 1fr 1fr 1fr;
}

/* dark header */
.single-alternative .diff-head {
    background: #16123F;
    padding: 4px 0;
}

.single-alternative .diff-head > div {
    padding: 10px 24px;
}

.single-alternative .diff-head > div img {
   max-width: 122px;
}

.single-alternative .diff-head .d-dim {
   color: rgba(255, 255, 255, 0.70);
   font-family: Roboto;
   font-size: 15px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
   letter-spacing: 0.77px;
   text-transform: uppercase;
}

.single-alternative .diff-head .d-logo {
    max-height: 22px;
    width: auto;
}

.single-alternative .diff-head .motive-logo {
    color: #fff;
    font-family: Roboto;
    font-size: 20px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -0.5px;
}

/* body rows */
.single-alternative .diff-item {
    border-bottom: 1px solid #EFEFF4;
}

.single-alternative .diff-item:last-child {
    border-bottom: 0;
}

.single-alternative .diff-row > div {
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.single-alternative .has-detail .diff-row {
    cursor: pointer;
}


/* + / − toggle */
.single-alternative .d-plus {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #C7C3F0;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.single-alternative .d-plus::before,
.single-alternative .d-plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #4842C1;
    transition: background 0.2s ease;
}

.single-alternative .d-plus::before { width: 9px; height: 1.6px; }
.single-alternative .d-plus::after  { width: 1.6px; height: 9px; }

.single-alternative .diff-item.open .d-plus {
    background: #4842C1;
    border-color: #4842C1;
}

.single-alternative .diff-item.open .d-plus::before { background: #fff; }
.single-alternative .diff-item.open .d-plus::after  { display: none; }

/* feature cell */
.single-alternative .d-feat {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.single-alternative .d-name {
   color: #1B1851;
   font-family: Roboto;
   font-size: 15px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
}

.single-alternative .d-desc {
    color: #9A9AAE;
    font-family: Roboto;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

/* value cells: dot + text */
.single-alternative .diff-row .d-doo,
.single-alternative .diff-row .d-comp {
    align-items: flex-start;
}

.single-alternative .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 7px;
}

.single-alternative .dot-green { background: #16A34A; }
.single-alternative .dot-gray  { background: #E0DEFF; }

.single-alternative .d-val {
    font-family: Roboto;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

.single-alternative .val-doo  { 
   color: #16A34A;
   font-family: Roboto;
   font-size: 15px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
}
.single-alternative .val-comp {
   color: #5C5C7A;
   font-family: Roboto;
   font-size: 15px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
}

.single-alternative .d-val .addon {
    color: #B4B4C2;
    font-weight: 400;
    font-size: 13px;
}

/* expandable detail panel */
.single-alternative .diff-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.single-alternative .diff-item.open .diff-detail {
    max-height: 900px;
}

.single-alternative .diff-detail-inner {
    background: #F7F7FC;
    margin: 0 16px 16px;
    border-radius: 10px;
    padding: 23px 24px;
}

.single-alternative .diff-detail-inner p {
    color: #1B1851;
    font-family: Roboto;
    font-size: 13.5px;
    font-style: normal;
    font-weight: 400;
    line-height: 23.63px; /* 175.037% */
    margin: 0 0 14px;
}

.single-alternative .diff-detail-inner .why-matters-label {
    color: #1B1851;
    font-family: Roboto;
    font-size: 13.5px;
    font-style: normal;
    font-weight: 700;
    line-height: 23.63px; /* 175.037% */
    margin: 0 0 14px;
    
}

.single-alternative .diff-detail-inner .bottom-line {
   border-radius: 6px;
   border-top: 1px solid #E0DEFF;
   border-right: 1px solid #E0DEFF;
   border-bottom: 1px solid #E0DEFF;
   border-left: 9px solid #4842C1;
   background: #FFF;
    padding: 16px 20px;
    margin-top: 20px;
}

.single-alternative .diff-detail-inner .bottom-line .bl-label {
    color: #4842C1;
    font-family: Roboto;
    font-size: 8.9px;
    font-style: normal;
    font-weight: 900;
    line-height: 16px; /* 179.775% */
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.single-alternative .diff-detail-inner .bottom-line p {
    margin: 0;
    color: #1B1851;
    font-family: Roboto;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20.8px; /* 160% */
}

@media (max-width: 768px) {
    .single-alternative .diff-head > div,
    .single-alternative .diff-row > div {
        padding: 14px 12px;
    }
    .single-alternative .d-name { font-size: 14px; }
    .single-alternative .d-desc { display: none; }
    .single-alternative .d-val { font-size: 13px; }
    .single-alternative .diff-detail-inner { padding: 20px; margin: 0 10px 10px; }
}

/* ---------------------------------------- FAQ (light theme, dark text) -- */
.single-alternative .faqs {
    background: linear-gradient(180deg, #33268C 0%, #000 100%);
    padding: 64px 0 96px;
}

.single-alternative .faqs h2 {
    color: #FFF;
    text-align: center;
    font-family: Roboto;
    font-size: 36px;
    font-style: normal;
    font-weight: 900;
    line-height: 36.4px; /* 101.111% */
    letter-spacing: -1px;
    margin-bottom: 40px;
}

.single-alternative .faqs .faq-list {
    max-width: 820px;
    margin: 0 auto;
    border-top: 1px solid #E3E2E9;
}

.single-alternative .faqs .faq-item {
    border-bottom: 1px solid #E3E2E9;
    cursor: pointer;
}

.single-alternative .faqs .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
    user-select: none;
}

.single-alternative .faqs .faq-question-text {
    color: #fff;
     font-family: Roboto;
     font-size: 17px;
     font-weight: 400;
     line-height: 148%;
}

.single-alternative .faqs .expand-icon {
    color: #fff;
    font-family: Roboto;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.single-alternative .faqs .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding-bottom: 0;
}

.single-alternative .faqs .faq-item.open .faq-answer {
    max-height: 400px;
    padding-bottom: 24px;
}

.single-alternative .faqs .faq-answer p {
    color: rgba(255, 255, 255, 0.65);
     font-family: Roboto;
     font-size: 16px;
     font-weight: 400;
     line-height: 148%;
     margin: 0;
}


.doofinder-alternatives .testimonials-section {
   border-radius: 46px;
   border: 2px solid #FFF;
   background: linear-gradient(0deg, #FFF 68.27%, #E8E7FF 100%);
}

.doofinder-alternatives .testimonials-section .title-box h2 {
   color: #000;
    text-align: center;
    font-family: Roboto;
    font-size: 36px;
    font-weight: 900;
    line-height: 45px;
    margin-bottom: 24px;
}

.doofinder-alternatives .testimonials-section .title-box p {
   color: #3A3A3A;
    text-align: center;
    font-family: Roboto;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 148%;
    margin: 0 auto 48px;
}

.doofinder-alternatives .testimonials-section .title-box .eyebrow {
   color: #8979FF;
    text-align: center;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: 28px;
    margin-bottom: 8px;
}

.doofinder-alternatives .final-cta {
   background: linear-gradient(0deg, #33268C 0%, #4842C1 100%);
}

/* ------------------------------------------------------- RESPONSIVE -- */
@media (max-width: 992px) {
    .single-alternative .verdict-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .single-alternative .hero {
        padding: 110px 0 210px;
    }

    .single-alternative .hero h1 {
        font-size: 34px;
        line-height: 38px;
    }

    .single-alternative .verdict h2,
    .single-alternative .differences h2,
    .single-alternative .faqs h2 {
        font-size: 26px;
        line-height: 34px;
    }

    .single-alternative .comparative-table .table .content .inner-text span {
        font-size: 14px;
        margin-left: 6px;
    }

    .single-alternative .glance-note {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .single-alternative .glance-note .sep {
        display: none;
    }
}