/* =========================================================
   KNOCKNOW vs SALESRABBIT PAGE (knocknow-vs-salesrabbit.html)
   ========================================================= */
.vs-hero .center-bc{text-align:center}
.vs-h1{font-size:clamp(2rem,5.2vw,3.5rem)}
.sr{color:#5f7488}
.vs-lede{max-width:60ch;margin-inline:auto}
.pdf-btn{gap:.6rem}
.pdf-ic{font-size:.68rem;font-weight:800;background:rgba(255,255,255,.25);padding:.18rem .42rem;border-radius:5px;letter-spacing:.04em}

/* before / after split */
.ba-split{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;max-width:980px;margin:0 auto}
.ba-col{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 26px}
.ba-before{border-top:4px solid var(--orange)}
.ba-after{border-top:4px solid #5f7488}
.ba-tag{display:inline-block;font-family:var(--display);font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--orange-deep);background:var(--orange-soft);padding:.3rem .7rem;border-radius:999px;margin-bottom:12px}
.ba-tag-sr{color:#4a5a68;background:#eef2f5}
.ba-logo{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--brown);margin-bottom:14px}
.ba-logo span{color:var(--orange-deep)}
.ba-logo-sr{color:#51616f}
.ba-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.ba-list li{position:relative;padding-left:22px;color:#43342b;font-size:.98rem;line-height:1.5}
.ba-list li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.ba-after .ba-list li::before{background:#8aa0b0}
.ba-list b{color:var(--brown)}
.ba-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--brown-soft)}
.ba-arrow span{font-size:1.9rem}
.ba-arrow small{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}

/* scattered pins vs zone maps */
.map-compare{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:900px;margin:0 auto 6px}
.map-panel{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.map-panel.good{border:2px solid var(--orange);box-shadow:var(--shadow)}
.map-panel-head{font-family:var(--display);font-weight:700;font-size:.9rem;padding:12px 16px;text-align:center}
.map-panel-head.bad{background:#f3eee8;color:var(--brown-soft)}
.map-panel-head.good{background:linear-gradient(135deg,var(--orange-bright),var(--orange-deep));color:#fff}
.map-mini{display:block;width:100%;height:auto}
.map-panel figcaption{padding:14px 18px 18px;font-size:.92rem;color:#43342b;line-height:1.5}
.map-panel figcaption b{color:var(--brown)}

/* ROI tiles */
.roi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.roi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;text-align:center}
.roi-ic{font-size:2rem;margin-bottom:10px}
.roi b{display:block;font-family:var(--display);color:var(--brown);margin-bottom:6px;font-size:1.05rem}
.roi span{color:var(--brown-soft);font-size:.92rem;line-height:1.5}

/* team panel */
.team-panel{background:linear-gradient(140deg,var(--cream-2),#fff);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(30px,5vw,48px)}
.team-copy .kicker{display:inline-block;margin-bottom:.6rem}
.team-copy h2{margin-top:.1em}
.team-copy p{color:var(--brown-soft);font-size:1.05rem;max-width:62ch}
.team-copy .check-list{margin:18px 0 24px}

/* PDF band */
.pdf-band{display:flex;align-items:center;gap:24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 30px;box-shadow:var(--shadow-sm)}
.pdf-band-ic{flex:none;width:56px;height:56px;border-radius:14px;background:var(--orange-soft);color:var(--orange-deep);font-family:var(--display);font-weight:800;font-size:.9rem;display:grid;place-items:center}
.pdf-band-copy{flex:1}
.pdf-band-copy h3{margin:0 0 .3em}
.pdf-band-copy p{margin:0;color:var(--brown-soft);font-size:.96rem}
.pdf-band .btn{flex:none}

/* ghost button on the dark final CTA */
.fc-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.fc-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

@media (max-width:820px){
  .ba-split{grid-template-columns:1fr;gap:14px}
  .ba-arrow{flex-direction:row;gap:10px;padding:2px 0}
  .ba-arrow span{transform:rotate(90deg)}
}
@media (max-width:720px){
  .map-compare{grid-template-columns:1fr;max-width:460px}
  .roi-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .pdf-band{flex-direction:column;text-align:center}
}

/* compact explainer header for the vs page (keeps the brand's main hero on the homepage) */
.vs-explainer{padding:clamp(34px,5vw,58px) 0 clamp(22px,3vw,34px);background:linear-gradient(180deg,var(--cream),#fff);border-bottom:1px solid var(--line)}
.vs-explainer .center-bc{text-align:center}
.vs-explain-h1{font-size:clamp(1.8rem,4.2vw,2.75rem);margin:.5em 0 .45em;line-height:1.12}
.vs-explainer .lede em{color:var(--brown);font-style:italic}

/* real app screenshot inside a map panel */
.map-photo{display:block;width:100%;height:auto}