/* Motorgy Landing Page Styles */

/* Reset and Base Styles — scoped to landing page sections only */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #ffffff;
    color: #1d1d1e;
    line-height: 1.5;
}

/* Landing page generic container — applies to our sections */
.container {
    margin: 0 auto;
    padding: 0 96px;
}

/* ---- Restore header / navbar Bootstrap styles ---- */
/* The .container override above must NOT affect the navbar */
header .container,
header .container-xxl,
header .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---- Restore footer Bootstrap styles ---- */
footer .container,
footer .container-xxl,
footer .container-fluid,
.app-banner .container,
.app-banner .container-xxl {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1320px !important;
}

/* Restore Bootstrap navbar spacing that the old * reset wiped out */
header .nav-item {
    margin: 0;
}

header .nav-link {
    padding: 0.5rem 1rem;
}

header .navbar {
    padding: 0.5rem 1rem;
}

header .offcanvas-header {
    padding: 1rem;
}

header .offcanvas-body {
    padding: 1rem;
}

header .border-bottom {
    border-bottom: 1px solid #dee2e6 !important;
}

header .p-4 {
    padding: 1.5rem !important;
}

header .mb-5 {
    margin-bottom: 3rem !important;
}

header .mt-2 {
    margin-top: 0.5rem !important;
}

header .me-2 {
    margin-right: 0.5rem !important;
}

header .mb-0 {
    margin-bottom: 0 !important;
}

header .col-1,
header .col-10,
header .col-3,
header .col-6 {

}

/* Hero Section */
.hero-section {
    background: linear-gradient(180deg, #eaf5f8 50%, #ffffff 100%);
    padding: 64px 0 0;
    position: relative;
    min-height: 610px;
}

.hero-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 96px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.hero-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 506px;
    flex-shrink: 0;
}

.trusted-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #e6f7ed;
    border: 1px solid rgba(0, 175, 72, 0.35);
    border-radius: 100px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1e;
    height: 32px;
    width: 261px;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.check-icon {
    width: 16px;
    height: 16px;
}

.hero-title {
    font-family: 'Geist', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.32px;
    color: #003356;
    width: 450px;
    margin: 0 0 16px;
}

.brand-name {
    color: #003356;
}

.hero-description {
    font-family: 'Geist', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 24px;
    width: 450px;
}

/* Car Showcase */
.car-showcase {
    width: 429px;
    height: 274px;
    position: relative;
    flex-shrink: 0;
}

.car-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stat-bubble {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-1 {
    top: -18px;
    left: 161px;
    width: 45.695px;
    height: 18.469px;
    transform: scaleY(-1) rotate(180deg);
}

.stat-2 {
    top: 0px;
    right: 0px;
    width: 47.695px;
    height: 18.469px;
}

.stat-3 {
    top: 25px;
    left: 113px;
    width: 37.188px;
    height: 16.652px;
    opacity: 0.3;
    transform: scaleY(-1) rotate(180deg);
}

.stat-bg {
    width: 100%;
    height: 100%;
}

.stat-number {
    position: absolute;
    font-family: 'Geist', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: white;
    text-align: center;
    letter-spacing: 0.32px;
}

.stat-3 .stat-number {
    font-size: 10px;
    opacity: 0.3;
}

/* Form Container */
.form-container {
    background-color: #ffffff;
    border-radius: 24px;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.05);
    padding: 32px 24px;
    width: 503px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-shrink: 0;
}

.form-title {
    font-family: 'Geist', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin: 0;
    color: #1d1d1e;
    flex-shrink: 0;
}

.brand-grid-container {
    flex-shrink: 0;
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 20px;
    border: 1px dashed #e2e8f0;
    border-radius: 16px;
    background-color: white;
}

.brand-item {
    position: relative;
    cursor: pointer;
}

.brand-background {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/*.brand-item:hover .brand-background {*/
/*    border-color: #00af48;*/
/*    background-color: #f8fafc;*/
/*    transform: translateY(-2px);*/
/*}*/

.brand-background a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.brand-logo {
    width: 80%;
    height: 80%;
    border-radius: 8px;
    object-fit: cover;
}

.other-bg {
    background-color: #f1f5f9 !important;
}

.other-text {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
}

.brand-placeholder .brand-background {
    background-color: #f8fafc;
    border: 1px solid #f1f5f9;
}

.start-selling-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    background-color: #00af48;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-family: 'Geist', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin: 0;
    transition: background-color 0.2s ease;
    text-decoration: none;
    text-align: center;
    flex-shrink: 0;
}

.start-selling-btn:hover {
    background-color: #009940;
    color: #ffffff;
    text-decoration: none;
}

/* Micro Dealer Promo */
.micro-dealer-promo {
    height: 72px;
    background-color: white;
    border: 2px solid #f1f5f9;
    border-radius: 16px;
    flex-shrink: 0;
}

.promo-content {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    height: 100%;
}

.promo-icon {
    width: 44px;
    height: 44px;
    background-color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
}

.dealer-icon {
    width: 32px;
    height: 32px;
}

.promo-text {
    flex: 1;
}

.promo-title {
    font-family: 'Geist', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1e;
    margin: 0 0 4px 0;
    letter-spacing: 0.16px;
}

.promo-subtitle {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #64748b;
    margin: 0;
}

.promo-arrow {
    width: 32px;
    height: 32px;
    background-color: #f8fafc;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.arrow-icon {
    width: 21.333px;
    height: 21.333px;
}

/* Mobile Form Section */
.mobile-form-section {
    display: none;
    padding: 16px 16px 24px;
    background-color: #ffffff;
    border-top: 1px solid #f1f5f9;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.05);
}

