/* =====================================================================
   Signal Flow — styles (rendered inside the component's Shadow DOM)
   Stage = Figma frame 1600 x 900; the frame shows y 64 … 784 on desktop and follows the flow on mobile
   (--sf-k / --sf-ox / --sf-oy, set by the engine).
   Fonts: no external fonts — --sf-sans / --sf-serif come from props (a site variable or any font-family
   value); when unset the site's typography variables are used, then the page font.
   ===================================================================== */
.sf {
  --sf-teal: var(--_default---primary--teal-300, #009d95);
  --sf-tan: var(--_default---primary--tan-100, #f4f1e8);
  --sf-tan2: var(--_default---primary--tan-200, #e7e0d2);
  --sf-white: var(--_default---greyscale--white-300, #fcfefe);
  --sf-ink: var(--_default---greyscale--black-500, #000);
  --sf-ink-2: #192232;
  --sf-grey: #8f9197;
  --sf-grey-2: var(--_default---greyscale--black-300, #808080);
  --sf-k: 1;
  --sf-ox: 0px;
  --sf-oy: 0px;
  position: relative;
  width: 100%;
  color: var(--sf-ink);
  font-family: var(--sf-sans, var(--_typography---font--primary-family, sans-serif));
  line-height: normal;
  box-sizing: border-box;
}
.sf *, .sf *::before, .sf *::after { box-sizing: border-box; }
.sf p { margin: 0; }
.sf img { display: block; max-width: none; }
.sf .serif { font-family: var(--sf-serif, var(--_typography---font--secondary-font, serif)); }
.sf .nw { white-space: nowrap; }

/* Height is reserved in CSS (works server-side, no layout jump); the engine sets the exact ratio. */
.sf-frame { position: relative; width: 100%; aspect-ratio: 1600 / 720; overflow: hidden; }
@media (max-width: 767px) { .sf-frame { aspect-ratio: 1 / 1.1; } }
.sf-stage { position: absolute; left: var(--sf-ox); top: var(--sf-oy); width: 1600px; height: 900px; transform-origin: 0 0; transform: scale(var(--sf-k)); }
/* server-rendered markup stays invisible until the engine has set the opening state (no flash of the last scene) */
.sf-pending .sf-stage { visibility: hidden; }
.sf .layer { position: absolute; inset: 0; pointer-events: none; }

/* ---------------- chips ---------------- */
.sf .chip {
  position: absolute; display: flex; align-items: center; justify-content: center; white-space: nowrap;
  font-family: var(--sf-serif, var(--_typography---font--secondary-font, serif)); line-height: 1; letter-spacing: -.02em;
  text-box: trim-both cap alphabetic; will-change: transform, filter, opacity;
}
.sf .chip.ambient { filter: blur(var(--blur, 3px)); opacity: var(--op, 1); }
.sf .focus {
  padding: 14.241px; font-size: 21.361px; border-radius: 6.123px; z-index: 3;
  background: color-mix(in srgb, var(--sf-signal) 30%, white); color: var(--sf-signal); border: 1.225px solid var(--sf-signal);
}

/* ---------------- lines + dots ---------------- */
.sf .lines { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; overflow: visible; pointer-events: none; }
.sf .lines path { fill: none; stroke-width: 2; stroke-linecap: round; }
.sf .sdot { position: absolute; border-radius: 50%; }
.sf .sdot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c); opacity: .16; }
.sf .sdot i { position: absolute; left: 50%; top: 50%; width: var(--core); height: var(--core); margin: calc(var(--core) / -2) 0 0 calc(var(--core) / -2); border-radius: 50%; background: var(--c); }

/* ---------------- halo, connectors, the Intelligence card ---------------- */
.sf .halo { position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--sf-signal) calc(var(--a) * 100%), transparent); }
.sf .conn { position: absolute; border-radius: 7.5px; background: #e6f9f9; border: 1px solid #4fd9ce; z-index: 2; }
.sf .conn i { position: absolute; left: 50%; width: 3.99px; height: 3.99px; margin: -2px 0 0 -2px; border-radius: 50%; }
.sf .card { position: absolute; background: #fff; border: 1px solid #e9e3d7; border-radius: 16px; z-index: 1; }
.sf .card .logo { position: absolute; left: 0; right: 0; top: 63.83px; display: flex; justify-content: center; }
.sf .card .logo img { width: 63.58px; height: 14.79px; }
.sf .card .word { position: absolute; left: 0; right: 0; top: 97.32px; text-align: center; font-size: 31.305px; font-weight: 500; letter-spacing: -.02em; line-height: 1; text-box: trim-both cap alphabetic; }
.sf .row > * { position: absolute; }
.sf .icon { width: 29.68px; height: 29.68px; }
.sf .icon > div { position: absolute; inset: 0; }
.sf .icon svg { display: block; width: 100%; height: 100%; }
.sf .icon .ib { fill: #fff; stroke: #e9e3d7; }
.sf .icon .is { stroke: #a79f8e; }
.sf .icon .isf { fill: #a79f8e; stroke: none; }
.sf .prioritize .on .ib { fill: #e6f9f9; stroke: #4fd9ce; }
.sf .prioritize .on .is { stroke: var(--sf-teal); }
.sf .score .on .ib { fill: #fbe2d5; stroke: #f6a67d; }
.sf .score .on .is { stroke: var(--sf-signal); }
.sf .score .on .isf { fill: var(--sf-signal); }
.sf .act .on .ib { fill: #d6e0fb; stroke: #83a0ed; }
.sf .act .on .is { stroke: #305ddd; }
.sf .label { font-size: 13.652px; line-height: 1; letter-spacing: -.02em; text-box: trim-both cap alphabetic; }
.sf .pct { font-size: 9.65px; line-height: 1; letter-spacing: -.02em; color: var(--sf-grey-2); text-box: trim-both cap alphabetic; }
.sf .check { width: 9.78px; height: 7.16px; }
.sf .check svg { display: block; width: 100%; height: 100%; }
.sf .track { height: 3px; border-radius: 100px; background: #efeae0; overflow: hidden; }
.sf .fill { position: absolute; inset: 0; border-radius: 100px; transform-origin: 0 50%; }

/* ---------------- frame 4: the Hot Account ---------------- */
.sf .account { position: absolute; background: var(--sf-white); border: .557px solid var(--sf-tan2); border-radius: 8.914px; z-index: 2;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .07), 0 3px 8px rgba(0, 0, 0, .04); }
.sf .account > * { position: absolute; }
.sf .acc-logo { left: 17.83px; top: 13.38px; width: 35.65px; height: 35.65px; }
.sf .acc-logo svg { display: block; width: 100%; height: 100%; }
.sf .acc-name { left: 61.84px; top: 13.37px; font-size: 16.713px; font-weight: 500; color: var(--sf-ink-2); line-height: 1.2; }
.sf .acc-domain { left: 61.84px; top: 33.43px; font-size: 13.928px; color: var(--sf-grey); line-height: 1.2; }
.sf .acc-divider { left: 0; right: 0; top: 62.4px; height: .557px; background: var(--sf-tan2); }
.sf .acc-kv { left: 17.83px; font-size: 13.928px; color: var(--sf-grey); line-height: 1.2; }
.sf .acc-bar { left: 127px; width: 92.97px; height: 8.914px; border-radius: 13.1px; background: var(--sf-tan2); transform-origin: 0 50%; }
.sf .hot {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 6.685px; padding: 3.343px 8.914px 3.343px 3.343px;
  border-radius: 33.43px; background: #fff;
  filter: drop-shadow(0 2.79px 3.34px rgba(0, 0, 0, .1)) drop-shadow(0 11.7px 5.85px rgba(0, 0, 0, .09)) drop-shadow(0 26.74px 8.08px rgba(0, 0, 0, .05));
}
.sf .hot img { width: 26.74px; height: 26.74px; flex: none; }
.sf .hot span { font-size: 11.142px; font-weight: 500; line-height: 1.2; white-space: nowrap; }

/* ---------------- frame 6: the output cards ---------------- */
.sf .output { position: absolute; background: #fff; border: 1px solid; border-radius: 20px; z-index: 2; }
.sf .output .pill { position: absolute; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 12.578px; font-weight: 500; letter-spacing: -.02em; line-height: 1; padding: 0 12px; }
.sf .output .item { position: absolute; display: flex; align-items: center; gap: 8.9px; height: 20px; margin-top: -10px;
  font-size: 13.372px; letter-spacing: -.02em; line-height: 1; }
.sf .output .item i { width: 5.35px; height: 5.35px; border-radius: 50%; flex: none; }