:root {
  --yes:#14532d; --yes-bg:#86efac; --yes-border:#34d399; 
  --no:#991b1b; --no-bg:#fca5a5; --no-border:#ef4444;
  --partial:#9a3412; --partial-bg:#fcd34d; --partial-border:#f59e0b;
  --planned:#1e3a8a; --planned-bg:#93c5fd; --planned-border:#3b82f6;
  --na:#334155; --na-bg:#cbd5e1; --na-border:#64748b;
  --border:#d0d7de; --header:#eef2f6; --bg:#ffffff;
  --brand:#0d9488; /* teal accent */
  --brand-soft:#ccfbf1;
  --brand-alt:#6366f1; /* indigo accent */
  --highlight:#f59e0b; /* amber */
  --highlight-alt:#2563eb; /* blue */
  --cell-pad-x:.6rem; /* unified horizontal padding for feature + group labels */
  /* Accent palette */
  --accent-brand:#0d4d2a; /* deep green for brand name */
  --accent-heading:#1e3a8a; /* blue for heading portion */
  --accent-sublead:#4d73de; /* brighter readable blue for subheading */
  --accent-highlight:#065f46; /* emerald emphasis */
  --accent-highlight-alt:#0f766e; /* teal emphasis */
  --accent-muted:#64748b; /* reused slate */
}

body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:var(--bg); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 24px; }
h1 { margin: 0 0 8px; font-size: 28px; }
p.lead { color: var(--muted); margin: 0 0 16px; }
/* Heading & intro accent refinements */
.cmp-heading .brand-accent { color: var(--accent-brand); }
.cmp-heading .heading-accent { color: var(--accent-heading); }
.cmp-subheading { color: var(--accent-sublead) !important; font-weight:500; }
.cmp-subheading .text-highlight { color: var(--accent-highlight); font-weight:600; }
.cmp-subheading .text-highlight-alt { color: var(--accent-highlight-alt); font-weight:600; }
.cmp-subheading .text-muted-part { color: var(--accent-muted); font-weight:400; }

