/* ============================================================
   /vs/* comparison pages — shared styles
   Reuses landing design tokens from /static/landing/styles.css
   (--neon-cyan, --neon-magenta, --bg-*, --text-*, --font-*, and the
   --clip-* angular clip-path tokens).

   DESIGN SYSTEM RULE (ai_docs/design/design-system.md):
   the signature cyberpunk look uses ANGULAR clip-path cut corners,
   NEVER border-radius. Use var(--clip-card) / var(--clip-button) /
   var(--clip-badge). Do not add border-radius here.
   ============================================================ */

.vs-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 48px 24px 96px;
}

/* ---- Draft banner (removed on publish) ---- */
.vs-draft-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    padding: 12px 18px;
    border: 1px dashed var(--neon-magenta, #f72585);
    clip-path: var(--clip-button);
    background: rgba(247, 37, 133, 0.08);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 13px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
}
.vs-draft-banner strong { color: var(--neon-magenta, #f72585); }

/* ---- Hero ---- */
.vs-hero { text-align: center; margin-bottom: 56px; }
.vs-hero h1 {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: clamp(28px, 5vw, 46px);
    line-height: 1.15;
    margin: 0 0 20px;
    color: var(--text-primary, #fff);
}
.vs-hero h1 .vs-accent { color: var(--neon-cyan, #00f5d4); }
.vs-hero .vs-subhead {
    max-width: 760px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
}
.vs-hero .vs-byline {
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-muted, rgba(255, 255, 255, 0.45));
}

/* ---- Section scaffolding ---- */
.vs-section { margin-bottom: 64px; }
.vs-section > h2 {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: clamp(22px, 3.5vw, 32px);
    margin: 0 0 12px;
    color: var(--text-primary, #fff);
}
.vs-section > .vs-lead {
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    max-width: 760px;
    margin: 0 0 28px;
}
.vs-section p { line-height: 1.7; color: var(--text-secondary, rgba(255, 255, 255, 0.72)); }
.vs-section p a, .vs-related a, .vs-honest a, .vs-choice-card a { color: var(--neon-cyan, #00f5d4); text-decoration: none; }
.vs-section p a:hover, .vs-related a:hover, .vs-honest a:hover, .vs-choice-card a:hover { text-decoration: underline; }

/* ---- Comparison table ---- */
.vs-table-wrap { overflow-x: auto; clip-path: var(--clip-card); border: 1px solid rgba(0, 245, 212, 0.18); }
table.vs-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
    font-size: 15px;
}
table.vs-table th, table.vs-table td {
    padding: 16px 18px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    vertical-align: top;
}
table.vs-table thead th {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-primary, #fff);
    background: rgba(255, 255, 255, 0.02);
}
table.vs-table thead th.vs-col-us { color: var(--neon-cyan, #00f5d4); }
table.vs-table tbody th {
    font-weight: 600;
    color: var(--text-primary, #fff);
    width: 30%;
}
table.vs-table td.vs-us { color: var(--text-primary, #eafffb); }
table.vs-table td.vs-them { color: var(--text-secondary, rgba(255, 255, 255, 0.6)); }
table.vs-table tbody tr:last-child th,
table.vs-table tbody tr:last-child td { border-bottom: none; }

/* ---- Two-column "when to choose" cards ---- */
.vs-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.vs-choice-card {
    padding: 28px;
    clip-path: var(--clip-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.015);
}
.vs-choice-card.vs-choice-us { border-color: rgba(0, 245, 212, 0.35); background: rgba(0, 245, 212, 0.04); }
.vs-choice-card h3 {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 19px;
    margin: 0 0 16px;
    color: var(--text-primary, #fff);
}
.vs-choice-card.vs-choice-us h3 { color: var(--neon-cyan, #00f5d4); }
.vs-choice-card ul { list-style: none; margin: 0; padding: 0; }
.vs-choice-card li {
    position: relative;
    padding: 8px 0 8px 26px;
    line-height: 1.55;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.vs-choice-card li:last-child { border-bottom: none; }
.vs-choice-card li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--neon-cyan, #00f5d4);
}
.vs-choice-card.vs-choice-them li::before { content: '→'; color: var(--text-muted, rgba(255, 255, 255, 0.4)); }

/* ---- Honest pros/cons ---- */
.vs-honest {
    padding: 28px;
    clip-path: var(--clip-card);
    border: 1px solid rgba(254, 228, 64, 0.25);
    background: rgba(254, 228, 64, 0.04);
}
.vs-honest h3 { margin: 0 0 12px; color: var(--neon-yellow, #fee440); font-family: var(--font-display, 'Orbitron', sans-serif); font-size: 18px; }
.vs-honest ul { margin: 0; padding-left: 20px; }
.vs-honest li { padding: 6px 0; line-height: 1.6; color: var(--text-secondary, rgba(255, 255, 255, 0.75)); }

/* ---- Founder note ---- */
.vs-founder-note {
    padding: 32px;
    clip-path: var(--clip-card);
    border: 1px solid rgba(0, 245, 212, 0.22);
    background: rgba(0, 245, 212, 0.03);
}
.vs-founder-note h2 {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: clamp(20px, 3vw, 28px);
    margin: 0 0 18px;
    color: var(--text-primary, #fff);
}
.vs-founder-note p { line-height: 1.75; margin: 0 0 16px; color: var(--text-secondary, rgba(255, 255, 255, 0.8)); }
.vs-founder-sign {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 13px;
    color: var(--text-muted, rgba(255, 255, 255, 0.5)) !important;
    margin: 8px 0 0 !important;
}
.vs-founder-sign a { color: var(--neon-cyan, #00f5d4); text-decoration: none; }
.vs-founder-sign a:hover { text-decoration: underline; }

/* ---- TCO calculator ---- */
.vs-calc {
    padding: 32px;
    clip-path: var(--clip-card);
    border: 1px solid rgba(0, 245, 212, 0.25);
    background: linear-gradient(180deg, rgba(0, 245, 212, 0.04), rgba(255, 255, 255, 0.01));
}
.vs-calc-controls { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 28px; }
.vs-calc-field { flex: 1; min-width: 220px; }
.vs-calc-field label {
    display: block;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    margin-bottom: 10px;
}
.vs-calc-field input[type="range"] { width: 100%; accent-color: var(--neon-cyan, #00f5d4); }
.vs-calc-field select {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 245, 212, 0.3);
    clip-path: var(--clip-badge);
    color: var(--text-primary, #fff);
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 15px;
}
.vs-calc-linkcount {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 22px;
    color: var(--neon-cyan, #00f5d4);
    margin-bottom: 6px;
}
.vs-calc-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.vs-calc-result {
    padding: 22px;
    clip-path: var(--clip-button);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}
.vs-calc-result.vs-calc-us { border-color: rgba(0, 245, 212, 0.4); background: rgba(0, 245, 212, 0.05); }
.vs-calc-result .vs-calc-label { font-family: var(--font-mono, monospace); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted, rgba(255,255,255,0.5)); margin-bottom: 8px; }
.vs-calc-result .vs-calc-amount { font-family: var(--font-display, 'Orbitron', sans-serif); font-size: 30px; color: var(--text-primary, #fff); }
.vs-calc-result.vs-calc-us .vs-calc-amount { color: var(--neon-cyan, #00f5d4); }
.vs-calc-result .vs-calc-sub { font-size: 13px; color: var(--text-muted, rgba(255,255,255,0.5)); margin-top: 6px; }
.vs-calc-verdict {
    margin-top: 22px;
    padding: 14px 18px;
    clip-path: var(--clip-button);
    background: rgba(255, 255, 255, 0.03);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary, rgba(255, 255, 255, 0.8));
}
.vs-calc-scale {
    margin-top: 18px;
    padding: 12px 16px;
    border-left: 2px solid rgba(0, 245, 212, 0.4);
    background: rgba(0, 245, 212, 0.03);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary, rgba(255, 255, 255, 0.78));
}
.vs-calc-note { margin-top: 14px; font-size: 12px; color: var(--text-muted, rgba(255,255,255,0.45)); line-height: 1.5; }

/* ---- Alternatives roundup ---- */
.vs-roundup { display: grid; gap: 18px; margin-top: 8px; }
.vs-roundup-group { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted, rgba(255,255,255,0.5)); margin: 32px 0 4px; }
.vs-tool {
    padding: 24px 28px;
    clip-path: var(--clip-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.015);
}
.vs-tool.vs-tool-us { border-color: rgba(0, 245, 212, 0.35); background: rgba(0, 245, 212, 0.04); }
.vs-tool h3 { font-family: var(--font-display, 'Orbitron', sans-serif); font-size: 20px; margin: 0 0 4px; color: var(--text-primary, #fff); }
.vs-tool.vs-tool-us h3 { color: var(--neon-cyan, #00f5d4); }
.vs-tool .vs-tool-best { font-family: var(--font-mono, monospace); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--neon-cyan, #00f5d4); margin: 0 0 12px; }
.vs-tool p { margin: 0 0 10px; line-height: 1.65; color: var(--text-secondary, rgba(255,255,255,0.75)); }
.vs-tool .vs-tool-meta { font-size: 13px; color: var(--text-muted, rgba(255,255,255,0.5)); margin: 0; }
.vs-tool a { color: var(--neon-cyan, #00f5d4); text-decoration: none; }
.vs-tool a:hover { text-decoration: underline; }

/* ---- Product screenshot ---- */
.vs-shot { margin: 28px 0 0; }
.vs-shot img {
    width: 100%;
    height: auto;
    display: block;
    clip-path: var(--clip-card);
    border: 1px solid rgba(0, 245, 212, 0.18);
}
.vs-shot figcaption {
    margin-top: 12px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    line-height: 1.5;
}

/* ---- FAQ ---- */
.vs-faq details {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 18px 0;
}
.vs-faq summary {
    cursor: pointer;
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 17px;
    color: var(--text-primary, #fff);
    list-style: none;
}
.vs-faq summary::-webkit-details-marker { display: none; }
.vs-faq summary::after { content: '+'; float: right; color: var(--neon-cyan, #00f5d4); }
.vs-faq details[open] summary::after { content: '−'; }
.vs-faq details p { margin: 14px 0 0; line-height: 1.7; color: var(--text-secondary, rgba(255,255,255,0.72)); }

/* ---- CTA ---- */
.vs-cta {
    text-align: center;
    padding: 48px 28px;
    clip-path: var(--clip-card);
    border: 1px solid rgba(0, 245, 212, 0.3);
    background: radial-gradient(circle at 50% 0%, rgba(0, 245, 212, 0.08), rgba(255, 255, 255, 0.01));
}
.vs-cta h2 { font-family: var(--font-display, 'Orbitron', sans-serif); font-size: clamp(22px, 4vw, 30px); margin: 0 0 12px; color: var(--text-primary, #fff); }
.vs-cta p { max-width: 560px; margin: 0 auto 24px; color: var(--text-secondary, rgba(255,255,255,0.72)); line-height: 1.6; }
.vs-cta .vs-cta-sub { margin-top: 16px; font-size: 13px; color: var(--text-muted, rgba(255,255,255,0.5)); }

/* ---- Responsive ---- */
@media (max-width: 760px) {
    .vs-choice-grid { grid-template-columns: 1fr; }
    .vs-calc-results { grid-template-columns: 1fr; }
    .vs-calc-controls { flex-direction: column; gap: 20px; }
}