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

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #F4F7FC;
    /* Set from user */
}
#signup1 .button-row button {
    flex: 1;
}

/* First Layout - Header */
.header {
    background-color: #000000;
    width: 100%;
    height: 97px;
    padding-top: 11px;
    padding-right: 39px;
    padding-bottom: 11px;
    padding-left: 39px;
    gap: 10px;
    display: flex;
    align-items: center;
}

/* Left side icon on first layout */
.logo-container {
    width: 284px;
    height: 75px;
    gap: 10px;
    display: flex;
    align-items: center;
}

/* Image Size */
.logo-image {
    width: 170px;
    height: 75px;
    object-fit: contain;
    /* Use contain to assure proportional resize just in case */
}

/* Main Layout */
.main-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 64px 24px;
    display: flex;
    gap: 30px;
    justify-content: center;
}

/* Left Section: Signup Card */
.signup-card {
    width: 100%;
    min-width: 320px;
    max-width: 558px;
    min-height: 595px;
    /* height given by user is 595 */
    background: #ffffff;
    border: 1px solid #e0e0e0;
    /* Stroke/Border approx */
    border-radius: 8px;
    /* Radius/200 */
    padding: 32px;
    /* Space/600 approx */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Left First Section (Header) */
.signup-header-section {
    width: 100%;
    max-width: 510px;
    height: auto;
    /* user specified 65px */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.signup-header-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 26px;
    /* Heading/Size Base approx */
    line-height: 1.2;
    color: #222;
}

.signup-header-section p {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #555;
    line-height: 1.4;
}

.highlight-orange {
    color: #FF5722;
}

/* Form Styles */
.signup-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row {
    display: flex;
    gap: 16px;
    width: 100%;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.form-group.full-width {
    width: 100%;
}

.form-group label {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #444;
}

.form-group input {
    height: 44px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    padding: 0 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #333;
    outline: none;
    transition: border-color 0.3s;
}

.form-group input:focus {
    border-color: #555;
}

.form-group input::placeholder {
    color: #999;
}

.captcha-display {
    height: 44px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    background-color: #f9f9f9;
    color: #666;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #444;
    line-height: 1.4;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 3px;
    accent-color: #333;
}

.checkbox-label a {
    color: #666;
    text-decoration: none;
}

.button-row {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.button-row button {
    /* flex: 1; */
    height: 44px;
    border-radius: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.3s, color 0.3s;
}

.btn-signup-outline {
    background-color: #ffffff;
    border: 1px solid #333;
    color: #333;
}

.btn-signup-outline:hover {
    background-color: #f9f9f9;
}

.btn-request-demo {
    background-color: #2b2b2b;
    border: none;
    color: #ffffff;
}

.btn-request-demo:hover {
    background-color: #1a1a1a;
}

.privacy-text {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #666;
    line-height: 1.4;
    margin-top: 4px;
}

/* Right Section */
.features-section {
    width: 100%;
    flex: 1;
    /* take up remaining space naturally */
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.features-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 6px;
}

.features-header p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #555;
    line-height: 121%;
    text-align: justify;
}

.features-header h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 18px;
    font-style: italic;
    /* Match 'Next-Gen Innovations for Modern Testing' */
    color: #222;
    line-height: 120%;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 12px 20px;
}

.feature-card {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 8px;
    padding: 15px 2px 15px 2px;
    width: 242px;
    height: 90px;
    min-width: 242px;
    max-width: 242px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.feature-icon-wrapper {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background-color: #ffffff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon-wrapper i {
    font-size: 20px;
    color: #333;
}

/* Added to ensure your images fit perfectly when you replace the icons */
.feature-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.feature-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.feature-text h4 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #333;
    line-height: 1.2;
}

.feature-text p {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    color: #666;
    line-height: 1.3;
}

/* Metrics Row */
.metrics-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
    width: 763px;
    height: 86.5px;
    min-width: 320px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 8px;
}

.metric-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
}

.metric-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    color: #222;
    font-weight: 600;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.metric-value strong {
    font-size: 24px;
    font-weight: 800;
    color: #FF5722;
}

.metric-label {
    font-family: 'Roboto', sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: #555;
}

.metric-divider {
    width: 1px;
    height: 36px;
    background-color: #e0e0e0;
}

/* Marketplaces Row */
.marketplaces-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10.62px;
    width: 736px;
    height: 56.48px;
    min-width: 152.66px;
    max-width: 736px;
}