@media (min-width: 993px) {
    .mobile-form-section {
        display: none !important;
    }
}

.mobile-form-container {
    max-width: 375px;
    margin: 0 auto;
}

.mobile-form-title {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.16px;
    text-align: center;
    margin-bottom: 16px;
    color: #1d1d1e;
}

.mobile-brand-grid-container {
    margin-bottom: 16px;
}

.mobile-brand-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background-color: white;
}

.mobile-brand-item {
    position: relative;
    cursor: pointer;
}

.mobile-brand-background {
    width: 100%;
    height: 70px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mobile-brand-item:hover .mobile-brand-background {
    border-color: #00af48;
    background-color: #f8fafc;
    transform: translateY(-2px);
}

.mobile-brand-background a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.mobile-brand-logo {
    width: 80%;
    height: 80%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    object-fit: contain;
}

.mobile-other-bg {
    background-color: #f1f5f9 !important;
}

.mobile-other-text {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
}

.mobile-start-selling-btn {
    display: none;
}

.mobile-dealer-promo {
    display: flex;
    align-items: center;
    width: 100%;
    height: 68px;
    border: 2px solid #f1f5f9;
    border-radius: 12px;
    background-color: #ffffff;
    padding: 0 12px;
    text-decoration: none;
    gap: 12px;
    margin-top: 8px;
    box-sizing: border-box;
}

.mobile-dealer-promo:hover {
    background-color: #f8fafc;
    text-decoration: none;
}

.mobile-dealer-promo-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.mobile-dealer-promo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mobile-dealer-promo-text {
    flex: 1;
    min-width: 0;
}

.mobile-dealer-promo-title {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.16px;
    color: #1d1d1e;
    margin: 0 0 2px;
    line-height: 1.3;
}

.mobile-dealer-promo-subtitle {
    font-family: 'Geist', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.16px;
    color: #64748b;
    margin: 0;
    line-height: 1.3;
}

.mobile-dealer-promo-arrow {
    width: 24px;
    height: 24px;
    background-color: #f8fafc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-dealer-promo-arrow img {
    width: 16px;
    height: 16px;
}

/* ===== Arabic (Cairo) Font Overrides ===== */
/* Cairo-Medium for regular/body text */
[dir="rtl"] .trusted-badge span,
[dir="rtl"] .hero-description,
[dir="rtl"] .form-subtitle,
[dir="rtl"] .other-text,
[dir="rtl"] .mobile-other-text,
[dir="rtl"] .promo-subtitle,
[dir="rtl"] .mobile-dealer-promo-subtitle,
[dir="rtl"] .how-works-subtitle,
[dir="rtl"] .toggle-option,
[dir="rtl"] .comparison-cell,
[dir="rtl"] .comparison-text,
[dir="rtl"] .cta-banner-subtitle,
[dir="rtl"] .reviews-subtitle,
[dir="rtl"] .review-text,
[dir="rtl"] .reviewer-detail,
[dir="rtl"] .buyer-tag,
[dir="rtl"] .faq-subtitle,
[dir="rtl"] .faq-view-all,
[dir="rtl"] .faq-card-body p,
[dir="rtl"] .need-help-subtitle,
[dir="rtl"] .help-card-sub,
[dir="rtl"] .services-stats {
    font-family: Cairo-Medium !important;
}

/* Cairo-SemiBold for headings and emphasis */
[dir="rtl"] .hero-title,
[dir="rtl"] .brand-name,
[dir="rtl"] .form-title,
[dir="rtl"] .mobile-form-title,
[dir="rtl"] .promo-title,
[dir="rtl"] .mobile-dealer-promo-title,
[dir="rtl"] .start-selling-btn,
[dir="rtl"] .mobile-sticky-cta-btn,
[dir="rtl"] .how-works-title,
[dir="rtl"] .toggle-option.active,
[dir="rtl"] .step-title,
[dir="rtl"] .services-heading,
[dir="rtl"] .services-stats-em,
[dir="rtl"] .service-pill,
[dir="rtl"] .comparison-feature,
[dir="rtl"] .comparison-feature--title,
[dir="rtl"] .comparison-num-em,
[dir="rtl"] .cta-banner-title,
[dir="rtl"] .cta-button,
[dir="rtl"] .reviews-heading,
[dir="rtl"] .reviewer-name,
[dir="rtl"] .faq-title,
[dir="rtl"] .faq-card-question,
[dir="rtl"] .need-help-title,
[dir="rtl"] .help-card-title,
[dir="rtl"] .help-card-call-badge {
    font-family: Cairo-SemiBold !important;
}

/* ===== RTL (Arabic) Hero Overrides ===== */

/*
 * In RTL the browser automatically makes flex start = right side.
 * .hero-container is a row flex — with dir="rtl", flex-start is already
 * the right edge, so the form (second child) naturally appears on the left
 * and hero-left appears on the right. No row-reverse needed.
 *
 * Inside .hero-left (flex column), align-items: flex-start means
 * children anchor to the inline-start edge = right in RTL. Correct.
 * We only need to right-align the text content.
 */

[dir="rtl"] .hero-title,
[dir="rtl"] .hero-description {
    text-align: right;
}

/* Badge text right-aligned, icon still on the right of the text */
[dir="rtl"] .trusted-badge {
    flex-direction: row-reverse;
}

/* Promo row: icon margin flips */
[dir="rtl"] .promo-icon {
    margin-right: 0;
    margin-left: 16px;
}

/* Promo arrow flips direction */
[dir="rtl"] .promo-arrow .arrow-icon {
    transform: scaleX(-1);
}

/* Mobile RTL: mobile promo arrow flips direction */
[dir="rtl"] .mobile-dealer-promo-arrow img {
    transform: scaleX(-1);
}

/* Mobile RTL: stat-1 and stat-2 swap sides */
@media (max-width: 992px) {
    [dir="rtl"] .stat-1 {
        left: auto;
        right: 10px;
    }

    [dir="rtl"] .stat-2 {
        right: auto;
        left: 10px;
    }

    /* Badge is centered on mobile — keep icon order natural */
    [dir="rtl"] .trusted-badge {
        flex-direction: row;
    }
}

/* ===== END RTL Hero Overrides ===== */

/* ================================================
   GLOBAL RTL (Arabic) OVERRIDES — all sections
   Applied when <html dir="rtl"> is set by layout
   ================================================ */

/* ---- How It Works: desktop illustration positions ---- */
/* person-illustration-1 sits at left:110px — flip to right */
[dir="rtl"] .person-illustration-1 {
    left: auto;
    right: 110px;
    transform: scaleY(-1) rotate(180deg) scaleX(-1);
}

/* person-illustration-2 sits at left:154px — flip to right */
[dir="rtl"] .person-illustration-2 {
    left: auto;
    right: 154px;
}

/* communication-icons sits at left:159px — flip to right */
[dir="rtl"] .communication-icons {
    left: auto;
    right: 159px;
}

/* phone icon inside comm-icons is already rotated; flip it horizontally for RTL */
[dir="rtl"] .phone-icon {
    transform: scaleX(-1);
}

/* handshake illustration left:104px — flip to right */
[dir="rtl"] .handshake-illustration {
    left: auto;
    right: 104px;
}

/* phone-mockup-container in step 2: right:105.3px stays OK on desktop (already right-anchored) */
/* phone-mockup-container-1 in self-service step: right:42.25px stays OK on desktop */

/* step-2-stats (stat-left / stat-right / stat-bottom): mirror them */
[dir="rtl"] .stat-left {
    left: auto;
    right: 133px;
    transform: scaleY(-1) rotate(180deg) scaleX(-1);
}

[dir="rtl"] .stat-right {
    right: auto;
    left: 0;
}

/* ---- How It Works: mobile step card row ---- */
@media (max-width: 992px) {
    [dir="rtl"] .step-number {
        margin-right: 0;
        margin-left: 12px;
    }

    [dir="rtl"] .step-title {
        text-align: right;
        margin-right: 0;
        margin-left: 12px;
    }

    /* flip mobile stat positions (step 2 stats in row layout) */
    [dir="rtl"] .stat-left {
        left: auto;
        right: 10px;
        transform: scaleY(-1) rotate(180deg) scaleX(-1);
    }

    [dir="rtl"] .stat-right {
        right: auto;
        left: 2px;
    }

    [dir="rtl"] .hero-title,
    [dir="rtl"] .hero-description {
        text-align: center;
    }

}

/* ---- Services comparison table ---- */
/* Feature column: left-aligned text + left padding → right */
[dir="rtl"] .comparison-feature {
    text-align: right;
    padding-left: 16px;
    padding-right: 24px;
}

@media (max-width: 992px) {
    [dir="rtl"] .comparison-feature {
        padding-left: 8px;
        padding-right: 16px;
    }
}

/* ---- CTA Banner ---- */
[dir="rtl"] .cta-banner-copy {
    text-align: right;
}


@media (min-width: 993px) {
    [dir="rtl"] .reviews-carousel-wrap {
        padding-right: 0;
        padding-left: 52px;
    }
}

/* ---- FAQ: header button text-align + caret flip ---- */
[dir="rtl"] .faq-card-header {
    text-align: right;
}

/* Caret points down when collapsed; rotation stays the same (180deg = up).
   But the icon SVG itself might be a right-pointing caret — flip it. */
[dir="rtl"] .faq-card-caret {
    transform: scaleX(-1);
}

[dir="rtl"] .faq-card-header:not(.collapsed) .faq-card-caret {
    transform: scaleX(-1) rotate(180deg);
}

/* ---- Need Help: flip arrow/caret icons ---- */
[dir="rtl"] .help-caret {
    transform: scaleX(-1);
}

/* Phone card: LTR phone number in isolate; line up with RTL Arabic subtitle on the same edge */
[dir="rtl"] .help-card-phone .help-card-title {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: end;
}

[dir="rtl"] .help-card-phone .help-card-sub {
    text-align: right;
}

/* ===============================================
   END GLOBAL RTL OVERRIDES
   =============================================== */

/* How It Works Section */
.how-it-works-section {
    padding: 32px 0 0;
    background-color: #ffffff;
    position: relative;
}

.how-works-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 96px;
    position: relative;
}

