/* =====================================================================
   SignalHero — styles (rendered inside the component's Shadow DOM)
   Desktop stage = Figma frame 1438 x 772, mobile stage = 388 x 484.
   Fonts: no external fonts. --sh-serif / --sh-sans are set from props
   (a Webflow variable like var(--font-heading) or any font-family value);
   when unset the component inherits the page font.
   ===================================================================== */
.sh {
  --sh-sand: #f1efe9;
  --sh-maxw: 1280px;      /* container max width (prop) */
  --sh-margin: 16px;      /* side margin (prop) */
  position: relative;
  width: 100%;
  container-type: inline-size;
  color: #000;
  font-family: var(--sh-sans, var(--_typography---font--primary-family, sans-serif));
  line-height: normal;
  box-sizing: border-box;
}
/* Height is reserved in pure CSS (works server-side, no layout jump): same formula the engine uses.
   Desktop frame 1438x772 with a 1280 platform, mobile frame 388x484 with a 356 platform. */
.sh-frame { position: relative; width: 100%;
  /* clip vertically only — lines and chips may bleed past the component's (container) edges; the page clips at the viewport */
  overflow: visible; clip-path: inset(0 -100vw);
  height: min(calc(var(--sh-maxw) * 772 / 1280), calc((100cqw - 2 * var(--sh-margin)) * 772 / 1280)); }
.sh.sh-free .sh-frame { height: calc(100cqw * 772 / 1438); }
@container (max-width: 767px) {
  .sh-frame { height: calc((100cqw - 2 * var(--sh-margin)) * 484 / 356); }
  .sh.sh-free .sh-frame { height: calc(100cqw * 484 / 388); }
}
/* ---------------- SSR pre-state ----------------
   Shown while the JS bundle is still loading: the Figma ambient chips, positioned in % of the frame,
   fading in and drifting with CSS only. The engine hides it and continues from this state. */
.sh-pre { position: absolute; inset: 0; pointer-events: none; display: none; }
.sh-pending .sh-pre { display: block; }
.sh-pre-box { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; container-type: inline-size; }
.sh-pre-d { width: calc(min(var(--sh-maxw), 100cqw - 2 * var(--sh-margin)) * 1438 / 1280); display: block; }
.sh-pre-m { width: calc((100cqw - 2 * var(--sh-margin)) * 388 / 356); display: none; }
.sh.sh-free .sh-pre-d { width: 100cqw; }
.sh.sh-free .sh-pre-m { width: 100cqw; }
@container (max-width: 767px) { .sh-pre-d { display: none; } .sh-pre-m { display: block; } }
.pre-chip { position: absolute; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%);
  white-space: nowrap; font-family: var(--sh-serif, var(--_typography---font--secondary-font, serif)); line-height: 1; letter-spacing: -.02em;
  text-box: trim-both cap alphabetic; animation: sh-pre-in .9s ease-out both, sh-pre-drift 5s ease-in-out infinite alternate; }
@keyframes sh-pre-in { from { opacity: 0; } }
@keyframes sh-pre-drift { from { translate: 0 0; } to { translate: 0 -0.5cqw; } }

/* Server-rendered markup stays invisible until the engine has set the animation's initial state (no flash of the final state). */
.sh-pending .teal, .sh-pending .dash, .sh-pending .card, .sh-pending .chip, .sh-pending .noise, .sh-pending .dot, .sh-pending .ripple, .sh-pending .sig-path, .sh-pending .sig-head { visibility: hidden; }
.sh *, .sh *::before, .sh *::after { box-sizing: border-box; }
.sh img { display: block; max-width: none; }
.sh p { margin: 0; }

