:root{
  --champion:var(--bk-color-secondary, #a4ace5);
  --champion-ink:var(--bk-color-secondary, #585cba);
  --sage:var(--bk-color-secondary, #b6bbed);
  --lavender:var(--bk-color-secondary, #b3bbe9);
  --royal:var(--bk-color-primary, #1e193a);
  --royal-2:#201b3b;
  --bow:var(--bk-color-primary, #534b7e);
  --nude:var(--bk-color-surface, #f3f2f1);
  --nude-2:#ece9e3;
  --white:var(--bk-color-background, #ffffff);

  --ink:var(--royal);
  --ink-2:var(--bow);
  --mute:var(--bk-color-secondary, #8a86a3);
  --rule:var(--bk-color-surface, #e4e1db);
  --rule-2:#d6d2ca;

  --radius:16px;
  --radius-sm:10px;
  --radius-pill:999px;

  --font-sans:'Montserrat',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'Montserrat',ui-sans-serif,system-ui,sans-serif;

  --wrap:1240px;
  --shadow-2:0 2px 6px rgba(41,35,74,.05), 0 20px 50px -20px rgba(41,35,74,.18);
  --shadow-3:0 30px 80px -30px rgba(41,35,74,.28);
  --page-bg:var(--bk-color-surface, #f3f2f1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bk-color-surface, var(--page-bg));color:var(--bk-p-color, var(--bk-color-ink, var(--ink)));font-family:var(--bk-p-family, var(--bk-font-base, var(--font-sans)));font-weight:var(--bk-p-weight, 400);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-size:var(--bk-p-size, 16px);line-height:var(--bk-p-line-height, 1.6);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--bk-overline-family, var(--bk-font-base, var(--font-mono)));font-weight:var(--bk-overline-weight, 500);letter-spacing:var(--bk-overline-letter-spacing, 0.08em);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}

/* type */
.display{font-weight:var(--bk-h2-weight, 300);letter-spacing:var(--bk-h2-letter-spacing, -0.025em);line-height:var(--bk-h2-line-height, 1);color:var(--bk-h2-color, var(--bk-color-ink, var(--royal)))}
.display em{font-style:var(--bk-h2-style, normal);color:var(--bk-color-secondary, var(--champion));font-weight:var(--bk-h2-weight, 500)}
.display.display-md{font-size:var(--bk-h2-size, clamp(36px,4.6vw,64px));line-height:var(--bk-h2-line-height, 1.02)}
h2.display{text-wrap:pretty}
.sec-label{font-size:var(--bk-overline-size, 11px);letter-spacing:var(--bk-overline-letter-spacing, 0.24em);text-transform:var(--bk-overline-transform, uppercase);color:var(--bk-color-secondary, var(--mute));margin-bottom:20px;display:inline-flex;align-items:center;gap:10px}
.sec-label::before{content:"";width:18px;height:1px;background:var(--bk-color-secondary, var(--champion));display:inline-block}

/* buttons */
.widget-snippet .btn{display:inline-flex;align-items:center;gap:10px;font-weight:var(--bk-btn-secondary-font-weight, 500);font-size:var(--bk-btn-secondary-font-size, 14px);letter-spacing:var(--bk-btn-secondary-font-letter-spacing, -0.003em);border-radius:var(--bk-btn-secondary-radius, var(--radius-pill));padding:var(--bk-btn-secondary-pad, 12px 20px);transition:transform .18s ease, background .2s, color .2s, box-shadow .2s, border-color .2s;white-space:nowrap}
.widget-snippet .btn-primary{background:var(--bk-btn-tertiary-fill, var(--bk-color-secondary, var(--champion)));color:var(--bk-btn-tertiary-text, #fff);box-shadow:var(--bk-btn-tertiary-shadow, 0 6px 18px -6px rgba(164,172,229,.6))}
.widget-snippet .btn-primary:hover{background:var(--bk-btn-hover-bg, var(--bk-color-secondary, #8f98dc));transform:var(--bk-btn-hover-transform, translateY(-1px));box-shadow:var(--bk-btn-hover-shadow, 0 12px 28px -10px rgba(164,172,229,.65))}
.widget-snippet .btn-arrow{flex-shrink:0;transition:transform .2s ease}
.widget-snippet .btn:hover .btn-arrow{transform:translateX(3px)}
.widget-snippet .btn-outline{color:var(--bk-btn-tertiary-text, var(--bk-color-ink, var(--royal)));border:1px solid var(--bk-btn-tertiary-border-color, var(--bk-color-ink, var(--rule-2)));background:transparent}
.widget-snippet .btn-outline:hover{border-color:var(--bk-btn-tertiary-hover-border-color, var(--bk-color-primary, var(--royal)));background:var(--bk-btn-tertiary-hover-bg, color-mix(in srgb, var(--bk-color-primary, #29234a) 4.5%, transparent));transform:var(--bk-btn-tertiary-hover-transform, translateY(-1px))}
.widget-snippet .btn .pulse{width:7px;height:7px;border-radius:50%;background:var(--bk-color-secondary, var(--sage));box-shadow:0 0 0 0 color-mix(in srgb, var(--bk-color-secondary, #b6bbed) 70%, transparent);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--bk-color-secondary, #b6bbed) 55%, transparent)}70%{box-shadow:0 0 0 8px color-mix(in srgb, var(--bk-color-secondary, #b6bbed) 0%, transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--bk-color-secondary, #b6bbed) 0%, transparent)}}

/* compare section */
.widget-snippet .compare{padding:120px 0;background:var(--bk-color-background, var(--white))}
.widget-snippet .cmp-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:48px}
.widget-snippet .cmp-scroll{overflow-x:auto;scrollbar-width:thin}
.widget-snippet .cmp{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;min-width:840px;border:1px solid var(--bk-color-surface, var(--rule));border-radius:var(--radius);overflow:hidden;background:var(--bk-color-background, var(--white))}
.widget-snippet .cmp-cell{padding:18px 22px;border-bottom:1px solid var(--bk-color-surface, var(--rule));border-right:1px solid var(--bk-color-surface, var(--rule));font-size:var(--bk-p-size, 14px);color:var(--bk-p-color, var(--bk-color-ink, var(--ink-2)));line-height:var(--bk-p-line-height, 1.5);display:flex;flex-direction:column;justify-content:center}
.widget-snippet .cmp-cell:nth-child(4n){border-right:0}
.widget-snippet .cmp-rowlabel{font-weight:var(--bk-p-weight, 600);color:var(--bk-p-color, var(--bk-color-ink, var(--royal)));font-size:var(--bk-p-size, 13.5px);background:var(--bk-color-surface, var(--nude));letter-spacing:var(--bk-p-letter-spacing, -0.003em)}
.widget-snippet .cmp-span{grid-column:span 3}
.widget-snippet .cmp-prodhead{padding:26px 22px;border-bottom:1px solid var(--bk-color-surface, var(--rule));border-right:1px solid var(--bk-color-surface, var(--rule));position:relative;background:var(--bk-color-surface, var(--nude))}
.widget-snippet .cmp-prodhead:last-child{border-right:0}
.widget-snippet .cmp-prodhead.feat{background:linear-gradient(180deg,color-mix(in srgb, var(--bk-color-secondary, #6c70cf) 8%, transparent),color-mix(in srgb, var(--bk-color-secondary, #6c70cf) 2%, transparent))}
.widget-snippet .cmp-badge{position:absolute;top:-1px;left:-1px;font-family:var(--bk-overline-family, var(--bk-font-base, var(--font-mono)));font-size:var(--bk-overline-size, 9px);letter-spacing:var(--bk-overline-letter-spacing, .16em);text-transform:var(--bk-overline-transform, uppercase);background:var(--bk-color-secondary, var(--champion));color:var(--bk-color-background, #fff);padding:5px 10px;border-radius:0 0 var(--radius-sm) 0}
.widget-snippet .cmp-pname{font-size:var(--bk-p-size, 19px);font-weight:var(--bk-p-weight, 500);color:var(--bk-p-color, var(--bk-color-ink, var(--royal)));letter-spacing:var(--bk-p-letter-spacing, -0.015em);margin-top:6px}
.widget-snippet .cmp-pprice{font-size:var(--bk-p-size, 13px);color:var(--bk-color-secondary, var(--mute));margin:4px 0 16px;font-family:var(--bk-p-family, var(--bk-font-base, var(--font-mono)));letter-spacing:var(--bk-p-letter-spacing, .02em)}
.widget-snippet .cmp-pprice b{font-family:var(--bk-p-family, var(--bk-font-base, var(--font-sans)));font-size:var(--bk-p-size, 22px);font-weight:var(--bk-p-weight, 600);color:var(--bk-p-color, var(--bk-color-ink, var(--royal)));letter-spacing:var(--bk-p-letter-spacing, -0.01em)}
.widget-snippet .cmp-add{width:100%;justify-content:center}
.widget-snippet .cmp-corner{background:var(--bk-color-background, var(--white));border-bottom:1px solid var(--bk-color-surface, var(--rule));border-right:1px solid var(--bk-color-surface, var(--rule))}
.widget-snippet .cmp-genes{font-size:var(--bk-p-size, 30px);font-weight:var(--bk-p-weight, 300);color:var(--bk-p-color, var(--bk-color-ink, var(--royal)));letter-spacing:var(--bk-p-letter-spacing, -0.02em);line-height:var(--bk-p-line-height, 1)}
.widget-snippet .cmp-tip{display:inline-flex;align-items:center;gap:7px;position:relative;cursor:help;margin-top:7px}
.widget-snippet .cmp-tip .ic{width:17px;height:17px;border-radius:50%;border:1px solid var(--bk-color-secondary, var(--champion));color:var(--bk-color-secondary, var(--champion));font-size:var(--bk-p-size, 11px);display:grid;place-items:center;font-family:var(--bk-p-family, var(--bk-font-base, var(--font-mono)));flex-shrink:0}
.widget-snippet .cmp-tip .ic-lbl{font-size:var(--bk-p-size, 12px);color:var(--bk-color-secondary, var(--champion));font-weight:var(--bk-p-weight, 600)}
.widget-snippet .cmp-pop{position:absolute;bottom:calc(100% + 12px);left:0;width:320px;background:var(--bk-color-primary, var(--royal));color:color-mix(in srgb, var(--bk-color-background, #ffffff) 88%, transparent);font-size:var(--bk-p-size, 12.5px);line-height:var(--bk-p-line-height, 1.55);font-weight:var(--bk-p-weight, 400);padding:16px 18px;border-radius:var(--radius-sm);box-shadow:var(--shadow-3);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:20}
.widget-snippet .cmp-pop::after{content:"";position:absolute;top:100%;left:24px;border:7px solid transparent;border-top-color:var(--bk-color-primary, var(--royal))}
.widget-snippet .cmp-tip:hover .cmp-pop,.cmp-tip:focus .cmp-pop{opacity:1;visibility:visible;transform:translateY(0)}

@media (max-width:720px){
  .compare{padding:80px 0}
  .cmp-head-row{align-items:flex-start}
}