.dx-marketing-page { background: #fff; color: #172033; }
.dx-market-hero { background: linear-gradient(135deg, #f5f8ff 0%, #fff 64%, #fff7f2 100%); border-bottom: 1px solid #e5eaf2; }
.dx-market-hero__inner { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(290px, .72fr); gap: clamp(28px, 6vw, 90px); align-items: center; min-height: 470px; padding-block: 88px; }
.dx-market-hero h1 { max-width: 760px; margin: 12px 0 22px; color: #14284f; font-size: clamp(40px, 5vw, 66px); line-height: 1.07; letter-spacing: -.045em; }
.dx-market-hero__inner > div > p:not(.dx-eyebrow) { max-width: 610px; color: #526178; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; }
.dx-market-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 30px; }
.dx-market-link { color: #1a3467; font-weight: 750; }
.dx-market-link:hover, .dx-price-card__cta:hover { color: #d9470a; }
.dx-market-summary { padding: 30px; background: #172d57; color: #fff; border-radius: 22px; box-shadow: 0 22px 50px rgba(22, 43, 82, .14); }
.dx-market-summary > span { color: #ffae80; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dx-market-summary strong { display: block; margin-top: 15px; font-size: clamp(23px, 2.5vw, 32px); line-height: 1.2; letter-spacing: -.03em; }
.dx-market-summary ul { margin: 22px 0 0; padding: 0; list-style: none; }
.dx-market-summary li { padding: 10px 0 10px 24px; position: relative; border-top: 1px solid rgba(255,255,255,.16); color: #e4ebf5; font-size: 14px; }
.dx-market-summary li::before { content: '✓'; position: absolute; left: 0; color: #ffb085; }
.dx-market-section { padding-block: clamp(68px, 7vw, 106px); }
.dx-market-section--tint { background: #f6f8fc; border-block: 1px solid #e5eaf2; }
.dx-market-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 32px; }
.dx-market-heading h2, .dx-market-end h2 { max-width: 720px; margin: 9px 0 0; color: #14284f; font-size: clamp(31px, 3vw, 43px); line-height: 1.16; letter-spacing: -.035em; }
.dx-market-heading > p { max-width: 390px; margin: 0; color: #667085; font-size: 15px; }
.dx-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dx-price-card { display: flex; flex-direction: column; min-width: 0; padding: 26px; background: #fff; border: 1px solid #dfe6f0; border-radius: 18px; box-shadow: 0 5px 18px rgba(20, 40, 79, .04); }
.dx-price-card--featured { border-color: #e58b55; box-shadow: 0 12px 34px rgba(245, 100, 37, .12); }
.dx-price-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 25px; }
.dx-price-card__top > p { margin: 0; color: #69768c; font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.dx-price-badge { padding: 4px 9px; border-radius: 999px; background: #fff0e8; color: #a34412; font-size: 11px; font-weight: 800; }
.dx-price-card h3 { margin: 10px 0 0; color: #172d57; font-size: 28px; letter-spacing: -.035em; }
.dx-price-card__rate { min-height: 60px; margin: 10px 0; white-space: nowrap; }
.dx-price-card__rate strong { color: #14284f; font-size: clamp(30px, 3vw, 42px); letter-spacing: -.05em; }
.dx-price-card__rate span { color: #6b7588; font-size: 13px; }
.dx-price-card__detail { min-height: 53px; margin: 0 0 14px; color: #657186; font-size: 14px; }
.dx-price-card ul { flex: 1; margin: 0; padding: 17px 0 20px; border-top: 1px solid #edf0f5; list-style: none; }
.dx-price-card li { position: relative; padding: 9px 0 9px 22px; color: #293b55; font-size: 14px; line-height: 1.45; }
.dx-price-card li::before { content: '✓'; position: absolute; left: 0; color: #0e8a6d; font-weight: 800; }
.dx-price-card__cta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0 0; border-top: 1px solid #edf0f5; color: #1a3467; font-weight: 800; }
.dx-market-note { max-width: 1000px; margin: 25px 0 0; color: #657186; font-size: 13px; line-height: 1.7; }
.dx-market-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dx-market-trio article { padding: 28px; border: 1px solid #e3e9f3; border-radius: 16px; background: #fff; }
.dx-market-trio article > span { color: #e06429; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.dx-market-trio h3 { margin: 13px 0 8px; color: #172d57; font-size: 20px; line-height: 1.25; }
.dx-market-trio p, .dx-market-end p { margin: 0; color: #657186; }
.dx-market-end { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.dx-market-end > div { max-width: 690px; }
.dx-market-end p:last-child { margin-top: 16px; }
.dx-market-end > a { flex-shrink: 0; }
.dx-market-jump { position: sticky; top: var(--dx-header-height); z-index: 25; background: #fff; border-bottom: 1px solid #e4eaf2; }
.dx-market-jump .dx-container { display: flex; gap: 30px; overflow-x: auto; white-space: nowrap; }
.dx-market-jump a { display: block; padding: 16px 0; color: #354767; font-size: 14px; font-weight: 750; }
.dx-market-jump a:hover { color: #db5b20; }
.dx-automation-page .dx-market-section[id] { scroll-margin-top: 145px; }
.dx-workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dx-workflow-card { min-width: 0; padding: 25px; border: 1px solid #dfe6f0; border-radius: 17px; background: #fff; box-shadow: 0 6px 22px rgba(22, 43, 82, .04); }
.dx-workflow-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dx-workflow-card__top > span:first-child { color: #c7d1df; font-size: 13px; font-weight: 850; }
.dx-mode-badge { padding: 5px 10px; background: #ecf3ff; color: #204b8c; border-radius: 999px; font-size: 11px; font-weight: 800; }
.dx-workflow-card h3 { margin: 20px 0 9px; color: #162c54; font-size: 21px; line-height: 1.26; }
.dx-workflow-card p { margin: 0; color: #627187; font-size: 14px; line-height: 1.7; }
@media (max-width: 1050px) { .dx-price-grid, .dx-workflow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .dx-market-hero__inner { grid-template-columns: 1fr; min-height: 0; padding-block: 60px; gap: 35px; } .dx-market-heading, .dx-market-end { display: block; } .dx-market-heading > p { margin-top: 14px; } .dx-market-end > a { margin-top: 26px; } .dx-price-grid, .dx-workflow-grid, .dx-market-trio { grid-template-columns: 1fr; } .dx-price-card__detail { min-height: 0; } .dx-market-jump .dx-container { gap: 24px; } }

/* Retention workflow illustration beside the fourth retention card. */
.dx-retention-journey { position: relative; display: grid; grid-column: span 2; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 46px); align-items: center; min-width: 0; padding: clamp(22px, 3vw, 38px); overflow: hidden; border: 1px solid #243f74; border-radius: 20px; background: radial-gradient(circle at 90% 6%, rgba(105,153,219,.25), transparent 35%), linear-gradient(120deg, #162953, #264577); box-shadow: 0 18px 38px rgba(28, 56, 109, .15); color: #fff; }
.dx-retention-journey::before { content: ''; position: absolute; width: 410px; height: 410px; right: -180px; bottom: -250px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; pointer-events: none; }
.dx-retention-journey__copy { position: relative; z-index: 1; }
.dx-retention-journey__eyebrow { color: #ffb58c; font-size: 10px; font-weight: 850; letter-spacing: .13em; }
.dx-retention-journey h3 { max-width: 300px; margin: 12px 0; color: #fff; font-size: clamp(25px, 2.3vw, 34px); line-height: 1.16; letter-spacing: -.04em; }
.dx-retention-journey__copy p { margin: 0; color: #dce8f9; font-size: 12px; line-height: 1.65; }
.dx-retention-journey__copy a { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: #ffb58c; font-size: 11px; font-weight: 850; text-decoration: none; }
.dx-retention-journey__copy a:hover { color: #fff; }
.dx-retention-journey__copy a:focus-visible { outline: 3px solid #ffb58c; outline-offset: 4px; }
.dx-retention-journey__copy small { display: block; margin-top: 20px; color: #a9c0e0; font-size: 9px; line-height: 1.5; }
.dx-retention-journey__scene { position: relative; min-width: 0; padding: 16px; border: 1px solid rgba(255,255,255,.24); border-radius: 16px; background: rgba(255,255,255,.97); box-shadow: 0 15px 32px rgba(12,29,62,.2); color: #20385c; }
.dx-retention-journey__scene-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dx-retention-journey__scene-top > span { display: inline-flex; align-items: center; gap: 7px; color: #34577d; font-size: 10px; font-weight: 850; }
.dx-retention-journey__scene-top i { width: 6px; height: 6px; border-radius: 50%; background: #36a67f; }
.dx-retention-journey__scene-top b { color: #3a987b; font-size: 8px; letter-spacing: .08em; }
.dx-retention-journey__scene ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; position: relative; z-index: 1; padding: 0; margin: 15px 0 0; list-style: none; }
.dx-retention-journey__scene li { display: grid; grid-template-columns: 24px minmax(0,1fr); column-gap: 6px; align-items: center; min-height: 57px; padding: 8px; border: 1px solid #e1e9f2; border-radius: 11px; background: #f9fbff; }
.dx-retention-journey__scene li > span { display: grid; grid-row: span 2; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #e7f0fa; color: #2d638f; font-size: 8px; font-weight: 850; }
.dx-retention-journey__scene li strong { color: #23405f; font-size: 9px; line-height: 1.25; }
.dx-retention-journey__scene li small { margin-top: 2px; color: #8091a5; font-size: 8px; line-height: 1.2; }
.dx-retention-journey.is-playing .dx-retention-journey__scene li { animation: dx-retention-step 8s ease-in-out infinite; animation-delay: calc(var(--journey-step) * 2s); }
.dx-retention-journey__line { position: absolute; left: 10%; right: 10%; top: 51%; height: 2px; background: #e5edf5; }
.dx-retention-journey__line span { display: block; width: 100%; height: 100%; background: #e28a61; transform: scaleX(0); transform-origin: left; }
.dx-retention-journey.is-playing .dx-retention-journey__line span { animation: dx-retention-line 8s linear infinite; }
.dx-retention-journey__result { display: flex; align-items: center; gap: 7px; padding: 9px 10px; margin-top: 9px; border-radius: 9px; background: #e9f7f1; color: #24795f; }
.dx-retention-journey__result span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #34a37b; color: #fff; font-size: 10px; }
.dx-retention-journey__result strong { font-size: 9px; }
@keyframes dx-retention-step { 0%, 19% { transform: translateY(-2px); border-color: #e99570; background: #fff3ed; box-shadow: 0 5px 13px rgba(214,103,58,.14); } 25%, 100% { transform: none; border-color: #e1e9f2; background: #f9fbff; box-shadow: none; } }
@keyframes dx-retention-line { 0% { transform: scaleX(0); } 80%, 100% { transform: scaleX(1); } }
@media (max-width: 1050px) { .dx-retention-journey { grid-column: span 2; } }
@media (max-width: 720px) { .dx-retention-journey { grid-column: auto; grid-template-columns: 1fr; gap: 22px; } .dx-retention-journey h3 { max-width: none; } }
@media (max-width: 390px) { .dx-retention-journey__scene ol { grid-template-columns: 1fr; } .dx-retention-journey__line { display: none; } }
@media (prefers-reduced-motion: reduce) { .dx-retention-journey.is-playing .dx-retention-journey__scene li, .dx-retention-journey.is-playing .dx-retention-journey__line span { animation: none; } .dx-retention-journey__line span { transform: scaleX(1); } }