/* ═══════════════════════════════════════════════════════════════════
   compare.css: /compare and /compare/:slug
   Written 2026-09-16 in the blog-index.css manner.

   NO :root, NO RESET, NO body{} IN THIS FILE.

   It builds on what main.css and home.css already provide (--dark, --amber,
   --border-dark, --muted-dark, --gutter, .wrap, .eyebrow, .btn-primary,
   .btn-ghost, the Sora/DM Sans pairing) and adds nothing global. Every
   selector is under a #cmp-* id or a .cmp-* class.

   The one design decision worth recording: the comparison table is a real
   <table> on desktop and becomes stacked rows on a phone with CSS alone,
   using the data-label each <td> already carries. No script, no wrapper
   that scrolls sideways; a three-column table at 390px is unreadable and a
   sideways scroll hides the column that matters (ours).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────── */
#cmp-hero {
    background: var(--dark);
    padding: 9rem var(--gutter) 3.5rem;
    border-bottom: 1px solid var(--border-dark);
}
.cmp-crumbs {
    display: flex;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: var(--muted-dark);
    margin-bottom: 1.5rem;
}
.cmp-crumbs a { color: var(--muted-dark); text-decoration: none; }
.cmp-crumbs a:hover { color: #fff; }
#cmp-hero h1 {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    max-width: 18em;
    margin: 0 0 1.25rem;
}
.cmp-lede {
    font-size: 1.15rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.72);
    max-width: 42em;
    margin: 0;
}

/* ── Verdict band ──────────────────────────────────────────────── */
#cmp-verdict {
    background: #111;
    padding: 3.5rem var(--gutter);
    border-bottom: 1px solid var(--border-dark);
}
#cmp-verdict .eyebrow { color: var(--amber); margin-bottom: 1rem; }
.cmp-verdict-text {
    font-family: 'Sora', sans-serif;
    font-weight: 500;
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    line-height: 1.5;
    letter-spacing: -0.01em;
    max-width: 34em;
    margin: 0;
}

/* ── When each ─────────────────────────────────────────────────── */
#cmp-when { padding: 5rem var(--gutter); background: var(--dark); }
.cmp-when-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}
.cmp-when-col h2 {
    font-family: 'Sora', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-dark);
}
.cmp-when-us h2 { border-bottom-color: var(--amber); }
.cmp-when-col ul { list-style: none; margin: 0; padding: 0; }
.cmp-when-col li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.9rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.8);
}
.cmp-when-col li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 8px;
    height: 1px;
    background: var(--muted-dark);
}
.cmp-when-us li::before { background: var(--amber); }

/* ── The table ─────────────────────────────────────────────────── */
#cmp-table { padding: 0 var(--gutter) 5rem; background: var(--dark); }
#cmp-table h2,
#cmp-example h2,
#cmp-giveup h2,
#cmp-faq h2,
#cmp-sources h2,
#cmp-related h2,
#cmp-cta h2 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0 0 1.5rem;
}
.cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    line-height: 1.6;
}
.cmp-table th,
.cmp-table td {
    padding: 1.1rem 1rem 1.1rem 0;
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid var(--border-dark);
}
.cmp-table thead th {
    font-family: 'Sora', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-dark);
    padding-top: 0;
}
.cmp-table thead th:last-child { color: var(--amber); }
.cmp-table tbody th {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
    width: 18%;
}
.cmp-table td { color: rgba(255,255,255,0.78); width: 41%; }
.cmp-table td:last-child { color: rgba(255,255,255,0.92); }

/* ── Example, give up, FAQ, sources ────────────────────────────── */
#cmp-example {
    background: #111;
    padding: 5rem var(--gutter);
    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
}
#cmp-example p {
    max-width: 42em;
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.8);
    margin: 0 0 1.25rem;
}
#cmp-example p:last-child { margin-bottom: 0; }

#cmp-giveup { padding: 5rem var(--gutter); background: var(--dark); }
.cmp-giveup-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 42em;
}
.cmp-giveup-list li {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border-dark);
    line-height: 1.65;
    color: rgba(255,255,255,0.8);
}
.cmp-giveup-list li:first-child { border-top: 1px solid var(--border-dark); }

