/* ComparatorIQ(TM) web sections in the approved ad language (linkedin-video/DESIGN.md, Sibling Original).
   On csint.com the type follows the live site's weights: Raleway 400 / 600 / 700 (the ads' Light 300 becomes Regular 400,
   ExtraBold 800 becomes Bold 700). The wordmark keeps its logo weights. No circles or rings, JetBrains Mono labels, thin rules, the right 40% tint panel,
   the 60/22/14/4 stripe, CSI Blue 6px buttons. Used by /homepage-b/ and /comparatoriq/. */
.cq{--bg:#F8F9FA;--panel:#E2EEF8;--ink:#0A4064;--mid:#3C5058;--rule:#CFDAE3;--em:#1C84C7;--num:#1C84C7;--wiq:#1C84C7;--wsup:#8AA0AE;
  --s1:#E3E9ED;--s2:#063E63;--s3:#1C84C7;--s4:#1AAC85;--field:#fff;--fline:#CFDAE3}
.cq.dark{--bg:#063E63;--panel:#0A4A74;--ink:#fff;--mid:rgba(255,255,255,.8);--rule:rgba(255,255,255,.22);--em:#3FD3B0;--num:#3FD3B0;--wiq:#1AAC85;--wsup:rgba(255,255,255,.5);
  --s1:#0A4A74;--s2:#F8F9FA;--s3:#1C84C7;--s4:#1AAC85;--field:rgba(255,255,255,.06);--fline:rgba(255,255,255,.28)}
.cq{position:relative;background:var(--bg);color:var(--ink);font-family:Raleway,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}
.cq *{box-sizing:border-box}

/* grid: 1228px content (the csint.com container), split 60 / 40 */
.cq .g{--cw:min(1228px,calc(100% - 48px));display:grid;grid-template-columns:[full-start] 1fr [c-start] calc(var(--cw)*.6) [split] calc(var(--cw)*.4) [c-end] 1fr [full-end];position:relative}
.cq .g>*{position:relative;z-index:1}
.cq .full{grid-column:c-start/c-end}
.cq .lc{grid-column:c-start/split;padding-right:64px}
.cq .rc{grid-column:split/c-end;padding-left:56px;position:relative;z-index:1}
.cq .g>.tint{position:absolute;z-index:0;top:0;bottom:0;right:0;left:calc((100% - var(--cw))/2 + var(--cw)*.6);background:var(--panel)}
.cq .stripe{display:flex;height:12px}
.cq .stripe i{display:block}
.cq .stripe i:nth-child(1){flex:0 0 60%;background:var(--s1)}.cq .stripe i:nth-child(2){flex:0 0 22%;background:var(--s2)}
.cq .stripe i:nth-child(3){flex:0 0 14%;background:var(--s3)}.cq .stripe i:nth-child(4){flex:0 0 4%;background:var(--s4)}

/* lockup */
.cq .lock{display:flex;align-items:center;gap:16px}
.cq .dv{position:relative;display:inline-block;line-height:0;flex:0 0 auto}
.cq .dv img{display:block;width:100%}
.cq .dv b{position:absolute;left:43.29%;top:42.51%;transform:translate(-50%,-50%);font-weight:800;line-height:1;letter-spacing:-.03em;color:#F8F9FA}
.cq.dark .dv b{color:#0A5C8C}
.cq .wmr{font-weight:600;letter-spacing:-.03em;line-height:1;white-space:nowrap;color:var(--ink)}
.cq .wmr i{font-style:normal;font-weight:900;color:var(--wiq)}
.cq .wmr sup{font-size:.3em;font-weight:700;letter-spacing:0;vertical-align:top;position:relative;top:.25em;margin-left:.08em;color:var(--wsup)}

/* type */
.cq .mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:13px;line-height:1.5;color:var(--num)}
.cq .hr{font-weight:400;letter-spacing:-.025em;line-height:1.08;color:var(--ink);margin:0}
.cq .hr .ln{display:block;overflow:hidden;padding:0 .06em .1em 0;margin-bottom:-.1em}
.cq .hr .ln>span{display:inline-block}
.cq .hr .b{font-weight:700}
.cq .hr em{font-style:normal;color:var(--em)}
.cq .hr sup,.cq .tm{font-size:.3em;font-weight:700;letter-spacing:0;vertical-align:top;position:relative;top:.32em;margin:0 -.04em 0 .05em;opacity:.55}
.cq .h1{font-size:clamp(40px,4.5vw,64px)}
.cq .h2{font-size:clamp(34px,3.6vw,52px)}
.cq .hs{font-size:clamp(32px,3.2vw,46px)}   /* homepage sections: the size of version A's section headline */
.cq .h3{font-size:clamp(26px,2.4vw,34px)}
.cq .body{font-weight:400;font-size:18px;line-height:1.62;color:var(--mid);max-width:640px;margin:0}
.cq .body b{font-weight:700;color:var(--ink)}
.cq .lead{font-weight:400;font-size:22px;line-height:1.45;color:var(--ink);margin:0;max-width:640px}
.cq .rule{height:1px;background:var(--rule);transform-origin:0 50%}

/* buttons: 6px radius rectangles, never pills */
.cq .btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.cq .btnr{display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 26px;border-radius:6px;background:#1C84C7;color:#fff;font-weight:700;font-size:16.5px;letter-spacing:-.005em;white-space:nowrap;text-decoration:none;border:0;cursor:pointer;font-family:Raleway,sans-serif;transition:background .2s}
.cq .btnr:hover{background:#1673AF}
.cq .btnr svg{width:17px;height:17px;flex:0 0 auto}
.cq .btno{display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 24px;border-radius:6px;border:1.5px solid var(--rule);color:var(--ink);font-weight:700;font-size:16.5px;white-space:nowrap;text-decoration:none;transition:border-color .2s}
.cq .btno:hover{border-color:var(--em)}
.cq .lnk{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--ink);text-decoration:none;display:inline-flex;gap:10px;align-items:center;border-bottom:1px solid var(--rule);padding-bottom:4px}
.cq .lnk:hover{border-color:var(--em)}

/* ruled rows: mono numeral, ExtraBold label, optional sub line, optional right tag */
.cq .rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.cq .rows li{display:grid;grid-template-columns:44px 1fr auto;column-gap:14px;align-items:baseline;padding:20px 0 21px;border-bottom:1px solid var(--rule)}
.cq .rows .n{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:13px;letter-spacing:.14em;color:var(--num)}
.cq .rows b{display:block;font-weight:700;font-size:20px;line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.cq .rows span.s{display:block;font-weight:400;font-size:15.5px;line-height:1.5;color:var(--mid);margin-top:5px}
.cq .rows .t{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--num);white-space:nowrap}
.cq .rows.xl li{padding:22px 0 23px}
.cq .rows.xl b{font-size:clamp(20px,1.75vw,25px);letter-spacing:-.015em}

/* 2 x 2 numeral grid */
.cq .pil{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 32px}
.cq .pil li{display:flex;gap:14px;align-items:baseline}
.cq .pil .n{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:13px;letter-spacing:.14em;color:var(--num)}
.cq .pil b{font-weight:600;font-size:18px;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}

/* inset footage frame + progress rule */
.cq .frame{position:relative;background:#041B2D;aspect-ratio:16/9;overflow:hidden}
.cq .frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cq .prog{height:3px;background:var(--num);transform-origin:0 50%;transform:scaleX(0);margin-top:14px}

/* motion: calm and editorial; only when JS is on and motion is allowed */
@media (prefers-reduced-motion:no-preference){
  html.js .cq .rv .ln>span{transform:translateY(108%);transition:transform .95s cubic-bezier(.2,.75,.15,1)}
  html.js .cq .rv.in .ln>span{transform:none}
  html.js .cq .rv .ln:nth-child(2)>span{transition-delay:.12s}html.js .cq .rv .ln:nth-child(3)>span{transition-delay:.24s}
  html.js .cq .rv.rule,html.js .cq .rv .rule{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.3,.7,.2,1)}
  html.js .cq .rv.in.rule,html.js .cq .rv.in .rule{transform:none}
  html.js .cq .fu{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.75,.15,1)}
  html.js .cq .fu.in{opacity:1;transform:none}
  html.js .cq .rows.fu li,html.js .cq .pil.fu li{opacity:0;transform:translateX(-14px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.75,.15,1)}
  html.js .cq .rows.fu.in li,html.js .cq .pil.fu.in li{opacity:1;transform:none}
  html.js .cq .rows.fu li:nth-child(2),html.js .cq .pil.fu li:nth-child(2){transition-delay:.1s}
  html.js .cq .rows.fu li:nth-child(3),html.js .cq .pil.fu li:nth-child(3){transition-delay:.2s}
  html.js .cq .rows.fu li:nth-child(4),html.js .cq .pil.fu li:nth-child(4){transition-delay:.3s}
  html.js .cq .rows.fu li:nth-child(5){transition-delay:.4s}
}

@media (max-width:980px){
  .cq .g{grid-template-columns:[full-start] 24px [c-start] minmax(0,1fr) [c-end] 24px [full-end]}
  .cq .lc,.cq .rc{grid-column:c-start/c-end;padding:0}
  .cq .g>.tint{display:none}
  .cq .rc.pan{grid-column:full-start/full-end;background:var(--panel);padding:40px 24px 44px;margin-top:48px}
  .cq .pil{grid-template-columns:1fr}
}

/* device swaps with the tone (paper device on light, reversed device on dark) */
.cq .dv .dd{display:none}.cq.dark .dv .dl{display:none}.cq.dark .dv .dd{display:block}

/* section scaffolding shared by both pages */
.cq .hd{display:flex;align-items:center;justify-content:space-between;padding:44px 0 30px}
.cq .pad{padding-top:64px;padding-bottom:96px}
.cq .bleed{grid-column:full-start/full-end}
.cq .rows.sm li{grid-template-columns:40px 1fr;padding:15px 0 16px}
.cq .rows.sm b{font-size:17.5px;font-weight:600}
.cq .rows.wide li{grid-template-columns:44px minmax(0,1.05fr) minmax(0,1fr);column-gap:24px;padding:28px 0 29px}
.cq .rows.wide b{font-size:clamp(22px,2vw,27px);letter-spacing:-.02em}
.cq .rows.wide span.s{margin-top:0;font-size:16.5px}
.cq .stmt{font-weight:400;font-size:clamp(22px,2vw,27px);line-height:1.3;letter-spacing:-.015em;color:var(--ink);margin:0}
.cq .stmt b{font-weight:700}
.cq .stmt em{font-style:normal;font-weight:700;color:var(--em)}
.cq .sp8{height:8px}.cq .sp16{height:16px}.cq .sp24{height:24px}.cq .sp32{height:32px}.cq .sp40{height:40px}.cq .sp56{height:56px}
@media (max-width:980px){
  .cq .rows li{grid-template-columns:36px 1fr}
  .cq .rows .t{grid-column:2;margin-top:6px}
  .cq .rows.wide li{grid-template-columns:36px 1fr}
  .cq .rows.wide span.s{grid-column:2;margin-top:8px}
  .cq .pad{padding-top:44px;padding-bottom:64px}
  .cq .lc.pad{padding-bottom:0}.cq .lc.pad:last-child{padding-bottom:64px}
  .cq .rc.pad:not(.pan){padding-top:36px}
  .cq .hd{padding:32px 0 22px}
}