/* vs.css — competitor comparison pages (built on webflow.css tokens) */

/* ===== hero ===== */
.vs-hero { padding: clamp(44px,5vw,80px) 0 clamp(40px,5vw,64px); }
.vs-crumb { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 26px; display: flex; gap: 10px; align-items: center; }
.vs-crumb a { color: var(--ink-3); }
.vs-crumb a:hover { color: var(--ink); }
.vs-crumb .sep { opacity: 0.5; }
.vs-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(40px,5vw,80px); align-items: center; }
.vs-hero .h1 { font-weight: 700; letter-spacing: -0.04em; line-height: 0.98; font-size: clamp(42px,5vw,72px); text-wrap: balance; }
.vs-hero .h1 em { font-style: normal; color: var(--blue); }
.vs-verdict { font-size: clamp(17px,1.5vw,21px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.vs-verdict b { color: var(--ink); font-weight: 600; }

/* brand chips */
.brandchip { display: inline-flex; align-items: center; gap: 11px; }
.brandchip .mark { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; flex: none; overflow: hidden; }
.brandchip .mark.ws { background: #0a0a0b; color: #fff; }
.brandchip .mark.alt { background: #fff; border: 1px solid var(--line-2); }
.brandchip .mark.alt img { width: 26px; height: 26px; object-fit: contain; }
.brandchip .bname { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.vs-div { font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }

/* hero price card */
.pricecard { border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 40px 90px -54px rgba(0,0,0,0.4); }
.pricecard-row { display: grid; grid-template-columns: 1fr 1fr; }
.pricecard-col { padding: 28px 28px 30px; }
.pricecard-col.ws { background: #0a0a0b; color: #fff; }
.pricecard-col.alt { background: #fff; }
.pricecard-col .who { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; margin-bottom: 18px; }
.pricecard-col .who .m { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-weight: 800; font-size: 14px; overflow: hidden; }
.pricecard-col.ws .who .m { background: rgba(255,255,255,0.16); color: #fff; }
.pricecard-col.alt .who .m { background: #fff; border: 1px solid var(--line-2); }
.pricecard-col.alt .who .m img { width: 18px; height: 18px; object-fit: contain; }
.pricecard-col.ws .who .wlogo { height: 19px; width: auto; object-fit: contain; display: block; }
.pricecard-col .big { font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-size: 44px; }
.pricecard-col .big span { font-size: 16px; font-weight: 500; letter-spacing: 0; opacity: 0.6; }
.pricecard-col .note { font-size: 13.5px; line-height: 1.45; margin-top: 12px; }
.pricecard-col.ws .note { color: rgba(255,255,255,0.66); }
.pricecard-col.alt .note { color: var(--ink-2); }
.pricecard-foot { border-top: 1px solid var(--line); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--bg-2); font-size: 13.5px; color: var(--ink-2); }
.pricecard-foot b { color: var(--ink); font-weight: 700; }
.pricecard-col.alt .who { color: var(--ink); }

/* ===== story beats (reuse .feat-row from webflow.css) ===== */
.story-sec { padding: clamp(64px,8vw,120px) 0 clamp(40px,5vw,72px); }
.story-head { max-width: 760px; margin: 0 auto clamp(40px,5vw,64px); text-align: center; }
.story-head .kicker { display: block; }
.story-head .h-sec em { font-style: normal; color: var(--blue); }
.story-stack { display: grid; gap: 16px; }
.tier-flag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--alt, #19b88a); background: var(--alt-soft, rgba(25,184,138,0.1)); border: 1px solid var(--alt-line, rgba(25,184,138,0.3)); border-radius: 999px; padding: 6px 12px; margin-top: 6px; }

/* ===== big comparison chart ===== */
.cmp-sec { padding: clamp(56px,7vw,110px) 0; background: linear-gradient(180deg, var(--bg) 0%, #f9f9fa 50%, var(--bg) 100%); }
.cmp-head { max-width: 720px; margin: 0 auto clamp(36px,4vw,52px); text-align: center; }
.cmp-head .kicker { display: block; }
.cmp { border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 50px 100px -60px rgba(0,0,0,0.32); }
.cmp-top { display: grid; grid-template-columns: 44% 28% 28%; }
.cmp-top > div { padding: 20px 22px; display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; background: #fff; border-bottom: 1px solid var(--line); }
.cmp-top .lbl { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.cmp-top .ws { background: #0a0a0b; color: #fff; justify-content: center; }
.cmp-top .alt { justify-content: center; }
.cmp-top .m { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-weight: 800; font-size: 13px; overflow: hidden; flex: none; }
.cmp-top .ws .m { background: rgba(255,255,255,0.16); color: #fff; }
.cmp-top .alt .m { background: #fff; border: 1px solid var(--line-2); }
.cmp-top .alt .m img { width: 17px; height: 17px; object-fit: contain; }
.cmp-top .ws .wlogo { height: 20px; width: auto; object-fit: contain; }
.cmp-group td { padding: 14px 22px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); background: var(--bg-2); border-top: 1px solid var(--line); }
.cmp table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cmp .cmp-group td { width: auto; }
.cmp tbody tr.row td { border-top: 1px solid var(--line); padding: 15px 22px; font-size: 14.5px; vertical-align: middle; }
.cmp tbody tr.row td.feat { color: var(--ink); width: 44%; }
.cmp tbody tr.row td.ws, .cmp tbody tr.row td.alt { width: 28%; }
.cmp tbody tr.row td.ws { text-align: center; background: rgba(27,100,243,0.045); border-left: 1px solid rgba(27,100,243,0.14); border-right: 1px solid rgba(27,100,243,0.14); font-weight: 700; color: var(--ink); }
.cmp tbody tr.row td.alt { text-align: center; color: var(--ink-2); }
.cmp .yes { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--blue); }
.cmp .yes svg { width: 16px; height: 16px; }
.cmp .no { color: var(--ink-3); font-size: 18px; }
.cmp .no.txt { font-size: 12.5px; font-family: var(--mono); letter-spacing: 0.01em; }
.cmp .tier { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; color: var(--alt, #0f9b73); white-space: nowrap; }
.cmp .tier.b { color: var(--blue); }
.pricecard-col .sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; margin-top: 6px; }
.pricecard-col.ws .sub { color: rgba(255,255,255,0.5); }
.pricecard-col.alt .sub { color: var(--ink-3); }
.pricecard-foot.tall { padding: 18px 24px; line-height: 1.45; }
.cmp .val { font-family: var(--mono); font-size: 13px; }
.cmp tbody tr.row td.ws .val { color: var(--ink); }
.cmp-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-top: 1px solid var(--line); background: var(--bg-2); flex-wrap: wrap; }
.cmp-foot .sum { font-size: 15px; color: var(--ink-2); }
.cmp-foot .sum b { color: var(--ink); }
.cmp-note { text-align: center; font-size: 12.5px; color: var(--ink-3); margin-top: 18px; }
/* comparison legal disclaimer — footer fine print (renders on the dark footer) */
.cmp-disclaimer { max-width: 880px; margin: 0; padding: 26px 0 2px; font-size: 12px; line-height: 1.65; color: rgba(255,255,255,0.42); text-wrap: pretty; }

@media (max-width: 1024px) {
  .vs-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .pricecard-row { grid-template-columns: 1fr; }
  .cmp-top, .cmp tbody tr.row td.feat { font-size: 13px; }
  .cmp-top > div, .cmp tbody tr.row td { padding: 12px 12px; }
  .cmp-top { position: static; }
}