/* ═══════════════════════════════════════════════════════
   citeOS · /vs comparison pages (extends solution.css)
   ═══════════════════════════════════════════════════════ */

/* hero extras */
.vs-hero-acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.btn-ghost{font-family:var(--m);font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--p);padding:18px 30px;border:1px solid var(--pmd);border-radius:2px;background:var(--bk2);transition:border-color .15s,transform .15s;display:inline-flex;align-items:center;gap:9px;}
.btn-ghost:hover{border-color:var(--p);transform:translateY(-2px);}
.vs-crumb{font-family:var(--m);font-size:10.5px;color:var(--w3);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:20px;display:flex;gap:10px;align-items:center;}
.vs-crumb a{color:var(--p);}
.vs-crumb a:hover{border-bottom:1px solid var(--p);}

/* ── comparison table (2 product columns) ── */
.cmp-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:14px;background:var(--bk2);box-shadow:0 24px 48px -32px rgba(15,61,44,.3);}
.cmp-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:760px;}
.cmp-table th{text-align:left;padding:16px 18px;font-family:var(--m);font-size:10px;letter-spacing:1.3px;text-transform:uppercase;font-weight:600;border-bottom:2px solid var(--p);color:var(--w3);}
.cmp-table th.tcol{text-align:left;color:var(--wh);font-family:var(--d);font-size:15px;font-weight:700;letter-spacing:-.2px;text-transform:none;width:34%;}
.cmp-table th.tcol small{display:block;font-family:var(--m);font-size:9.5px;color:var(--p);font-weight:600;letter-spacing:.8px;margin-top:3px;}
.cmp-table th.tcol.hl{background:var(--plt);border-radius:8px 8px 0 0;}
.cmp-table td{padding:14px 18px;border-bottom:1px solid var(--rule);color:var(--w2);vertical-align:top;line-height:1.5;}
.cmp-table td:first-child{font-weight:600;color:var(--wh);white-space:nowrap;font-size:12.5px;}
.cmp-table td.hl{background:var(--plt);}
.cmp-table tr:last-child td{border-bottom:none;}
.cmp-table tr:last-child td.hl{border-radius:0 0 8px 8px;}
.cmp-table .yes{color:var(--p);font-weight:700;}
.cmp-table .no{color:var(--w4);}
.cmp-table tbody tr:hover td{background:rgba(15,61,44,.025);}
.cmp-table tbody tr:hover td.hl{background:var(--plt);}
.cmp-table .nuance{display:inline-block;font-family:var(--m);font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--p);background:var(--plt);border:1px solid var(--pmd);padding:3px 8px;border-radius:100px;margin-top:6px;}
.cmp-table .sub{display:block;font-size:11.5px;color:var(--w3);font-weight:400;margin-top:3px;}

/* ── where each wins ── */
.wins{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
.win{background:var(--bk2);border:1px solid var(--rule2);border-radius:16px;padding:30px 28px;box-shadow:0 22px 46px -32px rgba(15,61,44,.28);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;}
.win:hover{transform:translateY(-5px);box-shadow:0 36px 60px -32px rgba(15,61,44,.4);}
.win.us{border-top:3px solid var(--lime);}
.win.them{border-top:3px solid var(--rule);}
.win.both{border-top:3px solid var(--pmd);background:var(--bk);}
.win .wk{font-family:var(--m);font-size:9.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:14px;color:var(--p);}
.win.them .wk{color:var(--w3);}
.win h3{font-family:var(--d);font-size:21px;font-weight:700;color:var(--wh);letter-spacing:-.6px;line-height:1.15;margin:0 0 16px;scroll-margin-top:84px;}
.win ul{list-style:none;padding:0;margin:0;}
.win li{padding:11px 0;border-top:1px solid var(--rule);font-size:13.5px;color:var(--w2);line-height:1.55;}
.win li b{color:var(--wh);font-weight:600;}

/* ── methodology strip ── */
.meth-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--ink);color:var(--on-ink);border-radius:16px;padding:28px 32px;box-shadow:0 30px 56px -30px rgba(15,14,10,.5);}
.meth-strip .ms-t{font-family:var(--d);font-size:19px;font-weight:600;letter-spacing:-.4px;max-width:46ch;line-height:1.4;}
.meth-strip .ms-t em{font-style:normal;color:var(--lime);}
.meth-strip a{flex-shrink:0;background:var(--lime);color:var(--p);font-family:var(--m);font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;padding:14px 24px;border-radius:2px;transition:background .15s,transform .15s;}
.meth-strip a:hover{background:var(--lime-d);transform:translateY(-2px);}
.weights{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.weights span{font-family:var(--m);font-size:10px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--on-ink-2);border:1px solid rgba(246,244,239,.16);padding:7px 12px;border-radius:100px;}
.weights span b{color:var(--lime);font-weight:700;}

