/* Kyros · compare pages (/compare and the four /compare/* competitor pages). Boards: Co*, Cs*, Sp*, Dz*, Np*. */
:root{--cmp-x:var(--gutter)}
@media (max-width:900px){:root{--cmp-x:24px}}
@media (max-width:480px){:root{--cmp-x:20px}}

/* shared type */
.cmp-h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.306vw,62px);line-height:1.06;letter-spacing:-.035em;color:#141922;max-width:980px}
.cmp-h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.056vw,44px);line-height:1.08;letter-spacing:-.035em;color:#141922}
.cmp-h2--46{font-size:clamp(32px,3.195vw,46px)}
.cmp-h2--48{font-size:clamp(32px,3.334vw,48px)}
.cmp-h2--52{font-size:clamp(34px,3.612vw,52px);color:#fff}
.cmp-hero .eyebrow-dot,.cmp-sec-head .eyebrow,.cmp-why .eyebrow,.cmp-sw .eyebrow{line-height:normal}
.cmp-foot{font-size:12.5px;line-height:normal;color:#8a93a1}
.cmp-nw{white-space:nowrap}

/* ---------- hero (CoHero / CsHero / SpHero / DzHero / NpHero) ---------- */
.cmp-hero{position:relative;overflow:hidden;min-height:640px;background:#fff;text-align:center}
.cmp-hero--sw{min-height:672px}
.cmp-hero-wash{position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.cmp-hero-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;padding:128px var(--cmp-x) 64px}
.cmp-lead{max-width:720px;font-size:clamp(16.5px,1.285vw,18.5px);line-height:1.6;color:#4e5a6b}
.cmp-hero-btns{justify-content:center;margin-top:6px}
.cmp-note{font-size:13px;line-height:normal;color:#6b7585}
/* "Compare Kyros with" switcher */
.cmp-switch{display:flex;align-items:center;gap:8px;margin-bottom:18px}
.cmp-switch-label{font-size:13px;line-height:normal;color:#6b7585;margin-right:4px}
.cmp-pills{display:flex;gap:8px}
.cmp-pill{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 16px;border-radius:999px;font-size:13.5px;line-height:normal;white-space:nowrap;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(20,30,50,.12);color:#2a3342;transition:background-color .2s,box-shadow .2s}
.cmp-pill:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(20,30,50,.22)}
.cmp-pill[aria-current="page"]{background:#141922;color:#fff;box-shadow:none}

/* ---------- section head ---------- */
.cmp-sec-head{display:flex;flex-direction:column;gap:12px;text-align:center;margin-bottom:40px}

/* ---------- overview table (CoTable) ---------- */
.cmp-all{padding:96px var(--cmp-x);background:#fff}
.cmp-all .cmp-sec-head{margin-bottom:44px}
.cmp-o{width:min(1120px,100%);margin:0 auto}
.cmp-o-tr{position:relative;display:grid;grid-template-columns:1.1fr .8fr 1.1fr 1.6fr .7fr;align-items:center;border-top:1px solid rgba(20,30,50,.09);font-size:15px;line-height:19px;color:#141922}
.cmp-o-th{border-top:0;align-items:stretch;line-height:15px}
.cmp-o-th .cmp-o-c{padding:0 0 14px;font-size:12.5px;color:#6b7585}
.cmp-o-name{padding:18px 0;font-weight:500}
.cmp-o-m{color:#5d6878}
.cmp-o-kyros{border-top:0;border-radius:16px;padding:0 20px;margin:0 -20px 6px;color:#fff}
.cmp-o-kyros .cmp-o-m{color:#aab3c0}
.cmp-o-go{text-align:right;color:#2b5d92}
.cmp-o-go a{transition:color .2s}
.cmp-o-go a::after{content:"";position:absolute;inset:0}
.cmp-o-tr:hover .cmp-o-go a{color:#1d4a7a;text-decoration:underline;text-underline-offset:3px}
.cmp-o .cmp-foot{margin-top:28px}

/* ---------- competitor table (CsTable / SpTable / DzTable / NpTable) ---------- */
.cmp-glance{padding:96px var(--cmp-x) 64px;background:#fff}
.cmp-t{position:relative;width:min(1100px,100%);margin:0 auto}
.cmp-t-col{position:absolute;left:calc(100% * 1.25 / 3.25);width:calc(100% / 3.25);top:0;bottom:-18px;border-radius:20px;box-shadow:0 30px 50px -34px rgba(15,20,30,.6)}
.cmp-t-tbl{position:relative}
.cmp-t-tr{display:grid;grid-template-columns:1.25fr 1fr 1fr;align-items:center;border-top:1px solid rgba(20,30,50,.09);font-size:14.5px;line-height:1.45}
.cmp-t-th{border-top:0;align-items:end}
.cmp-t-lbl{padding:15px 12px 15px 0;color:#3d4a5c}
.cmp-t-k,.cmp-t-c{padding:13px 22px;text-align:center}
.cmp-t-k{color:#fff}
.cmp-t-strong{font-weight:500}
.cmp-t-c{color:#1a2230}
.cmp-t-th .cmp-t-head{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 0 18px}
.cmp-t-name{font:400 26px/1.08 var(--serif);letter-spacing:-.035em;color:#141922}
.cmp-t-k .cmp-t-name{color:#fff}
.cmp-t-sub{font-size:13px;line-height:16px;color:#6b7585}
.cmp-t-k .cmp-t-sub{color:#aab3c0}
.cmp-t-foot{width:min(1100px,100%);margin:40px auto 0}

/* ---------- why businesses switch (CsWhy …) ---------- */
.cmp-why{min-height:640px;padding:96px var(--cmp-x)}
.cmp-why-in{max-width:1200px;margin:0 auto}
.cmp-why-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px}
.cmp-why-head{display:flex;flex-direction:column;gap:12px}
.cmp-why .eyebrow{color:#8d97a6}
.cmp-why-top .btns{flex:none}
.cmp-why-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.cmp-why-card{display:flex;flex-direction:column;gap:12px;padding:26px 24px;border-radius:20px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.cmp-why-n{font-size:12px;line-height:normal;color:#8d97a6}
.cmp-why-t{margin:0;font-size:18px;font-weight:500;line-height:1.3;color:#fff}
.cmp-why-card p{font-size:14.5px;line-height:1.55;color:#aab3c0}

/* ---------- switching offer + what a month costs (stacked pin: *Sw1 then *Sw2) ---------- */
.cmp-sw{background:#fff}
.cmp-sw-panel{height:min(700px,100vh - 116px);padding:88px var(--cmp-x) 52px;background:#fff}
.cmp-sw-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(48px,5.556vw,80px);align-items:center;max-width:1200px;margin:0 auto}
.cmp-sw-text{display:flex;flex-direction:column;gap:18px}
.cmp-sw-lead{font-size:17px;line-height:1.6;color:#5d6878}
.cmp-ticks{display:flex;flex-direction:column;gap:10px;margin:4px 0 0;padding:0;list-style:none}
.cmp-ticks li{display:flex;align-items:center;gap:10px;font-size:15px;line-height:normal}
.cmp-tick{flex:none}
.cmp-frame{height:min(560px,100vh - 260px);border-radius:28px;padding:9px;box-shadow:0 34px 64px -38px rgba(15,20,30,.6)}
.cmp-screen{position:relative;height:100%;border-radius:20px;overflow:hidden;display:grid;place-items:center;font-family:var(--ui);color:#151b26}
.cmp-card-lbl{font-size:10px;line-height:12px;letter-spacing:.1em;text-transform:uppercase;color:#6b7585;padding:2px 4px 10px}
/* offer card */
.cmp-offer{width:min(470px,100% - 40px);border-radius:20px;padding:22px}
.cmp-offer-big{padding:0 4px;font:400 clamp(30px,3.056vw,44px)/1.05 var(--serif);letter-spacing:-.03em}
.cmp-offer-p{margin:12px 4px 16px;font-size:13.5px;line-height:1.55;color:#5d6878}
.cmp-offer-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:13px;line-height:14px}
.cmp-offer-row span{color:#5d6878}
.cmp-offer-row b{font-weight:500;white-space:nowrap}
.cmp-offer-row.is-on{background:#eef6ff;box-shadow:inset 0 0 0 1.5px #3d8fe0}
/* monthly bill bars: drawn widths at 1440, scaled with the card below that */
.cmp-bill{width:min(470px,100% - 40px);border-radius:18px;padding:18px}
.cmp-bars{display:flex;flex-direction:column;gap:20px;padding:4px 4px 6px}
.cmp-bars-g{display:flex;flex-direction:column;gap:8px;container-type:inline-size}
.cmp-bars-cap{font-size:12px;line-height:14px;color:#5d6878}
.cmp-bar{display:flex;align-items:center;gap:10px;font-size:13px;line-height:normal}
.cmp-bar i{display:block;flex:none;height:22px;border-radius:7px;width:calc((100cqw - 126px) * var(--w) / 300)}
.cmp-bar--k i{background:#141922}
.cmp-bar--k b{font-weight:500}
.cmp-bar--c i{background:#c3ccd8}
.cmp-bar--c span{color:#5d6878}

/* ---------- in between ---------- */
@media (max-width:1439px){
  .cmp-hero,.cmp-hero--sw{min-height:0}
  .cmp-hero-in{padding-bottom:clamp(96px,9vw,130px)}
}
@media (max-width:1199px){
  .cmp-why-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cmp-why-card{grid-column:span 2}
  .cmp-why-card:nth-child(n+4){grid-column:span 3}
  .cmp-why{min-height:0}
}
@media (max-width:1024px){
  .cmp-hero-in{padding-top:146px}
}

/* ---------- tablets and phones ---------- */
@media (max-width:900px){
  .cmp-hero-in{padding:146px var(--cmp-x) clamp(96px,9vw,130px);gap:20px}
  .cmp-pill{height:44px}
  .cmp-note{font-size:14px}
  .cmp-foot{font-size:13px;line-height:1.45}
  .cmp-all{min-height:0;padding:64px var(--cmp-x)}
  .cmp-glance{padding:64px var(--cmp-x)}
  .cmp-sec-head{margin-bottom:28px}
  .cmp-all .cmp-sec-head{margin-bottom:28px}

  /* overview: one card per company */
  .cmp-o-th{display:none}
  .cmp-o-tr{grid-template-columns:1fr auto;grid-template-areas:"name go" "m1 m1" "m2 m2" "win win";gap:4px 16px;padding:18px 0}
  .cmp-o-c:nth-child(1){grid-area:name}
  .cmp-o-c:nth-child(2){grid-area:m1}
  .cmp-o-c:nth-child(3){grid-area:m2}
  .cmp-o-c:nth-child(4){grid-area:win;margin-top:6px}
  .cmp-o-c:nth-child(5){grid-area:go}
  .cmp-o-kyros .cmp-o-c:nth-child(5){display:none}
  .cmp-o-name{padding:0;font-size:17px}
  .cmp-o-m::before{content:attr(data-label) " · ";color:#8a93a1}
  .cmp-o-kyros .cmp-o-m::before{color:#8d97a6}
  .cmp-o-kyros{margin:0 -4px 6px;padding:18px 14px}
  .cmp-o-go a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0}
  .cmp-o-c{line-height:1.4;text-wrap:pretty}

  /* competitor table: label above, Kyros and competitor side by side */
  .cmp-t-col{display:none}
  .cmp-t-tr{grid-template-columns:1fr 1fr;gap:6px;border-top:0;padding:0 0 14px;align-items:stretch}
  .cmp-t-lbl{grid-column:1/-1;padding:0 2px 2px;font-size:13px}
  .cmp-t-th .cmp-t-lbl{display:none}
  .cmp-t-k,.cmp-t-c{display:flex;align-items:center;justify-content:center;padding:12px 12px;border-radius:12px;font-size:15px;line-height:1.4}
  .cmp-t-k{background:linear-gradient(160deg,#262d38 0%,#1b2029 60%,#171b22 100%)}
  .cmp-t-c{background:#f2f4f7}
  .cmp-t-th .cmp-t-head{padding:16px 8px}
  .cmp-t-name{font-size:22px}
  .cmp-t-foot{margin-top:14px}

  /* why */
  .cmp-why{padding:64px var(--cmp-x)}
  .cmp-why-top{flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:32px}
  .cmp-why-grid{grid-template-columns:1fr;gap:12px}
  .cmp-why-card,.cmp-why-card:nth-child(n+4){grid-column:auto}
  .cmp-why-card{padding:22px 20px;gap:10px}
  .cmp-why-card p{font-size:15px}

  /* switching panels simply stack */
  .cmp-sw-panel{height:auto;padding:56px var(--cmp-x)}
  .cmp-sw .stack-stage{gap:0}
  .cmp-sw-grid{grid-template-columns:1fr;gap:32px}
  .cmp-frame{height:auto;border-radius:24px;padding:8px}
  .cmp-screen{min-height:0;padding:40px 0;border-radius:17px}
  .cmp-offer,.cmp-bill{width:min(470px,100% - 28px)}
  .cmp-offer-big{font-size:clamp(30px,8vw,40px)}
}
@media (max-width:700px){
  .cmp-hero-in{padding-top:128px}
}
@media (max-width:640px){
  .cmp-switch{flex-direction:column;gap:10px;margin-bottom:8px}
  .cmp-switch-label{margin:0}
  .cmp-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(320px,100%)}
  .cmp-pill{height:44px}
  .cmp-hero-btns{width:100%}
  .cmp-hero-btns .btn{flex:1 1 0;padding:0 16px}
  .cmp-why-top .btns{width:100%}
  .cmp-why-top .btn{flex:1 1 0;padding:0 16px}
  .cmp-sw-lead{font-size:16px}
  .cmp-offer,.cmp-bill{padding:16px}
  .cmp-offer-row{padding:10px 8px}
}