/* =============================================================
   WestgateFS — Compare  v1.0
   Shared editorial UX system for all compare pages:
     /compare/bookkeeper-vs-cpa/
     /compare/in-house-vs-outsourced-bookkeeping/
     /compare/bookkeeping-vs-accounting/
     /compare/online-vs-desktop/
     /compare/freelance-bookkeeper-vs-firm/
     /compare/live-vs-proadvisor/
     /compare/cash-vs-accrual/
     /compare/qbo-vs-xero/
   Layered on top of global.css. No JS required.
   FAQ accordion: load conversion.js (class-based, works anywhere).
   ============================================================= */

/* ---------- 1. COMPARE HERO ----------
   Editorial. Dual-audience. The question, clearly stated.
   Includes entity "chips" showing what's being compared.
   ------------------------------------------------------------ */

.wfs-compare-hero {
  padding-block: clamp(52px, 6.5vw, 88px) clamp(60px, 7vw, 100px);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.wfs-compare-hero__content {
  max-width: 52rem;
}

/* The "X vs Y" entity strip */

.wfs-compare-hero__entities {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.wfs-compare-hero__entity {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-5);
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
  line-height: 1;
}

.wfs-compare-hero__entity--primary {
  background: linear-gradient(135deg, var(--paper) 0%, var(--brand-tint) 100%);
  border-color: var(--brand);
  color: var(--ink-1);
}

.wfs-compare-hero__vs {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-4);
  letter-spacing: var(--tk-wide);
  text-transform: uppercase;
  flex-shrink: 0;
}

.wfs-compare-hero__heading {
  margin-top: var(--sp-6);
  text-wrap: balance;
}

.wfs-compare-hero__lede {
  margin-top: var(--sp-5);
  max-width: 46rem;
}

/* Jump links to key sections */

.wfs-compare-hero__jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-fine);
}

.wfs-compare-hero__jump a {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--brand-deep);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-fast) var(--ease);
}

.wfs-compare-hero__jump a:hover {
  text-decoration-color: var(--brand);
}

/* ---------- 2. QUICK ANSWER (TL;DR) ----------
   Immediately answers the comparison question.
   AI featured-snippet target. Semantic <dl> structure.
   ------------------------------------------------------------ */

.wfs-compare-answer {
  background: var(--paper-warm);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(var(--sp-8), 3vw, var(--sp-12));
}

.wfs-compare-answer__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-6) var(--sp-10);
  align-items: flex-start;
}

.wfs-compare-answer__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tk-wide);
  text-transform: uppercase;
  color: var(--brand);
  padding-top: 0.15em;
  white-space: nowrap;
}

.wfs-compare-answer__text {
  font-size: clamp(1rem, 0.5vw + 0.95rem, 1.0625rem);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
  text-wrap: pretty;
}

.wfs-compare-answer__text strong {
  color: var(--ink-1);
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .wfs-compare-answer__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
}

/* ---------- 3. COMPARE SPLIT (what each does) ----------
   Two equal columns. Each describes one entity.
   Left = primary entity. Right = secondary entity.
   ------------------------------------------------------------ */

.wfs-compare-split__grid > [class*="col-"] {
  display: flex;
}

.wfs-compare-split__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-8);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  width: 100%;
}

.wfs-compare-split__col--primary {
  background: linear-gradient(160deg, var(--paper) 0%, var(--brand-tint) 100%);
  border-color: var(--brand);
}

.wfs-compare-split__col--secondary {
  background: var(--paper);
}

.wfs-compare-split__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.wfs-compare-split__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tk-wide);
  text-transform: uppercase;
}

.wfs-compare-split__col--primary .wfs-compare-split__label {
  color: var(--brand);
}

.wfs-compare-split__col--secondary .wfs-compare-split__label {
  color: var(--ink-3);
}

