/* =====================================================================
   COMPARISON PAGES — SHARED STYLES
   Applies to: VsDeputy, VsTanda, VsDroppah, VsRosterIt, VsConnecteam,
               VsRosterElf, VsHumanforce, Compare (roundup)
   Loaded AFTER functionPages.css + Industries.css (reuses their tokens:
   --accent, --surface, --border, --text, --text-mid, --text-light,
   --radius-*, --shadow-*, .hero, .section, .container, buttons)
   ===================================================================== */

/* ===== LAST-UPDATED BADGE ===== */
.cmp-updated {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: var(--text-light);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .3rem .85rem;
    margin-top: 1rem;
}

/* ===== COMPARISON TABLE ===== */
.cmp-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(16,24,40,.06));
    background: var(--surface);
    -webkit-overflow-scrolling: touch;
}

.cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    min-width: 640px;
}

.cmp-table th,
.cmp-table td {
    padding: .9rem 1.1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    color: var(--text-mid);
    vertical-align: top;
}

.cmp-table thead th {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    background: var(--surface);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td {
    border-bottom: none;
}

.cmp-table tbody th {
    font-weight: 600;
    color: var(--text);
    background: transparent;
}

/* Highlight the RosterMate column */
.cmp-table .cmp-us {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

.cmp-table thead .cmp-us {
    color: var(--accent);
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
    .cmp-table .cmp-us { background: rgba(21, 93, 238, .06); }
}

/* Yes / No / Partial markers */
.cmp-yes, .cmp-no, .cmp-partial {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    white-space: nowrap;
}

.cmp-yes { color: #16a34a; }
.cmp-no { color: #dc2626; }
.cmp-partial { color: #d97706; }

.cmp-yes svg, .cmp-no svg, .cmp-partial svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

/* ===== PROS / CONS TWO-UP ===== */
.cmp-proscons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 860px) {
    .cmp-proscons { grid-template-columns: 1fr; }
}

.cmp-pc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.8rem 2rem;
}

.cmp-pc-card h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin: 0 0 1rem;
    color: var(--text);
}

.cmp-pc-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.cmp-pc-card li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    color: var(--text-mid);
    font-size: .92rem;
    line-height: 1.55;
}

.cmp-pc-card li svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: .18rem;
}

.cmp-pc-card li.pc-plus svg { fill: #16a34a; }
.cmp-pc-card li.pc-minus svg { fill: #d97706; }

/* ===== VERDICT PANEL ===== */
.cmp-verdict {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 2rem 2.2rem;
    max-width: 860px;
    margin: 0 auto;
}

.cmp-verdict h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin: 0 0 .8rem;
    color: var(--text);
}

.cmp-verdict p {
    color: var(--text-mid);
    line-height: 1.65;
    margin: 0 0 .8rem;
}

.cmp-verdict p:last-of-type { margin-bottom: 1.4rem; }

/* ===== PRICING EXAMPLE CARDS ===== */
.cmp-price-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.cmp-price-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.8rem;
    text-align: center;
}

.cmp-price-card.cmp-price-us {
    border-color: var(--accent);
    box-shadow: 0 6px 24px rgba(21, 93, 238, .12);
}

.cmp-price-card .cmp-price-brand {
    font-weight: 700;
    color: var(--text);
    font-size: 1rem;
    margin-bottom: .6rem;
}

.cmp-price-card .cmp-price-amount {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
}

.cmp-price-card .cmp-price-note {
    font-size: .82rem;
    color: var(--text-light);
    margin-top: .5rem;
    line-height: 1.5;
}

/* ===== ROUNDUP (alternatives hub) CARDS ===== */
.cmp-alt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.cmp-alt-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.8rem 2rem;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform .25s, border-color .25s, box-shadow .25s;
}

.cmp-alt-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(16,24,40,.1));
}

.cmp-alt-card h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin: 0 0 .5rem;
    color: var(--text);
}

.cmp-alt-card .cmp-alt-meta {
    font-size: .8rem;
    color: var(--text-light);
    margin-bottom: .7rem;
}

.cmp-alt-card p {
    color: var(--text-mid);
    font-size: .9rem;
    line-height: 1.6;
    margin: 0 0 1rem;
    flex-grow: 1;
}

.cmp-alt-card .card-arrow {
    color: var(--accent);
    font-weight: 600;
    font-size: .88rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.cmp-alt-card .card-arrow svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

/* ===== DISCLAIMER ===== */
.cmp-disclaimer {
    max-width: 860px;
    margin: 2rem auto 0;
    font-size: .78rem;
    color: var(--text-light);
    line-height: 1.6;
    text-align: center;
}