/* CRM service page; shared service components use ecommerce-development.css. */
.crm-page { --crm-blue: #365875; }
.crm-hero { background: #f7f8fb; padding: 76px 0 64px; overflow: hidden; }
.crm-hero h1 { font-size: clamp(2.7rem, 4.5vw, 4.2rem); line-height: 1.08; margin: 24px 0; }
.crm-hero h1 span { color: var(--brand); }
.crm-hero p { max-width: 560px; font-size: 1.05rem; }
.crm-checks { display: flex; flex-wrap: wrap; gap: 12px 18px; color: #546a5c; font-size: .8rem; }
.crm-preview { border: 1px solid #dfe5ed; border-radius: 20px; background: #fff; box-shadow: 0 24px 65px #263c5512; padding: 26px; }
.crm-preview-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-bottom: 24px; }
.crm-preview-top b { font-size: .65rem; letter-spacing: .08em; }
.crm-preview-top b i { color: var(--brand); font-size: 1rem; margin-right: 5px; }
.crm-preview-top > span { font-size: .59rem; color: #7e8893; }
.crm-sources { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.crm-sources > span { background: #f3f6fa; border: 1px solid #e6eaf1; border-radius: 9px; text-align: center; padding: 15px 5px; font-size: .68rem; }
.crm-sources i { display: block; color: var(--crm-blue); margin-bottom: 8px; font-size: 1.3rem; }
.crm-connector { text-align: center; font-size: 1.6rem; line-height: 1.5; color: #9baec2; }
.crm-record { border: 1px solid #d6e0eb; border-radius: 12px; padding: 22px; }
.crm-record-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.crm-record-title > div { display: flex; gap: 11px; align-items: center; }
.crm-avatar { display: grid; place-items: center; width: 40px; height: 40px; background: #e8eef5; border-radius: 50%; color: #365875; font-size: .75rem; font-weight: 700; }
.crm-record h2 { font-size: 1rem; letter-spacing: -.02em; margin: 0 0 4px; }
.crm-record-title p { font-size: .6rem; margin: 0; }
.crm-status { padding: 5px 8px; border-radius: 15px; background: #edf5ee; color: #45624a; font-size: .55rem; }
.crm-record-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; border-top: 1px solid #edf0f4; margin-top: 20px; padding-top: 18px; }
.crm-record-fields span { font-size: .63rem; color: #7c8591; }
.crm-record-fields b { display: block; font-size: .72rem; color: #324354; margin-top: 6px; font-weight: 600; }
.crm-record-note { margin-top: 20px; padding: 10px; background: #f5f7fa; border-radius: 5px; font-size: .62rem; color: #5e7188; }
.crm-automation { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.crm-automation span { border-radius: 8px; padding: 13px 9px; background: #fff2f2; color: #953c46; text-align: center; font-size: .67rem; }
.crm-automation i { margin-right: 5px; }
.crm-hero .crm-caption { text-align: center; font-size: .68rem; margin: 16px 0 0; max-width: none; }
.crm-event-list { display: grid; gap: 16px; }
.crm-event-list article { display: flex; align-items: flex-start; gap: 20px; padding: 25px; border: 1px solid #e2e7ed; border-radius: 12px; background: #fff; }
.crm-event-list article > span { color: var(--brand); font-size: .78rem; font-weight: 750; padding-top: 3px; }
.crm-event-list h3 { font-size: 1.08rem; margin-bottom: 10px; }
.crm-event-list p { font-size: .9rem; margin: 0; }
.crm-tool-icon { display: grid; place-items: center; width: 52px; height: 52px; background: #eef3f8; color: var(--crm-blue); font-size: 1.5rem; border-radius: 12px; }
.crm-page .crm-tool-labels { font-weight: 650; color: #34495b; line-height: 1.9; }
.crm-platform-note { font-size: .8rem; margin: 22px 0 0; }
@media (max-width: 991.98px) { .crm-hero { padding: 48px 0; } .crm-preview { max-width: 560px; margin-inline: auto; } }
@media (max-width: 575.98px) { .crm-hero h1 { font-size: 2.65rem; } .crm-preview { padding: 16px; } .crm-record { padding: 15px; } .crm-sources { gap: 6px; } .crm-sources > span { font-size: .59rem; } .crm-automation span { font-size: .59rem; } .crm-event-list article { padding: 20px; gap: 14px; } }
@media (max-width: 575.98px) { .crm-page .row { --bs-gutter-x: 1.5rem; } }

.crm-service-page a[href^="mailto:"] { overflow-wrap: anywhere; }

.crm-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.crm-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 14px 6px; background: #f7f8fb; border: 1px solid #e7ebf0; border-radius: 10px; min-width: 0; }
.crm-brand > span:last-child { font-size: .73rem; color: #34495b; font-weight: 650; text-align: center; }
.crm-brand-art { height: 40px; width: 100%; display: flex; align-items: center; justify-content: center; }
.crm-brand-art img { display: block; width: 52px; height: 40px; object-fit: contain; }
.crm-brand-art i { font-size: 1.8rem; color: #365875; }
.crm-brand-woo img { width: 100px; height: 100px; }