.wfs-compare-split__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: var(--tk-snug);
  color: var(--ink-1);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.wfs-compare-split__intro {
  font-size: var(--fs-md);
  color: var(--ink-2);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

/* Function list within each split col */

.wfs-compare-split__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.wfs-compare-split__list li {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: var(--lh-body);
  padding-left: var(--sp-5);
  position: relative;
}

.wfs-compare-split__col--primary .wfs-compare-split__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.56em;
  width: 4px;
  height: 4px;
  background: var(--brand);
  border-radius: var(--r-pill);
}

.wfs-compare-split__col--secondary .wfs-compare-split__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 1px;
  background: var(--line-strong);
}

/* Not-in-scope notice */

.wfs-compare-split__scope {
  margin-top: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper-mist);
  border: 1px solid var(--line-fine);
  border-radius: var(--r-lg);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: var(--lh-body);
  font-style: italic;
}

/* ---------- 4. COMPARISON TABLE ----------
   Semantic, accessible, AI-extractable.
   Supports category group rows spanning all columns.
   Mobile: horizontal scroll with gradient fade hint.
   ------------------------------------------------------------ */

.wfs-compare-table__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(to right, white 30%, rgba(255,255,255,0)), linear-gradient(to left, white 30%, rgba(255,255,255,0)) 100% 0, radial-gradient(ellipse at left, rgba(0,0,0,0.08), transparent 70%), radial-gradient(ellipse at right, rgba(0,0,0,0.08), transparent 70%) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.wfs-compare-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--paper);
  border-radius: var(--r-xl);
  overflow: hidden;
}

/* Column header row */

.wfs-compare-table thead tr {
  background: var(--paper-mist);
}

.wfs-compare-table thead th {
  padding: var(--sp-5) var(--sp-6);
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--line);
}

.wfs-compare-table thead th:first-child {
  width: 36%;
  color: var(--ink-3);
}

/* Primary entity column — highlighted header */

.wfs-compare-table thead th.wfs-compare-table__col--primary {
  background: linear-gradient(135deg, var(--paper) 0%, var(--brand-tint) 100%);
  color: var(--ink-1);
  border-left: 2px solid var(--brand);
}

/* Category group row — spans all columns */

.wfs-compare-table__group td {
  padding: var(--sp-3) var(--sp-6);
  background: var(--paper-warm);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tk-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Data rows */

.wfs-compare-table tbody tr:not(.wfs-compare-table__group) {
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t-fast) var(--ease);
}

.wfs-compare-table tbody tr:not(.wfs-compare-table__group):last-child {
  border-bottom: 0;
}

.wfs-compare-table tbody tr:not(.wfs-compare-table__group):hover {
  background: var(--paper-mist);
}

/* Row header — aspect being compared */

.wfs-compare-table tbody th {
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  text-align: left;
  vertical-align: top;
  background: var(--paper);
}

/* Data cells */

.wfs-compare-table tbody td {
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  vertical-align: top;
  line-height: var(--lh-body);
}

/* Primary entity column data cells */

.wfs-compare-table tbody td.wfs-compare-table__col--primary {
  background: rgba(197, 106, 46, 0.025);
  border-left: 2px solid rgba(197, 106, 46, 0.18);
  color: var(--ink-1);
  font-weight: 500;
}

/* Indicator symbols */

.wfs-compare-table .wfs-yes {
  color: var(--brand);
  font-weight: 600;
}

.wfs-compare-table .wfs-no {
  color: var(--ink-4);
}

.wfs-compare-table .wfs-partial {
  color: var(--ink-3);
  font-style: italic;
}

/* ---------- 5. VERDICT / DECISION AID ----------
   "When to choose which" — the conversion moment.
   Primary + secondary + synthesis row.
   ------------------------------------------------------------ */

.wfs-compare-verdict__grid > [class*="col-"] {
  display: flex;
}

.wfs-compare-verdict__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-8);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  width: 100%;
}

