/* ===== Comparison pages (/compare, /compare/<x>) ===== */

.cx-page {
    min-height: 100vh;
    background: #f8fafc;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6rem 2rem 0;
    overflow-x: clip;
    font-family: 'Inter', system-ui, sans-serif;
}

.cx-page [data-anim] {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(80ms + var(--delay, 0ms));
}
.cx-page [data-anim="fade-up"]   { transform: translateY(40px); }
.cx-page [data-anim="fade-right"]{ transform: translateX(-40px); }
.cx-page [data-anim="fade-left"] { transform: translateX(40px); }
.cx-page [data-anim="zoom-in"]   { transform: scale(0.95); }
.cx-page [data-anim].in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .cx-page [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.cx-glow { position: absolute; pointer-events: none; border-radius: 50%; z-index: 0; filter: blur(60px); }
.cx-glow--tl { top: -100px; left: -120px; width: 560px; height: 560px;
    background: radial-gradient(circle, rgba(0,168,150,0.08) 0%, transparent 65%); }

.cx-eyebrow {
    display: inline-block; color: #00A896; font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; background: rgba(0,168,150,0.08);
    border: 1px solid rgba(0,168,150,0.25); padding: 5px 16px; border-radius: 999px;
}

/* ── Hero ── */
.cx-hero {
    position: relative; z-index: 1; width: 100%; max-width: 900px;
    text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px;
    padding: 2rem 0 3rem;
}
.cx-title {
    font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 800; color: #0f172a;
    letter-spacing: -0.03em; line-height: 1.12;
}
.cx-title .cx-accent { color: #00A896; }
.cx-sub { font-size: 1.02rem; color: #64748b; line-height: 1.7; max-width: 720px; }

/* big faded watermark behind the hero (matches other pages) */
.cx-watermark {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -32%);
    font-size: clamp(64px, 12vw, 150px); font-weight: 900; letter-spacing: -0.02em;
    color: rgba(15,23,42,0.05); white-space: nowrap; pointer-events: none; z-index: 0; user-select: none;
}
.cx-hero > *:not(.cx-watermark) { position: relative; z-index: 1; }
@media (max-width: 600px) { .cx-watermark { font-size: clamp(48px, 14vw, 60px); } }
.cx-cta-row { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.cx-btn {
    display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
    font-size: 0.95rem; font-weight: 700; padding: 13px 26px; border-radius: 8px;
    border: 1.5px solid transparent; transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}
.cx-btn svg { width: 16px; height: 16px; }
.cx-btn--primary { background: linear-gradient(180deg,#00bfac,#00A896); color: #fff; box-shadow: 0 6px 18px rgba(0,168,150,0.35); }
.cx-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,168,150,0.5); }
.cx-btn--ghost { background: #fff; color: #0f172a; border-color: #e2e8f0; }
.cx-btn--ghost:hover { border-color: #00A896; color: #00A896; }

/* ── Section shell ── */
.cx-sec { position: relative; z-index: 1; width: 100%; max-width: 1080px; margin: 4rem auto 0; }
.cx-sec--band {
    max-width: none; width: 100vw; margin: 4rem 0 0 calc(50% - 50vw); background: #fff;
    padding: 4rem max(2rem, calc((100vw - 1080px)/2));
}
.cx-sec-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 2.5rem; }
.cx-sec-title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; color: #0f172a; letter-spacing: -0.03em; line-height: 1.15; }

/* ── Quick verdict ── */
.cx-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 0 auto; }
.cx-vcard { border-radius: 20px; padding: 26px; border: 1px solid rgba(15,23,42,0.08); }
.cx-vcard--z { background: #0b1020; border-color: rgba(0,168,150,0.35); box-shadow: 0 20px 50px rgba(0,168,150,0.16); }
.cx-vcard--c { background: #fff; }
.cx-vcard h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 16px; }
.cx-vcard--z h3 { color: #2dd4bf; }
.cx-vcard--c h3 { color: #0f172a; }
.cx-vcard ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.cx-vcard li { position: relative; padding-left: 26px; font-size: 0.9rem; line-height: 1.45; }
.cx-vcard li::before {
    content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 14px;
    background: no-repeat center/contain;
}
.cx-vcard--z li { color: rgba(255,255,255,0.85); }
.cx-vcard--z li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.cx-vcard--c li { color: #475569; }
.cx-vcard--c li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }

/* ── At-a-glance table ── */
.cx-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 22px 4px; }
.cx-table { display: grid; grid-template-columns: 1fr 1.25fr 1.15fr; min-width: 720px; }
.cx-cell { padding: 15px 20px; border-bottom: 1px solid #e8edf3; font-size: 0.88rem; line-height: 1.5; display: flex; align-items: center; }
.cx-cell--param { font-weight: 700; color: #0f172a; padding-left: 0; }
.cx-cell--z { background: #fff; color: #134e4a;
    box-shadow: 18px 0 28px -22px rgba(15,23,42,0.14), -18px 0 28px -22px rgba(15,23,42,0.14); }
.cx-cell--c { color: #64748b; }
.cx-cell--z-top, .cx-cell--c-top { justify-content: center; font-weight: 800; font-size: 1rem; color: #0f172a; padding: 20px; }
.cx-cell--z-top { border-radius: 16px 16px 0 0; background: #fff;
    box-shadow: 18px 0 28px -22px rgba(15,23,42,0.14), -18px 0 28px -22px rgba(15,23,42,0.14), 0 -18px 28px -22px rgba(15,23,42,0.14); }
.cx-cell--z-top .cx-logo { height: 24px; }
.cx-cell--z-bottom { border-radius: 0 0 16px 16px; border-bottom: none;
    box-shadow: 18px 0 28px -22px rgba(15,23,42,0.14), -18px 0 28px -22px rgba(15,23,42,0.14), 0 18px 28px -22px rgba(15,23,42,0.14); }
.cx-cell--z .cx-tick { color: #00A896; margin-right: 8px; flex-shrink: 0; }
.cx-cell--z .cx-tick svg { width: 15px; height: 15px; display: block; }

/* ── Narrative sections ── */
.cx-blocks { display: flex; flex-direction: column; gap: 2.5rem; max-width: 820px; margin: 0 auto; }
.cx-block h3 { font-size: 1.3rem; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; margin-bottom: 12px; }
.cx-block p { font-size: 0.98rem; color: #475569; line-height: 1.75; margin-bottom: 10px; }
.cx-block p:last-child { margin-bottom: 0; }
.cx-block a { color: #00A896; font-weight: 600; text-decoration: none; }
.cx-block a:hover { text-decoration: underline; }

/* ── Who it's for ── */
.cx-who { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 0 auto; }
.cx-who-card { background: #fff; border: 1px solid #e8edf3; border-radius: 20px; padding: 26px; }
.cx-who-card--z { border-color: rgba(0,168,150,0.3); }
.cx-who-card h3 { font-size: 1.05rem; font-weight: 800; color: #0f172a; margin-bottom: 16px; }
.cx-who-card--z h3 { color: #00A896; }
.cx-who-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.cx-who-card li { position: relative; padding-left: 24px; font-size: 0.9rem; color: #475569; line-height: 1.45; }
.cx-who-card li::before { content: ''; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; }
.cx-who-card--z li::before { background: #00A896; }

/* ── FAQ ── */
.cx-faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; }
.cx-faq-item { background: #f8fafc; border: 1px solid #e8edf3; border-radius: 14px; overflow: hidden; }
.cx-faq-item[open] { background: #fff; }
.cx-faq-item summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 18px 20px; font-size: 0.98rem; font-weight: 700; color: #0f172a;
}
.cx-faq-item summary::-webkit-details-marker { display: none; }
.cx-faq-chev { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; background: #00A896; color: #fff; transition: transform 0.25s ease; }
.cx-faq-chev svg { width: 11px; height: 8px; }
.cx-faq-item[open] .cx-faq-chev { transform: rotate(180deg); }
.cx-faq-item > p { padding: 0 20px 18px; font-size: 0.9rem; color: #64748b; line-height: 1.65; max-width: 94%; }

/* ── CTA ── */
.cx-cta { position: relative; z-index: 2; width: 100vw; margin: 4rem 0 0 calc(50% - 50vw);
    background: #f8fafc; padding: 4rem 2rem 6rem; display: flex; justify-content: center; }
.cx-cta-card { position: relative; width: 100%; max-width: 1080px; overflow: hidden; text-align: center;
    background: linear-gradient(160deg,#062a26,#0f3933 55%,#0a2521); border-radius: 24px; padding: 44px 56px;
    border: 1px solid rgba(0,168,150,0.25); box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 28px 60px rgba(0,168,150,0.18); }
.cx-cta-glow { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 520px; height: 320px;
    background: radial-gradient(ellipse, rgba(0,191,172,0.35) 0%, transparent 65%); pointer-events: none; }
.cx-cta-title { position: relative; font-size: clamp(1.7rem,3vw,2.4rem); font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 12px; }
.cx-cta-sub { position: relative; font-size: 0.95rem; color: rgba(255,255,255,0.72); line-height: 1.55; max-width: 580px; margin: 0 auto 20px; }
.cx-cta-actions { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cx-btn--dark-ghost { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.2); }
.cx-btn--dark-ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); color: #fff; transform: translateY(-2px); }

/* ── Hub page ── */
/* Row gap has to clear the logo tile, which breaks 16px above each card's
   top edge — otherwise the second row's logos collide with the first row.
   Bottom margin keeps the last row off the footer (this page has no CTA
   band of its own to provide that spacing). */
.cx-hub-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 52px 30px; width: 100%; max-width: 1080px; margin: 2.5rem auto 7rem;
}

/* The card body is transparent — the swoosh <svg> below IS the visible shape,
   so the logo tile can break out past the top edge like the Uiverse original. */
.cx-hub-card {
    position: relative; display: flex; flex-direction: column; justify-content: space-between;
    min-height: 188px; padding: 24px 26px; color: #fff; text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.cx-hub-card:hover { transform: translateY(-5px); }

/* preserveAspectRatio="none" lets the fixed 342×175 path stretch to any column width. */
.cx-hub-bg {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
    filter: drop-shadow(0 12px 26px rgba(6,42,38,0.22));
    transition: filter 0.25s ease;
}
.cx-hub-card:hover .cx-hub-bg { filter: drop-shadow(0 20px 40px rgba(6,42,38,0.34)); }

/* Competitor logo, floated over the top-right corner (the "cloud" slot).
   Uniform square tile, zero padding — the artwork runs edge to edge. Every
   logo file already carries its own background, so `contain` lets square
   marks fill the tile completely while wide wordmarks span the full width
   and blend into the white tile above and below. */
.cx-hub-logo {
    position: absolute; top: -16px; right: 20px; z-index: 2; box-sizing: border-box;
    width: 66px; height: 66px; padding: 0; overflow: hidden;
    border-radius: 16px; background: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 22px rgba(6,42,38,0.28);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.cx-hub-card:hover .cx-hub-logo { transform: translateY(-3px) rotate(-4deg); }
.cx-hub-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Fallback when a comparison has no logo file yet. */
.cx-hub-mono {
    font-size: 1.7rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em;
    background: linear-gradient(160deg, #0F9E8D, #062A26);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.cx-hub-top { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; padding-right: 82px; }
.cx-hub-eyebrow {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(235, 245, 243, 0.65);
}
.cx-hub-eyebrow em { font-style: normal; color: #2dd4bf; }
.cx-hub-name {
    font-size: clamp(1.7rem, 2.6vw, 2.05rem); font-weight: 800;
    letter-spacing: -0.03em; line-height: 1.1; color: #fff;
}

.cx-hub-info { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cx-hub-tag { font-size: 0.83rem; color: rgba(235, 245, 243, 0.62); line-height: 1.45; }
.cx-hub-more {
    flex-shrink: 0; font-size: 0.82rem; font-weight: 700; color: #2dd4bf;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.cx-hub-more svg { width: 14px; height: 14px; transition: transform 0.25s ease; }
.cx-hub-card:hover .cx-hub-more svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
    .cx-hub-card, .cx-hub-bg, .cx-hub-logo, .cx-hub-more svg { transition: none; }
    .cx-hub-card:hover { transform: none; }
    .cx-hub-card:hover .cx-hub-logo { transform: none; }
    .cx-hub-card:hover .cx-hub-more svg { transform: none; }
}

/* ── Responsive ── */
@media (max-width: 820px) {
    .cx-verdict, .cx-who { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .cx-hub-grid { grid-template-columns: 1fr; gap: 44px; margin-bottom: 4.5rem; }
    .cx-hub-logo { width: 56px; height: 56px; border-radius: 14px; right: 16px; }
    .cx-hub-top { padding-right: 70px; }
}