/* 3-way comparison page styling. Loaded alongside site.css. */

:root{
  --bg:#FAFBFC;
  --card:#FFFFFF;
  --ink:#0C374D;
  --ink-2:#05080B;
  --muted:#536B7E;
  --faint:#8BA0B3;
  --line:rgba(12,55,77,.08);
  --line-soft:rgba(12,55,77,.06);
  --teal:#4FA6C0;
  --teal-soft:#E0F0F5;
  --teal-ink:#2B7A92;
  --luxafor:#7A5BC3;          /* Luxafor brand accent (purple) */
  --luxafor-soft:#EFEAF8;
  --kuando:#E87722;           /* Kuando/Plenom brand accent (orange) */
  --kuando-soft:#FCE7D3;
}

body{padding-top:80px}

.section{max-width:1180px;margin:0 auto;padding:64px 32px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);font-weight:700;margin-bottom:14px}
h2{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.02em;line-height:1.1;font-weight:700;color:var(--ink);text-wrap:balance}
h2 em{font-style:normal;color:var(--teal)}

/* ----- HERO ----- */
.cmp-hero{padding:48px 32px 24px;max-width:1180px;margin:0 auto}
.cmp-hero-inner{max-width:880px}
.cmp-breadcrumb{font-size:13px;color:var(--muted);margin-bottom:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cmp-breadcrumb a{color:var(--muted);text-decoration:none}
.cmp-breadcrumb a:hover{color:var(--teal-ink)}
.cmp-breadcrumb span{color:var(--faint)}
.cmp-breadcrumb b{color:var(--ink);font-weight:600}
.cmp-disclosure{display:inline-block;background:#FFF7E6;border:1px solid #F7D78D;color:#6B4E12;padding:10px 16px;border-radius:8px;font-size:13.5px;line-height:1.5;margin-bottom:24px;max-width:760px}
.cmp-h1{font-size:clamp(34px,4.8vw,56px);font-weight:700;letter-spacing:-.025em;line-height:1.05;color:var(--ink);margin-bottom:20px;text-wrap:balance}
.cmp-h1 em{font-style:normal;color:var(--teal)}
.cmp-lede{color:var(--muted);font-size:18px;line-height:1.6;max-width:760px;margin-bottom:14px}
.cmp-meta{font-size:13px;color:var(--faint);font-weight:500}

/* ----- 4-COLUMN GLANCE TABLE ----- */
.cmp-table-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--line-soft);background:#fff;box-shadow:0 2px 14px rgba(12,55,77,.04)}
.cmp-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:880px}
.cmp-table thead th{text-align:left;padding:18px 18px;background:#F1F3F4;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-soft);font-size:13.5px;vertical-align:bottom;width:25%}
.cmp-table thead th:first-child{color:var(--faint);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.1em;width:18%}
.cmp-th-pill{display:inline-block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:999px;margin-right:6px;vertical-align:middle}
.cmp-th-pill.em{background:var(--teal-soft);color:var(--teal-ink)}
.cmp-th-pill.lx{background:var(--luxafor-soft);color:var(--luxafor)}
.cmp-th-pill.ku{background:var(--kuando-soft);color:var(--kuando)}
.cmp-table td{padding:14px 18px;border-bottom:1px solid var(--line-soft);color:var(--ink);vertical-align:top;line-height:1.5}
.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table tbody td:first-child{color:var(--faint);font-weight:600;font-size:13px;letter-spacing:.02em}
.cmp-table td em{font-style:normal;color:var(--teal);font-weight:600}

/* ----- 3-CARD CHOOSE GRID ----- */
.cmp-choose{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cmp-card{background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:26px 24px 22px;transition:transform .2s,box-shadow .2s}
.cmp-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(12,55,77,.08)}
.cmp-card.embrava{border-top:4px solid var(--teal)}
.cmp-card.luxafor{border-top:4px solid var(--luxafor)}
.cmp-card.kuando{border-top:4px solid var(--kuando)}
.cmp-card-h{font-weight:700;font-size:17px;color:var(--ink);margin-bottom:16px;letter-spacing:-.01em}
.cmp-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.cmp-card li{position:relative;padding-left:18px;color:var(--muted);font-size:14.5px;line-height:1.6}
.cmp-card li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px}
.cmp-card.embrava li::before{background:var(--teal)}
.cmp-card.luxafor li::before{background:var(--luxafor)}
.cmp-card.kuando li::before{background:var(--kuando)}
.cmp-card li em{font-style:normal;color:var(--ink);font-weight:600}

