.lead-automator-card-essentials {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px;
    /* margin-bottom: 164px; */
}

.lead-automator-top {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.lead-automator-left{
    flex: 1;
}

.lead-automator-icon {
    width: 267px;
    height: 80px;
    margin-bottom: 16px;
}

.lead-automator-details {
    flex: 1;
    max-width: 591px;
}

.lead-automator-header-text {
    font-size: 24px;
    font-weight: 700;
    line-height: 150%; /* 36px */
    color:  #128292;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.lead-automator-subheader-text {
    font-size: 18px;
    font-weight: 500;
    line-height: 150%; /* 27px */
    color: #3C4654;
}

.mb-33{
    margin-bottom: 33px;
}

.lead-automator-trial-text {
    font-size: 18px;
    color: #F16722;
    font-weight: 700;
    margin-top: 8px;
}

.lead-automator-button-container {
    text-align: center;
    margin: 20px 0;

    display: flex;
    width: 38%;
    justify-content: flex-end;
    padding-top: 77px;

}

.lead-automator-add-btn {
    display: flex;
    height: 36px;
    padding: 0 14px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 50px;
    background:#F16722;
    color: #FFF;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; 	
}

.lead-automator-add-btn:hover {
    opacity: 1.2;
}

.lead-automator-remove-btn {
    display: inline-flex;
    height: 36px;
    padding: 0 14px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 50px;
    border: 1px solid #DFE1E4;
    background:#FFF;
    color: #F16722;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.lead-automator-remove-btn:hover {
    opacity: 1.2;
}

.lead-automator-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 24px 0;
}

.lead-automator-skiptrace-info {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #E8EBFC;
    border-radius: 4px;
}

.lead-automator-skiptrace-header {
    font-size: 18px;
    font-weight: 700;
    line-height: 150%; /* 27px */
    color:  #535FB1;
}

.lead-automator-skiptrace-text {
    font-size: 18px;
    font-weight: 500;
    line-height: 150%;
    color:  #3C4654;
}

.lead-automator-details-text {
    font-weight: 700;
    color: #3C4654;
}

.lead-automator-details-list {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    color: #3C4654;
}

.lead-automator-details-list-text{
    margin: 0px;
}

.lead-automator-details-list img {
    height: 24px;
    width: 24px;
    flex-shrink: 0;
}

/* Pro/Elite Card Styles */
.lead-automator-card-proelite{
    box-sizing: border-box;
    padding-top: 80px;
}

.lead-automator-card-proelite-top{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 85px;
    max-width: 800px;
    margin: auto;
}

.lead-automator-card-proelite-right{
    flex: 1;
}

.lead-automator-congrats-img{
    height: 235px;
    width: 300px;
}

.lead-automator-congrats-header-text{
    font-size: 30px;
    font-weight: 700;
    line-height: 150%; /* 36px */
    color: #3C4654;
    margin-bottom: 8px;
}

.lead-automator-congrats-text{
    font-size: 24px;
    font-weight: 600;
    line-height: 150%; /* 36px */
    color: #3C4654;
    margin-bottom: 8px;
}

.lead-automator-plan-free{
    font-weight: 700;
    color: #F16722;
}

.lead-automator-congrats-description{
    font-size: 18px;
    font-weight: 500;
    line-height: 150%; /* 27px */
    color: #808894;
}



/* --------------------------------------------------------------------------
   ATAI-75 (QA, mobile): Connect-card top corrections to match the approved
   Figma. lead-automator.css is linked AFTER signup.css (mobile-response.css),
   so these win the cascade — the earlier mobile overrides were defeated by this
   file's base desktop rules (267px logo, 77px button top-gap), which is why the
   "$X FREE" tag rendered oversized/low and the "Add for $X/mo" button sat too
   far down. Desktop (>=769px) is untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* the mobile card padding (16px) is defeated by this file's base rule, so
       set it here too to reclaim the horizontal room the logo + tag need. */
    .lead-automator-card-essentials { padding: 16px; }

    .lead-automator-icon {
        width: auto;
        max-width: 150px;
        height: auto;
    }

    /* Pin the "$X FREE" tag / "Add for $X/mo" button to the top-right corner. */
    .lead-automator-top { position: relative; }

    .lead-automator-button-container {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
        margin: 0 !important;
        padding-top: 0;
        justify-content: flex-end;
    }

    #la-free-container img {
        max-width: 92px;
        height: auto;
    }

    /* Compact pill that fits beside the logo (Figma), not a full-width button. */
    .lead-automator-add-btn,
    .lead-automator-remove-btn {
        width: auto;
        white-space: nowrap;
        font-size: 13px;
        height: 34px;
        padding: 0 12px;
        gap: 4px;
    }
    .lead-automator-add-btn img,
    .lead-automator-remove-btn img {
        width: 12px;
        height: 12px;
    }

    /* PROPS-3441: the Connect description/details text was rendering at the large
       desktop sizes on mobile (this file is linked AFTER mobile-response.css, so
       its base rules won), making the copy oversized and wrapping the
       "campaign—all in one place and at a lower cost" line under the logo.
       Set the Figma mobile sizes here so they win the cascade. */
    .lead-automator-header-text {
        font-size: 18px;
    }
    .lead-automator-subheader-text,
    .lead-automator-trial-text {
        font-size: 13px;
    }
    .lead-automator-details-list,
    .lead-automator-details-list-text {
        font-size: 13px;
    }
    .lead-automator-details-list img {
        height: 20px;
        width: 20px;
    }
    .lead-automator-congrats-header-text {
        font-size: 18px;
    }
    .lead-automator-congrats-text,
    .lead-automator-congrats-description {
        font-size: 14px;
        line-height: 150%;
    }
}