.how-works-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
}

.how-works-left {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.how-works-title {
    font-family: 'Geist', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #1d1d1e;
    margin: 0;
    line-height: 1;
}

.how-works-subtitle {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #64748b;
    margin: 8px 0 0 0;
    line-height: 1;
}

.service-toggle {
    position: relative;
}

.toggle-background {
    width: 294px;
    height: 44px;
    background-color: #f1f5f9;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 6px;
    gap: 0;
    box-sizing: border-box;
}

.toggle-active {
    display: none;
}

.toggle-active-text {
    display: none;
}

.toggle-option {
    height: 32px;
    background-color: #f1f5f9;
    border: none;
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #64748b;
    cursor: pointer;
    border-radius: 24px;
    padding: 0 12px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.toggle-option.active {
    background-color: #94a3b8;
    font-weight: 600;
    color: #ffffff;
}

.toggle-concierge {
    width: 156px;
    text-align: center;
}

.toggle-self-service {
    width: 126px;
    text-align: center;
}

.section-divider {
    width: 1248px;
    height: 1px;
    background-color: #e2e8f0;
    margin: 0 auto 32px;
    transform: translateX(-50%);
    left: 50%;
    position: relative;
}

.steps-container {
    position: relative;
}

.service-steps {
    display: none;
    justify-content: center;
    gap: 40px;
    position: relative;
    min-height: 350px;
    align-items: flex-start;
}

.service-steps.active {
    display: flex;
}

.step-card {
    width: 400px;
    background: linear-gradient(180deg, #f8fafc 50%, #ffffff 100%);
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 20px 0;
    box-sizing: border-box;
}

.step-number {
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.step-icon {
    width: 28px;
    height: 28px;
}

.step-title {
    font-family: 'Geist', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #1d1d1e;
    line-height: 1.5;
    white-space: pre-line;
    text-align: center;
    margin: 0 0 16px;
}

.step-image {
    width: 200px;
    height: 120px;
    flex-shrink: 0;
}

.step-img {
    width: 200px;
    height: 120px;
    object-fit: cover;
}

/* Step 2 Specific Styles */
.step-2-image {
    position: relative;
}

.step-2-bg {
    transform: scaleY(-1) rotate(180deg);
    width: 200px;
    height: 120px;
    object-fit: cover;
}

.phone-mockup-container {
    position: absolute;
    top: 8px;
    right: 105.3px;
    width: 36.36px;
    height: 94.533px;
}

.phone-frame {
    width: 100%;
    height: 100%;
}

.phone-screen {
    position: absolute;
    top: 0.7px;
    left: 0.93px;
    width: 34.5px;
    height: 93.2px;
    overflow: hidden;
    border-radius: 8px;
}

.phone-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.step-2-stats {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 140px;
}

.stat-left {
    position: absolute;
    top: 0px;
    left: 133px;
    width: 45.695px;
    height: 18.469px;
    transform: scaleY(-1) rotate(180deg);
}

.stat-right {
    position: absolute;
    top: 11px;
    right: 0px;
    width: 47.695px;
    height: 18.469px;
}

.stat-bottom {
    position: absolute;
    top: 26px;
    left: 115px;
    width: 37.188px;
    height: 16.652px;
}

.stat-bg {
    width: 100%;
    height: 100%;
}

.stat-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Geist', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: white;
    letter-spacing: 0.32px;
}

.stat-bottom .stat-number {
    font-size: 10px;
}

/* Step 3 Specific Styles */
.step-3-bg {
    transform: scaleY(-1) rotate(180deg);
}

.payment-illustration {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 88.8px;
    height: 104px;
    object-fit: cover;
}

/* Self Service Step Styles */
.self-service-step-1 {
    position: relative;
}

.step-1-bg {
    transform: scaleY(-1) rotate(180deg);
}

.phone-mockup-container-1 {
    position: absolute;
    top: 8px;
    right: 42.25px;
    width: 40.002px;
    height: 103.923px;
}

.phone-screen-1 {
    position: absolute;
    top: 0.461px;
    left: 0px;
    width: 40.002px;
    height: 103.923px;
    overflow: hidden;
    border-radius: 8px;
}

.person-illustration-1 {
    position: absolute;
    top: 9px;
    left: 110px;
    width: 92.8px;
    height: 104px;
    transform: scaleY(-1) rotate(180deg);
    object-fit: cover;
}

.self-service-step-2 {
    position: relative;
}

.person-illustration-2 {
    position: absolute;
    top: 9px;
    left: 154px;
    width: 92.8px;
    height: 104px;
    object-fit: cover;
}

.communication-icons {
    position: absolute;
    top: 8px;
    left: 159px;
}

.comm-icon {
    position: absolute;
    opacity: 0.7;
}

.phone-icon {
    top: 0px;
    left: 0px;
    width: 28px;
    height: 28px;
    transform: scaleY(-1) rotate(180deg);
}

.message-icon {
    top: -8px;
    left: 47px;
    width: 20px;
    height: 20px;
}

.chat-icon {
    top: 10px;
    left: 57px;
    width: 28px;
    height: 28px;
}

.handshake-illustration {
    position: absolute;
    top: 9.6px;
    left: 104px;
    width: 92.8px;
    height: 104px;
    object-fit: cover;
}

/* Services comparison (Figma: Choose the service / matrix) */
.services-section {
    padding: 0 0 56px;
    background-color: #ffffff;
}

.services-section-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 96px;
}

.services-divider {
    height: 1px;
    background-color: #e2e8f0;
    width: 100%;
    margin: 0 0 40px;
}

.services-intro {
    text-align: center;
    margin-bottom: 32px;
}

.services-heading {
    font-family: 'Geist', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.16px;
    color: #1d1d1e;
    margin: 0 0 16px;
}

.services-stats {
    font-family: 'Geist', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #64748b;
    margin: 0;
}

.services-stats-em {
    font-weight: 600;
    letter-spacing: 0.16px;
}

.comparison-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.comparison-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 1248px;
    margin: 0 auto;
}

.comparison-row {
    display: grid;
    grid-template-columns: 400px 400px 400px;
    gap: 24px;
    align-items: stretch;
    min-height: 50px;
}

.comparison-row--header {
    align-items: center;
    margin-bottom: 20px;
}

.comparison-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 16px;
    font-family: 'Geist', sans-serif;
    font-size: 16px;
    line-height: normal;
    color: #1d1d1e;
    text-align: center;
    box-sizing: border-box;
}