.marketplace-badge {
    background-color: #2b2b2b;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    width: 135.52px;
    height: 53.10px;
    min-width: 135.4px;
    max-width: 135.52px;
    padding-top: 14.6px;
    padding-bottom: 14.6px;
    border-radius: 5.31px;
    line-height: 1.3;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marketplaces-row img {
    width: 135.55px;
    height: 56.48px;
    min-width: 135.55px;
    max-width: 135.55px;
    border-radius: 2.65px;
    object-fit: cover;
    background: #ffffff;
}

/* Responsive adjustments for Tablet and Mobile */
@media (max-width: 1100px) {

    /* Retain 3 columns, but let wrappers adapt */
    .metrics-row,
    .marketplaces-row {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 800px) {

    /* Allow cards to flex slightly to avoid horizontal scroll when squeezed before 700px break */
    .feature-card {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 690px) {
    .features-grid {
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        gap: 20px 40px;
    }

    .metrics-row {
        flex-wrap: wrap;
        height: auto;
        justify-content: center;
        gap: 30px 40px;
        padding: 40px 20px;
    }

    .metric-divider {
        display: none;
    }

    .metric-item {
        flex: 0 0 auto;
        min-width: 160px;
    }

    .marketplaces-row {
        flex-wrap: wrap;
        height: auto;
        justify-content: center;
        padding: 20px;
        gap: 20px;
    }
}

@media (max-width: 992px) {
    .main-container {
        flex-direction: column;
        align-items: center;
        padding: 40px 20px;
    }

    .signup-card {
        max-width: 100%;
        min-width: 100%;
        padding: 24px;
        min-height: auto;
    }

    .features-section {
        max-width: 100%;
        align-items: center;
    }

    .features-header {
        text-align: center;
        align-items: center;
    }

    .features-header p {
        text-align: center;
    }
}

@media (max-width: 500px) {
    .verify-email-card {
        gap: 20px !important;
    }
    .verify-text-block {
        gap: 25px !important;
    }
    .features-header {
        gap: 25px;
    }
    .main-container {
        padding: 24px 12px;
        gap: 20px;
    }

    .features-header p {
        text-align: left; 
    }

    .signup-card {
        padding: 24px 16px;
    }

    .header {
        padding: 10px 16px;
        height: auto;
        justify-content: center;
    }

    .logo-container {
        justify-content: center;
    }

    .logo-image {
        width: 140px;
        height: auto;
    }

    .signup-header-section h2 {
        font-size: 22px;
    }

    .form-row, .captcha-row {
        flex-direction: column;
        gap: 16px;
    }

    .button-row {
        flex-direction: row;
        gap: 10px;
    }

    .button-row button {
        font-size: 13px;
        padding: 0 4px;
        height: 42px;
    }

    .captcha-display-group label {
        display: none;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .feature-card {
        width: 100%;
        max-width: 100%;
        min-width: unset;
        height: auto;
    }

    .metrics-row {
        padding: 20px 16px;
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .metric-item {
        flex: 0 0 calc(50% - 10px);
        min-width: 120px;
    }

    .marketplaces-row {
        padding: 20px 16px;
        gap: 16px;
        justify-content: center;
    }

    .marketplace-badge {
        width: 100%;
        max-width: none;
        height: auto;
        padding: 12px;
    }

    .marketplaces-row img {
        width: calc(50% - 10px); 
        height: auto;
        min-width: unset;
        max-width: 135px;
        object-fit: contain;
    }
}

/* signup2.html left section */
.verify-email-card {
    max-width: 523px;
    min-height: 402px;
    padding: 20px;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 54px;
}

.verify-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.verify-text-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    text-align: center;
}

.verify-text-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.verify-text-block h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.4;
    color: #222;
}

.verify-paragraphs .verify-primary-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: #333;
    text-align: center;
}

.verify-paragraphs .verify-secondary-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #444;
    text-align: center;
    margin-top: 15px;
}

.btn-resend-verification {
    width: 241px;
    height: 45px;
    padding: 12px 16px;
    border-radius: 10px;
    background: linear-gradient(180deg, #F2A16F 13.02%, #FF5000 82.81%);
    border: 1px solid #FF5000; /* border-image usually breaks modern radius rounding, solid is preferred boundary */
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter 0.3s;
}

.btn-resend-verification:hover {
    filter: brightness(1.1);
}

/* signup3.html file css */
.signup3-card {
    max-width: 549px;
    padding: 0;
    background: transparent;
    border: none;
    gap: 33px;
    align-items: flex-start;
}

.signup3-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.verified-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #333;
}

.signup3-header h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.5;
    color: #222;
}

.signup3-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.signup3-form .form-group {
    gap: 8px;
}

.signup3-form label {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #444;
}

.signup3-form input, .signup3-form select {
    height: 40px;
    border-radius: 8px;
    border: 1px solid #D9D9D9;
    padding: 8px 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    width: 100%;
    outline: none;
    background: #FFFFFF;
}

.input-with-addon {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.input-with-addon input {
    flex: 1;
}

.input-addon {
    height: 40px;
    background-color: #333333;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    white-space: nowrap;
}

.help-text {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    color: #444;
    margin-top: 4px;
}

.help-text strong {
    color: #222;
}

.select-wrapper {
    position: relative;
    width: 100%;
}

.select-wrapper select {
    appearance: none;
    cursor: pointer;
    color: #666;
}

.select-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #444;
}

.centered-button {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.btn-primary-gradient {
    width: 240px;
    height: 45px;
    padding: 12px 16px;
    border-radius: 10px;
    background: linear-gradient(180deg, #F2A16F 13.02%, #FF5000 82.81%);
    border: 1px solid #FF5000;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter 0.3s;
}

.btn-primary-gradient:hover {
    filter: brightness(1.1);
}

/* signup4.html left section */
.setup-account-card {
    max-width: 523px;
    min-height: 327px;
    padding: 0;
    background: transparent !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.setup-image {
    width: 215px;
    height: 215px;
    object-fit: contain;
}

.setup-text-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.setup-primary-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: #333;
}

.setup-secondary-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #444;
}