:root {
    --be-blue:  #007dc2;
    --be-ink:   #434343;
    --be-grey:  #646567;
    --be-green: #1B9D2C;
    --be-red:   #e42527;
}

/* Line break that only exists on mobile (e.g. "Try it FREE for / 30 Days"). */
.be-break-mobile { display: none; }

/* The sections below lay themselves out with CSS grid, so the theme's
   container padding (and .z-imp-content .container-fluid { margin-top: 60px })
   is neutralised here — the inline styles that used to do this are gone. */
.be-eco .container-fluid,
.be-powered .container-fluid,
.be-trial .container-fluid,
.be-partner .container-fluid,
.be-guide .container-fluid,
.be-setup .container-fluid,
.be-demo .container-fluid {
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Green pill/box CTA used by "Schedule a Demo" and "Watch Short Videos".
   Typed selector (a.be-btn) so it outranks the theme's plain .btn rules. */
a.be-btn {
    display: inline-block;
    margin-top: 0;
    padding: 18px;
    border-radius: 8px;
    box-shadow: 0 2px 5px #888888;
}
a.be-btn > span {
    padding: 10px 5px;
    color: #ffffff;
    font-size: 20px;
    text-transform: none;
}
a.btnShortVideos.be-btn > span { font-size: 18px; }

a.be-btn--green,
a.be-btn--green:hover,
a.be-btn--green:focus {
    background-color: var(--be-green);
    border-color: var(--be-green);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   2a. Zoho Eco System
   --------------------------------------------------------------------------
   Desktop: a 3-column grid — cards 1-3 left, copy centre, cards 4-6 right.
   The .be-eco__group / .swiper / .swiper-wrapper wrappers are dissolved with
   display:contents so the six slides become direct children of the grid and
   can be placed individually. Swiper is NOT initialised at this width.
   -------------------------------------------------------------------------- */

.be-eco { padding: 35px 0 60px; }

.be-eco__container { padding-left: 0; padding-right: 0; }

.be-eco__grid {
    display: grid;
    grid-template-columns: 17% 34% 17%;
    grid-template-rows: auto auto auto;
    justify-content: center;
    align-items: center;
    column-gap: 3%;
    row-gap: 30px;
    min-height: 515px;
    padding: 0 15px;
}

/* centre column */
.be-eco__head {
    grid-column: 2;
    grid-row: 1 / span 3;
    text-align: center;
}
.be-eco__title { margin-bottom: 30px; line-height: 40px; }
.be-eco__title-main  { color: var(--be-blue); font-size: 40px; font-weight: 700; }
.be-eco__title-sub   { color: var(--be-blue); font-size: 40px; font-weight: 400; }
.be-eco__title-price { margin-top: 25px; color: #000000; font-size: 30px; font-weight: 700; }
.be-eco__cta   { margin-bottom: 45px; }
.be-eco__links { margin-bottom: 10px; }
.be-eco__links .link-container { font-size: 25px; }
.be-eco__links .link-item { cursor: pointer; }

/* group / swiper wrappers dissolve into the grid */
.be-eco__grid > .be-eco__group { display: contents; }
.be-eco__grid > .be-eco__group:not(.is-active) { display: none; }
.be-eco__grid .swiper,
.be-eco__grid .swiper-wrapper { display: contents; }

/* explicit placement, left column then right column */
.be-eco__grid .be-eco__slide { width: 100%; min-width: 0; }
.be-eco__slide--l1 { grid-column: 1; grid-row: 1; }
.be-eco__slide--l2 { grid-column: 1; grid-row: 2; }
.be-eco__slide--l3 { grid-column: 1; grid-row: 3; }
.be-eco__slide--r1 { grid-column: 3; grid-row: 1; }
.be-eco__slide--r2 { grid-column: 3; grid-row: 2; }
.be-eco__slide--r3 { grid-column: 3; grid-row: 3; }

.be-eco__slide .card-popup-container { margin-bottom: 0; height: 100%; }
.be-eco__slide .card-content,
.be-eco__slide .card-link-container { text-align: center; }
.be-eco__slide .card-upright-icon { display: none; }   /* mobile-only corner link */

/* --------------------------------------------------------------------------
   2b. Powered by Zoho, Built for Builders
   -------------------------------------------------------------------------- */

.be-powered { padding: 0 0 70px; }

.be-powered__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 40px;
    align-items: center;
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 15px;
}
.be-powered__title  { grid-column: 1; grid-row: 1; color: var(--be-ink); font-size: 40px; margin: 0; line-height: 1.2; }
.be-powered__kicker { grid-column: 1; grid-row: 2; color: var(--be-blue); font-size: 20px; text-shadow: none; margin: 10px 0 30px; }
.be-powered__body   { grid-column: 1; grid-row: 3; color: var(--be-ink); font-size: 20px; }
.be-powered__figure { grid-column: 2; grid-row: 1 / span 3; text-align: center; }

.be-powered__body p { margin: 0 0 25px; }
.be-powered__body p:last-child { margin-bottom: 0; }
.be-powered__logo img { width: 50%; }

/* --------------------------------------------------------------------------
   2c. Try it FREE for 30 Days
   -------------------------------------------------------------------------- */

.be-trial { padding: 60px 0; }

.be-trial__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    column-gap: 50px;
    align-items: start;
    justify-content: center;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 15px;
}
.be-trial__title { font-weight: 700; font-size: 50px; padding-bottom: 30px; margin-top: 10px; color: #ffffff; }
.be-trial__body  { color: #ffffff; font-size: 20px; }

.be-trial__form {
    background: #ffffff;
    padding: 20px 25px;
    border: 1px solid #000000;
    border-radius: 15px;
}
.be-trial__form iframe { display: block; width: 100%; height: 640px; border: none; }

/* --------------------------------------------------------------------------
   2d. Zoho's #1 Innovation Partner
   -------------------------------------------------------------------------- */

.be-partner { padding: 60px 0; background-color: #E4E2E2; }

.be-partner__grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr);
    grid-template-rows: auto auto;
    align-items: center;
    padding: 0 15px;
}
/* markup order is brand → video → copy → cta (the mobile order); desktop
   places the CTA back underneath the logo in column one. */
.be-partner__brand { grid-column: 1; grid-row: 1; align-self: end;   text-align: center; padding: 0 20px 0 70px; }
.be-partner__cta   { grid-column: 1; grid-row: 2; align-self: start; text-align: center; padding: 30px 20px 0 70px; }
.be-partner__video { grid-column: 2; grid-row: 1 / span 2; text-align: center; padding: 0 20px; border-left: 3px solid var(--be-ink); }
.be-partner__copy  { grid-column: 3; grid-row: 1 / span 2; padding-left: 20px; border-left: 3px solid var(--be-ink); }

.be-partner__brand img { max-width: 100%; }
.be-partner__video .featured img {
    margin-top: 0;
    border-radius: 6px;
    padding: 4px;
    border: 2px solid #ccc;
    max-width: 100%;
}
.be-partner .be-partner__title { text-align: left; margin-top: 15px; font-size: 40px; color: var(--be-grey); font-weight: 700; line-height: 1.1; }
.be-partner__lead  { color: var(--be-grey); font-size: 19px; line-height: 1.4; padding-top: 20px; padding-bottom: 0; margin-bottom: 0; }
.be-partner__list  { padding: 20px 0 0; margin: 0; list-style: none; }
.be-partner__list .list-item { font-size: 19px; padding-left: 0; padding-bottom: 10px; line-height: 1.2; }
.be-partner__list .list-contentHeader span { color: var(--be-grey); font-weight: 400; }

a.be-partner__btn,
a.be-partner__btn:hover,
a.be-partner__btn:focus {
    margin-top: 0;
    background-color: #F09416;
    border-color: #F09416;
    color: #ffffff;
    border-radius: 8px;
}

/* --------------------------------------------------------------------------
   2e. Introductory Guide Download
   -------------------------------------------------------------------------- */

.be-guide { padding: 70px 0; }

.be-guide__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
.be-guide__figure { text-align: center; }
.be-guide__figure img { width: 50%; }
.be-guide__title { color: var(--be-ink); font-size: 40px; margin: 0 0 30px; text-align: center; line-height: 1.2; }
.be-guide__body  { color: var(--be-ink); font-size: 20px; text-align: center; }
.be-guide__cta   { text-align: center; }
.be-guide__cta .btn { color: #ffffff; margin-top: 20px; }

/* --------------------------------------------------------------------------
   2f. How to set up Builders Excellence (timeline + video)
   -------------------------------------------------------------------------- */

.be-setup { padding: 60px 0; background-color: #226db4; }

.be-setup__grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: 40px;
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 15px;
}
.be-setup__head    { text-align: center; }
.be-setup__eyebrow { font-size: 20px; color: #44dbf6; text-shadow: none; margin-bottom: 0; }
.be-setup__title   { font-weight: 700; font-size: 35px; padding-bottom: 0; margin-top: 10px; text-align: center; color: #ffffff; }

.be-setup__media  { margin-top: 70px; text-align: center; }
.be-setup__figure { position: relative; z-index: 2; text-align: center; margin: 0 0 20px; }
.be-setup__figure video { width: 85%; border-radius: 15px; }
.be-setup__cta    { text-align: center; }

a.be-setup__btn,
a.be-setup__btn:hover,
a.be-setup__btn:focus {
    box-shadow: 0 2px 5px #888888;
    background-color: var(--be-red);
    border-color: var(--be-red);
    margin-top: 0;
    border-radius: 24.5px;
}
a.be-setup__btn span { padding: 15px 10px; color: #ffffff; font-size: 20px; }

/* timeline — desktop */
#conference-timeline { position: relative; }
#conference-timeline .conference-timeline-content { padding-top: 0; padding-bottom: 0; }
#conference-timeline .timeline-article { margin-bottom: 0; }
#conference-timeline .timeline-article:last-child { margin-bottom: 45px; }
#conference-timeline h4 { color: #ffffff; font-weight: 700; font-size: 20px; }
#conference-timeline .conference-timeline-content p { color: #ffffff; margin-left: 0; }
#conference-timeline .content-right { padding: 0 0 0 30px; }
#conference-timeline .content-left  { padding: 0 30px 0 0; }
#conference-timeline .content-right h4,
#conference-timeline .content-right p { text-align: left; }
#conference-timeline .content-left h4,
#conference-timeline .content-left p { text-align: right; }
#conference-timeline .meta-date { display: flex; justify-content: center; align-items: center; }

/* --------------------------------------------------------------------------
   2g. Powered by trusted technology
   -------------------------------------------------------------------------- */

.be-stats { z-index: 1; padding: 60px 0; background-color: #fdc349; }
.be-stats__head    { text-align: center; margin-bottom: 20px; }
.be-stats__heading { font-weight: 700; font-size: 20px; padding-bottom: 30px; margin-top: 0; color: #000000; text-transform: none; }
.be-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 15px;
    text-align: center;
}
.be-stats__figure { font-weight: 700; font-size: 40px; padding-bottom: 30px; margin-top: 10px; color: #000000; text-transform: none; }
.be-stats__label  { color: #000000; font-size: 18px; }
.be-stats__logo   { text-align: center; margin-top: 50px; }
.be-stats__logo img { width: 30%; }

/* --------------------------------------------------------------------------
   2h. Customisation / Integrations / Training
   -------------------------------------------------------------------------- */

.be-services__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 30px;
    align-items: center;
    margin-bottom: 40px;
}
.be-services__row.right {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
}
.be-services__row:last-child { margin-bottom: 0; }
.be-services__figure { grid-column: 1; grid-row: 1; }
.be-services__copy   { grid-column: 2; grid-row: 1; }
.be-services__row--flip .be-services__figure { grid-column: 2; }
.be-services__row--flip .be-services__copy   { grid-column: 1; }
.be-services__figure img { max-width: 100%; }
.be-services__copy p { text-align: left; color: var(--be-ink); font-size: 20px; padding-bottom: 20px; }

/* --------------------------------------------------------------------------
   2i. Request a Demo
   -------------------------------------------------------------------------- */

.be-demo { padding: 60px 0; }

.be-demo__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    column-gap: 50px;
    align-items: start;
    justify-content: center;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 15px;
}
.be-demo__title { font-weight: 700; font-size: 30px; padding-bottom: 30px; margin-top: 10px; color: #ffffff; }
.be-demo__body  { color: #ffffff; }
.be-demo__form  { background: #ffffff; padding: 20px 25px; border-radius: 15px; width: 100%; }
.be-demo__form iframe { display: block; width: 100%; height: 590px; border: none; }

/* ==========================================================================
   3. Tablet — 541px to 991px
   Bootstrap 3's col-md-* only kicks in at 992px, so this range used to fall
   through to the desktop markup with no layout of its own. Delete this block
   if you'd rather it kept rendering exactly as it does today.
   ========================================================================== */

@media screen and (min-width: 541px) and (max-width: 991px) {

    .be-eco__grid { grid-template-columns: 23% 42% 23%; column-gap: 2%; min-height: 0; }
    .be-eco__title { line-height: 1.2; }
    .be-eco__title-main,
    .be-eco__title-sub   { font-size: 28px; }
    .be-eco__title-price { font-size: 22px; }
    .be-eco__links .link-container { font-size: 18px; }
    .be-eco__slide .card-link { font-size: 12px; }

    .be-powered__title  { font-size: 32px; }
    .be-powered__kicker,
    .be-powered__body   { font-size: 17px; }

    .be-trial__grid,
    .be-demo__grid { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
    .be-trial__title { font-size: 38px; }
    .be-trial__body  { font-size: 17px; }
    .be-trial__form iframe { height: 700px; }
    .be-demo__form iframe  { height: 650px; }

    .be-partner__grid { grid-template-columns: minmax(0, 1fr); }
    .be-partner__brand,
    .be-partner__video,
    .be-partner__copy,
    .be-partner__cta {
        grid-column: 1;
        grid-row: auto;
        align-self: auto;
        border-left: 0;
        padding: 10px 15px;
        text-align: center;
    }
    .be-partner .be-partner__title { text-align: center; }
    .be-partner__list  { display: inline-block; text-align: left; }

    .be-guide__title { font-size: 32px; }
    .be-guide__body  { font-size: 18px; }

    .be-setup__grid  { grid-template-columns: minmax(0, 1fr); }
    .be-setup__media { margin-top: 40px; }
    .be-setup__figure video { width: 70%; }

    .be-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
    .be-stats__logo img { width: 45%; }

    .be-services__copy p { font-size: 17px; }
}

@media screen and (max-width: 540px) {

    .be-eco__container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .sec-zohoApps-shadow-mobile {
        box-shadow: 0 3px 0.25rem rgba(0, 0, 0, .2);
    }

    .be-break-mobile { display: inline; }

    a.be-btn { padding: 10px 30px; border-radius: 40px; }
    a.be-btn > span,
    a.btnShortVideos.be-btn > span { font-size: 14px; }

    /* ---- Zoho Eco System: grid off, Swiper on ---- */
    .be-eco {
        padding: 20px 0 10px;
        box-shadow: 0 3px 0.25rem rgba(0, 0, 0, .2);   /* was .sec-zohoApps-shadow */
    }
    .be-eco__grid {
        display: block;
        min-height: 0;
        padding: 0;
    }
    .be-eco__head { padding: 0 15px; }
    .be-eco__title { margin-bottom: 20px; line-height: normal; }
    .be-eco__title-main  { font-size: 35px; margin-bottom: 25px; }
    .be-eco__title-sub   { color: #000000; font-size: 15px; font-weight: 700; }
    .be-eco__title-price { margin-top: 15px; color: #000000; font-size: 15px; font-weight: 400; }
    .be-eco__cta { margin-bottom: 20px; }
    .be-eco__links .link-container { font-size: 17px; }

    .be-eco__grid > .be-eco__group { display: block; margin: 20px 0 10px; }
    .be-eco__grid > .be-eco__group:not(.is-active) { display: none; }
    .be-eco__grid .swiper { display: block; position: relative; overflow: hidden; }
    .be-eco__grid .swiper-wrapper { display: flex; }

    .be-eco__grid .be-eco__slide {
        grid-column: auto;
        grid-row: auto;
        width: auto;
    }

    /* card styling that used to live on .card-popup-container-mobile */
    .be-eco__slide .card-popup-container {
        position: relative;
        box-shadow:
            0 4px 8px rgba(0, 0, 0, 0.15),
            4px 4px 12px rgba(0, 0, 0, 0.1),
            -2px 2px 6px rgba(0, 0, 0, 0.05);
        padding: 12px;
        border-radius: 16px;
        margin-bottom: 16px;
        width: 185px;
        min-height: 145px;
        height: auto;
        box-sizing: border-box;
    }
    .be-eco__slide .card-upright-icon { display: block; }
    .be-eco__slide .image-zohoApp { width: 100%; padding: 0; }
    .be-eco__slide .card-link { color: #000000; }
    .be-eco__slide .card-link .arrow-icon { display: none; }

    /* ---- Powered by Zoho ---- */
    .be-powered { padding: 20px 0 30px; }
    .be-powered__grid { display: block; }
    .be-powered__title  { font-size: 35px; text-align: center; }
    .be-powered__kicker { font-size: 18px; text-align: center; margin: 10px 0 0; }
    .be-powered__figure { margin: 20px 0; }
    .be-powered__body   { font-size: 16px; }
    .be-powered__logo img { width: 70%; }

    /* ---- Try it FREE for 30 Days ---- */
    .be-trial__grid { display: block; }
    .be-trial__title { font-size: 35px; text-transform: uppercase; }
    .be-trial__body  { font-size: 16px; }
    .be-trial__form  { width: 100%; }
    .be-trial__form iframe { height: 760px; }

    /* ---- Zoho's #1 Innovation Partner ---- */
    .be-partner { padding: 40px 0; }
    .be-partner__grid { display: block; padding: 0 10px; }
    .be-partner__brand,
    .be-partner__video,
    .be-partner__copy,
    .be-partner__cta { padding: 0 10px; border-left: 0; text-align: center; }
    .be-partner__brand img { width: 80%; }
    .be-partner__video { padding-top: 30px; }
    .be-partner .be-partner__title { text-align: center; margin-top: 30px; font-size: 35px; }
    .be-partner__lead  { font-size: 18px; }
    .be-partner__list  { display: inline-block; text-align: left; padding: 20px 0; }
    .be-partner__list .list-item { font-size: 18px; }
    .be-partner__list .list-icon { font-size: 25px; }

    /* ---- Introductory Guide ---- */
    .be-guide { padding: 30px 0; }
    .be-guide__grid { display: block; }
    .be-guide__figure { margin-bottom: 30px; }
    .be-guide__title { font-size: 30px; margin-top: 30px; }
    .be-guide__body  { font-size: 18px; }

    /* ---- How to set up Builders Excellence ---- */
    .be-setup__grid { display: block; padding: 0 15px; }
    .be-setup__eyebrow { font-size: 15px; }
    .be-setup__title   { font-size: 30px; padding-bottom: 30px; }
    .be-setup__media   { margin-top: 40px; }
    .be-setup__figure video { width: 100%; }
    a.be-setup__btn span { font-size: 14px; }

    /* timeline reflows into the stacked "numbered circle" layout */
    #conference-timeline .conference-center-line { display: none; }
    #conference-timeline .timeline-article { overflow: visible; margin: 0 0 30px; }
    #conference-timeline .timeline-article:last-child { margin-bottom: 0; }
    #conference-timeline .content-left-container,
    #conference-timeline .content-right-container {
        float: none;
        width: 100%;
        max-width: 100%;
        padding-top: 60px;
        margin-left: 0px !important;
        min-height: auto !important;
    }
    .timeline-article .content-left:before {
        content: "" !important;
        right: auto;
        left: -8px;
    }
    #conference-timeline .content-left,
    #conference-timeline .content-right { padding: 0; }
    #conference-timeline .content-left h4,
    #conference-timeline .content-right h4,
    #conference-timeline .content-left p,
    #conference-timeline .content-right p { text-align: center; }
    #conference-timeline .meta-date { left: 50%; margin-left: -25px; top: 0; }

    /* ---- trusted technology ---- */
    .be-stats__grid { grid-template-columns: minmax(0, 1fr); }
    .be-stats__figure { padding-bottom: 10px; }
    .be-stats__label  { padding-bottom: 25px; }
    .be-stats__logo img { width: 65%; }

    /* ---- Customisation / Integrations / Training ---- */
    .be-services__row { display: block; text-align: center; }
    .be-services__figure img { padding-bottom: 20px; }
    .be-services__copy p { text-align: center; font-size: 16px; padding-bottom: 0; }

    /* ---- Request a Demo ---- */
    .be-demo__grid { display: block; }
    .be-demo__form iframe { height: 710px; }
}

/* ==========================================================================
   5. Accessibility / motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .be-eco__slide.animate__animated { animation: none !important; }
}