/* Banner Section */
.bannerSec {
    position: relative;
    width: 100%;
    float: left;
    padding: 126px 0 68px;
    background:
        radial-gradient(circle at 8% 26%, rgba(167, 234, 242, 0.5), transparent 28%),
        radial-gradient(circle at 88% 42%, rgba(255, 205, 116, 0.3), transparent 31%),
        linear-gradient(145deg, #f4fbfc 0%, #ffffff 50%, #fff8ec 100%);
    overflow: hidden;
}

.bannerSec::before {
    display: none;
}

.bannerSec .container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1210px;
    padding-left: 24px;
    padding-right: 24px;
}

.bannerSec .bannerTextWrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.88fr);
    align-items: center;
    gap: 52px;
    width: 100%;
}

.bannerSec .leftCol {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
    text-align: left;
    gap: 0;
}

.bannerSec .heroEyebrow {
    display: inline-block;
    margin: 0 0 13px;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0;
    color: #5f6874;
    font-weight: 700;
    text-transform: none;
}

.bannerSec .leftCol h1 {
    max-width: 620px;
    margin-left: 0;
    margin-right: 0;
    font-size: 54px;
    color: #101820;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0;
    margin-bottom: 0;
}

.bannerSec .leftCol h1 strong {
    font-weight: 700;
}

.bannerSec .leftCol p:not(.heroEyebrow) {
    max-width: 590px;
    margin: 22px 0 0;
    font-size: 17px;
    line-height: 1.58;
    color: #4d5a6a;
    font-weight: 400;
}

.apMarketingHeroPills {
    position: absolute;
    left: -24px;
    bottom: 28px;
    z-index: 3;
    display: grid;
    gap: 10px;
    width: 168px;
    max-width: none;
    margin: 0;
}

.apMarketingHeroPill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    width: 100%;
    padding: 0 14px;
    border: 1px solid rgba(205, 222, 232, 0.82);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #101828;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(42, 64, 82, 0.07);
}

.apMarketingHeroPillClients {
    background: rgba(255, 242, 228, 0.94);
    border-color: rgba(244, 122, 32, 0.22);
}

.apMarketingHeroPillBookings {
    background: rgba(236, 251, 253, 0.92);
    border-color: rgba(46, 184, 199, 0.24);
}

.apMarketingHeroPillRevenue {
    background: rgba(238, 249, 235, 0.94);
    border-color: rgba(110, 178, 69, 0.22);
}

.apMarketingHeroVisual {
    position: relative;
    min-width: 0;
    padding-right: 58px;
}

.apMarketingHeroVisual::before {
    display: none;
}

.apMarketingHeroImageFrame {
    position: relative;
    overflow: visible;
    padding: 10px;
    border: 6px solid #fff;
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 252, 253, 0.92)),
        #fff;
    box-shadow: 0 14px 30px rgba(42, 64, 82, 0.1);
}

.apMarketingHeroImageFrame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.333;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
}

.apMarketingHeroAiBubble {
    position: absolute;
    right: -28px;
    top: 0;
    transform: none;
    z-index: 4;
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 13px;
    width: min(318px, calc(100% - 44px));
    padding: 15px 17px;
    border: 1px solid rgba(215, 226, 233, 0.9);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 34px rgba(42, 64, 82, 0.12);
    backdrop-filter: blur(10px);
}

.heroCalloutIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #fff2e4;
    color: #f47a20;
    font-size: 14px;
}

.apMarketingHeroAiBubble strong {
    display: block;
    color: #101828;
    font-size: 16px;
    line-height: 1.24;
    font-weight: 850;
}

.apMarketingHeroAiBubble small {
    display: block;
    margin-top: 4px;
    color: #667485;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 650;
}

.middle {
    width: 100%;
    float: left;
}

/* Marketing Outcomes Section */
.marketingOutcomesSec {
    width: 100%;
    float: left;
    padding: 72px 0 76px;
    background: #ffffff;
}

.marketingOutcomesSec .container {
    max-width: 1210px;
    padding-left: 24px;
    padding-right: 24px;
}

.marketingOutcomesIntro {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center;
}

.marketingOutcomesIntro .sectionEyebrow {
    margin: 0 0 12px;
    color: #6f7c89;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.marketingOutcomesIntro h2 {
    margin: 0;
    color: #101828;
    font-size: 36px;
    line-height: 1.12;
    font-weight: 850;
    letter-spacing: 0;
}

.marketingOutcomesStrip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border-top: 1px solid rgba(205, 222, 232, 0.82);
    border-bottom: 1px solid rgba(205, 222, 232, 0.82);
    background:
        radial-gradient(circle at 8% 0%, rgba(178, 235, 244, 0.24), transparent 30%),
        radial-gradient(circle at 92% 100%, rgba(255, 205, 116, 0.18), transparent 28%),
        rgba(255, 255, 255, 0.92);
}

.marketingOutcomeItem {
    position: relative;
    min-width: 0;
    padding: 34px 34px 36px;
}

.marketingOutcomeItem + .marketingOutcomeItem {
    border-left: 1px solid rgba(205, 222, 232, 0.82);
}

.marketingOutcomeIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 14px;
    font-size: 17px;
}

.marketingOutcomeIconOrange {
    background: rgba(255, 242, 228, 0.9);
    color: #f47a20;
}

.marketingOutcomeIconTeal {
    background: rgba(236, 251, 253, 0.92);
    color: #16859a;
}

.marketingOutcomeIconGreen {
    background: rgba(238, 249, 235, 0.94);
    color: #3c7f2a;
}

.marketingOutcomeItem h3 {
    margin: 0 0 12px;
    color: #101828;
    font-size: 22px;
    line-height: 1.18;
    font-weight: 850;
    letter-spacing: 0;
}

.marketingOutcomeItem p {
    margin: 0;
    color: #526173;
    font-size: 16px;
    line-height: 1.58;
    font-weight: 500;
}

body,
body *,
body *::before,
body *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: no-preference) {
    body.js-reveal-ready [data-reveal],
    body.js-reveal-ready [data-reveal-group] > * {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
        transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
    }

    body.js-reveal-ready [data-reveal="soft"],
    body.js-reveal-ready [data-reveal-group] > * {
        transform: translate3d(0, 18px, 0);
    }

    body.js-reveal-ready [data-reveal].is-visible,
    body.js-reveal-ready [data-reveal-group].is-visible > * {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    body.js-reveal-ready [data-reveal-group] > * {
        transition-delay: var(--reveal-delay, 0ms);
    }

    body.js-reveal-ready [data-reveal-load],
    body.js-reveal-ready [data-reveal-load] > * {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

    body.js-reveal-ready.is-page-ready [data-reveal-load] {
        animation: apMarketingReveal 0.82s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        animation-delay: var(--load-delay, 0ms);
    }

    body.js-reveal-ready.is-page-ready [data-reveal-load] > * {
        animation: apMarketingReveal 0.82s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        animation-delay: calc(var(--load-delay, 0ms) + var(--reveal-delay, 0ms));
    }
}

body.js-reveal-ready [data-reveal],
body.js-reveal-ready [data-reveal-group] > *,
body.js-reveal-ready [data-reveal-load],
body.js-reveal-ready [data-reveal-load] > *,
body.js-reveal-ready [data-reveal].is-visible,
body.js-reveal-ready [data-reveal-group].is-visible > *,
body.js-reveal-ready.is-page-ready [data-reveal-load],
body.js-reveal-ready.is-page-ready [data-reveal-load] > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal-group] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

@keyframes apMarketingReveal {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Remove decorative waves and dots from bottom experience CTA */
.experienceSec::before,
.experienceSec::after {
    display: none !important;
    content: none !important;
    background-image: none !important;
    background: none !important;
}

/* Match the experience CTA button to the header gradient */
.experienceSec .experienceInfo .getTheBtn {
    background: linear-gradient(90deg, #f9b21d 0%, #f47a20 100%) !important;
}

.experienceSec .experienceInfo .getTheBtn:hover {
    background: linear-gradient(90deg, #f47a20 0%, #e96811 100%) !important;
}

/* Remove orange underline accents beneath section headings */
.managementSec .managementBox h2::before,
.businessSec h2::before,
.emailMarketingSec h2::before,
.touchSec .leftCol h2::before,
.marketReportSec h2::before,
.marketingReportsSec h2::before,
.textMarketingSec h2::before {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Remove decorative overlays, waves, dots, and image frame accents */
.apMarketingSec::before,
.apMarketingSec::after,
.apMarketingSec .leftCol .marketing-img1::before,
.apMarketingSec .leftCol .marketing-img1::after,
.emailMarketingSec::before,
.emailMarketingSec::after,
.touchSec::before,
.textMarketingSec::before,
.textMarketingSec::after,
.textMarketingSec .marketingBox .rightCol::before,
.screenMessengSec .messengBox::before {
    display: none !important;
    content: none !important;
    background-image: none !important;
    background: none !important;
}

/* AP Marketing Section */
.apMarketingSec {
    position: relative;
    width: 100%;
    float: left;
    padding: 95px 0;
}

.apMarketingSec::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/marketing-banner-design.png);
    background-repeat: no-repeat;
    background-position: center top;
}

.apMarketingSec::after {
    content: '';
    position: absolute;
    bottom: -150px;
    right: 0;
    width: 160px;
    height: 470px;
    background-image: url(../images/marketing-design-1.png);
    background-repeat: no-repeat;
    z-index: -1;
}

.apMarketingSec .rightCol {
    width: 100%;
    float: left;
    padding-left: 55px;
}

.apMarketingSec .rightCol h2 {
    font-size: 45px;
    letter-spacing: 1px;
    color: rgb(0 0 0 / 90%);
    font-weight: 300;
    margin-bottom: 30px;
}

.apMarketingSec .rightCol h2 strong {
    font-weight: 700;
}

.apMarketingSec .rightCol p {
    font-size: 18px;
    line-height: 30px;
    color: #000000;
    font-weight: 500;
    margin-bottom: 35px;
}

.apMarketingSec .rightCol p:last-child {
    margin-bottom: 0;
}

.apMarketingSec .leftCol {
    width: 100%;
    float: right;
    margin-right: 30px;
}

.apMarketingSec .leftCol .marketing-img1 {
    position: relative;
    max-width: 500px;
    width: 100%;
    float: left;
    margin: 50px 35px 25px 25px;
}

.apMarketingSec .leftCol .marketing-img1::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -35px;
    width: 237px;
    height: 259px;
    background-image: url(../images/marketing-design.png);
    background-repeat: no-repeat;
}

.apMarketingSec .leftCol .marketing-img1::after {
    content: '';
    position: absolute;
    bottom: -25px;
    left: -25px;
    width: 500px;
    height: 360px;
    border-radius: 10px;
    background-color: #d9ebf2;
}

.apMarketingSec .leftCol .marketing-img1 img {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
    border-radius: 10px;
}

.apMarketingSec .leftCol .marketing-img1,
.textMarketingSec .marketingBox .rightCol {
    background: #ffffff;
    box-sizing: border-box;
    padding: 18px;
    border: 1px solid rgba(223, 231, 236, 0.72);
    border-radius: 28px;
    box-shadow: 0 22px 48px rgba(16, 24, 32, 0.1), 0 8px 20px rgba(16, 24, 32, 0.06);
}

.apMarketingSec .leftCol .marketing-img1 img,
.textMarketingSec .marketingBox .rightCol img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.apMarketingSec .leftCol .marketing-img2 {
    max-width: 370px;
    width: 100%;
    float: right;
    margin-top: -75px;
    z-index: 1;
    position: relative;
}

.apMarketingSec .leftCol .marketing-img2 img {
    width: 100%;
    height: auto;
}

/* AP Marketing Suite Product Showcase Section */
.marketingSuiteShowcaseSec {
    width: 100%;
    float: left;
    padding: 90px 0 96px;
    background:
        radial-gradient(circle at 12% 18%, rgba(178, 235, 244, 0.28), transparent 30%),
        radial-gradient(circle at 88% 74%, rgba(255, 205, 116, 0.18), transparent 32%),
        linear-gradient(150deg, #f7fcfd 0%, #ffffff 52%, #fff9ee 100%);
}

.marketingSuiteShowcaseIntro {
    max-width: 820px;
    margin: 0 auto 44px;
    text-align: center;
}

.marketingSuiteShowcaseIntro .sectionEyebrow {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: 0.16em;
    color: #6f7c89;
    font-weight: 800;
    text-transform: uppercase;
}

.marketingSuiteShowcaseIntro h2 {
    max-width: 760px;
    margin: 0 auto 18px;
    font-size: 54px;
    line-height: 1.06;
    color: #101828;
    font-weight: 800;
    letter-spacing: 0;
}

.marketingSuiteShowcaseIntro p:not(.sectionEyebrow) {
    max-width: 720px;
    margin: 0 auto;
    font-size: 19px;
    line-height: 1.56;
    color: #4d5a6a;
    font-weight: 500;
}

.marketingSuiteProductFrame {
    position: relative;
    max-width: 1120px;
    margin: 0 auto 34px;
    padding: 0 22px;
}

.marketingSuiteScreenshot {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 10px;
    border: 1px solid rgba(205, 222, 232, 0.82);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(23, 45, 60, 0.1);
}

.marketingSuiteScreenshot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.marketingSuiteCallout {
    position: absolute;
    z-index: 2;
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 11px;
    width: 256px;
    padding: 12px 14px;
    border: 1px solid rgba(215, 226, 233, 0.86);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 30px rgba(23, 45, 60, 0.1);
    backdrop-filter: blur(10px);
}

.marketingSuiteCalloutAi {
    top: 60px;
    left: -4px;
}

.marketingSuiteCalloutAutomation {
    right: -4px;
    bottom: 64px;
}

.showcaseCalloutIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #fff2e4;
    color: #f47a20;
    font-size: 13px;
}

.marketingSuiteCalloutAutomation .showcaseCalloutIcon {
    background: #ecfbfd;
    color: #16859a;
}

.marketingSuiteCallout strong {
    display: block;
    color: #101828;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 850;
}

.marketingSuiteCallout small {
    display: block;
    margin-top: 3px;
    color: #667485;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 650;
}

.marketingSuiteValueStrip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    max-width: 1120px;
    margin: 0 auto;
    border-top: 1px solid rgba(205, 222, 232, 0.82);
    border-bottom: 1px solid rgba(205, 222, 232, 0.82);
    background: rgba(255, 255, 255, 0.68);
}

.marketingSuiteValueItem {
    position: relative;
    min-width: 0;
    padding: 26px 24px 28px;
}

.marketingSuiteValueItem + .marketingSuiteValueItem {
    border-left: 1px solid rgba(205, 222, 232, 0.82);
}

.marketingSuiteValueMarker {
    display: block;
    width: 34px;
    height: 3px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f47a20 0%, #f9b21d 100%);
}

.marketingSuiteValueItem:nth-child(2) .marketingSuiteValueMarker {
    background: linear-gradient(90deg, #6eb245 0%, #a8d86d 100%);
}

.marketingSuiteValueItem:nth-child(3) .marketingSuiteValueMarker {
    background: linear-gradient(90deg, #1da4df 0%, #74d2ea 100%);
}

.marketingSuiteValueItem:nth-child(4) .marketingSuiteValueMarker {
    background: linear-gradient(90deg, #6eb245 0%, #2eb8c7 100%);
}

.marketingSuiteValueItem h3 {
    margin: 0 0 12px;
    color: #101828;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.marketingSuiteValueItem p {
    margin: 0;
    color: #526173;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 500;
}

/* Unified Marketing Calendar Section */
.marketingCalendarSec {
    width: 100%;
    float: left;
    padding: 88px 0 96px;
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 205, 116, 0.16), transparent 30%),
        radial-gradient(circle at 86% 34%, rgba(178, 235, 244, 0.28), transparent 32%),
        linear-gradient(145deg, #ffffff 0%, #f7fcfd 48%, #fff9ee 100%);
}

.marketingCalendarSec .container {
    max-width: 1210px;
    padding-left: 24px;
    padding-right: 24px;
}

.marketingCalendarIntro {
    max-width: 820px;
    margin: 0 auto 42px;
    text-align: center;
}

.marketingCalendarIntro .sectionEyebrow {
    margin: 0 0 14px;
    color: #6f7c89;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.marketingCalendarIntro h2 {
    max-width: 760px;
    margin: 0 auto 18px;
    color: #101828;
    font-size: 54px;
    line-height: 1.06;
    font-weight: 850;
    letter-spacing: 0;
}

.marketingCalendarIntro p:not(.sectionEyebrow) {
    max-width: 760px;
    margin: 0 auto;
    color: #4d5a6a;
    font-size: 19px;
    line-height: 1.56;
    font-weight: 500;
}

.marketingCalendarVisual {
    position: relative;
    max-width: 1120px;
    margin: 0 auto 34px;
    padding: 0 26px;
}

.marketingCalendarFrame {
    position: relative;
    overflow: hidden;
    padding: 12px;
    border: 1px solid rgba(205, 222, 232, 0.84);
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(23, 45, 60, 0.1);
}

.marketingCalendarFrame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}

.marketingCalendarToolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 14px 18px;
    color: #101828;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 850;
}

.calendarToolbarActions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.calendarToolbarActions span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(205, 222, 232, 0.82);
    border-radius: 999px;
    background: #f8fbfc;
    color: #637083;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
}