.comparison-feature {
    justify-content: flex-start;
    text-align: left;
    padding-left: 24px;
    padding-right: 16px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.16px;
    color: #64748b;
    background: transparent;
    white-space: pre-line;
}

.comparison-feature--title {
    color: #1d1d1e;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    min-height: 50px;
}

.comparison-feature-heading {
    display: block;
    width: 100%;
}

.comparison-plan--header {
    background: transparent;
    padding: 0;
    min-height: 50px;
}

.service-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 50px;
    min-width: 170px;
    border-radius: 100px;
    font-family: 'Geist', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1e;
    white-space: nowrap;
    padding: 0 16px;
    box-sizing: border-box;
}

.service-pill--concierge {
    background-color: #eaf5f8;
}

.service-pill--self {
    background-color: #f1f5f9;
}

.service-pill-icon {
    flex-shrink: 0;
    object-fit: contain;
    width: 24px;
    height: 24px;
}

.comparison-row--odd .comparison-concierge {
    background-color: #f4fafc;
}

.comparison-row--odd .comparison-self {
    background-color: #f8fafc;
}

.comparison-row--even .comparison-concierge,
.comparison-row--even .comparison-self {
    background-color: #ffffff;
}

.comparison-cell--icon img {
    display: block;
    width: 24px;
    height: 24px;
}

.comparison-text {
    font-weight: 400;
}

.comparison-text strong {
    font-weight: 600;
}

.comparison-num-em {
    font-weight: 600;
}

/* CTA banner (Figma: 2239:3434) */
.cta-section {
    padding: 40px 0;
    background-color: #ffffff;
}

.cta-banner-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 96px;
}

.cta-banner {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    min-height: 128px;
    max-width: 1248px;
    margin: 0 auto;
    background: url("/images/Finance/finance_bg_12cs.gif") lightgray -72.303px -10.926px / 136.152% 115.721% no-repeat;
}

.cta-banner-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cta-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    display: block;
}

.cta-banner-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 128px;
    padding: 26px 32px;
    box-sizing: border-box;
}

.cta-banner-icon {
    flex-shrink: 0;
    width: 75px;
    height: 75px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-banner-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.cta-banner-copy {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.cta-banner-title {
    font-family: 'Geist', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
    color: #1d1d1e;
    margin: 0 0 8px;
}

.cta-banner-subtitle {
    font-family: 'Geist', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #64748b;
    margin: 0;
}

.cta-banner-action {
    flex-shrink: 0;
    padding-inline-end: 20px;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 294px;
    min-height: 48px;
    padding: 12px 24px;
    background-color: #00af48;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-family: 'Geist', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
    text-align: center;
}

.cta-button:hover {
    background-color: #009940;
    color: #ffffff;
    text-decoration: none;
}

/* Reviews Section (Figma node 2239:3141) */
.reviews-section {
    padding: 32px 0 56px;
    background-color: #f8fafc;
}

.reviews-section-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 96px;
}

.reviews-section-container {
    position: relative;
    overflow: visible;
}

.reviews-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.reviews-intro {
    flex: 1;
    min-width: 0;
}

.reviews-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.reviews-heading {
    font-family: 'Geist', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
    color: #1d1d1e;
    margin: 0;
}

.reviews-heart-icon {
    display: block;
    flex-shrink: 0;
}

.reviews-subtitle {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #64748b;
    margin: 0;
}

.reviews-section .view-all-btn,
.reviews-section .view-all-btn:link,
.reviews-section .view-all-btn:visited {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 139px;
    height: 38px;
    padding: 0 20px;
    background: transparent;
    border: 2px solid #e2e8f0;
    border-radius: 24px;
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #1d1d1e;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.reviews-section .view-all-btn:hover,
.reviews-section .view-all-btn:active {
    border-color: #cbd5e1;
    background-color: #ffffff;
    color: #1d1d1e;
    text-decoration: none;
}

.reviews-carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
}

.reviews-slider {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    width: 100%;
    gap: 0;
}

.reviews-slider::-webkit-scrollbar {
    display: none;
}

.review-slide {
    flex-shrink: 0;
    padding: 0 12px;
    box-sizing: border-box;
}

/* Nav arrow buttons */
.reviews-carousel-wrap .nav-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    cursor: pointer;
    z-index: 2;
}

html[dir="ltr"] .reviews-carousel-wrap .nav-btn.left {
    margin-right: -44px;
    z-index: 2;
}

html[dir="ltr"] .reviews-carousel-wrap .nav-btn.right {
    margin-left: -44px;
    z-index: 2;
}

html[dir="rtl"] .reviews-carousel-wrap .nav-btn.left {
    margin-left: -44px;
    transform: rotate(180deg);
    z-index: 2;
}

html[dir="rtl"] .reviews-carousel-wrap .nav-btn.right {
    margin-right: -44px;
    transform: rotate(180deg);
    z-index: 2;
}

@media (max-width: 768px) {
    .reviews-carousel-wrap .nav-btn {
        display: none;
    }
}

.review-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 24px;
    min-height: 216px;
    width: 400px;
    max-width: 400px;
    margin: 0 auto;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.stars {
    display: flex;
    align-items: center;
    gap: 0;
}

.review-star {
    display: block;
    flex-shrink: 0;
}

.buyer-tag {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #64748b;
    white-space: nowrap;
}

.review-text {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #1d1d1e;
    line-height: normal;
    margin: 0 0 16px;
    flex-grow: 1;
}

.reviewer-info {
    margin-top: auto;
}

.reviewer-name {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.16px;
    color: #1d1d1e;
    margin: 0 0 4px;
}

.reviewer-detail {
    font-family: 'Geist', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.16px;
    color: #64748b;
    margin: 0;
}