/* ----- DEEP DIVE COPY ----- */
.section#form p,
.section#software p,
.section#deployment p,
.section#bottom-line p{color:var(--muted);font-size:16px;line-height:1.7;max-width:880px;margin:14px 0}
.section#form p b,
.section#software p b,
.section#deployment p b,
.section#bottom-line p b{color:var(--ink)}
.section#form p em,
.section#software p em,
.section#deployment p em,
.section#bottom-line p em{font-style:italic;color:var(--ink)}

/* ----- 3-COLUMN SOFTWARE GRID ----- */
.cmp-sw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0 8px}
.cmp-sw{background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:22px 22px 18px}
.cmp-sw h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.cmp-sw ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.cmp-sw li{font-size:14px;color:var(--muted);line-height:1.55;padding-left:14px;position:relative}
.cmp-sw li::before{content:"›";position:absolute;left:0;top:0;color:var(--faint);font-weight:700}
.cmp-sw li em{font-style:normal;color:#C44545;font-weight:600;background:#FCE8E8;padding:1px 6px;border-radius:4px;font-size:12px;margin-left:4px}

/* ----- BULLETS ----- */
.cmp-bullets{list-style:none;padding:0;margin:14px 0;max-width:880px;display:flex;flex-direction:column;gap:10px}
.cmp-bullets li{padding-left:22px;position:relative;color:var(--muted);font-size:16px;line-height:1.65}
.cmp-bullets li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:2px;background:var(--teal)}
.cmp-bullets li b{color:var(--ink)}

/* ----- FAQ ----- */
.cmp-faq{max-width:900px}
.cmp-faq details{border:1px solid var(--line-soft);border-radius:12px;margin-bottom:10px;background:#fff;transition:background .2s}
.cmp-faq details[open]{box-shadow:0 4px 12px rgba(12,55,77,.05)}
.cmp-faq summary{cursor:pointer;padding:18px 22px;font-weight:600;font-size:16px;color:var(--ink);list-style:none;position:relative;padding-right:48px}
.cmp-faq summary::-webkit-details-marker{display:none}
.cmp-faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:400;color:var(--faint);transition:transform .2s}
.cmp-faq details[open] summary::after{content:"−";color:var(--teal-ink)}
.cmp-faq .a{padding:0 22px 20px;color:var(--muted);font-size:15.5px;line-height:1.65}

/* ----- FINAL CTA ----- */
.cmp-final-cta{background:linear-gradient(180deg,#05080D 0%,#0C374D 55%,#164FB1 100%);color:#fff;border-radius:24px;padding:56px 48px;text-align:center;max-width:920px;margin:0 auto}
.cmp-final-cta h2{color:#fff}
.cmp-final-cta h2 em{color:#7DF9FF}
.cmp-final-cta p{color:rgba(255,255,255,.78);font-size:16px;line-height:1.6;max-width:580px;margin:14px auto 26px}
.cmp-final-cta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cmp-final-cta .btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.3)}
.cmp-final-cta .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}

/* ----- REVEAL ----- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.reveal.is-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ----- RESPONSIVE ----- */
@media (max-width:1000px){
  .cmp-choose{grid-template-columns:1fr 1fr}
  .cmp-sw-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .section{padding:48px 24px}
  .cmp-hero{padding:32px 24px 16px}
  .cmp-choose{grid-template-columns:1fr}
  .cmp-sw-grid{grid-template-columns:1fr}
  .cmp-final-cta{padding:40px 28px}
  .cmp-table-wrap{border-radius:10px}
  .cmp-faq summary{font-size:15px;padding:16px 18px;padding-right:42px}
}