/* warmup.rocks — /vs/* comparison pages. Builds on landing.css tokens. */

/* ---------- hero ---------- */
.vs-hero { padding-bottom: 3rem; }
h1.vs-title { display: flex; align-items: center; justify-content: center; gap: 1.1rem; flex-wrap: wrap;
  font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 830; }
.vs-title .vs-us { color: var(--red); }
.vs-badge {
  flex: none; width: 58px; height: 58px; border-radius: 50%; position: relative;
  display: grid; place-items: center; font-size: 1rem; font-weight: 830; letter-spacing: .02em;
  color: #fff; background: var(--brand); box-shadow: 0 6px 22px rgba(220,0,0,.3);
}
.vs-badge::before, .vs-badge::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(220,0,0,.4); animation: vs-ring 2.6s ease-out infinite;
}
.vs-badge::after { animation-delay: 1.3s; }
@keyframes vs-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
.vs-updated { margin-top: 1.6rem; font-size: .8rem; color: var(--muted); }
.vs-updated a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- verdict cards ---------- */
.verdict-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; max-width: 1000px; margin: 0 auto; }
.verdict { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 1.5rem 1.6rem; box-shadow: var(--shadow-sm); }
.verdict.win { border-color: rgba(220,0,0,.3); background: linear-gradient(180deg, rgba(220,0,0,.035), transparent 55%), var(--card); }
.verdict h3 { font-size: 1rem; margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; }
.verdict p { color: var(--muted); font-size: .92rem; }
.verdict-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.verdict-dot.us { background: var(--red); box-shadow: 0 0 0 4px rgba(220,0,0,.12); }
.verdict-dot.them { background: #a9a294; box-shadow: 0 0 0 4px rgba(169,162,148,.16); }

/* ---------- reach duel (pure CSS animation) ---------- */
.duel { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; max-width: 1000px; margin: 0 auto; }
@media (max-width: 760px) { .duel { grid-template-columns: 1fr; } }
.duel-card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 1.5rem 1.6rem; box-shadow: var(--shadow-sm); }
.duel-card.us { border-color: rgba(220,0,0,.3); }
.duel-label { font-size: .74rem; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.duel-card.us .duel-label { color: var(--red); }
.duel-card h3 { font-size: 1.15rem; margin: .35rem 0 .3rem; }
.duel-card > p { color: var(--muted); font-size: .9rem; max-width: 40ch; }

/* Stage: abstract "network" panel the pulses live on */
.duel-stage { position: relative; height: 190px; margin-top: 1.2rem; border-radius: 14px;
  background:
    radial-gradient(circle at 50% 45%, rgba(28,28,28,.045) 1.1px, transparent 1.4px) 0 0 / 22px 22px,
    var(--bg-2);
  border: 1px solid var(--border); }
.node { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); }
.node::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }

/* left card: one lonely origin — a single slow pulse */
.node.origin { background: #8d8577; color: #8d8577; }
.node.origin::after { animation: node-ping 3.2s ease-out infinite; }
/* everything else on the left stays cold */
.node.cold { width: 7px; height: 7px; background: #d8d4cd; }

/* right card: the whole grid lights up, staggered */
.node.warm { background: var(--red); color: var(--red); width: 8px; height: 8px; }
.node.warm::after { animation: node-ping 2.4s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes node-ping { 0% { transform: scale(.4); opacity: .75; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

.duel-stat { display: flex; gap: 1.6rem; margin-top: 1.1rem; }
.duel-stat b { display: block; font-size: 1.5rem; font-weight: 820; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.duel-card.us .duel-stat b { color: var(--red); }
.duel-stat span { font-size: .78rem; color: var(--muted); }

/* ---------- comparison table ---------- */
.cmp-wrap { max-width: 900px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: 18px; background: var(--card); box-shadow: var(--shadow-sm); }
.cmp { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .92rem; }
.cmp th, .cmp td { padding: .85rem 1.1rem; text-align: left; border-top: 1px solid var(--border); vertical-align: top; }
.cmp thead th { border-top: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  position: sticky; top: 0; background: var(--card); z-index: 2; }
.cmp thead th.col-hi { color: var(--red); }
.cmp td:first-child { font-weight: 650; width: 34%; }
.cmp td.col-hi, .cmp th.col-hi { background: linear-gradient(180deg, rgba(220,0,0,.028), rgba(220,0,0,.028)); }
.cmp tbody tr { transition: background .15s; }
.cmp tbody tr:hover { background: var(--bg-2); }
.cmp small { display: block; color: var(--muted); font-weight: 400; margin-top: .15rem; }

/* animated check / cross — SVG stroke draws in when the row reveals */
.tick, .cross { width: 20px; height: 20px; vertical-align: -4px; margin-right: .35rem; }
.tick path { stroke: var(--ok); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .55s ease .15s; }
.cross path { stroke: #b9b3a9; stroke-width: 2.4; fill: none; stroke-linecap: round;
  stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .45s ease .15s; }
.reveal.in .tick path, .reveal.in .cross path { stroke-dashoffset: 0; }
/* rows reveal with a slight stagger */
tr.reveal { transform: translateY(10px); }
tr.reveal:nth-child(2) { transition-delay: .05s; } tr.reveal:nth-child(3) { transition-delay: .1s; }
tr.reveal:nth-child(4) { transition-delay: .15s; } tr.reveal:nth-child(5) { transition-delay: .2s; }
tr.reveal:nth-child(6) { transition-delay: .25s; } tr.reveal:nth-child(7) { transition-delay: .3s; }
tr.reveal:nth-child(8) { transition-delay: .35s; } tr.reveal:nth-child(9) { transition-delay: .4s; }
tr.reveal:nth-child(10) { transition-delay: .45s; } tr.reveal:nth-child(11) { transition-delay: .5s; }

.cmp-note { max-width: 900px; margin: .9rem auto 0; font-size: .8rem; color: var(--muted); text-align: center; }
.cmp-note a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- proof strip (cf-cache-status chip) ---------- */
.proof-strip { max-width: 720px; margin: 0 auto; text-align: center; }
.status-chip { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.4rem;
  background: #16181d; border: 1px solid #2a2e37; border-radius: 12px; padding: .75rem 1.3rem;
  font-family: ui-monospace, "SF Mono", monospace; font-size: .95rem; color: #c8ccd4; }
.status-chip b { color: #7ee2a8; position: relative; }
.status-chip b::after { content: ''; position: absolute; inset: -4px -8px; border-radius: 8px;
  border: 1px solid rgba(126,226,168,.5); animation: chip-glow 2.2s ease-out infinite; }
@keyframes chip-glow { 0% { opacity: .9; transform: scale(.94); } 70%, 100% { opacity: 0; transform: scale(1.25); } }

/* ---------- pricing duel ---------- */
.price-duel { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; max-width: 760px; margin: 0 auto; align-items: stretch; }
@media (max-width: 640px) { .price-duel { grid-template-columns: 1fr; } }
.pd-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 1.6rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; }
.pd-card.us { border-color: rgba(220,0,0,.35); box-shadow: 0 8px 32px rgba(220,0,0,.09); }
.pd-card h3 { font-size: 1.05rem; }
.pd-price { font-size: 2rem; font-weight: 820; letter-spacing: -.03em; margin: .5rem 0 .2rem; }
.pd-price span { font-size: .9rem; color: var(--muted); font-weight: 500; }
.pd-card ul { list-style: none; padding: 0; margin: .9rem 0 0; }
.pd-card li { font-size: .88rem; padding: .3rem 0 .3rem 1.5rem; position: relative; color: var(--text); }
.pd-card li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.pd-card.them li::before { color: #a9a294; }
.pd-foot { margin-top: 1.2rem; }