/* FAQ Section */
.faq-section {
    padding: 56px 0;
    background-color: #ffffff;
}

.faq-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 96px;
}

/* Header row: title/subtitle left, "View all" right */
.faq-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 32px;
}

.faq-header-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-title {
    font-family: 'Geist', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #1d1d1e;
    margin: 0;
    line-height: 1;
    letter-spacing: 0;
}

.faq-subtitle {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #64748b;
    margin: 0;
    line-height: 1;
}

.faq-view-all {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #1d1d1e;
    text-decoration: none;
    border: 2px solid #e2e8f0;
    border-radius: 24px;
    padding: 8px 20px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.faq-view-all:hover {
    background-color: #f8fafc;
    color: #1d1d1e;
    text-decoration: none;
}

/* Two-column grid */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.faq-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Individual FAQ card */
.faq-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background-color: #ffffff;
    overflow: hidden;
    transition: background-color 0.2s ease;
}

.faq-card:has(.faq-card-body.show) {
    background-color: #f8fafc;
}

.faq-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 22px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 12px;
}

.faq-card-question {
    font-family: 'Geist', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1e;
    letter-spacing: 0.16px;
    line-height: 1;
    flex: 1;
}

.faq-card-caret {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq-card-header:not(.collapsed) .faq-card-caret {
    transform: rotate(180deg);
}

.faq-card-body {
    padding: 0 24px 20px;
}

.faq-card-body p {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}

/* Responsive: stack to single column on tablet/mobile */
@media (max-width: 992px) {
    .faq-inner {
        padding: 0 16px;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    .faq-section {
        padding: 40px 0;
    }

    .faq-header-row {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        margin-bottom: 24px;
    }

    .faq-title {
        font-size: 18px;
    }

    .faq-subtitle {
        display: none;
    }

    .faq-view-all {
        font-size: 12px;
        letter-spacing: 0.16px;
        padding: 0 14px;
        height: 28px;
        display: flex;
        align-items: center;
        border-width: 2px;
    }

    .faq-col {
        gap: 8px;
    }

    .faq-card {
        border-color: #f1f5f9;
    }

    .faq-card-header {
        padding: 0 16px;
        height: 50px;
    }

    .faq-card-question {
        font-size: 14px;
    }

    .faq-card-caret {
        width: 16px;
        height: 16px;
    }

    .faq-card-body {
        padding: 0 16px 16px;
    }

    .faq-card-body p {
        font-size: 12px;
        letter-spacing: 0.16px;
    }
}

@media (max-width: 576px) {
}

/* Need Help Section */
/* Need Help Section */
.need-help-section {
    padding: 40px 0;
    background-color: #ffffff;
    border-top: 1px solid #f1f5f9;
}

.need-help-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 96px;
}

/* Desktop: header is just title + subtitle stacked, no wrapper needed */
.need-help-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.need-help-headset {
    display: none; /* hidden on desktop */
}

.need-help-header-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.need-help-title {
    font-family: 'Geist', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #1d1d1e;
    margin: 0;
    line-height: 1;
    letter-spacing: 0;
}

.need-help-subtitle {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
    display: none; /* shown via mobile override */
}

/* "Call" badge — hidden on desktop, shown on mobile */
.help-card-call-badge {
    display: none;
}

/* Desktop arrow on phone card — always visible on desktop */
.help-card-arrow--desktop {
    display: flex;
}

.help-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.help-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 95px;
    border-radius: 12px;
    background: linear-gradient(166.64deg, #f8fafc 0%, #f1f5f9 100%);
    text-decoration: none;
    transition: opacity 0.2s ease;
    gap: 12px;
}

.help-card:hover {
    opacity: 0.85;
    text-decoration: none;
}

.help-card-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.help-icon-wrap {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.help-card-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.help-card-title {
    font-family: 'Geist', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1e;
    letter-spacing: 0.16px;
    line-height: 1;
    white-space: nowrap;
}

.help-card-sub {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #64748b;
    line-height: 1;
    white-space: nowrap;
}

.help-card-arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: #f8fafc;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-caret {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

@media (max-width: 992px) {
    .need-help-inner {
        padding: 0 16px;
    }

    .need-help-section {
        padding: 24px 0 32px;
        box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.09);
        border-top: none;
    }

    .need-help-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }

    .need-help-headset {
        display: block;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        object-fit: contain;
    }

    .need-help-title {
        font-size: 16px;
        letter-spacing: 0.16px;
        margin-bottom: 2px;
    }

    .need-help-subtitle {
        display: block;
        font-size: 12px;
        letter-spacing: 0.16px;
        margin: 0;
    }

    .help-cards {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .help-card-email {
        display: none;
    }

    .help-card {
        height: 60px;
        border-radius: 12px;
        border: 1px solid #f1f5f9;
        background: #ffffff;
        padding: 0 16px;
    }

    .help-icon-wrap {
        width: 20px;
        height: 20px;
    }

    .help-icon {
        width: 20px;
        height: 20px;
    }

    .help-card-title {
        font-size: 14px;
    }

    .help-card-sub {
        font-size: 11px;
        letter-spacing: 0.32px;
        white-space: normal;
    }

    .help-card-arrow {
        background: transparent;
        border-radius: 0;
        width: 20px;
        height: 20px;
    }

    .help-caret {
        width: 20px;
        height: 20px;
    }

    /* Show "Call" badge on phone card — margin-inline-start: auto pins it to the trailing edge in LTR & RTL */
    .help-card-call-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 24px;
        min-width: 47px;
        width: auto;
        padding: 0 10px;
        box-sizing: border-box;
        border: 1px solid #ebf3fe;
        border-radius: 6px;
        background: #ffffff;
        font-family: 'Geist', sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: #3b82f6;
        letter-spacing: 0.32px;
        flex-shrink: 0;
        white-space: nowrap;
        margin-inline-start: auto;
    }

    .help-card-phone {
        justify-content: flex-start;
    }

    /* Hide desktop arrow on phone card, show Call badge instead */
    .help-card-arrow--desktop {
        display: none;
    }

    /* Hide subtitle on WhatsApp card */
    .help-card-whatsapp .help-card-sub {
        display: none;
    }
}

