.comparison-cards{background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;padding:2rem;margin:2rem 0}.comparison-header{text-align:center;margin-bottom:2rem}.comparison-title{font-size:1.5rem;font-weight:700;color:var(--color-text-heading);margin:0 0 .5rem}.comparison-subtitle{font-size:1rem;color:var(--color-text-body);margin:0 0 1rem}.comparison-intro{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.5rem;background:linear-gradient(135deg,#3b82f60d,#2563eb0d);border-left:3px solid #3b82f6;border-radius:8px;margin:0 auto;max-width:800px}.intro-icon{flex-shrink:0;color:#3b82f6}.comparison-intro p{font-size:.9375rem;line-height:1.6;color:var(--color-text-body);margin:0;text-align:left}.comparison-grid{display:grid;gap:1.5rem}.comparison-grid.layout-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.comparison-grid.layout-horizontal{grid-template-columns:1fr}.comparison-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;transition:all .3s ease;position:relative;cursor:pointer;box-shadow:0 1px 3px #0000000d}.comparison-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--item-color, #3b82f6);border-radius:12px 12px 0 0;opacity:0;transition:opacity .3s ease}.comparison-card:hover:before,.comparison-card.expanded:before{opacity:1}.comparison-card:hover{border-color:var(--item-color, #3b82f6);box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.comparison-card.expanded{border-color:var(--item-color, #3b82f6);box-shadow:0 8px 24px #0000001f}.card-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.card-icon{flex-shrink:0;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:12px;color:#fff;font-size:1.75rem;box-shadow:0 2px 8px #00000026}.card-title-section{flex:1}.card-name{font-size:1.25rem;font-weight:700;color:var(--color-text-heading);margin:0 0 .25rem}.card-tagline{font-size:.875rem;color:var(--color-text-body);margin:0;font-style:italic}.expand-button{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--color-text-body);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.expand-button:hover{background:var(--item-color, #3b82f6);color:#fff;border-color:var(--item-color, #3b82f6)}.expand-button svg{transition:transform .3s ease}.card-description{font-size:.9375rem;line-height:1.6;color:var(--color-text-body);margin:0 0 1.25rem}.metrics-grid{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:var(--bg-secondary);border-radius:8px;margin-bottom:1rem}.metric-item{display:flex;align-items:center;gap:.75rem}.metric-icon{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--item-color, #3b82f6);color:#fff;border-radius:8px;font-size:.875rem}.metric-content{display:flex;flex-direction:column;gap:.125rem;flex:1}.metric-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-body)}.metric-value{font-size:.9375rem;font-weight:600;color:var(--color-text-heading)}.card-expanded-content{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border-color);animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.detail-section{margin-bottom:1.5rem}.detail-section:last-child{margin-bottom:0}.detail-title{font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-heading);margin:0 0 .75rem}.detail-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.detail-list li{background:var(--bg-secondary);border-radius:6px;font-size:.875rem;color:var(--color-text-body);line-height:1.5;position:relative;padding:.625rem .875rem .625rem 2rem}.detail-list li:before{content:"";position:absolute;left:.875rem;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--item-color, #3b82f6)}.detail-list.highlight li{background:linear-gradient(135deg,#3b82f60d,#2563eb0d);border-left:2px solid var(--item-color, #3b82f6)}.detail-list.highlight li:before{content:"✓";width:auto;height:auto;color:var(--item-color, #3b82f6);font-weight:700;font-size:.875rem;background:none;transform:translateY(-50%)}.examples-grid{display:flex;flex-wrap:wrap;gap:.625rem}.example-chip{padding:.5rem 1rem;background:var(--item-color, #3b82f6);color:#fff;border-radius:20px;font-size:.8125rem;font-weight:600;box-shadow:0 2px 4px #0000001a}.card-action{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.5rem;color:#fff;border-radius:8px;font-size:1rem;font-weight:600;text-decoration:none;transition:all .2s ease;margin-top:1rem;width:100%}.card-action:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}@media (max-width: 768px){.comparison-cards{padding:1.5rem}.comparison-grid.layout-grid{grid-template-columns:1fr}.comparison-intro{flex-direction:column;text-align:center;padding:1rem}.comparison-intro p{text-align:center}.card-header{flex-wrap:wrap}.card-icon{width:48px;height:48px;font-size:1.5rem}.metrics-grid{gap:.625rem;padding:.875rem}.metric-item{gap:.625rem}.examples-grid{gap:.5rem}.example-chip{font-size:.75rem;padding:.375rem .75rem}}@media (max-width: 480px){.comparison-cards{padding:1.25rem}.comparison-title{font-size:1.25rem}.card-header{gap:.75rem}.card-name{font-size:1.125rem}.card-tagline{font-size:.8125rem}.expand-button{width:28px;height:28px}.expand-button svg{width:20px;height:20px}}