/* ── FAQ accordions (match faq.html) ── */
.faq-list{display:flex;flex-direction:column;gap:10px;max-width:860px;}
.faq-item{background:var(--bk2);border:1px solid var(--rule2);border-radius:14px;box-shadow:0 16px 36px -28px rgba(15,61,44,.25);transition:border-color .15s,box-shadow .25s,transform .25s cubic-bezier(.2,.7,.2,1);}
.faq-item:hover{transform:translateY(-2px);box-shadow:0 24px 44px -28px rgba(15,61,44,.34);}
.faq-item[open]{border-color:var(--p);box-shadow:0 26px 48px -28px rgba(15,61,44,.36);}
.faq-item summary{cursor:pointer;list-style:none;padding:19px 22px;display:flex;align-items:center;gap:14px;font-family:var(--d);font-size:16px;font-weight:600;color:var(--wh);letter-spacing:-.2px;line-height:1.4;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .qx{margin-left:auto;font-family:var(--m);font-size:20px;font-weight:400;color:var(--w4);transition:color .15s,transform .25s;flex-shrink:0;}
.faq-item[open] summary .qx{color:var(--p);transform:rotate(45deg);}
.faq-item summary:hover{color:var(--p);}
.faq-body{padding:0 22px 20px;color:var(--w2);font-size:14px;line-height:1.7;max-width:72ch;}
.faq-body a{color:var(--p);border-bottom:1px solid var(--pmd);}
.faq-body a:hover{border-color:var(--p);}

/* ── final CTA ghost ── */
.cta{position:relative;}
.cta .ghost{position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);font-family:var(--d);font-weight:700;font-size:clamp(120px,18vw,260px);letter-spacing:-8px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(246,244,239,.14);pointer-events:none;user-select:none;white-space:nowrap;}
.cta .container{position:relative;z-index:1;}

/* ── hub cards ── */
.vs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.vs-card{background:var(--bk2);border:1px solid var(--rule2);border-radius:18px;padding:34px 30px;display:flex;flex-direction:column;gap:0;box-shadow:0 24px 50px -32px rgba(15,61,44,.3);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .2s;}
.vs-card:hover{transform:translateY(-6px);box-shadow:0 40px 66px -32px rgba(15,61,44,.42);border-color:var(--pmd);}
.vs-card .ck{font-family:var(--m);font-size:9.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--p);margin-bottom:18px;}
.vs-card .mark{font-family:var(--d);font-size:30px;font-weight:700;letter-spacing:-1.2px;color:var(--wh);margin-bottom:6px;}
/* swap .mark for the competitor's public brand mark per their press guidelines in production */
.vs-card .vsline{font-family:var(--m);font-size:10px;color:var(--w4);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:18px;}
.vs-card p{font-size:14px;color:var(--w2);line-height:1.6;margin-bottom:24px;}
.vs-card .go{margin-top:auto;font-family:var(--m);font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--p);display:inline-flex;align-items:center;gap:8px;transition:gap .15s;}
.vs-card .go:hover{gap:13px;}

@media(max-width:980px){
  .wins,.vs-cards{grid-template-columns:1fr;}
  .meth-strip{padding:24px;}
  .cta .ghost{display:none;}
}