/* =========================================================================
   CRM Comparison — design tokens (matches the shared mockups)
   ========================================================================= */
:root{
	--crmc-purple-900:#2e1065;
	--crmc-purple-800:#3b1078;
	--crmc-purple-700:#4c1d95;
	--crmc-purple-accent:#a78bfa;
	--crmc-purple-btn:#7c3aed;
	--crmc-white:#ffffff;
	--crmc-ink:#1e1b2e;
	--crmc-muted:#6b7280;
	--crmc-border:#ece9f5;
	--crmc-radius-lg:20px;
	--crmc-radius-md:14px;
	--crmc-radius-pill:999px;
	--crmc-max:1250px;
}

.crmc-container{max-width:var(--crmc-max);margin:0 auto;padding:0 50px;}
@media (max-width:1081px){.crmc-container{padding:0 32px;}}
@media (max-width:768px){.crmc-container{padding:0 20px;}}

/* ---------- Hero ---------- */
.crmc-hero{
	background:linear-gradient(160deg,var(--crmc-purple-900) 0%,var(--crmc-purple-700) 60%,var(--crmc-purple-800) 100%);
	color:#fff;padding:64px 0 48px;text-align:center;
	border-radius:0 0 32px 32px;
}
.crmc-hero__title{font-size:40px;line-height:1.2;font-weight:800;margin:0 0 16px;}
.crmc-hero__title span{color:var(--crmc-purple-accent);}
.crmc-hero__subtitle{max-width:620px;margin:0 auto 28px;color:#d8d2ec;font-size:15px;}

.crmc-search{position:relative;max-width:340px;margin:0 auto 20px;}
.crmc-search input{
	width:100%;padding:12px 16px 12px 40px;border-radius:var(--crmc-radius-pill);
	border:none;font-size:14px;outline:none;
}
.crmc-search__icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--crmc-muted);}
.crmc-search__results{
	position:absolute;top:110%;left:0;right:0;background:#fff;border-radius:12px;
	box-shadow:0 12px 32px rgba(0,0,0,.2);text-align:left;overflow:hidden;z-index:20;color:var(--crmc-ink);
}
.crmc-search__results a{display:flex;gap:10px;align-items:center;padding:10px 14px;font-size:14px;color:inherit;text-decoration:none;}
.crmc-search__results a:hover{background:#f5f3fb;}
.crmc-search__results img{width:22px;height:22px;object-fit:contain;}

/* ---------- Your Comparison tray ---------- */
.crmc-tray{display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:24px;font-size:13px;}
.crmc-tray__label{color:#cfc7e8;}
.crmc-tray__chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.crmc-tray__empty{color:#a599c9;}
.crmc-chip{
	display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--crmc-ink);
	padding:6px 10px;border-radius:var(--crmc-radius-pill);font-size:13px;font-weight:600;
}
.crmc-chip img{width:16px;height:16px;object-fit:contain;}
.crmc-chip__x{color:#9ca3af;text-decoration:none;font-size:15px;line-height:1;margin-left:2px;}
.crmc-tray__count{color:#cfc7e8;}

.crmc-btn{
	display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
	border-radius:var(--crmc-radius-pill);padding:10px 20px;font-weight:600;font-size:14px;
	text-decoration:none;
}
.crmc-btn--primary{background:var(--crmc-purple-btn);color:#fff;}
.crmc-btn--primary:disabled{opacity:.4;cursor:not-allowed;}
.crmc-btn--full{width:100%;justify-content:center;margin-top:14px;}

/* ---------- Filters ---------- */
.crmc-filters{display:flex;gap:10px;justify-content:center;margin-bottom:32px;position:relative;z-index:15;}
.crmc-filter{position:relative;}
.crmc-filter__toggle{
	background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff;
	border-radius:var(--crmc-radius-pill);padding:8px 16px;font-size:13px;display:inline-flex;
	align-items:center;gap:6px;cursor:pointer;
}
.crmc-filter__menu{
	display:none;position:absolute;top:120%;left:0;background:#fff;color:var(--crmc-ink);
	border-radius:12px;padding:10px 14px;min-width:200px;box-shadow:0 12px 30px rgba(0,0,0,.25);
	text-align:left;font-size:13px;
}
.crmc-filter__menu label{display:flex;gap:8px;align-items:center;padding:6px 0;}
.crmc-filter.is-open .crmc-filter__menu{display:block;}

/* ---------- Featured grid ---------- */
.crmc-featured-label{text-align:left;color:#cfc7e8;font-size:13px;font-weight:600;margin:0 0 10px;}
.crmc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:768px){.crmc-grid{grid-template-columns:1fr;}}
.crmc-card{
	display:flex;align-items:center;gap:10px;background:#fff;border:none;border-radius:16px;
	padding:14px 16px;cursor:pointer;text-align:left;font-size:14px;font-weight:600;color:var(--crmc-ink);
	transition:box-shadow .15s ease;
}
.crmc-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.15);}
.crmc-card__logo{width:24px;height:24px;object-fit:contain;}
.crmc-card__name{flex:1;}
.crmc-card__action{
	width:22px;height:22px;border-radius:50%;background:#f1eefb;color:var(--crmc-purple-btn);
	display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;
}
.crmc-card.is-selected{background:var(--crmc-purple-btn);color:#fff;}
.crmc-card.is-selected .crmc-card__action{background:#fff;color:var(--crmc-purple-btn);}
.crmc-card.is-selected .crmc-card__action::before{content:"✓";}

/* ---------- Popular comparisons ---------- */
.crmc-popular{padding:56px 0;}
.crmc-popular__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.crmc-popular__head h2{font-size:24px;color:var(--crmc-ink);margin:0;}
.crmc-popular__nav{display:flex;gap:8px;}
.crmc-arrow{
	width:32px;height:32px;border-radius:50%;border:1px solid var(--crmc-border);background:#fff;
	cursor:pointer;font-size:16px;color:var(--crmc-ink);
}
.crmc-popular__track{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:1081px){.crmc-popular__track{grid-template-columns:repeat(2,1fr);}}
@media (max-width:768px){.crmc-popular__track{grid-template-columns:1fr;}}

.crmc-popular-card{border:1px solid var(--crmc-border);border-radius:16px;padding:20px;}
.crmc-popular-card__logos{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px;}
.crmc-popular-card__logo{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13px;}
.crmc-popular-card__logo img{width:18px;height:18px;object-fit:contain;}
.crmc-vs{color:var(--crmc-muted);font-size:12px;font-weight:700;}
.crmc-popular-card__rows{list-style:none;margin:0 0 4px;padding:0;}
.crmc-popular-card__rows li{
	padding:9px 0;border-top:1px solid var(--crmc-border);color:var(--crmc-muted);
	font-size:13px;text-align:center;
}

/* ---------- Compare page header ---------- */
.crmc-compare-hero{
	background:linear-gradient(160deg,var(--crmc-purple-900) 0%,var(--crmc-purple-700) 100%);
	color:#fff;padding:48px 0;text-align:center;border-radius:0 0 24px 24px;
}
.crmc-compare-hero h1{font-size:30px;margin:0 0 10px;}
.crmc-compare-hero p{color:#d8d2ec;font-size:14px;max-width:640px;margin:0 auto 24px;}
.crmc-compare-bar{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;}
.crmc-add-crm{
	background:none;border:none;color:var(--crmc-purple-accent);font-weight:700;font-size:13px;
	cursor:pointer;
}

/* ---------- Compare body layout ---------- */
.crmc-compare-body{padding:40px 0 80px;}
.crmc-compare-layout{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start;}
@media (max-width:900px){.crmc-compare-layout{grid-template-columns:1fr;}}

.crmc-sidebar h4{font-size:13px;color:var(--crmc-muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px;}
.crmc-sidebar nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:20px;}
.crmc-sidebar__link{
	display:flex;justify-content:space-between;padding:10px 14px;border-radius:12px;
	color:var(--crmc-ink);text-decoration:none;font-size:13px;font-weight:600;
}
.crmc-sidebar__link span{opacity:0;transition:opacity .15s;}
.crmc-sidebar__link.is-active,.crmc-sidebar__link:hover{background:var(--crmc-purple-btn);color:#fff;}
.crmc-sidebar__link.is-active span,.crmc-sidebar__link:hover span{opacity:1;}

.crmc-compare-heads{
	display:grid;grid-template-columns:180px repeat(3,1fr);align-items:center;padding:14px 20px;
	position:sticky;top:0;background:#fff;z-index:5;
}
.crmc-compare-heads__logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;justify-content:center;}
.crmc-compare-heads__logo img{width:22px;height:22px;object-fit:contain;}

.crmc-table-section{margin-top:24px;opacity:0;transition:opacity .28s ease;}
.crmc-table-section.is-active{opacity:1;}
.crmc-table-section h2{font-size:13px;color:var(--crmc-muted);text-transform:uppercase;letter-spacing:.04em;padding:0 20px 8px;}
.crmc-table{width:100%;border-collapse:collapse;}
.crmc-table tr{border-top:1px solid var(--crmc-border);}
.crmc-table tr:nth-child(odd){background:#faf9fd;}
.crmc-table th,.crmc-table td{padding:14px 20px;text-align:center;font-size:13px;font-weight:400;color:var(--crmc-ink);}
.crmc-table th{text-align:left;font-weight:600;color:var(--crmc-muted);width:180px;}

/* ---------- Modal ---------- */
.crmc-modal{position:fixed;inset:0;background:rgba(20,10,40,.5);display:flex;align-items:flex-start;justify-content:center;padding-top:10vh;z-index:100;}
.crmc-modal[hidden]{display:none;}
.crmc-modal__panel{background:#fff;border-radius:18px;padding:24px;width:min(420px,90vw);position:relative;}
.crmc-modal__close{position:absolute;top:16px;right:16px;border:none;background:none;font-size:18px;cursor:pointer;color:var(--crmc-muted);}
.crmc-modal__panel h3{margin:0 0 14px;font-size:16px;}
.crmc-modal .crmc-search{max-width:none;margin-bottom:10px;}
.crmc-modal .crmc-search input{border:1px solid var(--crmc-border);}
.crmc-modal__hint{font-size:12px;color:var(--crmc-muted);margin:0 0 12px;}
.crmc-modal__results{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto;}
.crmc-modal-row{
	display:flex;align-items:center;justify-content:space-between;padding:10px 12px;
	border-radius:12px;background:#faf9fd;font-size:14px;font-weight:600;
}
.crmc-modal-row__left{display:flex;align-items:center;gap:8px;}
.crmc-modal-row__left img{width:20px;height:20px;object-fit:contain;}
.crmc-modal-row button{
	width:24px;height:24px;border-radius:50%;border:none;background:var(--crmc-purple-btn);
	color:#fff;font-size:16px;cursor:pointer;
}

.crmc-empty{padding:100px 0;text-align:center;}