/* Heading & text accents */
.cmp-heading { position:relative; }
.cmp-heading .brand-accent { background: linear-gradient(90deg, var(--brand) 0%, var(--brand-alt) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cmp-heading .heading-accent { position:relative; display:inline-block; }
.cmp-heading .heading-accent:after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:4px; background:linear-gradient(90deg,var(--brand-soft),rgba(13,148,136,0.15)); border-radius:2px; }
.cmp-subheading .text-highlight { color:var(--highlight); font-weight:600; }
.cmp-subheading .text-highlight-alt { color:var(--highlight-alt); font-weight:600; }

/* Legend polish */
.legend-wrapper { background:linear-gradient(180deg,#ffffff,#f8fafc); border:1px solid #e2e8f0; border-radius:8px; padding:1rem 1rem .75rem; position:relative; }
.legend-wrapper:before { content:""; position:absolute; inset:0; border-radius:8px; pointer-events:none; box-shadow:0 2px 4px rgba(0,0,0,0.04), 0 4px 10px -2px rgba(0,0,0,0.05); }
.legend-swatch .mark { width:auto; min-width:50px; }
.cmp-legend strong { font-weight:600; }

/* Group row accent divider */
.group-row .group-name { position:relative; }
.group-row .group-name:before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(var(--brand), var(--brand-alt)); border-top-left-radius:2px; border-bottom-left-radius:2px; }

/* Feature note subtle icon (optional) */
.feature-note:before { content:"\f430"; /* info-circle */ font-family: "Bootstrap Icons"; font-size:.6rem; margin-right:4px; color:#64748b; display:inline-block; position:relative; top:-1px; }

.feature-table-wrapper { position: relative; }
.table-feature-comparison { border:1px solid var(--border); background: var(--bg); border-collapse:collapse; }
.table-feature-comparison thead th { top:0; z-index:4; background: var(--header); position: sticky; border-bottom:1px solid var(--border); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.table-feature-comparison thead th.header-first { background: var(--header) !important; }
.comparison-header-row th { background: var(--header); }
.comparison-header-row th.primary-col { background: #e3f6ed; } /* light green tint */
.comparison-header-row th.partner-col { background: #f1f5f9; position: relative; }
.comparison-header-row th.partner-col-first { box-shadow: inset 3px 0 0 0 #cbd5e1; }
.comparison-header-row th.primary-col-first { box-shadow: inset 3px 0 0 0 #cbd5e1; }
.comparison-header-row th .col-subtext { font-size:.55rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:#64748b; margin-top:2px; }
.table-feature-comparison tbody tr:hover td,
.table-feature-comparison tbody tr:hover th.feature-label,
.table-feature-comparison tbody tr:hover .group-name { background:#fffbeb; }
/* Force sticky first column to repaint on hover */
.table-feature-comparison tbody tr:hover th.sticky-col { background:#fffbeb !important; }

/* Column body background alignment with header distinction */
.table-feature-comparison tbody td:nth-child(2), /* QSavvy column after feature col is index 2 */
.table-feature-comparison tbody td:nth-child(3) { background: #f8fffb; } /* Dext column shares subtle tint */

/* Add visual separation before partner columns (after primary set) */
.table-feature-comparison tbody td.partner-separator-left { box-shadow: inset 3px 0 0 0 #cbd5e1; }
.table-feature-comparison tbody td.primary-separator-left { box-shadow: inset 3px 0 0 0 #cbd5e1; }

.feature-col { width:320px; }
.platform-col { min-width:130px; }
.sticky-col { position:sticky; left:0; z-index:3; }
.group-row { background:#f1f5f9; }
.group-row th, .group-row td { background:#f1f5f9 !important; }
.group-row .group-name { background:inherit; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; border-top:2px solid #e2e8f0; font-weight:600; color:#334155; position:static; left:auto; z-index:auto; }
.group-row { cursor:pointer; }
.group-row .group-name { padding:.55rem var(--cell-pad-x); }
.group-row .toggle-icon { font-size:.8rem; transition:transform .25s ease; display:inline-block; margin-right:.5rem; }
tbody.collapse:not(.show) + tbody.group-features, tbody.group-features.collapse { transition:height .25s ease; }
/* Rotate icon when collapsed via JS hook (Bootstrap adds 'collapsed' class to trigger element) */
tr.group-row[aria-expanded="false"] .toggle-icon { transform:rotate(-90deg); }
.feature-label { font-weight:500; font-size:.85rem; color:#1e293b; }
/* Unified horizontal padding for group & feature labels */
.table-feature-comparison th.feature-label, .table-feature-comparison .group-name { padding:.5rem var(--cell-pad-x); }
/* Remove any unintended extra padding inheritance */
.table-feature-comparison th.feature-label, .table-feature-comparison .group-name { margin:0; }
.feature-label .feature-note { font-size:.65rem; font-weight:400; color:#64748b; margin-top:4px; line-height:1.2; }

.status-cell { padding:.45rem .5rem; }
.mark { display:inline-flex; align-items:center; justify-content:center; width:52px; height:20px; padding:0 4px; border-radius:5px; font-size:.6rem; font-weight:600; line-height:1; letter-spacing:.3px; border:1px solid transparent; }
.mark-yes { background:var(--yes-bg); color:var(--yes); border-color:var(--yes-border); }
.mark-no { background:var(--no-bg); color:var(--no); border-color:var(--no-border); }
.mark-partial { background:var(--partial-bg); color:var(--partial); border-color:var(--partial-border); }
.mark-planned { background:var(--planned-bg); color:var(--planned); border-color:var(--planned-border); }
.mark-na { background:var(--na-bg); color:var(--na); border-color:var(--na-border); }

.comparison-legend { display:flex; flex-wrap:wrap; gap:.75rem; }
.legend-item { display:flex; align-items:center; gap:.4rem; }
.legend-item .mark { width:auto; min-width:48px; padding:0 6px; }

/* Top action buttons equalized */
.cmp-action-btn { min-width:150px; display:inline-flex; align-items:center; justify-content:center; }

.table-feature-comparison tbody td, .table-feature-comparison tbody th { border-top:1px solid var(--border); }

/* Mobile adjustments */
@media (max-width: 992px) {
  .feature-col { width:250px; }
  .platform-col { min-width:110px; }
  .mark { width:48px; height:19px; font-size:.55rem; }
}

/* Compact on very small screens */
@media (max-width: 576px) {
  .feature-col { width:200px; }
  .platform-col { min-width:95px; }
  .feature-label { font-size:.75rem; }
  .mark { width:44px; height:18px; }
}

/* Mobile optimization: remove vertical divider shadows on narrow viewports */
@media (max-width: 768px) {
  .comparison-header-row th.primary-col-first,
  .comparison-header-row th.partner-col-first,
  .table-feature-comparison tbody td.primary-separator-left,
  .table-feature-comparison tbody td.partner-separator-left { box-shadow:none !important; }
}