.marketingCalendarGrid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    min-height: 410px;
    overflow: hidden;
    border: 1px solid rgba(214, 226, 233, 0.88);
    border-radius: 18px;
    background: #f8fbfc;
}

.calendarDay {
    min-width: 0;
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.72);
}

.calendarDay + .calendarDay {
    border-left: 1px solid rgba(214, 226, 233, 0.88);
}

.calendarDay h3 {
    margin: 0 0 14px;
    color: #6f7c89;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.calendarEvent {
    min-height: 126px;
    padding: 13px 12px;
    border: 1px solid rgba(214, 226, 233, 0.78);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(23, 45, 60, 0.055);
}

.calendarEvent + .calendarEvent {
    margin-top: 12px;
}

.calendarEvent span {
    display: block;
    margin-bottom: 7px;
    color: #697789;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 750;
}

.calendarEvent strong {
    display: block;
    min-height: 42px;
    color: #101828;
    font-size: 15px;
    line-height: 1.26;
    font-weight: 850;
}

.calendarEvent small {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-top: 13px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
}

.calendarEventSocial {
    background: #f7fdfe;
}

.calendarEventSocial small,
.calendarEventEmail small {
    background: rgba(236, 251, 253, 0.94);
    color: #16859a;
}

.calendarEventEmail {
    background: #fffaf3;
}

.calendarEventEmail small {
    background: rgba(255, 242, 228, 0.94);
    color: #d36517;
}

.calendarEventSms,
.calendarEventJourney {
    background: #f7fcf5;
}

.calendarEventSms small,
.calendarEventJourney small {
    background: rgba(238, 249, 235, 0.94);
    color: #3c7f2a;
}

.calendarEventLifted {
    transform: translateY(-8px) rotate(-1deg);
    border-color: rgba(244, 122, 32, 0.24);
    box-shadow: 0 18px 34px rgba(23, 45, 60, 0.13);
}

.calendarMoveCue {
    position: absolute;
    left: 28%;
    top: 54%;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(244, 122, 32, 0.72);
    font-size: 22px;
}

.calendarMoveCue span {
    width: 46px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(244, 122, 32, 0), rgba(244, 122, 32, 0.64));
}

.calendarRescheduleCallout,
.calendarAnnotation {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 11px;
    width: 272px;
    padding: 12px 14px;
    border: 1px solid rgba(215, 226, 233, 0.86);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 30px rgba(23, 45, 60, 0.1);
    backdrop-filter: blur(10px);
}

.calendarRescheduleCallout {
    position: absolute;
    right: 26px;
    top: 46%;
    display: block;
    width: 250px;
}

.calendarAnnotation {
    position: absolute;
    z-index: 2;
}

.calendarAnnotationAi {
    top: 74px;
    left: 0;
}

.calendarAnnotationAutomation {
    right: 0;
    bottom: 82px;
}

.calendarAnnotationIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #fff2e4;
    color: #f47a20;
    font-size: 13px;
}

.calendarAnnotationAutomation .calendarAnnotationIcon {
    background: #ecfbfd;
    color: #16859a;
}

.calendarAnnotation strong,
.calendarRescheduleCallout strong {
    display: block;
    color: #101828;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 850;
}

.calendarAnnotation small,
.calendarRescheduleCallout small {
    display: block;
    margin-top: 3px;
    color: #667485;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 650;
}

.marketingCalendarUseCases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    max-width: 1120px;
    margin: 0 auto;
    border-top: 1px solid rgba(205, 222, 232, 0.82);
    border-bottom: 1px solid rgba(205, 222, 232, 0.82);
    background: rgba(255, 255, 255, 0.68);
}

.calendarUseCase {
    min-width: 0;
    padding: 26px 28px 28px;
}

.calendarUseCase + .calendarUseCase {
    border-left: 1px solid rgba(205, 222, 232, 0.82);
}

.calendarUseCaseMarker {
    display: block;
    width: 34px;
    height: 3px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f47a20 0%, #f9b21d 100%);
}

.calendarUseCase:nth-child(2) .calendarUseCaseMarker {
    background: linear-gradient(90deg, #2eb8c7 0%, #8ddae5 100%);
}

.calendarUseCase:nth-child(3) .calendarUseCaseMarker {
    background: linear-gradient(90deg, #6eb245 0%, #f9b21d 100%);
}

.calendarUseCase h3 {
    margin: 0 0 12px;
    color: #101828;
    font-size: 19px;
    line-height: 1.22;
    font-weight: 850;
}

.calendarUseCase p {
    margin: 0;
    color: #526173;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 500;
}

/* AI Campaign Creation Section */
.aiCampaignCreationSec {
    width: 100%;
    float: left;
    padding: 88px 0 96px;
    background:
        radial-gradient(circle at 14% 22%, rgba(178, 235, 244, 0.3), transparent 30%),
        radial-gradient(circle at 88% 68%, rgba(255, 205, 116, 0.18), transparent 30%),
        linear-gradient(145deg, #f7fcfd 0%, #ffffff 48%, #fff9ee 100%);
}

.aiCampaignCreationSec .container {
    max-width: 1210px;
    padding-left: 24px;
    padding-right: 24px;
}

.aiCampaignCreationIntro {
    max-width: 820px;
    margin: 0 auto 42px;
    text-align: center;
}

.aiCampaignCreationIntro .sectionEyebrow {
    margin: 0 0 14px;
    color: #6f7c89;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.aiCampaignCreationIntro h2 {
    max-width: 760px;
    margin: 0 auto 18px;
    color: #101828;
    font-size: 54px;
    line-height: 1.06;
    font-weight: 850;
    letter-spacing: 0;
}

.aiCampaignCreationIntro p:not(.sectionEyebrow) {
    max-width: 760px;
    margin: 0 auto;
    color: #4d5a6a;
    font-size: 19px;
    line-height: 1.56;
    font-weight: 500;
}

.aiCampaignBuilder {
    position: relative;
    display: grid;
    grid-template-columns: minmax(210px, 0.82fr) minmax(360px, 1.1fr) minmax(270px, 0.88fr);
    align-items: stretch;
    gap: 24px;
    max-width: 1120px;
    margin: 0 auto 26px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.campaignBuilderColumn {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.campaignStepLabel {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    margin: 0 0 16px;
    color: #6f7c89;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.campaignStepLabel small {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(90deg, #f47a20 0%, #f9b21d 100%) border-box;
    color: #526173;
    font-size: 10px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: 0.06em;
}

.campaignPreviewColumn .campaignStepLabel small {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(90deg, #6eb245 0%, #a8d86d 100%) border-box;
}

.campaignControlsColumn .campaignStepLabel small {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(90deg, #1da4df 0%, #74d2ea 100%) border-box;
}

.campaignPromptColumn {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0;
}

.campaignPromptBox {
    display: grid;
    gap: 12px;
    padding: 15px;
    border: 1px solid rgba(205, 222, 232, 0.84);
    border-radius: 18px;
    background:
        radial-gradient(circle at 12% 12%, rgba(255, 205, 116, 0.1), transparent 34%),
        rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 28px rgba(23, 45, 60, 0.06);
}

.campaignPromptTitle {
    display: block;
    color: #6f7c89;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.campaignPromptInput {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: start;
    gap: 12px;
    padding: 15px;
    border: 1px solid rgba(244, 122, 32, 0.16);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.88);
}

.campaignPromptIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #fff2e4;
    color: #f47a20;
    font-size: 13px;
}

.campaignPromptBox p {
    margin: 0;
    color: #101828;
    font-size: 15px;
    line-height: 1.48;
    font-weight: 650;
}

.campaignPreviewColumn {
    position: relative;
}

.campaignBundlePreview {
    flex: 1 1 auto;
    padding: 18px;
    border: 1px solid rgba(205, 222, 232, 0.8);
    border-radius: 20px;
    background:
        radial-gradient(circle at 90% 8%, rgba(255, 205, 116, 0.12), transparent 26%),
        rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 30px rgba(23, 45, 60, 0.075);
}

.campaignBundleHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.campaignBundleHeader strong {
    color: #101828;
    font-size: 18px;
    line-height: 1.18;
    font-weight: 850;
}

.campaignBundleHeader span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(248, 251, 252, 0.86);
    color: #667485;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
}

.campaignOutput {
    padding: 13px 14px;
    border: 1px solid rgba(214, 226, 233, 0.72);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
}

.campaignOutput + .campaignOutput {
    margin-top: 10px;
}

.campaignOutput span {
    display: block;
    margin-bottom: 6px;
    color: #6f7c89;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.campaignOutput h3 {
    margin: 0 0 6px;
    color: #101828;
    font-size: 15px;
    line-height: 1.22;
    font-weight: 850;
}

.campaignOutput p {
    margin: 0;
    color: #526173;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 500;
}

.campaignOutputEmail {
    background: rgba(255, 250, 243, 0.68);
}

.campaignOutputSms {
    background: rgba(247, 252, 245, 0.72);
}

.campaignOutputSocial {
    background: rgba(247, 253, 254, 0.72);
}

.campaignControlsColumn {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.campaignControlList {
    display: grid;
    gap: 0;
    flex: 1 1 auto;
    align-content: start;
    padding: 9px 18px;
    border: 1px solid rgba(205, 222, 232, 0.8);
    border-radius: 20px;
    background:
        radial-gradient(circle at 92% 10%, rgba(178, 235, 244, 0.12), transparent 28%),
        rgba(255, 255, 255, 0.82);
    box-shadow: 0 14px 30px rgba(23, 45, 60, 0.07);
}

.campaignControlRow {
    display: grid;
    gap: 5px;
    min-height: 0;
    padding: 12px 0;
    border-bottom: 1px solid rgba(214, 226, 233, 0.72);
}

.campaignControlRow:last-child {
    border-bottom: 0;
}

.campaignControlRow span {
    color: #6f7c89;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.campaignControlRow strong {
    color: #101828;
    font-size: 12px;
    line-height: 1.28;
    font-weight: 850;
    text-align: left;
}

.campaignCanvaPanel {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 13px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(205, 222, 232, 0.78);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 12px 24px rgba(23, 45, 60, 0.055);
}

.campaignCanvaIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
}

.campaignCanvaIcon img {
    display: block;
    width: 100%;
    height: auto;
}

.campaignCanvaPanel strong,
.campaignCanvaPanel small {
    display: block;
}

.campaignCanvaPanel strong {
    color: #101828;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 850;
}

.campaignCanvaPanel small {
    margin-top: 3px;
    color: #667485;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 650;
}

.campaignIdeas {
    flex: 1 1 auto;
    margin-top: 16px;
    padding: 16px 18px 18px;
    border: 1px solid rgba(205, 222, 232, 0.8);
    border-radius: 18px;
    background:
        radial-gradient(circle at 10% 6%, rgba(255, 205, 116, 0.1), transparent 32%),
        rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 28px rgba(23, 45, 60, 0.055);
}

.campaignIdeas h3 {
    margin: 0 0 12px;
    color: #101828;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 850;
}

.campaignIdeaList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.campaignIdeaList li {
    min-height: 34px;
    padding: 9px 10px;
    border: 1px solid rgba(214, 226, 233, 0.74);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.66);
    color: #526173;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 750;
}

/* Social Marketing Section */
.socialMarketingSec {
    width: 100%;
    float: left;
    padding: 88px 0 96px;
    background: #ffffff;
}

.socialMarketingSec .container {
    max-width: 1210px;
    padding-left: 24px;
    padding-right: 24px;
}

.socialMarketingGrid {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(420px, 1fr);
    align-items: center;
    gap: 54px;
}

.socialMarketingCopy .sectionEyebrow {
    margin: 0 0 14px;
    color: #6f7c89;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.socialMarketingCopy h2 {
    max-width: 560px;
    margin: 0 0 20px;
    color: #101828;
    font-size: 48px;
    line-height: 1.06;
    font-weight: 850;
    letter-spacing: 0;
}

.socialMarketingCopy p:not(.sectionEyebrow) {
    max-width: 560px;
    margin: 0;
    color: #4d5a6a;
    font-size: 19px;
    line-height: 1.58;
    font-weight: 500;
}

.socialMarketingVisual {
    position: relative;
    min-height: 510px;
    padding: 28px;
    border: 1px solid rgba(205, 222, 232, 0.84);
    border-radius: 28px;
    background:
        radial-gradient(circle at 18% 16%, rgba(178, 235, 244, 0.25), transparent 28%),
        radial-gradient(circle at 88% 86%, rgba(255, 205, 116, 0.18), transparent 28%),
        rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 44px rgba(23, 45, 60, 0.09);
}

.socialScenarioCard,
.socialComposerCard,
.socialCompanionCard,
.socialInsightsCard {
    border: 1px solid rgba(214, 226, 233, 0.82);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 24px rgba(23, 45, 60, 0.065);
}

.socialScenarioCard {
    max-width: 360px;
    padding: 18px;
}

.socialScenarioLabel,
.socialCompanionCard span,
.socialInsightsCard span,
.socialPostPreview span {
    display: block;
    margin-bottom: 8px;
    color: #6f7c89;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.socialScenarioCard strong {
    display: block;
    color: #101828;
    font-size: 22px;
    line-height: 1.18;
    font-weight: 850;
}

.socialScenarioCard p,
.socialCompanionCard p,
.socialInsightsCard p,
.socialPostPreview p {
    margin: 10px 0 0;
    color: #526173;
    font-size: 14px;
    line-height: 1.48;
    font-weight: 550;
}

.socialComposerCard {
    position: absolute;
    right: 28px;
    top: 96px;
    width: min(390px, calc(100% - 56px));
    padding: 18px;
}

.socialComposerHeader {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.socialComposerIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #fff2e4;
    color: #f47a20;
    font-size: 14px;
}

.socialComposerHeader strong {
    color: #101828;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 850;
}

.socialPostPreview {
    padding: 16px;
    border: 1px solid rgba(214, 226, 233, 0.78);
    border-radius: 16px;
    background: #f7fdfe;
}

.socialComposerActions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

.socialComposerActions span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(236, 251, 253, 0.94);
    color: #16859a;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
}

.socialCompanionCard {
    position: absolute;
    left: 68px;
    bottom: 60px;
    width: 265px;
    padding: 16px;
}

.socialInsightsCard {
    position: absolute;
    right: 58px;
    bottom: 32px;
    width: 270px;
    padding: 16px;
}

/* Automated Client Journeys Section */
.automatedJourneysSec {
    width: 100%;
    float: left;
    padding: 88px 0 96px;
    background:
        radial-gradient(circle at 11% 18%, rgba(178, 235, 244, 0.34), transparent 30%),
        radial-gradient(circle at 84% 75%, rgba(255, 205, 116, 0.22), transparent 31%),
        linear-gradient(145deg, #f6fcfd 0%, #ffffff 50%, #fff9ee 100%);
}

.automatedJourneysSec .journeysIntro {
    max-width: 840px;
    margin: 0 auto 38px;
    text-align: center;
}

.automatedJourneysSec .sectionEyebrow {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: 0.16em;
    color: #6f7c89;
    font-weight: 800;
    text-transform: uppercase;
}

.automatedJourneysSec h2 {
    max-width: 760px;
    margin: 0 auto 18px;
    font-size: 54px;
    line-height: 1.06;
    color: #101828;
    font-weight: 800;
    letter-spacing: 0;
}

.automatedJourneysSec .journeysCopy {
    max-width: 760px;
    margin: 0 auto;
    font-size: 21px;
    line-height: 1.55;
    color: #4d5a6a;
    font-weight: 500;
}

.journeysShowcase {
    position: relative;
    display: grid;
    grid-template-columns: 0.58fr 1.34fr 0.78fr;
    align-items: center;
    max-width: 1180px;
    min-height: 476px;
    margin: 0 auto;
    padding: 16px 8px;
}

.journeysShowcase::before {
    content: '';
    position: absolute;
    inset: 9% 4% 4%;
    border-radius: 34px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(245, 252, 253, 0.38));
    box-shadow: inset 0 0 0 1px rgba(205, 225, 233, 0.3);
    pointer-events: none;
}

.journeySteps,
.journeyPreviewCard,
.journeyUiCard {
    position: relative;
    z-index: 1;
}

.journeySteps {
    display: grid;
    gap: 10px;
    max-width: 236px;
    margin-right: -14px;
    justify-self: end;
}

.journeySteps::before {
    content: '';
    position: absolute;
    top: 32px;
    bottom: 32px;
    left: 22px;
    width: 1px;
    background: linear-gradient(180deg, rgba(34, 181, 201, 0.28), rgba(249, 130, 26, 0.42));
}

.journeyStep {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    min-height: 68px;
    padding: 12px 13px;
    border: 1px solid rgba(215, 227, 234, 0.9);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 20px rgba(20, 35, 50, 0.055);
}

.journeyStepIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #fff2e4;
    color: #f47a20;
    font-size: 13px;
}

.journeyStep strong {
    display: block;
    color: #101828;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 800;
}

.journeyStep small {
    display: block;
    margin-top: 4px;
    color: #667485;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
}

.journeyPreviewCard {
    padding: 32px;
    border: 1px solid rgba(214, 225, 232, 0.95);
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 0 28px 64px rgba(18, 33, 48, 0.16);
    transform: scale(1.03);
}

.journeyPreviewHeader {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    margin-bottom: 18px;
    color: #6d7885;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.journeyPreviewHeader strong {
    color: #16859a;
    font-size: 13px;
    white-space: nowrap;
}

.journeyEmailPreview {
    padding: 34px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(250, 253, 254, 0.96), rgba(255, 255, 255, 0.96)),
        radial-gradient(circle at 12% 10%, rgba(72, 195, 218, 0.16), transparent 34%);
    border: 1px solid rgba(218, 229, 235, 0.88);
}