.wfs-compare-verdict__card--primary {
  background: linear-gradient(160deg, var(--paper) 0%, var(--brand-tint) 100%);
  border-color: var(--brand);
}

.wfs-compare-verdict__card--secondary {
  background: var(--paper);
}

.wfs-compare-verdict__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tk-wide);
  text-transform: uppercase;
}

.wfs-compare-verdict__card--primary .wfs-compare-verdict__eyebrow {
  color: var(--brand);
}

.wfs-compare-verdict__card--secondary .wfs-compare-verdict__eyebrow {
  color: var(--ink-3);
}

.wfs-compare-verdict__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: var(--tk-snug);
  color: var(--ink-1);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.wfs-compare-verdict__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex-grow: 1;
}

.wfs-compare-verdict__list li {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: var(--lh-body);
  padding-left: var(--sp-5);
  position: relative;
}

.wfs-compare-verdict__card--primary .wfs-compare-verdict__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.56em;
  width: 4px;
  height: 4px;
  background: var(--brand);
  border-radius: var(--r-pill);
}

.wfs-compare-verdict__card--secondary .wfs-compare-verdict__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 1px;
  background: var(--line-strong);
}

/* Full-width synthesis row — "you need both" */

.wfs-compare-verdict__synthesis {
  padding: var(--sp-8);
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-6) var(--sp-10);
  align-items: flex-start;
}

.wfs-compare-verdict__synthesis-label {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--ink-1);
  letter-spacing: var(--tk-snug);
  line-height: var(--lh-snug);
  white-space: nowrap;
}

.wfs-compare-verdict__synthesis-body {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
}

.wfs-compare-verdict__synthesis-body strong {
  color: var(--ink-1);
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .wfs-compare-verdict__synthesis {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

/* ---------- 6. EDITORIAL CALLOUT ----------
   Key insight or positioning statement.
   Used to surface the most important takeaway on the page.
   ------------------------------------------------------------ */

.wfs-compare-callout {
  padding: var(--sp-8) var(--sp-10);
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  border-left: 3px solid var(--brand);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.wfs-compare-callout__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tk-wide);
  text-transform: uppercase;
  color: var(--brand);
}

.wfs-compare-callout__text {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-lg), 1.5vw, var(--fs-xl));
  font-weight: 500;
  color: var(--ink-1);
  letter-spacing: var(--tk-snug);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.wfs-compare-callout__sub {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

@media (max-width: 767.98px) {
  .wfs-compare-callout {
    padding: var(--sp-6);
  }
}

/* ---------- 7. POSITIONING SECTION ----------
   Honest firm-context section. Where WestgateFS sits in the comparison.
   Editorial, non-salesy. Complements the analysis.
   ------------------------------------------------------------ */

.wfs-compare-positioning__inner {
  max-width: 60rem;
}

.wfs-compare-positioning__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.wfs-compare-positioning__body p strong {
  color: var(--ink-1);
  font-weight: 600;
}

.wfs-compare-positioning__card {
  margin-top: var(--sp-4);
  padding: var(--sp-7);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.wfs-compare-positioning__card-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tk-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}

.wfs-compare-positioning__card-text {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

/* ---------- 8. RELATED COMPARISONS ----------
   Links to other /compare/* pages.
   Compact editorial grid. Internal routing.
   ------------------------------------------------------------ */

.wfs-compare-related__grid > [class*="col-"] {
  display: flex;
}

.wfs-compare-related__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  width: 100%;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease-out);
}

.wfs-compare-related__card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  text-decoration: none;
}

.wfs-compare-related__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tk-wide);
  text-transform: uppercase;
  color: var(--ink-4);
  transition: color var(--t-fast) var(--ease);
}

.wfs-compare-related__card:hover .wfs-compare-related__label {
  color: var(--brand);
}

.wfs-compare-related__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: var(--tk-snug);
  color: var(--ink-1);
  line-height: var(--lh-snug);
  text-wrap: balance;
}