/* GeckoFlag: comparison pages (compare/*.html) */

  /* ---------- Section headings (H2 with bottom rule, this page only) ---------- */
  .compare-body > h2 {
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gf-border);
    position: relative;
  }
  .compare-body > h2::after {
    content: ""; position: absolute; left: 0; bottom: -2px;
    width: 64px; height: 2px; background: var(--gf-brand);
  }

  .compare-lead { font-size: 1.05rem; }
  .compare-updated { font-size: 0.85rem; font-weight: 600; color: var(--gf-text-muted); margin: -4px 0 24px; }

  /* ---------- Summary cards ---------- */
  .compare-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px 0 12px; }
  .compare-card {
    background: var(--gf-surface); border-radius: 16px; box-shadow: var(--shadow-card);
    padding: 20px; display: flex; flex-direction: column; gap: 8px;
  }
  .compare-card.is-self { outline: 2px solid var(--gf-brand); }
  .compare-card h3 { font-size: 1.05rem; margin: 0; }
  .compare-card .compare-card-tag {
    align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
    padding: 3px 10px; border-radius: 999px; background: var(--gf-panel); color: var(--gf-text-muted);
  }
  .compare-card.is-self .compare-card-tag { background: var(--gf-brand); color: #fff; }
  .compare-card p { font-size: 0.9rem; margin: 0; }

  /* ---------- Comparison table ---------- */
  .compare-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 12px;
    background: var(--gf-surface); border-radius: 16px; box-shadow: var(--shadow-card);
  }
  .compare-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9rem; }
  .compare-table caption { text-align: left; padding: 14px 16px 0; font-size: 0.8rem; color: var(--gf-text-muted); caption-side: bottom; padding-bottom: 14px; }
  .compare-table th, .compare-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--gf-border); }
  .compare-table thead th { font-family: 'Sora', sans-serif; font-size: 0.92rem; background: var(--gf-panel); white-space: nowrap; }
  .compare-table thead th.is-self { background: var(--gf-brand); color: #fff; }
  .compare-table tbody th { font-weight: 700; color: var(--gf-text); width: 170px; min-width: 130px; }
  .compare-table td { color: var(--gf-text-muted); }
  .compare-table td.is-self { background: rgba(15,110,106,.05); color: var(--gf-text); }
  .compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }
  .compare-mark { font-weight: 700; margin-right: 4px; }
  .compare-mark.yes { color: var(--gf-brand); }
  .compare-mark.part { color: #B7791F; }
  .compare-mark.no { color: var(--gf-accent); }
  .compare-table-note { font-size: 0.8rem; color: var(--gf-text-muted); margin: 0 0 16px; }

  /* ---------- Boxes ---------- */
  .compare-box {
    background: var(--gf-surface); border-radius: 14px; box-shadow: var(--shadow-card);
    padding: 20px 24px; margin: 0 0 20px;
  }
  .compare-box h3 { font-size: 1.02rem; margin: 0 0 10px; }
  .compare-box p:last-child, .compare-box ul:last-child { margin-bottom: 0; }
  .article-body .compare-box ul li:last-child { margin-bottom: 0; }

  /* ---------- FAQ ---------- */
  .compare-faq { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
  .compare-faq details {
    background: var(--gf-surface); border-radius: 14px; box-shadow: var(--shadow-card); padding: 0 20px;
  }
  .compare-faq summary {
    cursor: pointer; font-weight: 700; color: var(--gf-text); padding: 16px 0; list-style: none;
    display: flex; justify-content: space-between; gap: 12px;
  }
  .compare-faq summary::-webkit-details-marker { display: none; }
  .compare-faq summary::after { content: "+"; color: var(--gf-brand); font-weight: 700; }
  .compare-faq details[open] summary::after { content: "−"; }
  .compare-faq details p { padding: 0 0 16px; margin: 0; }

  /* ---------- CTA ---------- */
  .compare-cta {
    background: var(--gradient-brand); border-radius: 20px; padding: 32px; margin: 40px 0 0; text-align: center;
    box-shadow: var(--shadow-raised-lg);
  }
  .compare-cta h2 { color: #fff; margin: 0 0 8px !important; }
  .compare-cta p { color: rgba(255,255,255,.92); margin: 0 0 20px; }
  .compare-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .compare-cta a {
    display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: 999px;
    font-weight: 700; white-space: nowrap; transition: transform 0.15s ease;
  }
  .compare-cta a:hover { transform: translateY(-1px); }
  .compare-cta .cta-main { background: #fff; color: var(--gf-brand-dark); }
  .compare-cta .cta-sub { border: 2px solid rgba(255,255,255,.85); color: #fff; }

  /* ---------- Sources ---------- */
  .compare-sources { font-size: 0.82rem; }
  .article-body .compare-sources li { margin-bottom: 6px; }
  .article-body a.inline-link { color: var(--gf-brand-dark); text-decoration: underline; text-underline-offset: 3px; }

  /* ---------- Two-column summary (GeckoFlag vs Backlog) ---------- */
  .compare-summary.is-two { grid-template-columns: repeat(2, 1fr); }

  /* ---------- Personal note box ("Backlog is a great tool") ---------- */
  .compare-box.compare-respect { border-left: 4px solid #2EA86B; margin-bottom: 28px; }
  .compare-box.compare-respect p { margin: 0 0 10px; }

  /* ---------- Four-tool page (GeckoFlag vs Plane vs OpenProject vs Taiga) ---------- */
  .compare-summary.is-four { grid-template-columns: repeat(2, 1fr); }
  .compare-table.is-wide { min-width: 780px; font-size: 0.86rem; }
  .compare-table.is-wide tbody th { width: 120px; min-width: 110px; }
  .compare-table.is-wide th, .compare-table.is-wide td { padding: 12px 10px; }

  @media (max-width: 780px) {
    .compare-summary, .compare-summary.is-two, .compare-summary.is-four { grid-template-columns: 1fr; }
    .compare-cta { padding: 24px 20px; }
  }