@media (max-width: 576px) {
    .need-help-inner {
        padding: 0 16px;
    }

    .need-help-section {
        padding: 40px 0;
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .hero-container {
        padding: 0 48px;
    }
}

@media (max-width: 992px) {
    .hero-section {
        padding: 0;
        min-height: auto;
        background: linear-gradient(180deg, #eaf5f8 73%, #ffffff 100%);
    }
    
    .hero-container {
        flex-direction: column;
        padding: 24px 16px 0;
        gap: 0;
        max-width: 430px;
        width: 100%;
        margin: 0 auto;
        align-items: center;
    }
    
    .hero-left {
        width: 100%;
        align-items: center;
        text-align: center;
    }
    
    /* Car image first on mobile */
    .car-showcase {
        order: -1;
        width: 260px;
        height: 140px;
        margin-bottom: 12px;
    }
    
    .car-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    /* Mobile stat positioning */
    .stat-1 {
        top: 4px;
        left: 10px;
        width: 45.695px;
        height: 18.469px;
        transform: scaleY(-1) rotate(180deg);
    }
    
    .stat-2 {
        top: 4px;
        right: 10px;
        left: auto;
        width: 47.695px;
        height: 18.469px;
        transform: none;
    }
    
    .stat-3 {
        top: 32px;
        left: 50%;
        transform: translateX(-50%) scaleY(-1) rotate(180deg);
        width: 37.188px;
        height: 16.652px;
        opacity: 0.3;
    }
    
    .stat-1 .stat-number {
        font-size: 11px;
    }
    
    .stat-2 .stat-number {
        font-size: 11px;
    }
    
    .stat-3 .stat-number {
        font-size: 9px;
    }
    
    .trusted-badge {
        width: auto;
        height: 28px;
        font-size: 11px;
        padding: 4px 14px;
        margin-bottom: 12px;
    }
    
    .check-icon {
        width: 12px;
        height: 12px;
    }
    
    .hero-title {
        width: 100%;
        font-size: 20px;
        text-align: center;
        white-space: normal;
        margin-bottom: 8px;
    }

    .hero-title br {
        display: none;
    }
    
    .hero-description {
        width: 100%;
        max-width: 343px;
        text-align: center;
        font-size: 14px;
        margin-bottom: 15px;
    }
    
    .form-container {
        display: none; /* Hide form on mobile, show in separate section */
    }
    
    .mobile-form-section {
        display: block;
    }
    
    /* Mobile How It Works */
    .how-it-works-section {
        padding: 32px 0;
        background-color: #ffffff;
    }
    
    .how-works-container {
        padding: 0 16px;
        max-width: 430px;
        margin: 0 auto;
    }
    
    .how-works-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 24px;
        gap: 8px;
    }
    
    .how-works-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    
    .how-works-title {
        font-size: 18px;
        margin-bottom: 0;
    }
    
    .how-works-subtitle {
        display: block;
        font-size: 14px;
        color: #64748b;
        margin: 0;
    }
    
    .service-toggle {
        margin: 0 auto 0;
        order: 3;
    }
    
    .toggle-background {
        width: 258px;
        height: 32px;
        padding: 4px;
    }
    
    .toggle-active {
        display: none;
    }
    
    .toggle-active-text {
        display: none;
    }
    
    .toggle-option {
        font-size: 12px;
        letter-spacing: 0.16px;
        height: 24px;
    }
    
    .toggle-concierge {
        width: 125px;
    }
    
    .toggle-self-service {
        width: 125px;
    }
    
    .service-toggle.self-service .toggle-active {
        display: none;
    }
    
    .section-divider {
        width: 100%;
        max-width: 430px;
        height: 1px;
        background-color: #f1f5f9;
        margin: 16px auto 24px;
        transform: none;
        left: auto;
        position: relative;
    }
    
    .service-steps {
        flex-direction: column;
        gap: 12px;
        align-items: center;
        min-height: auto;
    }
    
    .step-card {
        width: 343px;
        height: 100px;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 16px;
        text-align: left;
        overflow: hidden;
        box-sizing: border-box;
        border-radius: 16px 16px 0 0;
    }
    
    .step-number {
        position: static;
        transform: none;
        margin-right: 12px;
        flex-shrink: 0;
    }
    
    .step-icon {
        width: 28px;
        height: 28px;
    }
    
    .step-title {
        position: static;
        transform: none;
        font-size: 14px;
        letter-spacing: 0.16px;
        text-align: left;
        white-space: pre-line;
        flex: 1;
        margin-right: 12px;
        line-height: 1.3;
    }
    
    .step-image {
        position: static;
        transform: none;
        width: 150px;
        height: 90px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    
    .step-img {
        width: 150px;
        height: 90px;
        object-fit: contain;
    }
    
    /* Mobile Step 2 Specific */
    .step-2-image {
        position: relative;
        width: 150px;
        height: 90px;
    }
    
    .step-2-bg {
        transform: scaleY(-1) rotate(180deg);
        width: 150px;
        height: 90px;
    }
    
    .phone-mockup-container {
        top: 0px;
        right: 10px;
        width: 27px;
        height: 70px;
    }
    
    .step-2-stats {
        width: 150px;
        height: 90px;
    }
    
    .stat-left {
        top: -2px;
        left: 10px;
        width: 33px;
        height: 13px;
        transform: scaleY(-1) rotate(180deg);
    }
    
    .stat-right {
        top: 6px;
        right: 2px;
        left: auto;
        width: 35px;
        height: 13px;
        transform: none;
    }
    
    .stat-bottom {
        top: 20px;
        left: 18px;
        width: 28px;
        height: 12px;
        transform: scaleY(-1) rotate(180deg);
    }
    
    .stat-number {
        font-size: 8px;
    }
    
    /* Mobile Step 3 */
    .payment-illustration {
        top: 4px;
        left: 50%;
        transform: translateX(-50%);
        width: 70px;
        height: 78px;
    }
    
    .services-section {
        padding: 0 0 40px;
    }

    .services-section-inner {
        padding: 0 16px;
    }

    .comparison-scroll {
        margin: 0 -16px;
        width: 100vw;
        overflow-x: hidden;
    }

    .comparison-grid {
        min-width: unset;
        width: 100%;
    }

    .comparison-row {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0;
    }

    .reviews-section-inner {
        padding: 0 16px;
    }

    .reviews-section {
        background-color: #f1f5f9;
        padding: 32px 0 40px;
    }

    .reviews-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
        margin-bottom: 24px;
        padding: 0 16px;
    }

    .reviews-title-row {
        justify-content: center;
        gap: 8px;
        margin-bottom: 4px;
    }

    .reviews-heading {
        font-size: 18px;
    }

    .reviews-heart-icon {
        width: 16px;
        height: 16px;
    }

    .reviews-subtitle {
        font-size: 12px;
        text-align: center;
        letter-spacing: 0.16px;
    }

    .reviews-section .view-all-btn {
        display: none !important;
    }

    .reviews-carousel-wrap {
        padding-right: 0;
        /* break out of section padding so cards reach screen edges */
        margin: 0 -16px;
        overflow: hidden;
    }

    .review-slide {
        padding: 0 6px;
    }

    .review-card {
        min-height: 154px;
        max-width: 327px;
        padding: 16px;
        margin: 0 auto;
    }

    .review-header {
        margin-bottom: 8px;
    }

    .review-star {
        width: 12px;
        height: 12px;
    }

    .buyer-tag {
        font-size: 12px;
        letter-spacing: 0.16px;
    }

    .review-text {
        font-size: 12px;
        color: #64748b;
        letter-spacing: 0.16px;
        margin-bottom: 8px;
    }

    .reviewer-name {
        font-size: 12px;
        letter-spacing: 0.32px;
    }

    .reviewer-detail {
        font-size: 11px;
        letter-spacing: 0.32px;
    }


    .services-divider {
        margin-bottom: 40px;
    }

    .services-intro {
        margin-bottom: 32px;
    }

    .services-heading {
        font-size: 18px;
        letter-spacing: 0;
    }

    .services-stats {
        font-size: 12px;
    }

    .comparison-cell {
        font-size: 12px;
        padding: 8px 8px;
        min-height: 50px;
        letter-spacing: 0.16px;
    }

    .comparison-feature {
        font-size: 12px;
        padding-left: 16px;
        letter-spacing: 0.16px;
    }

    .comparison-feature--title {
        font-size: 12px;
        letter-spacing: 0.32px;
    }

    .service-pill {
        font-size: 12px;
        height: 32px;
        min-width: unset;
        max-width: 100%;
        padding: 0 8px;
        letter-spacing: 0.32px;
    }

    .service-pill-icon {
        width: 20px;
        height: 20px;
    }

    .comparison-cell--icon img {
        width: 20px;
        height: 20px;
    }

    .cta-section {
        display: none;
    }

    .cta-banner-wrap {
        padding: 0 16px;
    }

    .cta-banner-inner {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        gap: 20px;
    }

    .cta-banner-icon {
        display: none;
    }

    .cta-banner-copy {
        text-align: center;
    }

    .cta-banner-title {
        font-size: 20px;
    }

    .cta-button {
        min-width: unset;
        width: 100%;
        max-width: 294px;
    }
}
    
@media (max-width: 768px) {
    .hero-title {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .form-container {
        padding: 24px 16px;
    }
}

/* Slick Carousel Overrides */
.slick-dots {
    bottom: -50px;
}

.slick-dots li button:before {
    color: #00af48;
}

.slick-prev,
.slick-next {
    z-index: 1;
}

.slick-prev {
    left: -40px;
}

.slick-next {
    right: -40px;
}

/* Lazy Loading */
.brand-logo {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.brand-logo[src] {
    opacity: 1;
}

/* Mobile brand logo lazy loading */
.mobile-brand-logo {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-brand-logo[src] {
    opacity: 1;
}

/* Mobile Sticky Bottom CTA Bar */
.mobile-sticky-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #ffffff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    padding: 16px;
    height: 76px;
    align-items: center;
    justify-content: center;
}

.mobile-sticky-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 343px;
    height: 44px;
    background-color: #00af48;
    color: #ffffff;
    border-radius: 12px;
    font-family: 'Geist', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.mobile-sticky-cta-btn:hover {
    background-color: #009940;
    color: #ffffff;
    text-decoration: none;
}

@media (max-width: 992px) {
    .mobile-sticky-cta {
        display: flex;
    }

    /* Add bottom padding to page so sticky bar doesn't cover footer */
    body {
        padding-bottom: 76px;
    }
}