/* SEO App vs ... comparison pages. Loads after keyword-tracking.css and reuses its tokens. */
.cp-hero { padding-bottom: 2rem; }
.cp-hero-inner { max-width: 1150px; margin: 0 auto; }
.cp-hero h1 .vs { color: var(--dimmer); font-weight: 500; font-size: .6em; margin: 0 .15em; }
.cp-hero .lede { max-width: 820px; }
.lp-crumbs { font-size: .82rem; color: var(--dimmer); margin-bottom: .8rem; }
.lp-crumbs a { color: inherit; text-decoration: none; }
.lp-crumbs a:hover { color: var(--gold); }

.cp-duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.2rem; align-items: stretch; margin-top: 2.2rem; }
.cp-vs { align-self: center; font-family: 'JetBrains Mono', monospace; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dimmer); padding: .5rem .7rem; border: 1px solid var(--stroke); border-radius: 999px; }
.cp-side { border-radius: 22px; padding: 1.7rem 1.6rem; border: 1px solid var(--stroke-soft); background: var(--glass); display: flex; flex-direction: column; gap: .7rem; }
.cp-side--us { border-color: var(--gold-stroke); background: linear-gradient(160deg, rgba(255,215,0,.10), rgba(255,215,0,.02)); box-shadow: 0 30px 70px -40px rgba(255,215,0,.35); }
.cp-side__tag { font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.cp-side--them .cp-side__tag { color: var(--dim); }
.cp-side__price { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; color: var(--white); line-height: 1.1; }
.cp-side__sum { color: var(--dim); font-size: .96rem; line-height: 1.55; margin: 0; }
.cp-side__best { font-size: .9rem; color: var(--white); line-height: 1.5; }
.cp-side__best span { display: block; font-family: 'JetBrains Mono', monospace; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dimmer); margin-bottom: .2rem; }
.cp-side__note { font-size: .8rem; color: var(--dimmer); line-height: 1.5; margin-top: auto; }
.cp-side .pill { align-self: flex-start; margin-top: auto; }

.cp-table-wrap { overflow-x: auto; }
.cp-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--glass); border: 1px solid var(--stroke-soft); border-radius: 20px; overflow: hidden; }
.cp-table th, .cp-table td { padding: .95rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--stroke-soft); font-size: .93rem; line-height: 1.45; }
.cp-table tr:last-child td { border-bottom: 0; }
.cp-table th { font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dimmer); font-weight: 600; white-space: nowrap; }
.cp-table th a { color: inherit; text-decoration: none; }
.cp-table th.us, .cp-table td.us { background: rgba(255,215,0,.06); }
.cp-table th.us { color: var(--gold); }
.cp-table td:first-child { color: var(--white); font-weight: 700; width: 24%; }
.cp-table td { color: var(--dim); }
.cp-table td i { margin-right: .5rem; color: var(--dimmer); font-size: .85em; }
.cp-table tr.w-us td.us { color: var(--white); }
.cp-table tr.w-us td.us i, .cp-table tr.w-them td:last-child i { color: var(--green); }
.cp-table tr.w-them td:last-child { color: var(--white); }
.cp-table tr.w-tie td i { color: var(--dimmer); }
.cp-table--wide { min-width: 1180px; }
.cp-table--wide td:first-child, .cp-table--wide th:first-child { width: auto; white-space: nowrap; position: sticky; left: 0; background: var(--navy); z-index: 1; }
.cp-table--wide td, .cp-table--wide th { font-size: .85rem; }
.cp-foot { margin-top: 1rem; font-size: .8rem; color: var(--dimmer); line-height: 1.5; max-width: 900px; }

.cp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.cp-list { border-radius: 22px; padding: 1.7rem 1.6rem; border: 1px solid var(--stroke-soft); background: var(--glass); }
.cp-list--us { border-color: var(--gold-stroke); }
.cp-list .eyebrow { margin-bottom: 1rem; }
.cp-item + .cp-item { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--stroke-soft); }
.cp-item h3 { font-size: 1.02rem; margin: 0 0 .3rem; }
.cp-item p { margin: 0; color: var(--dim); font-size: .93rem; line-height: 1.55; }

.cp-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; }
.lp-frame { position: relative; border-radius: 18px; border: 1px solid var(--stroke); background: var(--navy); overflow: hidden; box-shadow: 0 20px 50px -24px rgba(0,0,0,.9); }
.lp-frame .bar { display: flex; align-items: center; gap: 6px; padding: .55rem .9rem; background: rgba(0,0,0,.45); border-bottom: 1px solid var(--stroke-soft); }
.lp-frame .bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); display: block; }
.lp-frame .bar i:first-child { background: #ff5f57; } .lp-frame .bar i:nth-child(2) { background: #febc2e; } .lp-frame .bar i:nth-child(3) { background: #28c840; }
.lp-frame .bar span { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--dimmer); }
.lp-frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.lp-shot-cap { display: flex; flex-direction: column; gap: .2rem; padding: .9rem .2rem 0; }
.lp-shot-cap b { color: var(--white); font-size: .98rem; }
.lp-shot-cap span { color: var(--dim); font-size: .9rem; line-height: 1.5; }

.phrase-inner.cp-verdict { grid-template-columns: minmax(0, 1fr); }
.cp-verdict p { max-width: 820px; }
.cp-verdict .cp-us-note { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--stroke-soft); }
.cp-us-note { font-size: .9rem; color: var(--dimmer); }
.cp-us-note a { color: var(--gold); }

.cp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.1rem; }
.cp-card { display: flex; flex-direction: column; gap: .6rem; padding: 1.5rem 1.5rem 1.3rem; border-radius: 20px; border: 1px solid var(--stroke-soft); background: var(--glass); color: inherit; text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.cp-card:hover { transform: translateY(-3px); border-color: var(--gold-stroke); }
.cp-card__h { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; color: var(--white); }
.cp-card__h span { color: var(--dimmer); font-weight: 500; font-size: .8em; margin: 0 .15em; }
.cp-card p { margin: 0; color: var(--dim); font-size: .93rem; line-height: 1.5; }
.cp-card__meta { display: flex; justify-content: space-between; gap: .8rem; font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .06em; color: var(--dimmer); margin-top: .3rem; }
.cp-card__go { margin-top: .4rem; color: var(--gold); font-weight: 700; font-size: .9rem; }

.lp-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.lp-related a { display: block; padding: 1.1rem 1.2rem; border: 1px solid var(--stroke); border-radius: 14px; color: inherit; text-decoration: none; background: var(--glass); transition: border-color .15s, transform .15s; }
.lp-related a:hover { border-color: var(--gold-stroke); transform: translateY(-2px); }
.lp-related b { display: block; font-size: 1rem; margin-bottom: .25rem; }
.lp-related span { font-size: .88rem; color: var(--dim); }

@media (max-width: 860px) {
    .cp-duel { grid-template-columns: 1fr; }
    .cp-vs { justify-self: center; }
    .cp-split { grid-template-columns: 1fr; }
    .cp-table td:first-child { width: auto; }
}