.previewLabel {
    margin: 0 0 10px;
    color: #f47a20;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.journeyEmailPreview h3 {
    max-width: 460px;
    margin: 0 0 16px;
    color: #101828;
    font-size: 35px;
    line-height: 1.12;
    font-weight: 800;
}

.journeyEmailPreview p:not(.previewLabel) {
    max-width: 470px;
    margin: 0;
    color: #4d5a6a;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 500;
}

.previewButton {
    display: inline-flex;
    margin-top: 26px;
    padding: 12px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f47a20 0%, #f9b21d 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.journeySmsPreview {
    max-width: 390px;
    margin: 18px auto 0;
    padding: 16px 18px;
    border: 1px solid rgba(218, 229, 235, 0.88);
    border-radius: 18px;
    background: #fbfdfe;
}

.journeySmsPreview p:last-child {
    margin: 0;
    color: #344456;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 600;
}

.journeyUiCard {
    margin-left: -18px;
    padding: 12px;
    border: 1px solid rgba(214, 225, 232, 0.95);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(18, 33, 48, 0.1);
    overflow: hidden;
}

.journeyUiCard img {
    display: block;
    width: 172%;
    max-width: none;
    height: 310px;
    object-fit: cover;
    object-position: left center;
    border-radius: 14px;
}

.aiAssistCallout {
    position: absolute;
    top: 18px;
    left: 22px;
    width: 205px;
    padding: 12px 14px;
    border: 1px solid rgba(214, 225, 232, 0.9);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 24px rgba(18, 33, 48, 0.1);
    z-index: 2;
}

.aiAssistCallout::after {
    content: '';
    position: absolute;
    left: 24px;
    bottom: -22px;
    width: 1px;
    height: 22px;
    background: linear-gradient(180deg, rgba(244, 122, 32, 0.45), rgba(34, 181, 201, 0.28));
}

.aiAssistCallout strong {
    display: block;
    color: #101828;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;
}

.aiAssistCallout span {
    display: block;
    margin-top: 3px;
    color: #667485;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
}

/* Automated Client Journey Logic Section */
.journeyLogicSec {
    width: 100%;
    float: left;
    padding: 88px 0 96px;
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 16%, rgba(255, 205, 116, 0.14), transparent 25%),
        radial-gradient(circle at 13% 80%, rgba(178, 235, 244, 0.22), transparent 28%),
        linear-gradient(155deg, #ffffff 0%, #f8fcfd 50%, #fffaf0 100%);
}

.journeyLogicIntro {
    max-width: 850px;
    margin: 0 auto 34px;
    text-align: center;
}

.journeyLogicIntro .sectionEyebrow {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: 0.16em;
    color: #6f7c89;
    font-weight: 800;
    text-transform: uppercase;
}

.journeyLogicIntro h2 {
    max-width: 940px;
    margin: 0 auto 16px;
    font-size: 52px;
    line-height: 1.06;
    color: #101828;
    font-weight: 800;
    letter-spacing: 0;
}

.journeyLogicIntro h2 span {
    display: block;
}

.journeyLogicIntro p:not(.sectionEyebrow) {
    max-width: 820px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 1.55;
    color: #4d5a6a;
    font-weight: 500;
}

.journeyLogicVisual {
    position: relative;
    max-width: 860px;
    margin: 0 auto 38px;
    padding: 20px 40px 34px;
}

.logicFlow {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logicNode {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    width: 328px;
    min-height: 66px;
    padding: 12px 14px;
    border: 1px solid rgba(214, 226, 233, 0.78);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 7px 18px rgba(17, 34, 50, 0.045);
}

.logicNodeStart {
    border-color: rgba(45, 189, 211, 0.32);
}

.logicNodeCondition {
    width: 330px;
    border-color: rgba(250, 151, 39, 0.3);
}

.logicNodeAction {
    width: 316px;
}

.logicIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #ecfbfd;
    color: #16859a;
    font-size: 12px;
}

.logicIconCondition,
.logicIconMessage,
.logicIconNo {
    background: #fff2e4;
    color: #f47a20;
}

.logicIconYes {
    background: #eef9eb;
    color: #3f8d2d;
}

.logicNode strong {
    display: block;
    color: #101828;
    font-size: 17px;
    line-height: 1.24;
    font-weight: 800;
}

.logicNode small {
    display: block;
    margin-top: 4px;
    color: #657487;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
}

.logicConnector {
    width: 1px;
    height: 22px;
    background: linear-gradient(180deg, rgba(34, 181, 201, 0.26), rgba(249, 130, 26, 0.28));
}

.logicBranches {
    position: relative;
    width: min(680px, 78%);
    height: 64px;
}

.logicBranches::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 24px;
    background: rgba(249, 130, 26, 0.28);
}

.logicBranchLine {
    position: absolute;
    top: 23px;
    width: calc(50% - 1px);
    height: 41px;
    border-top: 1px solid rgba(249, 130, 26, 0.27);
}

.logicBranchLineLeft {
    right: 50%;
    border-left: 1px solid rgba(249, 130, 26, 0.27);
    border-top-left-radius: 20px;
}

.logicBranchLineRight {
    left: 50%;
    border-right: 1px solid rgba(249, 130, 26, 0.27);
    border-top-right-radius: 20px;
}

.logicOutcomes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 92px;
    width: min(724px, 100%);
}

.logicOutcome {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logicBranchLabel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 28px;
    margin-bottom: 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.logicBranchLabelYes {
    background: #eef9eb;
    color: #3f8d2d;
}

.logicBranchLabelNo {
    background: #fff2e4;
    color: #f47a20;
}

.journeyUseCaseStrip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    max-width: 1120px;
    margin: 0 auto;
    border-top: 1px solid rgba(205, 222, 232, 0.82);
    border-bottom: 1px solid rgba(205, 222, 232, 0.82);
    background: rgba(255, 255, 255, 0.68);
}

.journeyUseCase {
    min-width: 0;
    padding: 26px 24px 28px;
}

.journeyUseCase + .journeyUseCase {
    border-left: 1px solid rgba(205, 222, 232, 0.82);
}

.journeyUseCaseMarker {
    display: block;
    width: 34px;
    height: 3px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f47a20 0%, #f9b21d 100%);
}

.journeyUseCase:nth-child(2) .journeyUseCaseMarker {
    background: linear-gradient(90deg, #2eb8c7 0%, #8ddae5 100%);
}

.journeyUseCase:nth-child(3) .journeyUseCaseMarker {
    background: linear-gradient(90deg, #6eb245 0%, #2eb8c7 100%);
}

.journeyUseCase:nth-child(4) .journeyUseCaseMarker {
    background: linear-gradient(90deg, #9d7be8 0%, #f9b21d 100%);
}

.journeyUseCase h3 {
    margin: 0 0 12px;
    color: #101828;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.journeyUseCase p {
    margin: 0;
    color: #526173;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 500;
}

/* Marketing Insights Section */
.marketingInsightsSec {
    width: 100%;
    float: left;
    padding: 88px 0 96px;
    background:
        radial-gradient(circle at 12% 20%, rgba(178, 235, 244, 0.25), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8faf9 100%);
}

.marketingInsightsSec .container {
    max-width: 1210px;
    padding-left: 24px;
    padding-right: 24px;
}

.marketingInsightsIntro {
    max-width: 820px;
    margin: 0 auto 34px;
    text-align: center;
}

.marketingInsightsIntro .sectionEyebrow,
.apMarketingCta .sectionEyebrow {
    margin: 0 0 14px;
    color: #6f7c89;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.marketingInsightsIntro h2 {
    max-width: 760px;
    margin: 0 auto 18px;
    color: #101828;
    font-size: 48px;
    line-height: 1.06;
    font-weight: 850;
    letter-spacing: 0;
}

.marketingInsightsIntro p:not(.sectionEyebrow) {
    max-width: 740px;
    margin: 0 auto;
    color: #4d5a6a;
    font-size: 19px;
    line-height: 1.56;
    font-weight: 500;
}

.marketingInsightsStrip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    max-width: 1120px;
    margin: 0 auto;
    border-top: 1px solid rgba(205, 222, 232, 0.82);
    border-bottom: 1px solid rgba(205, 222, 232, 0.82);
    background: rgba(255, 255, 255, 0.72);
}

.marketingInsightItem {
    min-width: 0;
    padding: 26px 24px 28px;
}

.marketingInsightItem + .marketingInsightItem {
    border-left: 1px solid rgba(205, 222, 232, 0.82);
}

.marketingInsightMarker {
    display: block;
    width: 34px;
    height: 3px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f47a20 0%, #f9b21d 100%);
}

.marketingInsightItem:nth-child(2) .marketingInsightMarker {
    background: linear-gradient(90deg, #2eb8c7 0%, #8ddae5 100%);
}

.marketingInsightItem:nth-child(3) .marketingInsightMarker {
    background: linear-gradient(90deg, #9d7be8 0%, #2eb8c7 100%);
}

.marketingInsightItem:nth-child(4) .marketingInsightMarker {
    background: linear-gradient(90deg, #6eb245 0%, #f9b21d 100%);
}

.marketingInsightItem h3 {
    margin: 0 0 12px;
    color: #101828;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.marketingInsightItem p {
    margin: 0;
    color: #526173;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 500;
}

/* AP Marketing Suite CTA */
.apMarketingCta {
    width: 100%;
    float: left;
    padding: 24px 0 54px;
    background: #f8faf9;
}

.apMarketingCtaPanel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    max-width: 1210px;
    padding: 44px 50px;
    border: 1px solid rgba(231, 238, 243, 0.82);
    border-radius: 28px;
    background:
        radial-gradient(circle at 11% 18%, rgba(155, 228, 238, 0.2), transparent 24%),
        radial-gradient(circle at 88% 82%, rgba(243, 195, 67, 0.16), transparent 23%),
        linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
    box-shadow: 0 12px 28px rgba(42, 64, 82, 0.08);
}

.apMarketingCtaPanel h2 {
    max-width: 720px;
    margin: 0;
    color: #101828;
    font-size: 42px;
    line-height: 1.08;
    font-weight: 850;
    letter-spacing: 0;
}

.apMarketingCtaPanel p:not(.sectionEyebrow) {
    max-width: 760px;
    margin: 14px 0 0;
    color: #4d5a6a;
    font-size: 18px;
    line-height: 1.56;
    font-weight: 500;
}

.apMarketingCtaButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f47a20 0%, #f9b21d 100%);
    color: #ffffff;
    font-size: 16px;
    line-height: 1;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 20px rgba(226, 112, 24, 0.16);
}

.apMarketingCtaButton:hover,
.apMarketingCtaButton:focus {
    color: #ffffff;
    text-decoration: none;
}

/* Management Section */
.managementSec {
    width: 100%;
    float: left;
}

.managementSec .managementBox,
.emailMarketingSec .emailMarketingImg,
.bestTechSec .bestTechBox {
    border-radius: 24px;
    border: 1px solid rgba(24, 40, 72, 0.08);
    background-color: #ffffff;
    box-shadow: 0 10px 28px rgba(61, 62, 63, 0.12);
}

.managementSec .managementBox {
    width: 100%;
    float: left;
    padding: 85px 30px;
}

.managementSec .managementBox h2 {
    position: relative;
    font-size: 45px;
    letter-spacing: 1px;
    line-height: 58px;
    color: #000000;
    font-weight: 300;
    text-align: center;
    padding-bottom: 40px;
    margin-bottom: 35px;
}

.managementSec .managementBox h2 strong {
    font-weight: 700;
}

.managementSec .managementBox h2::before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    content: '';
    width: 80px;
    height: 4px;
    background-color: #e94f00;
}

.managementSec .managementBox ul {
    width: 100%;
    float: left;
}

.managementSec .managementBox ul li {
    display: inline-block;
    position: relative;
    font-size: 24px;
    letter-spacing: 1px;
    line-height: 31px;
    color: rgb(0 0 0 / 90%);
    font-weight: 600;
    padding-left: 40px;
    margin-right: 20px;
    margin-bottom: 35px;
}

.managementSec .managementBox ul li::before {
    position: absolute;
    top: 1px;
    left: 0;
    content: '';
    width: 24px;
    height: 24px;
    border: 1px solid #e5e6e7;
    border-radius: 8px;
    background-color: #fcfafa;
    background-image: url(/Medical-Spa-Software/images/check-arrow.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}

/* Business Section */
.businessSec {
    width: 100%;
    float: left;
    padding: 100px 0;
}

.businessSec h2 {
    position: relative;
    font-size: 45px;
    letter-spacing: 1px;
    line-height: 55px;
    color: #000000;
    font-weight: 300;
    text-align: center;
    padding-bottom: 25px;
    margin-bottom: 30px;
}

.businessSec h2 strong {
    font-weight: 700;
}

.businessSec h2::before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    content: '';
    width: 80px;
    height: 4px;
    background-color: #e94f00;
}

.businessSec p.info {
    font-size: 18px;
    line-height: 29px;
    color: #000000;
    font-weight: 300;
    text-align: center;
    margin-bottom: 40px;
}

.businessSec .businessCol {
    display: flex;
    margin-bottom: 30px;
}

.businessSec .businessBox {
    width: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 34px 28px 30px;
    border-radius: 24px;
    border: 1px solid rgba(24, 40, 72, 0.08);
    background-color: #ffffff;
    box-shadow: 0 10px 28px rgba(61, 62, 63, 0.12);
}

.businessSec .businessBox .businessImg {
    position: relative;
    max-width: 253px;
    width: 100%;
    margin: 0 auto;
}

.businessSec .businessBox .businessImg img {
    width: 100%;
    height: auto;
}

.businessSec .businessBox .businessImg span {
    font-size: 47px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-right: 45px;
}

.businessSec .businessBox .businessInfo {
    width: 100%;
    float: left;
    padding: 30px 0 0;
}

.businessSec .businessBox .businessInfo h4 {
    font-size: 20px;
    line-height: 30px;
    color: #001d33;
    font-weight: 500;
    text-align: center;
    margin-bottom: 10px;
}

.businessSec .businessBox .businessInfo p {
    font-size: 17px;
    line-height: 27px;
    color: #001d33;
    font-weight: 300;
    text-align: center;
}

.businessSec .businessBox .businessInfo p i {
    font-size: 14px;
}

/* Email Marketing section */
.emailMarketingSec {
    position: relative;
    width: 100%;
    float: left;
    padding: 90px 0;
    background-color: #fcfcfc;
}

.emailMarketingSec::before {
    content: '';
    position: absolute;
    top: 100px;
    left: 0;
    width: 158px;
    height: 365px;
    background-image: url(../images/email-design.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.emailMarketingSec::after {
    content: '';
    position: absolute;
    bottom: 30px;
    right: 0;
    width: 625px;
    height: 334px;
    background-image: url(../images/email-banner-design.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    z-index: 0;
}

.emailMarketingSec h2 {
    position: relative;
    font-size: 45px;
    letter-spacing: 1px;
    line-height: 55px;
    color: #000000;
    font-weight: 300;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.emailMarketingSec h2 strong {
    font-weight: 700;
}

.emailMarketingSec h2::before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 80px;
    height: 4px;
    background-color: #e94f00;
}

.emailMarketingSec p {
    width: 50%;
    float: left;
    font-size: 16px;
    line-height: 31px;
    color: #000000;
    font-weight: 300;
}

.emailMarketingSec ul {
    width: 40%;
    float: right;
}

.emailMarketingSec ul li {
    position: relative;
    width: 50%;
    float: left;
    font-size: 20px;
    letter-spacing: 0px;
    line-height: 25px;
    color: #000000;
    font-weight: 500;
    padding-left: 30px;
    margin-bottom: 25px;
}

.emailMarketingSec ul li::before {
    position: absolute;
    top: 1px;
    left: 0;
    content: '';
    width: 24px;
    height: 24px;
    border: 1px solid #e5e6e7;
    border-radius: 8px;
    background-color: #fcfafa;
    background-image: url(/Medical-Spa-Software/images/check-arrow.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}

.emailMarketingSec .emailMarketingImg {
    position: relative;
    max-width: 1155px;
    width: 100%;
    float: left;
    margin-top: 50px;
    overflow: hidden;
    z-index: 1;
}

.emailMarketingSec .emailMarketingImg img {
    width: 100%;
    height: auto;
}

/* Touch Section */
.touchSec {
    position: relative;
    width: 100%;
    float: left;
    padding: 100px 0;
}

.touchSec::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/touch-design.png);
    background-repeat: no-repeat;
    background-position: bottom center;
}

.touchSec .leftCol {
    width: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.touchSec .leftCol h2 {
    position: relative;
    font-size: 50px;
    letter-spacing: 1px;
    color: #000000;
    font-weight: 300;
    padding-bottom: 35px;
    margin-bottom: 25px;
}

.touchSec .leftCol h2::before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 80px;
    height: 4px;
    background-color: #e94f00;
}

.touchSec .leftCol h2 strong {
    font-weight: 700;
}

.touchSec .leftCol p {
    font-size: 16px;
    line-height: 30px;
    color: #000000;
    font-weight: 300;
}

.touchSec .rightCol {
    width: 100%;
    float: left;
}

.touchSec .rightCol img {
    width: 100%;
    height: auto;
}

/* Market Report Section */
.marketReportSec {
    width: 100%;
    float: left;
    padding: 100px 0;
    background-color: #fcfcfc;
}

.marketReportSec h2 {
    position: relative;
    font-size: 45px;
    letter-spacing: 1px;
    line-height: 55px;
    color: #000000;
    font-weight: 300;
    text-align: center;
    padding-bottom: 30px;
    margin-bottom: 50px;
}

.marketReportSec h2 strong {
    font-weight: 700;
}

.marketReportSec h2::before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    content: '';
    width: 80px;
    height: 4px;
    background-color: #e94f00;
}

.marketReportSec .leftCol {
    width: 100%;
    float: left;
    height: 100%;
    display: grid;
    gap: 30px;
}

.marketReportSec .leftCol .marketingBox {
    border-radius: 24px;
    padding: 30px 22px;
    border: 1px solid rgba(24, 40, 72, 0.08);
    background-color: #ffffff;
    box-shadow: 0 10px 28px rgba(61, 62, 63, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 172px;
}

.marketReportSec .leftCol .marketingBox:last-child {
    margin-bottom: 0;
}

.marketReportSec .leftCol .marketingBox p {
    font-size: 16px;
    letter-spacing: 0px;
    color: #f14a13;
    font-weight: 400;
    font-family: "Roboto";
    text-align: center;
    padding-bottom: 15px;
}

.marketReportSec .leftCol .marketingBox h3 {
    font-size: 30px;
    letter-spacing: 0px;
    color: #141414;
    font-weight: 700;
    text-align: center;
}

.marketReportSec .rightCol {
    width: 100%;
    float: left;
}

.marketReportSec .rightCol img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

/* Marketing Reports Section */
.marketingReportsSec {
    position: relative;
    width: 100%;
    float: left;
    padding: 110px 0 20px;
}

.marketingReportsSec h2 {
    position: relative;
    font-size: 50px;
    letter-spacing: 1px;
    line-height: 55px;
    color: #000000;
    font-weight: 300;
    text-align: center;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.marketingReportsSec h2 strong {
    font-weight: 700;
}

.marketingReportsSec h2::before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    content: '';
    width: 80px;
    height: 4px;
    background-color: #f79362;
}

.marketingReportsSec p {
    font-size: 16px;
    line-height: 28px;
    color: #000000;
    font-weight: 300;
    text-align: center;
}

.marketingReportsSec .managementBox {
    width: 100%;
    float: left;
}

.marketingReportsSec .managementBox img {
    width: 100%;
    height: auto;
}

/* Text Marketing Section */
.textMarketingSec {
    position: relative;
    width: 100%;
    float: left;
    padding: 90px 0 150px;
    background-color: #fcfcfc;
}

.textMarketingSec::before {
    content: '';
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 125px;
    height: 364px;
    background-image: url(../images/textMarketingLeftDesign.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.textMarketingSec::after {
    content: '';
    position: absolute;
    top: 30px;
    right: 0;
    width: 177px;
    height: 475px;
    background-image: url(../images/textMarketingRightDesign.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    z-index: 0;
}

.textMarketingSec h2 {
    position: relative;
    font-size: 45px;
    letter-spacing: 1px;
    line-height: 55px;
    color: #000000;
    font-weight: 300;
    padding-bottom: 25px;
    margin-bottom: 35px;
}

.textMarketingSec h2 strong {
    font-weight: 700;
}

.textMarketingSec h2::before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 80px;
    height: 4px;
    background-color: #e94f00;
}

.textMarketingSec p.info {
    width: 40%;
    float: left;
    font-size: 16px;
    line-height: 31px;
    color: #000000;
    font-weight: 300;
}

.textMarketingSec ul {
    width: 40%;
    float: right;
    display: grid;
    grid-template-columns: auto auto;
}

.textMarketingSec ul li {
    position: relative;
    width: auto;
    float: left;
    font-size: 20px;
    letter-spacing: 0px;
    line-height: 25px;
    color: #000000;
    font-weight: 600;
    padding-left: 35px;
    margin-bottom: 20px;
}

.textMarketingSec ul li::before {
    position: absolute;
    top: 1px;
    left: 0;
    content: '';
    width: 24px;
    height: 24px;
    border: 1px solid #e5e6e7;
    border-radius: 8px;
    background-color: #fcfafa;
    background-image: url(/Medical-Spa-Software/images/check-arrow.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}

.textMarketingSec .marketingBox {
    width: 100%;
    float: left;
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.textMarketingSec .marketingBox .leftCol {
    width: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.textMarketingSec .marketingBox .leftCol img {
    width: 125%;
    height: auto;
    margin-left: -90px;
    margin-top: -65px;
    margin-bottom: -50px;
}

.textMarketingSec .marketingBox .leftCol p {
    font-size: 15px;
    line-height: 28px;
    color: #000000;
    font-weight: 300;
    font-style: italic;
}

.textMarketingSec .marketingBox .leftCol p strong {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
}

.textMarketingSec .marketingBox .rightCol {
    position: relative;
    max-width: 445px;
    width: 100%;
    float: right;
    margin: 0 10px 0 30px;
}

.textMarketingSec .marketingBox .rightCol::before {
    content: '';
    position: absolute;
    left: -30px;
    bottom: -25px;
    width: 212px;
    height: 232px;
    background-image: url(../images/text-marketing-design.png);
    background-repeat: no-repeat;
}

.textMarketingSec .marketingBox .rightCol img {
    position: relative;
    z-index: 1;
}

/* Screen Messeng Section */
.screenMessengSec {
    width: 100%;
    float: left;
    margin-top: -95px;
}

.screenMessengSec .messengBox {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    float: left;
    border: 1px solid rgba(24, 40, 72, 0.08);
    border-radius: 24px;
    padding: 19px 20px;
    box-shadow: 0 10px 28px rgba(61, 62, 63, 0.12);
    background-color: #ffffff;
}

.screenMessengSec .messengBox::before {
    display: none;
}

.screenMessengSec .messengBox .leftCol {
    max-width: 695px;
    width: 100%;
    float: left;
}

.screenMessengSec .messengBox .leftCol img {
    width: 100%;
    height: auto;
}

.screenMessengSec .messengBox .rightCol {
    max-width: 425px;
    width: 100%;
    float: right;
    border-radius: 24px;
    padding: 19px 40px;
    background: linear-gradient(90deg, #45d0ef 0%, #1f97dd 100%);
}

.screenMessengSec .messengBox .rightCol h3 {
    font-size: 40px;
    line-height: 47px;
    color: #ffffff;
    font-weight: 700;
}

.screenMessengSec .messengBox .rightCol p {
    font-size: 20px;
    line-height: 32px;
    color: #ffffff;
    font-weight: 400;
}

/* Best Tech Section */
.bestTechSec {
    width: 100%;
    float: left;
    padding: 170px 0 35px;
}

.bestTechSec .bestTechBox {
    display: flex;
    align-items: center;
}

.bestTechSec .bestTechBox .leftCol {
    width: 40%;
    float: left;
    text-align: center;
}

.bestTechSec .bestTechBox .leftCol img {
    max-width: 310px;
    width: 100%;
    height: auto;
    margin-top: -70px;
}

.bestTechSec .bestTechBox .rightCol {
    width: 60%;
    float: left;
}

.bestTechSec .bestTechBox .rightCol img.commas {
    width: 43px;
    height: auto;
    margin-bottom: 30px;
}

.bestTechSec .bestTechBox .rightCol .date {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.bestTechSec .bestTechBox .rightCol .date ul {
    display: flex;
    margin-right: 5px;
}

.bestTechSec .bestTechBox .rightCol .date ul li {
    margin-right: 2px;
}

.bestTechSec .bestTechBox .rightCol .date ul li img {
    width: 20px;
    height: auto;
}

.bestTechSec .bestTechBox .rightCol .date p {
    font-size: 14px;
    line-height: 20px;
    color: rgb(0 0 0 / 80%);
    font-weight: 400;
}

.bestTechSec .bestTechBox .rightCol h2 {
    font-size: 40px;
    line-height: 45px;
    color: #001d33;
    font-weight: 700;
    margin-bottom: 20px;
}

.bestTechSec .bestTechBox .rightCol p.info {
    font-size: 19px;
    line-height: 30px;
    color: #000000;
    font-weight: 400;
    font-family: "Roboto";
    margin-bottom: 25px;
}

.bestTechSec .bestTechBox .rightCol p.info:last-child {
    margin-bottom: 0;
}



@media only screen and (min-width: 1601px) and (max-width: 2500px) {
    .apMarketingSec::before {
        background-size: cover;
    }

    .touchSec::before {
        background-size: cover;
    }

}

@media only screen and (min-width: 1501px) and (max-width: 1600px) {}

@media only screen and (min-width: 1441px) and (max-width: 1500px) {}

@media only screen and (min-width: 1367px) and (max-width: 1440px) {}

@media only screen and (min-width: 1200px) and (max-width: 1366px) {

    /* Banner Section */
    .bannerSec {
        padding: 126px 0 68px;
    }

    .bannerSec .leftCol h1 {
        font-size: 54px;
    }

    .bannerSec .bannerTextWrap {
        gap: 52px;
    }

    .apMarketingHeroVisual {
        grid-template-columns: minmax(200px, 0.35fr) minmax(0, 0.65fr);
        gap: 18px;
        min-height: 0;
        padding: 18px;
    }

    .apMarketingHeroCallout {
        width: 100%;
    }

    .apMarketingHeroCallout strong {
        font-size: 14px;
    }

    /* AP Marketing Section */
    .apMarketingSec {
        padding: 90px 0;
    }

    /* Management Section */
    .managementSec .managementBox {
        padding: 80px 30px;
    }

    .managementSec .managementBox h2 {
        padding-bottom: 30px;
    }

    .managementSec .managementBox ul li {
        font-size: 24px;
    }

    /* Business Section */
    .businessSec {
        padding: 90px 0;
    }

    /* Touch Section */
    .touchSec {
        padding: 90px 0;
    }

    /* Market Report Section */
    .marketReportSec {
        padding: 90px 0;
    }

    /* Marketing Reports Section */
    .marketingReportsSec {
        padding: 90px 20px;
    }

    .marketingReportsSec h2 {
        font-size: 45px;
    }

    .textMarketingSec .marketingBox .leftCol img {
        width: 120%;
        margin-left: -70px;
        margin-top: -45px;
    }

    .textMarketingSec .marketingBox .rightCol {
        max-width: 430px;
    }

    /* Screen Messeng Section */
    .screenMessengSec .messengBox .rightCol {
        max-width: 400px;
    }

    /* Best Tech Section */
    .bestTechSec {
        padding: 150px 0 35px;
    }

    .automatedJourneysSec h2 {
        font-size: 48px;
    }

    .journeysShowcase {
        grid-template-columns: 0.75fr 1.1fr 0.9fr;
        padding: 38px 24px;
    }

    .journeyEmailPreview h3 {
        font-size: 28px;
    }

    .journeyPreviewCard {
        transform: scale(1.01);
    }

    .journeyUiCard img {
        height: 285px;
    }

    .journeyLogicIntro h2 {
        font-size: 46px;
    }

    .journeyLogicVisual {
        padding-left: 40px;
        padding-right: 40px;
    }

    .logicOutcomes {
        gap: 48px;
    }

    .marketingSuiteShowcaseIntro h2 {
        font-size: 48px;
    }

    .marketingSuiteProductFrame {
        max-width: 1040px;
    }

    .marketingSuiteValueItem {
        padding: 24px 20px 26px;
    }

    .marketingSuiteValueItem h3 {
        font-size: 15px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

    /* Banner Section */
    .bannerSec {
        padding: 126px 0 68px;
    }

    .bannerSec .bannerTextWrap {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.88fr);
        gap: 40px;
    }

    .bannerSec .leftCol {
        max-width: none;
        align-items: flex-start;
        text-align: left;
        margin: 0;
    }

    .bannerSec .leftCol h1 {
        font-size: 50px;
    }

    .bannerSec .leftCol p:not(.heroEyebrow) {
        font-size: 17px;
    }

    .bannerSec .apMarketingHeroVisual {
        grid-template-columns: minmax(210px, 0.34fr) minmax(0, 0.66fr);
        gap: 18px;
        width: min(860px, 100%);
        max-width: none;
        min-height: 0;
        margin: 0 auto;
    }

    .apMarketingHeroPhoto {
        width: 100%;
    }

    .apMarketingHeroScreen {
        width: 100%;
    }

    /* AP Marketing Section */
    .apMarketingSec {
        padding: 70px 0;
    }

    .apMarketingSec::after {
        display: none;
    }

    .apMarketingSec .rightCol {
        padding-left: 30px;
    }

    .apMarketingSec .rightCol h2 {
        font-size: 38px;
        line-height: 50px;
        margin-bottom: 20px;
    }

    .apMarketingSec .rightCol p {
        margin-bottom: 20px;
    }

    .apMarketingSec .leftCol .marketing-img1 {
        max-width: 370px;
    }

    .apMarketingSec .leftCol .marketing-img1::before {
        width: 186px;
        height: 200px;
    }

    .apMarketingSec .leftCol .marketing-img1::after {
        width: 300px;
        height: 270px;
    }

    .apMarketingSec .leftCol .marketing-img2 {
        max-width: 250px;
        margin-top: -70px;
    }

    .apMarketingSec .leftCol .marketing-img1,
    .textMarketingSec .marketingBox .rightCol {
        padding: 18px;
        border-radius: 24px;
    }

    /* Management Section */
    .managementSec .managementBox {
        padding: 60px 30px;
    }

    .managementSec .managementBox h2 {
        font-size: 38px;
        line-height: 50px;
        padding-bottom: 20px;
    }

    .managementSec .managementBox ul li {
        font-size: 22px;
        line-height: 30px;
        margin-bottom: 30px;
    }

    /* Business Section */
    .businessSec {
        padding: 70px 0;
    }

    .businessSec h2 {
        font-size: 38px;
        line-height: 50px;
        padding-bottom: 15px;
    }

    .businessSec .businessBox {
        padding-left: 0;
    }

    .businessSec .businessBox .businessImg {
        max-width: 230px;
    }

    .businessSec .businessBox .businessInfo p br:first-child {
        display: none;
    }

    .businessSec .businessBox .businessImg span {
        font-size: 40px;
    }

    .businessSec .businessBox .businessInfo {
        padding: 40px 50px 0 15px;
    }

    /* Email Marketing section */
    .emailMarketingSec {
        padding: 70px 0;
    }

    .emailMarketingSec::before {
        display: none;
    }

    .emailMarketingSec h2 {
        font-size: 38px;
        line-height: 50px;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    .emailMarketingSec .emailMarketingImg {
        margin-top: 40px;
    }

    /* Touch Section */
    .touchSec {
        padding: 70px 0;
    }

    .touchSec .leftCol h2 {
        font-size: 38px;
        line-height: 50px;
        padding-bottom: 15px;
    }

    /* Market Report Section */
    .marketReportSec {
        padding: 70px 0;
    }

    .marketReportSec h2 {
        font-size: 38px;
        line-height: 50px;
        padding-bottom: 15px;
    }

    .marketReportSec .leftCol {
        gap: 20px;
    }

    .marketReportSec .leftCol .marketingBox p {
        padding-bottom: 10px;
    }

    .marketReportSec .leftCol .marketingBox h3 {
        font-size: 25px;
    }

    /* Marketing Reports Section */
    .marketingReportsSec {
        padding: 70px 0 20px;
    }

    .marketingReportsSec h2 {
        font-size: 38px;
        line-height: 50px;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    /* Text Marketing Section */
    .textMarketingSec {
        padding: 70px 0 100px;
    }

    .textMarketingSec::before,
    .textMarketingSec::after {
        display: none;
    }

    .textMarketingSec h2 {
        font-size: 38px;
        line-height: 50px;
        padding-bottom: 15px;
    }

    .textMarketingSec p.info {
        width: 50%;
    }

    .textMarketingSec ul {
        width: 45%;
    }

    .textMarketingSec .marketingBox .leftCol img {
        width: 110%;
        margin-left: -20px;
        margin-top: -20px;
        margin-bottom: -20px;
    }

    .textMarketingSec .marketingBox .leftCol p strong {
        font-size: 17px;
    }

    .textMarketingSec .marketingBox .rightCol {
        max-width: 340px;
    }

    /* Screen Messeng Section */
    .screenMessengSec {
        margin-top: -80px;
    }

    .screenMessengSec .messengBox {
        padding: 15px 20px;
    }

    .screenMessengSec .messengBox .leftCol {
        margin-right: 20px;
    }

    .screenMessengSec .messengBox .rightCol {
        max-width: 320px;
        padding: 15px 30px;
    }

    .screenMessengSec .messengBox .rightCol h3 {
        font-size: 35px;
        line-height: 45px;
    }

    .screenMessengSec .messengBox .rightCol p {
        font-size: 18px;
        line-height: 30px;
    }

    /* Best Tech Section */
    .bestTechSec {
        padding: 120px 0 35px;
    }

    .bestTechSec .bestTechBox .leftCol img {
        max-width: 280px;
    }

    .bestTechSec .bestTechBox .rightCol img.commas {
        margin-bottom: 25px;
    }

    .bestTechSec .bestTechBox .rightCol h2 {
        font-size: 38px;
        line-height: 50px;
    }

    .bestTechSec .bestTechBox .rightCol p.info {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .automatedJourneysSec {
        padding: 80px 0 88px;
    }

    .automatedJourneysSec h2 {
        font-size: 44px;
    }

    .automatedJourneysSec .journeysCopy {
        font-size: 19px;
    }

    .journeysShowcase {
        grid-template-columns: 1fr 1.1fr;
        gap: 20px;
        min-height: 0;
        padding: 30px;
    }

    .journeySteps {
        margin-right: 0;
    }

    .journeyPreviewCard {
        grid-column: 2;
        grid-row: 1 / span 2;
        transform: none;
    }

    .journeyUiCard {
        grid-column: 1;
        margin-left: 0;
    }

    .journeyUiCard img {
        width: 150%;
        height: 260px;
    }

    .aiAssistCallout {
        position: static;
        width: auto;
        margin-bottom: 14px;
    }

    .journeyLogicSec {
        padding: 78px 0 84px;
    }

    .journeyLogicIntro h2 {
        font-size: 42px;
    }

    .journeyLogicIntro p:not(.sectionEyebrow) {
        font-size: 18px;
    }

    .journeyLogicVisual {
        padding: 34px 30px 32px;
    }

    .logicBranches {
        width: min(610px, 82%);
    }

    .logicOutcomes {
        gap: 44px;
        width: min(640px, 100%);
    }

    .logicNodeAction {
        width: 298px;
    }

    .marketingSuiteShowcaseSec {
        padding: 78px 0 84px;
    }

    .marketingSuiteShowcaseIntro h2 {
        font-size: 44px;
    }

    .marketingSuiteShowcaseIntro p:not(.sectionEyebrow) {
        font-size: 18px;
    }

    .marketingSuiteProductFrame {
        padding: 18px 28px;
    }

    .marketingSuiteCallout {
        width: 220px;
    }

    .marketingSuiteCalloutAi {
        left: 0;
    }

    .marketingSuiteCalloutAutomation {
        right: 0;
    }

    .marketingSuiteValueStrip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marketingSuiteValueItem:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(205, 222, 232, 0.82);
    }

    .marketingSuiteValueItem:nth-child(4) {
        border-top: 1px solid rgba(205, 222, 232, 0.82);
    }

}

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

    /* Banner Section */
    .bannerSec {
        padding: 112px 0 58px;
    }

    .bannerSec .container {
        min-height: 0;
    }

    .bannerSec .bannerTextWrap {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .bannerSec .leftCol {
        max-width: 700px;
        align-items: center;
        text-align: center;
        margin: 0 auto;
    }

    .bannerSec .leftCol h1 {
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
        font-size: 50px;
    }

    .bannerSec .leftCol p:not(.heroEyebrow) {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
        font-size: 17px;
        line-height: 1.58;
    }

    .bannerSec .apMarketingHeroVisual {
        grid-template-columns: 1fr;
        gap: 18px;
        width: min(720px, 100%);
        max-width: none;
        min-height: 0;
        margin: 0 auto;
    }

    .apMarketingHeroContext {
        grid-template-columns: minmax(180px, 0.42fr) minmax(0, 0.58fr);
        align-items: center;
    }

    .apMarketingHeroPhoto {
        width: 100%;
        border-width: 8px;
    }

    .apMarketingHeroScreen {
        width: 100%;
    }

    .apMarketingHeroCallout {
        width: 100%;
    }

    .apMarketingHeroCallout strong {
        font-size: 14px;
    }

    .apMarketingHeroCallout small {
        font-size: 11px;
    }

    /* AP Marketing Section */
    .apMarketingSec {
        padding: 50px 0;
    }

    .apMarketingSec::after {
        display: none;
    }

    .apMarketingSec .leftCol {
        margin-right: 0;
    }

    .apMarketingSec .leftCol .marketing-img1 {
        max-width: 300px;
        margin: 30px auto 25px;
    }

    .apMarketingSec .leftCol .marketing-img1::before {
        top: -30px;
        right: -30px;
        width: 186px;
        height: 220px;
    }

    .apMarketingSec .leftCol .marketing-img1::after {
        width: 260px;
        height: 250px;
    }

    .apMarketingSec .leftCol .marketing-img2 {
        max-width: 200px;
    }

    .textMarketingSec .marketingBox .rightCol {
        margin: 30px auto 25px;
    }

    .apMarketingSec .rightCol {
        padding-left: 0;
    }

    .apMarketingSec .rightCol h2 {
        font-size: 35px;
        line-height: 45px;
        margin-bottom: 15px;
    }

    .apMarketingSec .rightCol p {
        font-size: 16px;
        line-height: 28px;
        margin-bottom: 20px;
    }

    /* Management Section */
    .managementSec .managementBox {
        padding: 40px 30px;
    }

    .managementSec .managementBox h2 {
        font-size: 35px;
        line-height: 45px;
        padding-bottom: 20px;
        margin-bottom: 25px;
    }

    .managementSec .managementBox ul li {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 20px;
    }

    /* Business Section */
    .businessSec {
        padding: 50px 0;
    }

    .businessSec h2 {
        font-size: 35px;
        line-height: 45px;
        padding-bottom: 20px;
        margin-bottom: 25px;
    }

    .businessSec .businessBox .businessImg {
        max-width: 190px;
    }

    .businessSec .businessBox .businessImg span {
        font-size: 35px;
        padding-right: 40px;
    }

    .businessSec .businessBox .businessInfo {
        padding: 20px 40px 0 10px;
    }

    /* Email Marketing section */
    .emailMarketingSec {
        padding: 50px 0;
    }

    .emailMarketingSec::before {
        display: none;
    }

    .emailMarketingSec h2 {
        font-size: 35px;
        line-height: 45px;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    .emailMarketingSec ul {
        width: 50%;
        padding-left: 30px;
    }

    .emailMarketingSec p {
        line-height: 28px;
    }

    .emailMarketingSec ul li {
        font-size: 17px;
        margin-bottom: 20px;
    }

    .emailMarketingSec .emailMarketingImg {
        margin-top: 30px;
    }

    /* Touch Section */
    .touchSec {
        padding: 50px 0;
    }

    .touchSec .leftCol h2 {
        font-size: 35px;
        line-height: 45px;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    /* Market Report Section */
    .marketReportSec {
        padding: 50px 0;
    }

    .marketReportSec h2 {
        font-size: 35px;
        line-height: 45px;
        padding-bottom: 20px;
        margin-bottom: 30px;
    }

    .marketReportSec .leftCol {
        display: flex;
        height: calc(100% - 30px);
        margin-bottom: 30px;
    }

    .marketReportSec .leftCol .marketingBox {
        padding: 30px 15px;
        width: 100%;
    }

    .marketReportSec .leftCol .marketingBox p {
        padding-bottom: 10px;
    }

    .marketReportSec .leftCol .marketingBox h3 {
        font-size: 26px;
    }

    /* Marketing Reports Section */
    .marketingReportsSec {
        padding: 50px 0 20px;
    }

    .marketingReportsSec h2 {
        font-size: 35px;
        line-height: 45px;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    .marketingReportsSec p br {
        display: none;
    }

    /* Text Marketing Section */
    .textMarketingSec {
        padding: 50px 0;
    }

    .textMarketingSec::before,
    .textMarketingSec::after {
        display: none;
    }

    .textMarketingSec h2 {
        font-size: 35px;
        line-height: 45px;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    .textMarketingSec p.info {
        width: 50%;
    }

    .textMarketingSec ul {
        grid-template-columns: 100%;
    }

    .textMarketingSec ul li {
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 15px;
    }

    .textMarketingSec .marketingBox .leftCol img {
        width: 100%;
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    .textMarketingSec .marketingBox .leftCol p {
        font-size: 14px;
    }

    .textMarketingSec .marketingBox .leftCol p strong {
        font-size: 16px;
    }

    .textMarketingSec .marketingBox .rightCol {
        max-width: 325px;
        margin: 30px 0 25px 30px;
    }

    /* Screen Messeng Section */
    .screenMessengSec {
        margin-top: 0;
    }

    .screenMessengSec .messengBox .rightCol {
        max-width: 220px;
        padding: 15px 20px;
    }

    .screenMessengSec .messengBox .rightCol h3 {
        font-size: 25px;
        line-height: 30px;
        margin-bottom: 10px;
    }

    .screenMessengSec .messengBox .rightCol p {
        font-size: 16px;
        line-height: 26px;
    }

    .screenMessengSec .messengBox .leftCol {
        max-width: 455px;
    }

    /* Best Tech Section */
    .bestTechSec {
        padding: 120px 0 30px;
    }

    .bestTechSec .bestTechBox .leftCol img {
        max-width: 230px;
    }

    .bestTechSec .bestTechBox .rightCol img.commas {
        width: 40px;
        margin-bottom: 20px;
    }

    .bestTechSec .bestTechBox .rightCol .date {
        margin-bottom: 10px;
    }

    .bestTechSec .bestTechBox .rightCol h2 {
        font-size: 35px;
        line-height: 40px;
        margin-bottom: 10px;
    }

    .bestTechSec .bestTechBox .rightCol p.info {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 10px;
    }

    .bestTechSec .bestTechBox .rightCol p.info br {
        display: none;
    }

    .automatedJourneysSec {
        padding: 70px 0 76px;
    }

    .automatedJourneysSec .journeysIntro {
        margin-bottom: 42px;
    }

    .automatedJourneysSec h2 {
        font-size: 40px;
    }

    .automatedJourneysSec .journeysCopy {
        font-size: 18px;
    }

    .journeysShowcase {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        min-height: 0;
        padding: 28px;
    }

    .journeySteps,
    .journeyUiCard {
        margin: 0;
    }

    .journeyPreviewCard {
        order: 2;
        transform: none;
    }

    .journeyUiCard {
        order: 3;
    }

    .journeyUiCard img {
        width: 100%;
        height: auto;
    }

    .aiAssistCallout {
        position: static;
        width: auto;
        margin-bottom: 14px;
    }

    .journeyLogicSec {
        padding: 66px 0 72px;
    }

    .journeyLogicIntro {
        margin-bottom: 34px;
    }

    .journeyLogicIntro h2 {
        font-size: 39px;
    }

    .journeyLogicIntro p:not(.sectionEyebrow) {
        font-size: 17px;
    }

    .journeyLogicVisual {
        padding: 30px 22px 26px;
    }

    .logicBranches {
        width: min(560px, 88%);
    }

    .logicOutcomes {
        gap: 28px;
    }

    .logicNode,
    .logicNodeAction {
        width: 265px;
    }

    .logicNodeCondition {
        width: 280px;
    }

    .journeyUseCaseStrip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .journeyUseCase:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(205, 222, 232, 0.82);
    }

    .journeyUseCase:nth-child(4) {
        border-top: 1px solid rgba(205, 222, 232, 0.82);
    }

    .marketingSuiteShowcaseSec {
        padding: 66px 0 72px;
    }

    .marketingSuiteShowcaseIntro {
        margin-bottom: 34px;
    }

    .marketingSuiteShowcaseIntro h2 {
        font-size: 40px;
    }

    .marketingSuiteShowcaseIntro p:not(.sectionEyebrow) {
        font-size: 17px;
    }

    .marketingSuiteProductFrame {
        display: grid;
        gap: 14px;
        padding: 0;
        margin-bottom: 34px;
    }

    .marketingSuiteCallout {
        position: static;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        order: 2;
    }

    .marketingSuiteCalloutAutomation {
        order: 3;
    }

    .marketingSuiteScreenshot {
        order: 1;
        border-radius: 22px;
    }

    .marketingSuiteValueStrip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marketingSuiteValueItem {
        padding: 24px 20px;
    }

    .marketingSuiteValueItem:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(205, 222, 232, 0.82);
    }

    .marketingSuiteValueItem:nth-child(4) {
        border-top: 1px solid rgba(205, 222, 232, 0.82);
    }

}

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

    /* Banner Section */
    .bannerSec {
        padding-top: 104px;
        padding-bottom: 46px;
    }

    .bannerSec .container {
        min-height: 0;
    }

    .bannerSec .bannerTextWrap {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .bannerSec .leftCol {
        align-items: center;
        text-align: center;
        max-width: 100%;
        margin-bottom: 0;
    }

    .bannerSec .leftCol h1 {
        font-size: 31px;
    }

    .bannerSec .leftCol p:not(.heroEyebrow) {
        font-size: 17px;
        line-height: 1.58;
    }

    .bannerSec .heroEyebrow {
        max-width: 100%;
        font-size: 14px;
        letter-spacing: 0;
    }

    .bannerSec .apMarketingHeroVisual {
        display: grid;
        gap: 12px;
        max-width: none;
        min-height: 0;
        padding: 14px;
        margin: 0;
    }

    .apMarketingHeroVisual::before {
        border-radius: 22px;
    }

    .apMarketingHeroContext {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .apMarketingHeroScreen {
        order: 1;
        width: 100%;
        border-radius: 18px;
    }

    .apMarketingHeroScreenHeader {
        height: 28px;
        padding: 0 12px;
    }

    .apMarketingHeroPhoto {
        order: 2;
        width: min(260px, 72%);
        justify-self: start;
        margin-top: 0;
        border-width: 7px;
        border-radius: 20px;
    }

    .apMarketingHeroCalloutStack {
        order: 3;
    }

    .apMarketingHeroCallout {
        grid-template-columns: 34px 1fr;
        width: 100%;
        padding: 12px 14px;
        border-radius: 16px;
    }

    .heroCalloutCalendar {
        display: none;
    }

    /* AP Marketing Section */
    .apMarketingSec {
        padding: 40px 0;
    }

    .apMarketingSec::after {
        display: none;
    }

    .apMarketingSec .leftCol {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .apMarketingSec .leftCol .marketing-img1 {
        max-width: 280px;
        margin: 25px auto;
    }

    .apMarketingSec .leftCol .marketing-img1::before {
        top: -25px;
        right: -25px;
        width: 186px;
        height: 200px;
    }

    .apMarketingSec .leftCol .marketing-img1::after {
        bottom: -25px;
        left: -25px;
        width: 240px;
        height: 200px;
    }

    .apMarketingSec .leftCol .marketing-img2 {
        display: none;
    }

    .apMarketingSec .leftCol .marketing-img1,
    .textMarketingSec .marketingBox .rightCol {
        padding: 18px;
        border-radius: 22px;
        max-width: calc(100% - 36px);
        margin-left: auto;
        margin-right: auto;
    }

    .apMarketingSec .leftCol .marketing-img1 img,
    .textMarketingSec .marketingBox .rightCol img {
        border-radius: 14px;
    }

    .apMarketingSec .rightCol {
        padding-left: 0;
    }

    .apMarketingSec .rightCol h2 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 15px;
    }

    .apMarketingSec .rightCol p {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 20px;
    }

    /* Management Section */
    .managementSec .managementBox {
        padding: 40px 30px;
    }

    .managementSec .managementBox h2 {
        font-size: 30px;
        line-height: 40px;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    .managementSec .managementBox ul li {
        font-size: 20px;
        line-height: 30px;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .managementSec .managementBox ul li::before {
        top: 5px;
        width: 25px;
        height: 25px;
        background-size: cover;
    }

    /* Business Section */
    .businessSec {
        padding: 40px 0;
    }

    .businessSec h2 {
        font-size: 30px;
        line-height: 40px;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .businessSec p.info {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 30px;
    }

    .businessSec .businessBox {
        margin-bottom: 30px;
    }

    .businessSec .businessBox .businessImg span {
        font-size: 40px;
    }

    .businessSec .businessBox .businessInfo {
        padding: 20px 40px 0 10px;
    }

    /* Email Marketing section */
    .emailMarketingSec {
        padding: 40px 0;
    }

    .emailMarketingSec::before {
        display: none;
    }

    .emailMarketingSec h2 {
        font-size: 30px;
        line-height: 40px;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    .emailMarketingSec p {
        width: 100%;
        font-size: 16px;
        line-height: 28px;
        margin-bottom: 30px;
    }

    .emailMarketingSec ul {
        width: 100%;
    }

    .emailMarketingSec ul li {
        width: 100%;
        line-height: 22px;
        margin-bottom: 20px;
    }

    .emailMarketingSec .emailMarketingImg {
        margin-top: 30px;
    }

    /* Touch Section */
    .touchSec {
        padding: 40px 0;
    }

    .touchSec .leftCol h2 {
        font-size: 30px;
        line-height: 40px;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

    .touchSec .leftCol p {
        line-height: 28px;
        margin-bottom: 30px;
    }

    /* Market Report Section */
    .marketReportSec {
        padding: 40px 0;
    }

    .marketReportSec h2 {
        font-size: 30px;
        line-height: 40px;
        padding-bottom: 15px;
        margin-bottom: 30px;
    }

    .marketReportSec .leftCol {
        gap: 20px;
        height: calc(100% - 30px);
        margin-bottom: 40px;
    }

    .marketReportSec .leftCol .marketingBox {
        padding: 40px 20px;
    }

    .marketReportSec .leftCol .marketingBox p {
        padding-bottom: 10px;
    }

    .marketReportSec .leftCol .marketingBox h3 {
        font-size: 25px;
    }

    /* Marketing Reports Section */
    .marketingReportsSec {
        padding: 40px 0;
    }

    .marketingReportsSec h2 {
        font-size: 30px;
        line-height: 40px;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    .marketingReportsSec p {
        margin-bottom: 20px;
    }

    .marketingReportsSec p br {
        display: none;
    }

    /* Text Marketing Section */
    .textMarketingSec {
        padding: 40px 0;
    }

    .textMarketingSec::before,
    .textMarketingSec::after {
        display: none;
    }

    .textMarketingSec h2 {
        font-size: 30px;
        line-height: 40px;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    .textMarketingSec p.info {
        width: 100%;
        line-height: 28px;
        margin-bottom: 20px;
    }

    .textMarketingSec ul {
        width: 100%;
        grid-template-columns: auto;
    }

    .textMarketingSec ul li {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .textMarketingSec .marketingBox {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0;
    }

    .textMarketingSec .marketingBox .leftCol img {
        width: 100%;
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    .textMarketingSec .marketingBox .leftCol p {
        font-size: 14px;
    }

    .textMarketingSec .marketingBox .leftCol p strong {
        font-size: 16px;
    }

    .textMarketingSec .marketingBox .rightCol {
        float: none;
        max-width: 290px;
        margin: 24px auto 0;
    }

    /* Screen Messeng Section */
    .screenMessengSec {
        margin-top: 40px;
    }

    .screenMessengSec .messengBox {
        flex-direction: column;
    }

    .screenMessengSec .messengBox .leftCol {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .screenMessengSec .messengBox .rightCol {
        padding: 15px 20px;
    }

    .screenMessengSec .messengBox .rightCol h3 {
        font-size: 25px;
        line-height: 40px;
    }

    .screenMessengSec .messengBox .rightCol p {
        font-size: 18px;
        line-height: 30px;
    }

    /* Best Tech Section */
    .bestTechSec {
        padding: 110px 0 35px;
    }

    .bestTechSec .bestTechBox {
        flex-direction: column;
    }

    .bestTechSec .bestTechBox .leftCol {
        width: 100%;
        margin-bottom: 30px;
    }

    .bestTechSec .bestTechBox .leftCol img {
        max-width: 250px;
    }

    .bestTechSec .bestTechBox .rightCol {
        width: 100%;
        padding: 20px;
    }

    .bestTechSec .bestTechBox .rightCol img.commas {
        width: 40px;
        margin-bottom: 20px;
    }

    .bestTechSec .bestTechBox .rightCol h2 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 15px;
    }

    .bestTechSec .bestTechBox .rightCol p.info {
        font-size: 16px;
        line-height: 28px;
        margin-bottom: 15px;
    }

    .automatedJourneysSec {
        padding: 50px 0 56px;
    }

    .automatedJourneysSec .journeysIntro {
        margin-bottom: 28px;
    }

    .automatedJourneysSec .sectionEyebrow {
        font-size: 12px;
        letter-spacing: 0.14em;
        margin-bottom: 12px;
    }

    .automatedJourneysSec h2 {
        font-size: 31px;
        line-height: 1.12;
        margin-bottom: 14px;
    }

    .automatedJourneysSec .journeysCopy {
        font-size: 16px;
        line-height: 1.55;
    }

    .journeysShowcase {
        grid-template-columns: 1fr;
        gap: 18px;
        min-height: 0;
        padding: 18px;
    }

    .journeysShowcase::before {
        border-radius: 22px;
    }

    .journeySteps {
        margin-right: 0;
        gap: 12px;
    }

    .journeyStep {
        grid-template-columns: 46px 1fr;
        min-height: 68px;
        padding: 12px 14px;
        border-radius: 16px;
    }

    .journeyStepIcon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 13px;
    }

    .journeyStep strong {
        font-size: 16px;
    }

    .journeyPreviewCard {
        padding: 18px;
        border-radius: 22px;
        transform: none;
    }

    .journeyPreviewHeader {
        flex-direction: column;
        gap: 4px;
        margin-bottom: 14px;
    }

    .journeyEmailPreview {
        padding: 20px;
        border-radius: 18px;
    }

    .journeyEmailPreview h3 {
        font-size: 24px;
    }

    .journeyEmailPreview p:not(.previewLabel) {
        font-size: 15px;
    }

    .journeyUiCard {
        margin-left: 0;
        padding: 12px;
        border-radius: 20px;
    }

    .journeyUiCard img {
        width: 100%;
        height: auto;
        border-radius: 14px;
    }

    .aiAssistCallout {
        position: static;
        width: auto;
        margin-bottom: 12px;
        border-radius: 14px;
    }

    .journeyLogicSec {
        padding: 48px 0 54px;
    }

    .journeyLogicIntro {
        margin-bottom: 28px;
    }

    .journeyLogicIntro .sectionEyebrow {
        font-size: 12px;
        letter-spacing: 0.14em;
        margin-bottom: 12px;
    }

    .journeyLogicIntro h2 {
        font-size: 31px;
        line-height: 1.12;
    }

    .journeyLogicIntro h2 span {
        display: inline;
    }

    .journeyLogicIntro p:not(.sectionEyebrow) {
        font-size: 16px;
        line-height: 1.55;
    }

    .journeyLogicVisual {
        padding: 20px 16px 18px;
        border-radius: 24px;
    }

    .logicNode,
    .logicNodeCondition,
    .logicNodeAction {
        width: 100%;
        max-width: 330px;
        min-height: 66px;
    }

    .logicBranches {
        display: none;
    }

    .logicOutcomes {
        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
        max-width: 330px;
        margin-top: 16px;
    }

    .logicOutcome {
        position: relative;
    }

    .logicOutcome::before {
        content: '';
        width: 1px;
        height: 16px;
        margin-bottom: 8px;
        background: linear-gradient(180deg, rgba(249, 130, 26, 0.36), rgba(34, 181, 201, 0.28));
    }

    .logicBranchLabel {
        margin-bottom: 8px;
    }

    .journeyUseCaseStrip {
        grid-template-columns: 1fr;
        background: #ffffff;
    }

    .journeyUseCase {
        padding: 22px 0;
    }

    .journeyUseCase + .journeyUseCase,
    .journeyUseCase:nth-child(3),
    .journeyUseCase:nth-child(4) {
        border-left: 0;
        border-top: 1px solid rgba(205, 222, 232, 0.82);
    }

    .journeyUseCaseMarker {
        margin-bottom: 13px;
    }

    .journeyUseCase h3 {
        font-size: 15px;
    }

    .marketingSuiteShowcaseSec {
        padding: 48px 0 54px;
    }

    .marketingSuiteShowcaseIntro {
        margin-bottom: 28px;
    }

    .marketingSuiteShowcaseIntro .sectionEyebrow {
        font-size: 12px;
        letter-spacing: 0.14em;
        margin-bottom: 12px;
    }

    .marketingSuiteShowcaseIntro h2 {
        font-size: 31px;
        line-height: 1.12;
        margin-bottom: 14px;
    }

    .marketingSuiteShowcaseIntro p:not(.sectionEyebrow) {
        font-size: 16px;
        line-height: 1.55;
    }

    .marketingSuiteProductFrame {
        display: grid;
        gap: 12px;
        padding: 0;
        margin-bottom: 28px;
    }

    .marketingSuiteScreenshot {
        order: 1;
        border-radius: 18px;
    }

    .marketingSuiteCallout {
        position: static;
        width: 100%;
        padding: 12px 14px;
        border-radius: 16px;
    }

    .marketingSuiteCalloutAi {
        order: 2;
    }

    .marketingSuiteCalloutAutomation {
        order: 3;
    }

    .marketingSuiteValueStrip {
        grid-template-columns: 1fr;
        background: #ffffff;
    }

    .marketingSuiteValueItem {
        padding: 22px 0;
    }

    .marketingSuiteValueItem + .marketingSuiteValueItem,
    .marketingSuiteValueItem:nth-child(3),
    .marketingSuiteValueItem:nth-child(4) {
        border-left: 0;
        border-top: 1px solid rgba(205, 222, 232, 0.82);
    }

    .marketingSuiteValueMarker {
        margin-bottom: 13px;
    }

    .marketingSuiteValueItem h3 {
        font-size: 15px;
    }

}

@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* AP Marketing Suite social, insights, and CTA responsive refinements */
@media only screen and (max-width: 1199px) {
    .socialMarketingCopy h2,
    .marketingInsightsIntro h2 {
        font-size: 42px;
    }

    .socialMarketingGrid {
        gap: 38px;
    }

    .socialMarketingVisual {
        min-height: 500px;
    }
}

@media only screen and (max-width: 991px) {
    .socialMarketingSec,
    .marketingInsightsSec {
        padding: 66px 0 72px;
    }

    .socialMarketingGrid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .socialMarketingCopy {
        text-align: center;
    }

    .socialMarketingCopy h2,
    .socialMarketingCopy p:not(.sectionEyebrow) {
        margin-left: auto;
        margin-right: auto;
    }

    .socialMarketingVisual {
        min-height: 470px;
    }

    .marketingInsightsIntro h2 {
        font-size: 40px;
    }

    .marketingInsightsIntro p:not(.sectionEyebrow) {
        font-size: 17px;
    }

    .marketingInsightsStrip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marketingInsightItem:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(205, 222, 232, 0.82);
    }

    .marketingInsightItem:nth-child(4) {
        border-top: 1px solid rgba(205, 222, 232, 0.82);
    }

    .apMarketingCtaPanel {
        grid-template-columns: 1fr;
        padding: 38px 34px;
        text-align: center;
    }

    .apMarketingCtaPanel h2,
    .apMarketingCtaPanel p:not(.sectionEyebrow) {
        margin-left: auto;
        margin-right: auto;
    }

    .apMarketingCtaButton {
        justify-self: center;
    }
}

@media only screen and (max-width: 767px) {
    .socialMarketingSec,
    .marketingInsightsSec {
        padding: 48px 0 54px;
    }

    .socialMarketingSec .container,
    .marketingInsightsSec .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .socialMarketingCopy,
    .marketingInsightsIntro {
        text-align: left;
    }

    .socialMarketingCopy .sectionEyebrow,
    .marketingInsightsIntro .sectionEyebrow,
    .apMarketingCta .sectionEyebrow {
        font-size: 12px;
        letter-spacing: 0.14em;
        margin-bottom: 12px;
    }

    .socialMarketingCopy h2,
    .marketingInsightsIntro h2 {
        font-size: 31px;
        line-height: 1.12;
        margin-bottom: 14px;
    }

    .socialMarketingCopy p:not(.sectionEyebrow),
    .marketingInsightsIntro p:not(.sectionEyebrow) {
        font-size: 16px;
        line-height: 1.55;
    }

    .socialMarketingVisual {
        display: grid;
        gap: 12px;
        min-height: 0;
        padding: 16px;
        border-radius: 22px;
    }

    .socialScenarioCard,
    .socialComposerCard,
    .socialCompanionCard,
    .socialInsightsCard {
        position: static;
        width: 100%;
        max-width: none;
    }

    .marketingInsightsStrip {
        grid-template-columns: 1fr;
        background: #ffffff;
    }

    .marketingInsightItem {
        padding: 22px 0;
    }

    .marketingInsightItem + .marketingInsightItem,
    .marketingInsightItem:nth-child(3),
    .marketingInsightItem:nth-child(4) {
        border-left: 0;
        border-top: 1px solid rgba(205, 222, 232, 0.82);
    }

    .marketingInsightMarker {
        margin-bottom: 13px;
    }

    .marketingInsightItem h3 {
        font-size: 15px;
    }

    .apMarketingCta {
        padding: 18px 0 42px;
    }

    .apMarketingCtaPanel {
        padding: 30px 22px;
        border-radius: 22px;
        text-align: left;
    }

    .apMarketingCtaPanel h2 {
        font-size: 30px;
        line-height: 1.12;
    }

    .apMarketingCtaPanel p:not(.sectionEyebrow) {
        font-size: 16px;
    }

    .apMarketingCtaButton {
        justify-self: start;
        width: 100%;
    }
}

/* AP Marketing Suite AI campaign creation responsive refinements */
@media only screen and (max-width: 1199px) {
    .aiCampaignCreationIntro h2 {
        font-size: 46px;
    }

    .aiCampaignBuilder {
        grid-template-columns: minmax(0, 0.78fr) minmax(330px, 1.1fr) minmax(260px, 0.86fr);
        gap: 18px;
    }

    .campaignControlsColumn {
        display: flex;
    }

}

@media only screen and (max-width: 991px) {
    .aiCampaignCreationSec {
        padding: 66px 0 72px;
    }

    .aiCampaignCreationIntro {
        margin-bottom: 34px;
    }

    .aiCampaignCreationIntro h2 {
        font-size: 40px;
    }

    .aiCampaignCreationIntro p:not(.sectionEyebrow) {
        font-size: 17px;
    }

    .aiCampaignBuilder {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 24px;
    }

    .campaignPromptColumn,
    .campaignControlsColumn {
        display: block;
    }

    .campaignStepLabel {
        white-space: normal;
    }

}

@media only screen and (max-width: 767px) {
    .aiCampaignCreationSec {
        padding: 48px 0 54px;
    }

    .aiCampaignCreationSec .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .aiCampaignCreationIntro {
        margin-bottom: 28px;
        text-align: left;
    }

    .aiCampaignCreationIntro .sectionEyebrow {
        font-size: 12px;
        letter-spacing: 0.14em;
        margin-bottom: 12px;
    }

    .aiCampaignCreationIntro h2 {
        font-size: 31px;
        line-height: 1.12;
        margin-bottom: 14px;
    }

    .aiCampaignCreationIntro p:not(.sectionEyebrow) {
        font-size: 16px;
        line-height: 1.55;
    }

    .aiCampaignBuilder {
        border-radius: 22px;
    }

    .campaignPromptBox {
        padding: 14px;
        border-radius: 18px;
    }

    .campaignPromptInput {
        padding: 14px;
    }

    .campaignPromptBox p {
        font-size: 15px;
    }

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

    .campaignBundlePreview {
        padding: 14px;
        border-radius: 18px;
    }

    .campaignBundleHeader {
        display: block;
    }

    .campaignBundleHeader span {
        margin-top: 10px;
    }

    .campaignControlRow {
        max-width: none;
    }

    .campaignCanvaPanel {
        grid-template-columns: 34px 1fr;
        align-items: center;
        gap: 10px;
    }

    .campaignCanvaIcon {
        width: 34px;
        height: 34px;
    }

}

/* AP Marketing Suite calendar section responsive refinements */
@media only screen and (max-width: 1199px) {
    .marketingCalendarIntro h2 {
        font-size: 46px;
    }

    .marketingCalendarVisual {
        padding: 0;
    }

    .calendarAnnotationAi {
        left: 12px;
    }

    .calendarAnnotationAutomation {
        right: 12px;
    }

    .marketingCalendarGrid {
        min-height: 380px;
    }

    .calendarEvent {
        min-height: 118px;
        padding: 12px 10px;
    }

    .calendarEvent strong {
        font-size: 14px;
    }
}

@media only screen and (max-width: 991px) {
    .marketingCalendarSec {
        padding: 66px 0 72px;
    }

    .marketingCalendarIntro {
        margin-bottom: 34px;
    }

    .marketingCalendarIntro h2 {
        font-size: 40px;
    }

    .marketingCalendarIntro p:not(.sectionEyebrow) {
        font-size: 17px;
    }

    .marketingCalendarVisual {
        display: grid;
        gap: 14px;
        margin-bottom: 34px;
    }

    .calendarAnnotation,
    .calendarRescheduleCallout {
        position: static;
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
    }

    .calendarAnnotationAi {
        order: 2;
    }

    .calendarAnnotationAutomation {
        order: 3;
    }

    .marketingCalendarFrame {
        order: 1;
        border-radius: 22px;
    }

    .calendarRescheduleCallout {
        order: 4;
    }

    .calendarMoveCue {
        display: none;
    }

    .marketingCalendarGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-height: 0;
    }

    .calendarDay:nth-child(4) {
        border-left: 0;
    }

    .calendarDay:nth-child(n + 4) {
        border-top: 1px solid rgba(214, 226, 233, 0.88);
    }

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

    .calendarUseCase + .calendarUseCase {
        border-left: 0;
        border-top: 1px solid rgba(205, 222, 232, 0.82);
    }
}

@media only screen and (max-width: 767px) {
    .marketingCalendarSec {
        padding: 48px 0 54px;
    }

    .marketingCalendarSec .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .marketingCalendarIntro {
        margin-bottom: 28px;
        text-align: left;
    }

    .marketingCalendarIntro .sectionEyebrow {
        font-size: 12px;
        letter-spacing: 0.14em;
        margin-bottom: 12px;
    }

    .marketingCalendarIntro h2 {
        font-size: 31px;
        line-height: 1.12;
        margin-bottom: 14px;
    }

    .marketingCalendarIntro p:not(.sectionEyebrow) {
        font-size: 16px;
        line-height: 1.55;
    }

    .marketingCalendarFrame {
        padding: 8px;
        border-radius: 18px;
    }

    .marketingCalendarToolbar {
        display: block;
        padding: 10px 8px 14px;
    }

    .calendarToolbarActions {
        justify-content: flex-start;
        margin-top: 10px;
    }

    .marketingCalendarGrid {
        display: block;
        border-radius: 15px;
    }

    .calendarDay {
        padding: 14px 12px;
    }

    .calendarDay + .calendarDay,
    .calendarDay:nth-child(n + 4) {
        border-left: 0;
        border-top: 1px solid rgba(214, 226, 233, 0.88);
    }

    .calendarDay h3 {
        margin-bottom: 10px;
    }

    .calendarEvent {
        min-height: 0;
    }

    .calendarEvent strong {
        min-height: 0;
    }

    .calendarEventLifted {
        transform: none;
    }

    .calendarAnnotation,
    .calendarRescheduleCallout {
        max-width: none;
        padding: 12px 14px;
        border-radius: 16px;
    }

    .marketingCalendarUseCases {
        background: #ffffff;
    }

    .calendarUseCase {
        padding: 22px 0;
    }

    .calendarUseCaseMarker {
        margin-bottom: 13px;
    }

    .calendarUseCase h3 {
        font-size: 19px;
    }
}

/* AP Marketing Suite outcome strip responsive refinements */
@media only screen and (max-width: 991px) {
    .marketingOutcomesSec {
        padding: 62px 0 66px;
    }

    .marketingOutcomesIntro {
        margin-bottom: 28px;
    }

    .marketingOutcomesIntro h2 {
        font-size: 32px;
    }

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

    .marketingOutcomeItem {
        padding: 28px 26px;
    }

    .marketingOutcomeItem + .marketingOutcomeItem {
        border-left: 0;
        border-top: 1px solid rgba(205, 222, 232, 0.82);
    }
}

@media only screen and (max-width: 767px) {
    .marketingOutcomesSec {
        padding: 48px 0 52px;
    }

    .marketingOutcomesSec .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .marketingOutcomesIntro {
        margin-bottom: 22px;
        text-align: left;
    }

    .marketingOutcomesIntro .sectionEyebrow {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .marketingOutcomesIntro h2 {
        font-size: 28px;
        line-height: 1.14;
    }

    .marketingOutcomeItem {
        padding: 24px 0;
    }

    .marketingOutcomesStrip {
        border-radius: 0;
        background: #ffffff;
    }

    .marketingOutcomeIcon {
        width: 38px;
        height: 38px;
        margin-bottom: 15px;
        border-radius: 13px;
        font-size: 15px;
    }

    .marketingOutcomeItem h3 {
        font-size: 20px;
    }

    .marketingOutcomeItem p {
        font-size: 15px;
        line-height: 1.55;
    }
}

/* AP Marketing Suite hero final layout overrides */
.bannerSec .apMarketingHeroVisual {
    display: block;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding-right: 58px;
}

.bannerSec .apMarketingHeroVisual::before {
    display: none;
}

.bannerSec .apMarketingHeroImageFrame {
    overflow: visible;
    padding: 10px;
    border: 6px solid #fff;
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 252, 253, 0.92)),
        #fff;
    box-shadow: 0 14px 30px rgba(42, 64, 82, 0.1);
}

.bannerSec .apMarketingHeroImageFrame img {
    border-radius: 20px;
}

.bannerSec .apMarketingHeroPills {
    top: auto;
    right: auto;
    bottom: 28px;
    left: -24px;
    display: grid;
    width: 168px;
    max-width: none;
    gap: 10px;
}

.bannerSec .apMarketingHeroPill {
    min-height: 38px;
    width: 100%;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 14px;
    box-shadow: 0 8px 18px rgba(42, 64, 82, 0.07);
}

.bannerSec .apMarketingHeroAiBubble {
    right: -28px;
    top: 0;
    bottom: auto;
    transform: none;
    z-index: 4;
    width: min(318px, calc(100% - 44px));
}

@media only screen and (max-width: 1199px) {
    .bannerSec .apMarketingHeroImageFrame {
        border-radius: 26px;
    }

    .bannerSec .apMarketingHeroAiBubble {
        right: -18px;
        top: 0;
        bottom: auto;
    }
}

@media only screen and (max-width: 991px) {
    .bannerSec .apMarketingHeroVisual {
        width: min(620px, 100%);
        margin: 0 auto;
        padding-right: 28px;
    }
}

@media only screen and (max-width: 767px) {
    .bannerSec .apMarketingHeroVisual {
        padding-right: 0;
    }

    .bannerSec .apMarketingHeroPills {
        position: static;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        gap: 10px;
        margin-top: 22px;
    }

    .bannerSec .apMarketingHeroPill {
        min-height: 36px;
        width: auto;
        padding: 0 15px;
        font-size: 13px;
    }

    .bannerSec .apMarketingHeroImageFrame {
        border-radius: 22px;
        padding: 8px;
    }

    .bannerSec .apMarketingHeroImageFrame img {
        aspect-ratio: 1.05;
        object-position: center;
        border-radius: 16px;
    }

    .bannerSec .apMarketingHeroAiBubble {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        margin-top: 12px;
        padding: 13px 14px;
        border-radius: 16px;
        box-shadow: 0 12px 28px rgba(42, 64, 82, 0.1);
    }

    .bannerSec .apMarketingHeroAiBubble strong {
        font-size: 15px;
    }

    .bannerSec .apMarketingHeroAiBubble small {
        font-size: 12px;
    }
}

/* Match AI Suite's effective typography, including its paragraph overrides. */
.bannerSec .heroEyebrow,
.marketingOutcomesIntro .sectionEyebrow,
.marketingSuiteShowcaseIntro .sectionEyebrow,
.marketingCalendarIntro .sectionEyebrow,
.aiCampaignCreationIntro .sectionEyebrow,
.socialMarketingCopy .sectionEyebrow,
.automatedJourneysSec .sectionEyebrow,
.journeyLogicIntro .sectionEyebrow,
.marketingInsightsIntro .sectionEyebrow,
.apMarketingCta .sectionEyebrow {
    display: inline-block;
    margin: 0 0 13px;
    color: #58616f;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    line-height: 1.58;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.marketingOutcomesIntro h2,
.marketingSuiteShowcaseIntro h2,
.marketingCalendarIntro h2,
.aiCampaignCreationIntro h2,
.socialMarketingCopy h2,
.automatedJourneysSec h2,
.journeyLogicIntro h2,
.marketingInsightsIntro h2,
.apMarketingCtaPanel h2 {
    color: #111827;
    font-family: 'Roboto', sans-serif;
    font-size: 38px;
    line-height: 1.14;
    font-weight: 700;
    letter-spacing: 0;
}

.marketingOutcomesIntro h2,
.marketingSuiteShowcaseIntro h2,
.marketingCalendarIntro h2,
.aiCampaignCreationIntro h2,
.automatedJourneysSec h2,
.journeyLogicIntro h2,
.marketingInsightsIntro h2 {
    margin: 0 auto 18px;
}

.socialMarketingCopy h2 {
    margin: 0 0 18px;
}

.apMarketingCtaPanel h2 {
    margin: 0;
}

.marketingOutcomesIntro p:not(.sectionEyebrow),
.marketingSuiteShowcaseIntro p:not(.sectionEyebrow),
.marketingCalendarIntro p:not(.sectionEyebrow),
.aiCampaignCreationIntro p:not(.sectionEyebrow),
.socialMarketingCopy > p:not(.sectionEyebrow),
.journeyLogicIntro p:not(.sectionEyebrow),
.marketingInsightsIntro p:not(.sectionEyebrow),
.apMarketingCtaPanel > p:not(.sectionEyebrow) {
    color: #58616f;
    font-family: 'Helvetica', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.58;
    letter-spacing: 0;
}

@media only screen and (max-width: 1199px) {
    .marketingOutcomesIntro h2,
    .marketingSuiteShowcaseIntro h2,
    .marketingCalendarIntro h2,
    .aiCampaignCreationIntro h2,
    .socialMarketingCopy h2,
    .automatedJourneysSec h2,
    .journeyLogicIntro h2,
    .marketingInsightsIntro h2,
    .apMarketingCtaPanel h2 {
        font-size: 36px;
        line-height: 1.14;
    }
}

@media only screen and (max-width: 767px) {
    .marketingOutcomesIntro h2,
    .marketingSuiteShowcaseIntro h2,
    .marketingCalendarIntro h2,
    .aiCampaignCreationIntro h2,
    .socialMarketingCopy h2,
    .automatedJourneysSec h2,
    .journeyLogicIntro h2,
    .marketingInsightsIntro h2,
    .apMarketingCtaPanel h2 {
        font-size: 31px;
        line-height: 1.14;
    }

    .marketingOutcomesIntro p:not(.sectionEyebrow),
    .marketingSuiteShowcaseIntro p:not(.sectionEyebrow),
    .marketingCalendarIntro p:not(.sectionEyebrow),
    .aiCampaignCreationIntro p:not(.sectionEyebrow),
    .socialMarketingCopy > p:not(.sectionEyebrow),
    .journeyLogicIntro p:not(.sectionEyebrow),
    .marketingInsightsIntro p:not(.sectionEyebrow),
    .apMarketingCtaPanel > p:not(.sectionEyebrow) {
        font-size: 16px;
    }

    .bannerSec .heroEyebrow,
    .marketingOutcomesIntro .sectionEyebrow,
    .marketingSuiteShowcaseIntro .sectionEyebrow,
    .marketingCalendarIntro .sectionEyebrow,
    .aiCampaignCreationIntro .sectionEyebrow,
    .socialMarketingCopy .sectionEyebrow,
    .automatedJourneysSec .sectionEyebrow,
    .journeyLogicIntro .sectionEyebrow,
    .marketingInsightsIntro .sectionEyebrow,
    .apMarketingCta .sectionEyebrow {
        max-width: 100%;
        margin-bottom: 13px;
        font-size: 16px;
        line-height: 1.58;
        letter-spacing: 0;
        text-transform: none;
    }
}

@media only screen and (max-width: 479px) {
    .marketingOutcomesIntro h2,
    .marketingSuiteShowcaseIntro h2,
    .marketingCalendarIntro h2,
    .aiCampaignCreationIntro h2,
    .socialMarketingCopy h2,
    .automatedJourneysSec h2,
    .journeyLogicIntro h2,
    .marketingInsightsIntro h2,
    .apMarketingCtaPanel h2 {
        font-size: 27px;
    }
}

/* CTA final pass: keep the panel insulated from shared container styles. */
.apMarketingCta > .apMarketingCtaPanel.container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 48px;
    max-width: 1210px;
    padding: 52px 60px;
    border-radius: 28px;
}

.apMarketingCtaPanel > div {
    min-width: 0;
}

.apMarketingCta .sectionEyebrow {
    margin: 0 0 12px;
}

.apMarketingCtaPanel h2 {
    max-width: 760px;
    margin: 0;
}

.apMarketingCtaPanel > p:not(.sectionEyebrow),
.apMarketingCtaPanel > div > p:not(.sectionEyebrow) {
    max-width: 720px;
    margin: 20px 0 0;
}

.apMarketingCtaButton {
    justify-self: end;
    min-width: 190px;
    padding: 0 30px;
}

@media only screen and (max-width: 991px) {
    .apMarketingCta > .apMarketingCtaPanel.container {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 42px 34px;
        text-align: center;
    }

    .apMarketingCtaPanel h2,
    .apMarketingCtaPanel > div > p:not(.sectionEyebrow) {
        margin-left: auto;
        margin-right: auto;
    }

    .apMarketingCtaButton {
        justify-self: center;
    }
}

@media only screen and (max-width: 767px) {
    .apMarketingCta > .apMarketingCtaPanel.container {
        gap: 24px;
        padding: 34px 24px;
        border-radius: 22px;
        text-align: left;
    }

    .apMarketingCtaPanel h2,
    .apMarketingCtaPanel > div > p:not(.sectionEyebrow) {
        margin-left: 0;
        margin-right: 0;
    }

    .apMarketingCtaPanel > div > p:not(.sectionEyebrow) {
        margin-top: 16px;
    }

    .apMarketingCtaButton {
        justify-self: start;
        width: 100%;
    }
}

/* Hero image scale refinement */
@media only screen and (min-width: 992px) {
    .bannerSec .container {
        max-width: 1320px;
    }

    .bannerSec .bannerTextWrap {
        grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.15fr);
        gap: 44px;
    }

    .bannerSec .apMarketingHeroVisual {
        padding-right: 46px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bannerSec .bannerTextWrap {
        grid-template-columns: minmax(0, 0.95fr) minmax(430px, 1.05fr);
        gap: 34px;
    }

    .bannerSec .apMarketingHeroVisual {
        padding-right: 30px;
    }
}

@media only screen and (max-width: 991px) {
    .bannerSec .apMarketingHeroVisual {
        width: min(720px, 100%);
    }
}

/* Social media lifestyle visual refresh */
.socialMarketingCopy h2 span {
    display: block;
}

.socialMarketingVisual {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.socialMarketingImageFrame {
    position: relative;
    overflow: hidden;
    padding: 10px;
    border: 1px solid rgba(205, 222, 232, 0.84);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(23, 45, 60, 0.1);
}

.socialMarketingImageFrame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.333;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
}

.socialOverlayCard {
    position: absolute;
    z-index: 2;
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: start;
    gap: 12px;
    border: 1px solid rgba(215, 226, 233, 0.88);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 34px rgba(23, 45, 60, 0.12);
    backdrop-filter: blur(10px);
}

.socialOverlayAi {
    right: -18px;
    bottom: 32px;
    width: min(365px, calc(100% - 48px));
    padding: 15px 16px;
}

.socialOverlaySupport {
    left: -14px;
    top: 40px;
    width: min(265px, calc(100% - 64px));
    padding: 13px 14px;
}

.socialDashOverlay {
    position: absolute;
    right: -16px;
    bottom: 28px;
    z-index: 2;
    width: min(380px, calc(100% - 48px));
    filter: drop-shadow(0 16px 30px rgba(23, 45, 60, 0.14));
}

.socialDashOverlay img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}

.socialOverlayIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #fff2e4;
    color: #f47a20;
    font-size: 14px;
}

.socialOverlaySupport .socialOverlayIcon {
    background: #ecfbfd;
    color: #16859a;
}

.socialOverlayCard strong {
    display: block;
    color: #101828;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
}

.socialOverlayCard small {
    display: block;
    margin-top: 4px;
    color: #667485;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
}

.socialOverlayCard p {
    margin: 8px 0 0;
    color: #526173;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
}

.socialOverlayTags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
}

.socialOverlayTags span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(236, 251, 253, 0.94);
    color: #16859a;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
}

@media only screen and (max-width: 991px) {
    .socialMarketingVisual {
        max-width: 720px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 767px) {
    .socialMarketingVisual {
        display: grid;
        gap: 12px;
        padding: 0;
        border-radius: 0;
    }

    .socialMarketingImageFrame {
        order: 1;
        padding: 8px;
        border-radius: 22px;
    }

    .socialMarketingImageFrame img {
        aspect-ratio: 1.05;
        border-radius: 16px;
    }

    .socialOverlayCard {
        position: static;
        width: 100%;
        max-width: none;
        box-shadow: 0 12px 28px rgba(23, 45, 60, 0.09);
    }

    .socialOverlayAi {
        order: 2;
        padding: 14px;
    }

    .socialDashOverlay {
        position: static;
        order: 2;
        width: 100%;
        max-width: none;
        filter: drop-shadow(0 12px 24px rgba(23, 45, 60, 0.1));
    }

    .socialDashOverlay img {
        border-radius: 12px;
    }

    .socialOverlaySupport {
        order: 3;
        padding: 13px 14px;
    }
}

/* Social section final refinement */
.socialMarketingSec {
    padding: 68px 0 70px;
}

.socialMarketingGrid {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.08fr);
    align-items: start;
    gap: 52px;
}

.socialMarketingCopy {
    padding-top: 0;
}

.socialMarketingVisual {
    margin-right: 18px;
    margin-bottom: 34px;
}

.socialOverlayAi {
    right: -14px;
    bottom: 30px;
    width: min(330px, calc(100% - 48px));
    padding: 13px 14px;
}

.socialDashOverlay {
    right: -22px;
    bottom: -22px;
    width: min(315px, 44%);
}

.socialOverlayAi .socialOverlayIcon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 13px;
}

.socialOverlayAi strong {
    font-size: 15px;
}

.socialOverlayAi p {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.38;
}

.socialOverlayAi .socialOverlayTags {
    margin-top: 9px;
}

.socialOverlayAi .socialOverlayTags span {
    min-height: 24px;
    padding: 0 8px;
    font-size: 10px;
}

@media only screen and (max-width: 1199px) {
    .socialMarketingSec {
        padding: 60px 0 64px;
    }

    .socialMarketingGrid {
        gap: 38px;
    }
}

@media only screen and (max-width: 991px) {
    .socialMarketingSec {
        padding: 54px 0 56px;
    }

    .socialMarketingGrid {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

@media only screen and (max-width: 767px) {
    .socialMarketingSec {
        padding: 40px 0 44px;
    }

    .socialOverlayAi {
        width: 100%;
        padding: 13px 14px;
    }

    .socialDashOverlay {
        width: 100%;
    }
}

/* Command center image scale refinement */
.marketingSuiteShowcaseSec .marketingSuiteProductFrame {
    max-width: 840px;
}

@media only screen and (max-width: 991px) {
    .marketingSuiteShowcaseSec .marketingSuiteProductFrame {
        max-width: 100%;
    }
}

/* Marketing insights editorial split layout */
.marketingInsightsSec {
    background:
        radial-gradient(circle at 9% 18%, rgba(178, 235, 244, 0.16), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
}

.marketingInsightsLayout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    gap: 58px;
}

.marketingInsightsImage {
    position: relative;
    overflow: visible;
    margin-right: 22px;
    margin-bottom: 50px;
    padding: 10px;
    border: 1px solid rgba(205, 222, 232, 0.84);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(23, 45, 60, 0.09);
}

.marketingInsightsImage > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.333;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
}

.marketingInsightsStatsOverlay {
    position: absolute;
    right: -34px;
    bottom: -30px;
    z-index: 2;
    width: min(423px, 58.2%);
    padding: 6px;
    border: 1px solid rgba(205, 222, 232, 0.86);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 34px rgba(23, 45, 60, 0.13);
}

.marketingInsightsStatsOverlay img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.marketingInsightsContent {
    min-width: 0;
}

.marketingInsightsContent .marketingInsightsIntro {
    max-width: 540px;
    margin: 0;
    text-align: left;
}

.marketingInsightsContent .marketingInsightsIntro h2 {
    max-width: 540px;
    margin: 0 0 18px;
}

.marketingInsightsContent .marketingInsightsIntro p:not(.sectionEyebrow) {
    max-width: 520px;
    margin: 0;
}

.marketingInsightsRows {
    display: grid;
    gap: 0;
    max-width: 540px;
    margin-top: 30px;
}

.marketingInsightsRows .marketingInsightItem {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    padding: 0 0 20px;
    border: 0;
}

.marketingInsightsRows .marketingInsightItem + .marketingInsightItem {
    padding-top: 20px;
    border-left: 0;
    border-top: 1px solid rgba(205, 222, 232, 0.72);
}

.marketingInsightsRows .marketingInsightIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(236, 246, 248, 0.9);
    color: #244250;
    font-size: 14px;
}

.marketingInsightsRows .marketingInsightMarker {
    display: none;
}

.marketingInsightsRows .marketingInsightItem h3 {
    margin: 0 0 6px;
    color: #101828;
    font-size: 16px;
    line-height: 1.24;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: none;
}

.marketingInsightsRows .marketingInsightItem p {
    margin: 0;
    color: #58616f;
    font-size: 15px;
    line-height: 1.52;
    font-weight: 400;
}

@media only screen and (max-width: 991px) {
    .marketingInsightsLayout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .marketingInsightsContent {
        order: 1;
    }

    .marketingInsightsImage {
        order: 2;
        max-width: 720px;
        margin: 0 auto 50px;
    }

    .marketingInsightsRows {
        order: 3;
    }
}

@media only screen and (max-width: 767px) {
    .marketingInsightsLayout {
        gap: 28px;
    }

    .marketingInsightsImage {
        display: grid;
        gap: 12px;
        margin-bottom: 0;
        padding: 8px;
        border-radius: 22px;
    }

    .marketingInsightsImage > img {
        aspect-ratio: 1.05;
        border-radius: 16px;
    }

    .marketingInsightsStatsOverlay {
        position: static;
        width: 100%;
        max-width: none;
        padding: 6px;
        border-radius: 18px;
        box-shadow: 0 12px 28px rgba(23, 45, 60, 0.09);
    }

    .marketingInsightsStatsOverlay img {
        border-radius: 12px;
    }

    .marketingInsightsRows {
        margin-top: 24px;
    }

    .marketingInsightsRows .marketingInsightItem {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 12px;
        padding-bottom: 18px;
    }

    .marketingInsightsRows .marketingInsightItem + .marketingInsightItem {
        padding-top: 18px;
    }

    .marketingInsightsRows .marketingInsightIcon {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
}

/* Calendar section two-column storytelling layout */
.marketingCalendarSec {
    padding: 76px 0 82px;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 205, 116, 0.1), transparent 28%),
        radial-gradient(circle at 88% 32%, rgba(178, 235, 244, 0.2), transparent 30%),
        linear-gradient(145deg, #ffffff 0%, #f8fcfd 52%, #fffdf8 100%);
}

.marketingCalendarLayout {
    display: grid;
    grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr);
    align-items: start;
    gap: 50px;
}

.marketingCalendarContent {
    min-width: 0;
}

.marketingCalendarContent .marketingCalendarIntro {
    max-width: 500px;
    margin: 0;
    text-align: left;
}

.marketingCalendarContent .marketingCalendarIntro h2 {
    max-width: 480px;
    margin: 0 0 16px;
    font-size: 36px;
    line-height: 1.12;
}

.marketingCalendarContent .marketingCalendarIntro h2 span {
    display: block;
}

.marketingCalendarContent .marketingCalendarIntro p:not(.sectionEyebrow) {
    max-width: 455px;
    margin: 0;
}

.marketingCalendarContent .marketingCalendarUseCases {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: visible;
    max-width: 455px;
    margin: 28px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.marketingCalendarContent .calendarUseCase {
    position: relative;
    min-width: 0;
    padding: 0 0 17px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.marketingCalendarContent .calendarUseCase + .calendarUseCase {
    padding-top: 17px;
    border-top: 1px solid rgba(205, 222, 232, 0.72);
}

.marketingCalendarContent .calendarUseCase + .calendarUseCase .calendarUseCaseMarker {
    top: 21px;
}

.marketingCalendarContent .calendarUseCaseMarker {
    position: absolute;
    top: 4px;
    left: 0;
    width: 3px;
    height: 34px;
    margin: 0;
}

.marketingCalendarContent .calendarUseCase h3 {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.24;
}

.marketingCalendarContent .calendarUseCase p {
    color: #58616f;
    font-size: 14px;
    line-height: 1.52;
    font-weight: 400;
}

.marketingCalendarContent .calendarUseCase:nth-child(2) .calendarUseCaseMarker {
    background: linear-gradient(90deg, #6eb245 0%, #a8d86d 100%);
}

.marketingCalendarContent .calendarUseCase:nth-child(3) .calendarUseCaseMarker {
    background: linear-gradient(90deg, #1da4df 0%, #74d2ea 100%);
}

.marketingCalendarLayout .marketingCalendarVisual {
    position: relative;
    max-width: none;
    margin: 0;
    padding: 10px 12px 42px 0;
}

.marketingCalendarLayout .marketingCalendarFrame {
    padding: 8px;
    border-radius: 26px;
    box-shadow: 0 16px 38px rgba(23, 45, 60, 0.09);
}

.marketingCalendarLayout .marketingCalendarFrame img {
    border-radius: 18px;
}

.marketingCalendarLayout .calendarAnnotation {
    grid-template-columns: 28px 1fr;
    gap: 9px;
    width: 204px;
    padding: 9px 11px;
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(23, 45, 60, 0.08);
}

.marketingCalendarLayout .calendarAnnotationIcon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 11px;
}

.marketingCalendarLayout .calendarAnnotation strong {
    font-size: 13px;
}

.marketingCalendarLayout .calendarAnnotation small {
    font-size: 10.5px;
    line-height: 1.34;
}

.marketingCalendarLayout .calendarAnnotationAi {
    top: auto;
    right: 18px;
    bottom: 0;
    left: auto;
}

.marketingCalendarLayout .calendarAnnotationAutomation {
    right: auto;
    bottom: 0;
    left: -8px;
}

@media only screen and (max-width: 1199px) {
    .marketingCalendarLayout {
        grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
        gap: 34px;
    }

    .marketingCalendarContent .marketingCalendarIntro h2 {
        font-size: 34px;
    }

    .marketingCalendarLayout .calendarAnnotation {
        width: 194px;
    }

    .marketingCalendarLayout .calendarAnnotationAutomation {
        right: auto;
        bottom: 6px;
        left: 0;
    }

    .marketingCalendarLayout .calendarAnnotationAi {
        right: 0;
        bottom: 6px;
    }
}

@media only screen and (max-width: 991px) {
    .marketingCalendarSec {
        padding: 64px 0 68px;
    }

    .marketingCalendarLayout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .marketingCalendarContent .marketingCalendarIntro,
    .marketingCalendarContent .marketingCalendarIntro p:not(.sectionEyebrow),
    .marketingCalendarContent .marketingCalendarUseCases {
        max-width: 680px;
    }

    .marketingCalendarContent .marketingCalendarIntro h2 {
        max-width: 620px;
    }

    .marketingCalendarLayout .marketingCalendarVisual {
        max-width: 820px;
        margin: 0 auto;
        padding: 18px 14px 30px;
    }
}

@media only screen and (max-width: 767px) {
    .marketingCalendarSec {
        padding: 48px 0 52px;
    }

    .marketingCalendarLayout {
        gap: 28px;
    }

    .marketingCalendarContent .marketingCalendarUseCases {
        margin-top: 24px;
    }

    .marketingCalendarContent .calendarUseCase {
        padding: 0 0 16px 16px;
    }

    .marketingCalendarContent .calendarUseCase + .calendarUseCase {
        padding-top: 16px;
    }

    .marketingCalendarContent .calendarUseCaseMarker {
        height: 30px;
    }

    .marketingCalendarContent .calendarUseCase + .calendarUseCase .calendarUseCaseMarker {
        top: 20px;
    }

    .marketingCalendarLayout .marketingCalendarVisual {
        display: grid;
        gap: 12px;
        padding: 0;
    }

    .marketingCalendarLayout .marketingCalendarFrame {
        order: 1;
        padding: 8px;
        border-radius: 18px;
    }

    .marketingCalendarLayout .marketingCalendarFrame img {
        border-radius: 14px;
    }

    .marketingCalendarLayout .calendarAnnotation {
        position: static;
        width: 100%;
        max-width: none;
        box-shadow: 0 10px 22px rgba(23, 45, 60, 0.075);
    }

    .marketingCalendarLayout .calendarAnnotationAi {
        order: 2;
    }

    .marketingCalendarLayout .calendarAnnotationAutomation {
        order: 3;
    }

}