#cmp-faq {
    padding: 5rem var(--gutter);
    background: var(--dark);
    border-top: 1px solid var(--border-dark);
}
.cmp-faq-list { margin: 0; max-width: 42em; }
.cmp-faq-item { margin-bottom: 2rem; }
.cmp-faq-item dt {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}
.cmp-faq-item dd { margin: 0; line-height: 1.7; color: rgba(255,255,255,0.78); }

#cmp-sources {
    padding: 3.5rem var(--gutter);
    background: #0D0D0D;
    border-top: 1px solid var(--border-dark);
}
#cmp-sources h2 { font-size: 1.1rem; }
.cmp-sources-list {
    margin: 0 0 1.25rem;
    padding: 0 0 0 1.1rem;
    max-width: 42em;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--muted-dark);
}
.cmp-sources-list li { margin-bottom: 0.5rem; }
.cmp-sources-note { font-size: 0.9rem; color: var(--muted-dark); max-width: 42em; margin: 0; }

/* ── CTA and related ───────────────────────────────────────────── */
#cmp-cta {
    padding: 5rem var(--gutter);
    background: var(--dark);
    border-top: 1px solid var(--border-dark);
}
#cmp-cta p {
    max-width: 38em;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.78);
    margin: 0 0 1.75rem;
}
.cmp-cta-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }

#cmp-related {
    padding: 4rem var(--gutter) 5rem;
    background: #111;
    border-top: 1px solid var(--border-dark);
}
.cmp-related-list,
.cmp-index-list { list-style: none; margin: 0; padding: 0; }
.cmp-related-link,
.cmp-index-link {
    display: block;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-dark);
    text-decoration: none;
    color: inherit;
}
.cmp-related-list li:first-child .cmp-related-link,
.cmp-index-list li:first-child .cmp-index-link { border-top: 1px solid var(--border-dark); }
.cmp-related-label,
.cmp-index-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 0.3rem;
}
.cmp-related-title,
.cmp-index-title {
    display: block;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.015em;
}
.cmp-related-link:hover .cmp-related-title,
.cmp-index-link:hover .cmp-index-title { color: var(--amber); }
.cmp-index-desc {
    display: block;
    margin-top: 0.5rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    max-width: 48em;
}
#cmp-index { padding: 3rem var(--gutter) 2rem; background: var(--dark); }

/* ── Phones ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #cmp-hero { padding-top: 7rem; padding-bottom: 2.5rem; }
    .cmp-when-grid { grid-template-columns: 1fr; gap: 2.25rem; }

    /* The table becomes rows: each dimension is a heading, each cell a
       labelled paragraph. The data-label comes from the markup. */
    .cmp-table thead { display: none; }
    .cmp-table,
    .cmp-table tbody,
    .cmp-table tr,
    .cmp-table th,
    .cmp-table td { display: block; width: auto; }
    .cmp-table tr { padding: 1.1rem 0; border-bottom: 1px solid var(--border-dark); }
    .cmp-table tbody th { border: 0; padding: 0 0 0.6rem; font-size: 1rem; width: auto; }
    .cmp-table td { border: 0; width: auto; padding: 0.4rem 0 0.4rem 0.9rem; border-left: 2px solid var(--border-dark); }
    .cmp-table td:last-child { border-left-color: var(--amber); margin-top: 0.5rem; }
    .cmp-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted-dark);
        margin-bottom: 0.2rem;
    }
    .cmp-table td:last-child::before { color: var(--amber); }

    /* Undoing home.css's blanket !important rules for sections and h2 on
       phones, the same block every non-home page carries. */
    #cmp-verdict, #cmp-when, #cmp-table, #cmp-example, #cmp-giveup,
    #cmp-faq, #cmp-sources, #cmp-cta, #cmp-related, #cmp-index {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    #cmp-table { padding-top: 0 !important; }
    .cmp-when-col h2 { font-size: 1.25rem !important; }
    #cmp-table h2, #cmp-example h2, #cmp-giveup h2, #cmp-faq h2,
    #cmp-related h2, #cmp-cta h2 { font-size: 1.5rem !important; }
    #cmp-sources h2 { font-size: 1.05rem !important; }
}