/* the stage does NOT clip: lines/chips beyond the Figma frame stay visible on wide screens (the page clips at the viewport) */
.sh-stage { position: relative; width: 1438px; height: 772px; transform-origin: 0 0; overflow: visible; }
.sh-stage.m { width: 388px; height: 484px; }
.sh .abs { position: absolute; }
.sh .blk { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sh .blk.card-blk { perspective: 900px; }
.sh .flexc { display: flex; align-items: center; justify-content: center; }
.sh .layer { position: absolute; inset: 0; pointer-events: none; }

/* ---------------- Ambient signal chips ---------------- */
.sh .chip {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  white-space: nowrap;
  font-family: var(--sh-serif, var(--_typography---font--secondary-font, serif));
  line-height: 1;
  letter-spacing: -0.02em;
  text-box: trim-both cap alphabetic;
  will-change: transform, filter, opacity;
}
.sh .chip.ambient { filter: blur(var(--blur, 3px)); opacity: var(--op, 1); }
.sh .chip.focus { font-size: 16.722px; height: 34.3px; padding: 0 11.148px; border: 1px solid transparent; background: var(--fc-bg); color: var(--fc-text); border-radius: 5px; transition: border-color .45s ease; }
/* border appears when the signal comes into focus (class toggled by the engine — no color interpolation in JS) */
.sh .chip.focus.on { border-color: var(--fc-border); }
.sh .fc-wrap { position: absolute; width: 0; height: 0; left: var(--fc-x); top: var(--fc-y); transform: scale(calc(var(--fc-k, 1) * var(--chipk, 1))); }
/* mobile chip enlargement (prop "Mobile chip scale"): applies only in the mobile layout */
.sh .m { --chipk: var(--sh-chipk, 1); }

.sh .noise { position: absolute; border-radius: 5px; filter: blur(var(--blur, 4px)); opacity: var(--op, .35); transform: translate(-50%, -50%); }

/* ---------------- Platform base ---------------- */
.sh .teal { position: absolute; left: 79px; top: 367.74px; width: 1280px; height: 403.98px; background: var(--sh-platform, var(--_default---primary--teal-300, #009d95)); border-radius: 20px; }
.sh .m .teal { left: 16px; top: 287px; width: 356px; height: 182px; border-radius: 8px; }

.sh .dash { position: absolute; left: 289.36px; top: 301.89px; width: 851.44px; height: 469.84px; overflow: hidden; border-radius: 20px 20px 0 0; }
.sh .m .dash { left: 49px; top: 269px; width: 284px; height: 200px; border-radius: 8.7px 8.7px 0 0; }
.sh .dash-inner { position: absolute; left: 0; top: 0; width: 851.44px; height: 517.61px; transform-origin: 0 0; }
.sh .m .dash-inner { transform: scale(.4358); }
.sh .dash .bg { left: 0; top: -0.73px; width: 850.976px; height: 517.61px; background: var(--sh-sand); border-radius: 20px; }
.sh .dash .logo-box { left: 11.86px; top: 11.34px; width: 54.194px; height: 54.194px; border: .847px solid rgba(64,64,64,.1); border-radius: 14.135px; }
.sh .dash .logo-box img { position: absolute; left: 50%; top: 50%; width: 31.181px; height: 31.181px; transform: translate(-50%, -50%); object-fit: contain; }
.sh .dash .sidebar { left: 11.86px; top: 68.82px; width: 54.194px; height: 461.494px; }
.sh .dash .sidebar img { width: 100%; height: 100%; }
.sh .dash .topbar-shadow { left: 88.84px; top: 34.98px; width: 735.505px; height: 28.882px; background: #e7e3d8; border-radius: 4.712px; }
.sh .dash .topbar { left: 72.82px; top: 11.42px; width: 766.474px; height: 42.379px; background: #fff; border-radius: 14.135px; }
.sh .dash .topbar .home { position: absolute; left: 20.59px; top: 13.26px; font-size: 13.548px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.sh .dash .topbar .icons { position: absolute; left: 621.94px; top: 14.07px; display: flex; gap: 13.548px; }
.sh .dash .topbar .icons img { width: 13.548px; height: 13.548px; }
.sh .dash .topbar .avatar { position: absolute; left: 724.4px; top: 8.99px; width: 25.403px; height: 24.557px; border: .847px solid rgba(64,64,64,.1); border-radius: 6.774px; }
.sh .dash .panel { border: .847px solid rgba(64,64,64,.1); border-radius: 20.323px; left: 72.82px; width: 767.558px; height: 206.614px; }
.sh .dash .panel.highlights { top: 69.79px; }
.sh .dash .panel.intent { top: 289.95px; }
.sh .dash .section-label { display: flex; align-items: center; gap: 3.387px; left: 93.15px; font-size: 13.548px; font-weight: 500; color: rgba(0,0,0,.32); line-height: 1; white-space: nowrap; }
.sh .dash .section-label img { width: 13.548px; height: 13.548px; }
.sh .dash .stat { top: 117.21px; width: 179.043px; height: 152.42px; background: #fff; border-radius: 13.548px; }
.sh .dash .stat .lbl { position: absolute; left: 13.55px; top: 13.55px; font-family: var(--sh-serif, var(--_typography---font--secondary-font, serif)); font-weight: 500; font-size: 11.029px; color: #808080; line-height: 1.2; white-space: nowrap; }
.sh .dash .stat .num { position: absolute; left: 13.55px; top: 55.04px; font-size: 40.645px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.sh .dash .stat .num .cur { font-size: 26.216px; }
.sh .dash .badge { position: absolute; left: 13.55px; top: 110.93px; display: flex; align-items: center; gap: 6.774px; padding: 6.774px; border-radius: 6.774px; font-size: 11.855px; line-height: 1.2; white-space: nowrap; }
.sh .dash .badge img { width: 11.855px; height: 11.855px; }
.sh .dash .badge.up { background: var(--_default---secondary--bright-green-100, #d7f8e2); color: var(--_default---secondary--green-300, #004624); }
.sh .dash .badge.down { background: var(--_default---secondary--yellow-100, #fffde2); color: #ef6d2b; }
.sh .dash .chart-card { top: 337.37px; width: 351.976px; height: 152.42px; background: #fff; border-radius: 13.548px; }
.sh .dash .clbl { position: absolute; font-family: var(--sh-serif, var(--_typography---font--secondary-font, serif)); font-weight: 500; font-size: 11.029px; color: #808080; line-height: 1.2; white-space: nowrap; }
.sh .dash .cnum { position: absolute; font-size: 22.616px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.sh .dash .grid { position: absolute; display: flex; flex-direction: column; gap: 24.843px; justify-content: center; opacity: .3; width: 319.451px; height: 103.7px; top: 410.9px; }
.sh .dash .grid span { display: block; height: 0; border-top: .942px solid #D1D2D5; }
.sh .dash .chart { position: absolute; }
.sh .dash .chart svg { display: block; width: 100%; height: 100%; overflow: visible; }

.sh .sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%);
  background-size: 60% 100%; background-repeat: no-repeat; background-position: -60% 0; }

/* ---------------- Output cards ---------------- */
.sh .card { position: absolute; left: 0; top: 0; will-change: transform, opacity; transform-style: preserve-3d; }
.sh .shadow-lg { box-shadow: 0 4.412px 33.087px rgba(0,0,0,.16); }
.sh .shadow-md { box-shadow: 0 2.956px 22.169px rgba(0,0,0,.16); }
.sh .bar { position: absolute; background: var(--sh-sand); border-radius: 120px; transform-origin: 0 50%; }
.sh .sans { font-family: var(--sh-sans, var(--_typography---font--primary-family, sans-serif)); }
.sh .serif { font-family: var(--sh-serif, var(--_typography---font--secondary-font, serif)); }
.sh .nw { white-space: nowrap; }

.sh .campaigns { width: 248.8px; height: 158.51px; }
.sh .campaigns .box { inset: 0; background: #fff; border: .996px solid #f4f4f5; border-radius: 7.907px; }
.sh .campaigns .head { left: .4px; top: 1.1px; width: 247.5px; height: 29.7px; border-radius: 5.987px 5.987px 0 0;
  background: linear-gradient(0deg, #f1efe9 0.2%, rgba(241,239,233,0) 24.8%), linear-gradient(180deg, #f1efe9 0.65%, rgba(241,239,233,0) 19%), #f1efe9; }
.sh .campaigns .divider { left: 1.5px; top: 30.9px; width: 246.2px; height: 0; border-top: 1px solid #D1D2D5; }
.sh .campaigns .title { left: 19.5px; top: 7.9px; font-size: 14px; line-height: 1.2; }
.sh .campaigns .sub { left: 18.4px; top: 41.8px; font-size: 11.79px; color: var(--_default---greyscale--black-400, #404040); line-height: 1.2; }
.sh .campaigns .row-lbl { left: 43.6px; font-size: 10px; color: #808080; line-height: 1.2; }
.sh .campaigns .check { width: 18.6px; height: 18.6px; left: 19.5px; }
.sh .campaigns .check img { width: 100%; height: 100%; }

.sh .qa { width: 212.31px; height: 169.94px; }
.sh .qa .box { left: 0; top: 6.7px; width: 212.31px; height: 146.5px; border-radius: 4.794px; border: .479px solid #f4f4f5; background: var(--sh-sand); }
.sh .qa .white { left: .36px; top: 31.86px; width: 211.48px; height: 89.32px; background: #fff; }
.sh .qa .line-top { left: 0; top: 31.6px; width: 212px; height: 0; border-top: .48px solid #D1D2D5; }
.sh .qa .line-bot { left: 0; top: 121.1px; width: 212.31px; height: 0; border-top: .48px solid #D1D2D5; }
.sh .qa .title { left: 14.6px; top: 10.75px; font-size: 14px; line-height: 1.2; }
.sh .qa .avatar { left: 13.06px; top: 42.23px; width: 23.011px; height: 23.011px; border-radius: 50%; overflow: hidden; isolation: isolate; }
.sh .qa .avatar img { width: 100%; height: 100%; object-fit: cover; }
.sh .qa .avatar i { position: absolute; inset: 0; border-radius: 50%; }
.sh .qa .avatar i.w { background: rgba(255,255,255,.2); }
.sh .qa .avatar i.t { background: var(--sh-platform, var(--_default---primary--teal-300, #009d95)); mix-blend-mode: color; }
.sh .qa .acme { left: 43.74px; top: 42.86px; font-size: 10.547px; font-weight: 500; color: #192232; line-height: 1.2; }
.sh .qa .domain { left: 43.74px; top: 57.6px; font-size: 6.116px; color: #8f9197; line-height: 1.2; }
.sh .qa .kv { left: 45px; font-size: 6.116px; color: #8f9197; line-height: 1.2; }
.sh .qa .kvbar { left: 93.06px; height: 7.942px; }
.sh .qa .tag { position: absolute; top: 127.5px; display: flex; align-items: center; gap: 4.369px; font-size: 7.287px; line-height: 1.2; white-space: nowrap; }
.sh .qa .tag img { width: 16.601px; height: 16.601px; }

.sh .revvy { width: 186.59px; height: 149.27px; }
.sh .revvy .box { left: 0; top: 23.97px; width: 186.595px; height: 125.301px; background: #fff; border-radius: 10px; }
.sh .revvy .robot { left: 66.94px; top: 0; width: 50.588px; height: 50.588px; border-radius: 50%; }
.sh .revvy .robot img { width: 100%; height: 100%; }
.sh .revvy .title { left: 0; top: 55.28px; width: 186.59px; text-align: center; font-size: 10.345px; line-height: 1.2; }
.sh .revvy .lbl { left: 14.78px; font-size: 7px; line-height: 1.5; color: var(--_default---greyscale--black-400, #404040); transform: translateY(-50%); white-space: nowrap; }
.sh .revvy .bar { height: 7.3px; border-radius: 15px; }

.sh .contacts { width: 241.89px; height: 256.08px; }
.sh .contacts .box { inset: 0; background: #fff; border-radius: 10px; }
.sh .contacts .title { left: 17.41px; top: 9.69px; font-size: 15.441px; line-height: 1.2; white-space: nowrap; }
.sh .contacts .row { position: absolute; left: 0; width: 100%; height: 66.174px; }
.sh .contacts .row img.av { position: absolute; left: 22.06px; top: 0; width: 66.174px; height: 66.174px; border-radius: 50%; object-fit: cover; }
.sh .contacts .row .bar { left: 93.3px; height: 11px; border-radius: 88px; }
.sh .contacts .pill { position: absolute; left: 168.22px; top: 20.15px; width: 59.555px; height: 20.959px; background: #007570; border-radius: 472px; transform-origin: 50% 50%; }
.sh .contacts .pill img { position: absolute; left: 5.24px; top: 5.24px; width: 10.48px; height: 10.48px; }
.sh .contacts .pill span { position: absolute; left: 20.5px; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-family: var(--sh-serif, var(--_typography---font--secondary-font, serif)); font-size: 7.24px; color: #fff; letter-spacing: -.02em; line-height: 1; text-box: trim-both cap alphabetic; white-space: nowrap; }

/* ---------------- Signal lines ---------------- */
.sh .line-svg { position: absolute; }
.sh .line-svg svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sh .sig-path { fill: none; stroke-width: 2; }
.sh .sig-head { opacity: 0; }
.sh .dot-anchor { position: absolute; width: calc(24px * var(--dot-k, 1)); height: calc(24px * var(--dot-k, 1)); transform: translate(-50%, -50%); visibility: hidden; pointer-events: none; }
.sh .dot { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; }
.sh .ripple { position: absolute; border-radius: 50%; border: 2px solid currentColor; opacity: 0; pointer-events: none; }

/* Breakpoint-dependent offsets inside the line groups (Figma mobile places labels/dots a bit differently).
   Values are in the block's own (desktop) units; mobile px from Figma divided by the block scale. */
.sh .blk-1 { --lg-x: calc(50% + 59.6px);  --lg-y: calc(50% - 46.02px); --dot-y: calc(50% + 123.38px); --fc-x: 286.61px; --fc-y: 67.72px; }
.sh .m .blk-1 { --lg-x: calc(50% + 84.5px); --lg-y: calc(50% - 105.2px); --dot-y: calc(50% + 117.5px); --dot-k: 1.345; --fc-x: 307.9px; --fc-y: 66.96px; }
.sh .blk-3 { --fc-x: 64.33px; --fc-y: 161.74px; }
.sh .m .blk-3 { --fc-x: 78px; --fc-y: 128.1px; --fc-k: 1.225; --dot-k: 1.2416; }
.sh .blk-2 { --fc-x: calc(50% - 18.23px); --fc-y: calc(50% - 66.87px); --dot-y: calc(50% - 113.92px); }
.sh .m .blk-2 { --fc-x: calc(50% + 55.86px); --fc-y: calc(50% - 98.4px); --fc-k: .917; --dot-y: calc(50% - 116.9px); }