/* Comparison pages (atominterstate.app/compare). Rides on /tools/tools.css. */
.cmp-note { font-size: 13px; color: var(--text-mute); margin-top: 10px; max-width: 760px; }
.cmp-wrap { margin-top: 24px; border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; -webkit-overflow-scrolling: touch; background: rgba(18,22,52,0.6); }
.cmp { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 13.5px; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 11px 12px; border-bottom: 1px solid var(--border); }
.cmp thead th { position: sticky; top: 0; background: #121634; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.cmp thead th.atom { color: var(--teal); }
.cmp tbody th { position: sticky; left: 0; background: #121634; font-weight: 700; color: var(--text); min-width: 150px; max-width: 180px; }
.cmp td { color: var(--text-dim); }
.cmp td.atom { color: var(--text); background: rgba(0,209,178,0.06); }
.cmp .ns { color: var(--text-mute); font-style: italic; }
.cmp .yes::before { content: '\2713  '; color: var(--teal); font-weight: 800; }
.cmp-src { font-size: 12px; color: var(--text-mute); margin-top: 10px; }
.cmp-src a { color: var(--text-dim); text-decoration: underline; }
.prod { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.prod .card h2 { font-size: 18px; margin-bottom: 6px; }
.prod .card p { font-size: 14px; color: var(--text-dim); }
.prod .card .src { display: inline-block; margin-top: 8px; font-size: 12.5px; color: var(--text-mute); text-decoration: underline; }
.diff { margin-top: 36px; }
.diff h2 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(26px, 4vw, 36px); letter-spacing: .01em; margin-bottom: 12px; }
.diff ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.diff li { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: rgba(6,9,32,0.45); font-size: 14px; color: var(--text-dim); }
.diff li b { display: block; color: var(--text); font-size: 15px; margin-bottom: 2px; }
.faq { margin-top: 36px; }
.faq h2 { font-size: 20px; margin-bottom: 8px; }
.faq details { border-top: 1px solid var(--border); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--text); }
.faq details p { margin-top: 8px; color: var(--text-dim); font-size: 14.5px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }