/* ============================================================
   FEATHERWORK INVOICING — COMPARE PAGE
   Loaded alongside base.css + home.css: reuses the shared header,
   footer, .container, .btn, and design tokens from those two files
   and only adds the sections unique to this page.
   ============================================================ */

/* ----------------------------------------------------------
   HERO — plain centered stack, no mockup (this page is a
   reference/decision aid, not a pitch — keep it text-first)
   ---------------------------------------------------------- */
.compare-hero { padding-block: var(--space-16) var(--space-12); }
.compare-hero__inner {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.compare-hero__eyebrow {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent);
}
.compare-hero h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); font-weight: 700; }
.compare-hero__sub { font-size: var(--text-lg); color: var(--color-text-secondary); }

/* ----------------------------------------------------------
   PRICING TABLE
   ---------------------------------------------------------- */
.compare-table-section { padding-block: var(--space-8) var(--space-20); }
.compare-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}
.compare-table th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-tertiary);
    font-weight: 600;
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border-strong);
}
.compare-table td {
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    vertical-align: top;
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table__name { font-family: var(--font-heading); font-weight: 700; color: var(--color-text-primary); white-space: nowrap; }
.compare-table__price { font-family: var(--font-heading); font-weight: 700; color: var(--color-text-primary); white-space: nowrap; }
.compare-table__price span { font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); color: var(--color-text-tertiary); }

/* Featherwork's own row — a subtle accent tint plus a left rule,
   not a loud badge; this is a reference table, not an ad. */
.compare-table__row--us { background: var(--color-accent-light); }
.compare-table__row--us .compare-table__name,
.compare-table__row--us .compare-table__price { position: relative; }
.compare-table__row--us .compare-table__name::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-5));
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-accent);
}
.compare-table__row--us td { color: var(--color-text-primary); }

.compare-table__footnote {
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    max-width: 68ch;
}

/* ----------------------------------------------------------
   OBJECTION HANDLING
   ---------------------------------------------------------- */
.objections {
    padding-block: var(--space-20);
    background: var(--color-surface-raised);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.objections .container { display: flex; flex-direction: column; gap: var(--space-10); max-width: 780px; }
.objection h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.objection p { font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-normal); }

/* ----------------------------------------------------------
   CTA BAND
   ---------------------------------------------------------- */
.compare-cta { padding-block: var(--space-20); text-align: center; }
.compare-cta__inner { max-width: 480px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.compare-cta h2 { font-size: var(--text-2xl); }
.compare-cta p { color: var(--color-text-secondary); }

@media (max-width: 640px) {
    .compare-table th, .compare-table td { padding: var(--space-3) var(--space-4); }
}