/* ============================================================
   NotesXD — Comparison landing pages (e.g. /vs/granola/, /es/alternativa-a-granola/)
   Builds on styles.css variables and components.
   ============================================================ */

.compare-hero { padding-top: calc(var(--nav-height) + 72px); padding-bottom: 56px; text-align: center; }
.compare-hero .container { max-width: 900px; }
.compare-hero h1 { font-size: clamp(34px, 5.5vw, 60px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; margin: 18px 0 18px; color: var(--text-primary); }
.compare-hero .hero-subtitle { margin-left: auto; margin-right: auto; }
.compare-hero .hero-actions { justify-content: center; }
.compare-hero-note { margin-top: 18px; font-size: 14px; color: var(--text-tertiary); }

.compare-section { padding: 72px 0; }
.compare-section-alt { background: var(--bg-secondary); }
.compare-section .container { max-width: 1040px; }
.compare-section h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 14px; color: var(--text-primary); text-align: center; }
.compare-lead { font-size: 18px; line-height: 1.6; color: var(--text-secondary); max-width: 760px; margin: 0 auto 36px; text-align: center; }

/* Comparison table */
.compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-card); box-shadow: var(--shadow-sm); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; line-height: 1.5; }
.compare-table caption { caption-side: bottom; text-align: left; padding: 14px 18px; font-size: 13px; color: var(--text-tertiary); }
.compare-table th, .compare-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.compare-table thead th { font-size: 14px; font-weight: 700; color: var(--text-primary); background: var(--bg-secondary); position: sticky; top: 0; }
.compare-table thead th.col-notesxd { color: var(--accent); }
.compare-table tbody th { font-weight: 600; color: var(--text-primary); width: 28%; }
.compare-table td { color: var(--text-secondary); width: 36%; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table sup a { color: var(--accent); text-decoration: none; font-size: 11px; font-weight: 600; margin-left: 2px; }
.compare-table .yes { color: var(--text-primary); font-weight: 600; }

/* Differentiators */
.diff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.diff-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 28px; box-shadow: var(--shadow-sm); }
.diff-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--badge-bg); color: var(--badge-text); font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.diff-card h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--text-primary); }
.diff-card p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

/* Import steps */
.import-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: istep; }
.import-step { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 24px; }
.import-step h3 { font-size: 17px; font-weight: 700; margin: 12px 0 8px; color: var(--text-primary); }
.import-step p, .import-step li { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.import-step ul { padding-left: 18px; margin-top: 6px; }
.import-step code, .compare-section code { font-size: 0.92em; background: var(--bg-secondary); padding: 1px 6px; border-radius: 6px; }
.import-note { margin-top: 20px; font-size: 14px; color: var(--text-tertiary); text-align: center; }

/* Honest column lists */
.honest-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.honest-cols-single { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }
.honest-col { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 28px; }
.honest-col h3 { font-size: 19px; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); }
.honest-col ul { padding-left: 20px; }
.honest-col li { font-size: 15px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 6px; }

/* FAQ */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); padding: 4px 0; }
.faq-item summary { cursor: pointer; list-style: none; padding: 18px 32px 18px 0; font-size: 17px; font-weight: 600; color: var(--text-primary); position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 4px; top: 14px; font-size: 22px; font-weight: 400; color: var(--text-tertiary); }
.faq-item[open] summary::after { content: '–'; }
.faq-item p { padding: 0 0 18px; font-size: 16px; line-height: 1.65; color: var(--text-secondary); }
.faq-item a, .compare-sources a, .compare-lead a, .import-note a { color: var(--accent); }

/* Sources */
.compare-sources { max-width: 900px; margin: 0 auto; font-size: 14px; line-height: 1.7; color: var(--text-tertiary); }
.compare-sources ol { padding-left: 22px; }
.compare-sources li { margin-bottom: 4px; word-break: break-word; }

/* Home: "Coming from Granola?" block */
.granola-callout-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

.lang-switch { font-size: 13px; font-weight: 600; }

@media (max-width: 768px) {
    .diff-grid, .honest-cols, .import-steps { grid-template-columns: 1fr; }
    .compare-section { padding: 56px 0; }
}