/* Comparativo "SaaS x HighEnd": a coluna da HighEnd é um cartão verde contínuo que sobe e desce
   além da tabela (faixa absoluta que reusa o mesmo grid das linhas, então alinha sozinha).
   O lado do SaaS fica recuado numa faixa cinza, com checks apagados e ✕ no lugar do vazio. */
.cmp { padding: 128px 0; }
.cmp-in { max-width: 1120px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: column; gap: 56px; }
.cmp-head { display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; }
.cmp-head h2 { margin: 0; max-width: 860px; font: 600 clamp(36px, 4.6vw, 60px)/1.05 'Funnel Display', sans-serif; letter-spacing: -0.025em; color: #D9C8B7; text-wrap: balance; }
.cmp-head h2 span { color: #8090AC; }
.cmp-head p { margin: 0; max-width: 620px; font: 400 17px/1.6 'Plus Jakarta Sans', sans-serif; color: #A3B1C8; text-wrap: pretty; }

.cmp-tb {
  --cols: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  --px: 24px;
  --lift: 14px;
  position: relative;
  background: #0B1A30;
  border: 1px solid rgba(150, 180, 225, 0.1);
  border-radius: 16px;
}

/* faixas de fundo: mesmo grid e mesmo respiro lateral das linhas */
.cmp-band { position: absolute; inset: calc(var(--lift) * -1) var(--px); display: grid; grid-template-columns: var(--cols); pointer-events: none; z-index: 0; }
.cmp-band-saas { margin: var(--lift) 0; background: linear-gradient(180deg, rgba(120, 128, 142, 0.07), rgba(120, 128, 142, 0.03)); }
.cmp-band-he {
  position: relative;
  border: 1px solid rgba(88, 212, 23, 0.5);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(88, 212, 23, 0.2) 0%, rgba(88, 212, 23, 0.07) 42%, rgba(88, 212, 23, 0.11) 100%), #0B1A30;
  box-shadow: 0 0 0 4px rgba(88, 212, 23, 0.06), 0 30px 80px -24px rgba(88, 212, 23, 0.45), inset 0 1px 0 rgba(170, 255, 120, 0.3);
}
.cmp-band-he::before { content: ''; position: absolute; top: -1px; left: 18%; right: 18%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #9BF55E, transparent); }

.cmp-row { position: relative; z-index: 1; display: grid; grid-template-columns: var(--cols); align-items: center; padding: 13px var(--px); border-top: 1px solid rgba(150, 180, 225, 0.06); }
.cmp-row.is-hd { padding: 22px var(--px) 20px; border-top: 0; }
.cmp-row.is-cut { border-top: 1px solid rgba(255, 195, 15, 0.4); }
.cmp-row.is-extra { background: rgba(255, 195, 15, 0.025); }
.cmp-row.is-last { border-radius: 0 0 15px 15px; }

.cmp-cap { font: 500 14px/1.35 'Plus Jakarta Sans', sans-serif; color: #D9C8B7; }
.is-hd .cmp-cap { font: 600 10px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #8090AC; }
.cmp-saas, .cmp-he { display: flex; justify-content: center; text-align: center; }
.is-hd .cmp-saas { font: 600 13px 'Plus Jakarta Sans', sans-serif; color: #6E7686; }
.is-hd .cmp-he img { height: 22px; width: auto; display: block; filter: drop-shadow(0 0 14px rgba(88, 212, 23, 0.35)); }

/* SaaS: tudo em cinza neutro, recuado */
.cmp-saas b { font-weight: 500; }
.cmp-saas .cmp-ok { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(140, 148, 162, 0.28); display: flex; align-items: center; justify-content: center; font: 600 11px 'Plus Jakarta Sans', sans-serif; color: #7A8291; }
.cmp-saas .cmp-no { font: 500 14px 'Plus Jakarta Sans', sans-serif; color: #59606E; }
.cmp-saas .cmp-txt { font: 500 13px 'Plus Jakarta Sans', sans-serif; color: #6E7686; }

/* HighEnd: verde cheio, com brilho */
.cmp-he .cmp-ok { width: 26px; height: 26px; border-radius: 50%; background: #58D417; display: flex; align-items: center; justify-content: center; font: 800 13px 'Plus Jakarta Sans', sans-serif; color: #06101F; box-shadow: 0 0 0 4px rgba(88, 212, 23, 0.14), 0 0 20px rgba(88, 212, 23, 0.5); }
.cmp-he .cmp-txt { padding: 5px 13px; border-radius: 999px; background: rgba(88, 212, 23, 0.16); border: 1px solid rgba(88, 212, 23, 0.5); font: 700 13px 'Plus Jakarta Sans', sans-serif; color: #8DF24F; white-space: nowrap; text-shadow: 0 0 16px rgba(88, 212, 23, 0.55); }

/* variante "luz": a mesma iluminação do topo de "Como a sua operação vende?" */
.cmp--luz { border-top: 1px solid rgba(150, 180, 225, 0.08); background: radial-gradient(1000px 520px at 50% 0%, rgba(1, 34, 75, 0.8) 0%, rgba(1, 34, 75, 0) 70%); }

/* variante clara: fundo do hero claro; o SaaS fica apagado em cinza claro e a coluna da
   HighEnd vira um cartão escuro da marca, com o verde aceso por cima */
.cmp--clara { background: radial-gradient(1000px 520px at 50% 0%, rgba(195, 200, 232, 0.9) 0%, rgba(195, 200, 232, 0) 70%), #F5F6FA; }
.cmp--clara .cmp-head h2 { color: #0F172A; }
.cmp--clara .cmp-head h2 span { color: #1275A6; }
.cmp--clara .cmp-head p { color: #475569; }
.cmp--clara .cmp-tb { background: #FFFFFF; border-color: rgba(15, 23, 42, 0.08); box-shadow: 0 30px 80px rgba(15, 23, 42, 0.08); }
.cmp--clara .cmp-row { border-top-color: rgba(15, 23, 42, 0.06); }
.cmp--clara .cmp-row.is-cut { border-top-color: rgba(204, 153, 0, 0.5); }
/* sem o tom dourado das linhas de baixo: ele acinzentava o cartão escuro da HighEnd */
.cmp--clara .cmp-row.is-extra { background: transparent; }
.cmp--clara .cmp-cap { color: #0F172A; }
.cmp--clara .is-hd .cmp-cap { color: #64748B; }
.cmp--clara .is-hd .cmp-saas { color: #94A3B8; }
.cmp--clara .cmp-band-saas { background: linear-gradient(180deg, rgba(100, 116, 139, 0.08), rgba(100, 116, 139, 0.04)); }
.cmp--clara .cmp-saas .cmp-ok { border-color: rgba(100, 116, 139, 0.3); color: #94A3B8; }
.cmp--clara .cmp-saas .cmp-no { color: #CBD5E1; }
.cmp--clara .cmp-saas .cmp-txt { color: #94A3B8; }
.cmp--clara .cmp-band-he {
  border-color: rgba(88, 212, 23, 0.6);
  background: radial-gradient(240px 180px at 50% 0%, rgba(88, 212, 23, 0.28), transparent 70%), linear-gradient(180deg, #0B1E33, #06101F);
  box-shadow: 0 0 0 4px rgba(88, 212, 23, 0.1), 0 36px 80px -24px rgba(6, 16, 31, 0.55), 0 0 50px -12px rgba(88, 212, 23, 0.45);
}

@media (max-width: 640px) {
  .cmp { padding: 88px 0; }
  .cmp-in { padding: 0 16px; gap: 44px; }
  .cmp-tb { --cols: minmax(0, 1.35fr) minmax(0, 0.85fr) minmax(0, 1fr); --px: 12px; --lift: 10px; }
  .cmp-row { padding: 12px var(--px); }
  .cmp-row.is-hd { padding: 18px var(--px) 16px; }
  .cmp-cap { font-size: 13px; }
  .is-hd .cmp-saas { font-size: 11px; }
  .is-hd .cmp-he img { height: 15px; }
  .cmp-saas .cmp-txt { font-size: 11.5px; }
  .cmp-he .cmp-txt { padding: 4px 9px; font-size: 11.5px; }
  .cmp-he .cmp-ok { width: 22px; height: 22px; font-size: 11px; }
  .cmp-saas .cmp-ok { width: 20px; height: 20px; }
}