/* =====================================================================
   Signal Journey — styles (rendered inside the component's Shadow DOM)
   Stage = Figma frame 919 x 755, scaled to the component width (--sj-k, set by the engine).
   Fonts: no external fonts — --sj-sans / --sj-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.
   ===================================================================== */
.sj {
  --sj-teal: var(--_default---primary--teal-300, #009d95);
  --sj-teal-dark: #007570;
  --sj-bright: var(--_default---primary--bright-teal-300, #a7fbf5);
  --sj-tan: var(--_default---primary--tan-100, #f4f1e8);
  --sj-tan2: var(--_default---primary--tan-200, #e7e0d2);
  --sj-white: var(--_default---greyscale--white-300, #fcfefe);
  --sj-ink: var(--_default---greyscale--black-500, #000);
  --sj-ink-2: #192232;
  --sj-grey: #8f9197;
  --sj-grey-2: var(--_default---greyscale--black-300, #808080);
  --sj-orange-100: var(--_default---secondary--orange-100, #fbe2d5);
  --sj-orange-500: var(--_default---secondary--orange-500, #8e350a);
  --sj-k: 1;
  --sj-ox: 0px;
  --sj-oy: 0px;
  position: relative;
  width: 100%;
  color: var(--sj-ink);
  font-family: var(--sj-sans, var(--_typography---font--primary-family, sans-serif));
  line-height: normal;
  box-sizing: border-box;
}
.sj *, .sj *::before, .sj *::after { box-sizing: border-box; }
.sj p { margin: 0; }
.sj img { display: block; max-width: none; }
.sj .serif { font-family: var(--sj-serif, var(--_typography---font--secondary-font, serif)); }
.sj .nw { white-space: nowrap; }

/* Height is reserved in CSS (works server-side, no layout jump). Lines that run past the frame: see the
   "Lines overflow" prop — .bleed-right (default) lets them out top/right/bottom and fades the left edge into
   the section background; .bleed-all lets them out everywhere; .clip cuts with soft fades. */
.sj-frame { position: relative; width: 100%; aspect-ratio: 919 / 755; }
.sj-frame.bleed-all { overflow: visible; }
.sj-frame.bleed-right { overflow: visible; clip-path: inset(-100vh -100vw -100vh 0); }
.sj-frame.clip {
  overflow: hidden;
  --fx: 6%; --fy: 4%;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 var(--fx), #000 calc(100% - var(--fx)), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 var(--fy), #000 calc(100% - var(--fy)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 var(--fx), #000 calc(100% - var(--fx)), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 var(--fy), #000 calc(100% - var(--fy)), transparent 100%);
  mask-composite: intersect;
}
/* the mobile camera zooms into the stage: the frame has to cut, or the zoomed scene spills over the page */
.sj-zoomed .sj-frame { overflow: hidden; clip-path: inset(0); }
.sj .fade-l { position: absolute; left: 0; top: -100vh; bottom: -100vh; width: 6%; pointer-events: none; z-index: 5;
  background: linear-gradient(90deg, var(--sj-fade, #fff) 0, transparent 100%); }
.sj-zoomed .fade-l { display: none; }
.sj-stage { position: absolute; left: var(--sj-ox); top: var(--sj-oy); width: 919px; height: 755px; transform-origin: 0 0; transform: scale(var(--sj-k)); }
/* server-rendered markup stays invisible until the engine has set the opening state (no flash of the last scene) */
.sj-pending .sj-stage { visibility: hidden; }

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

/* ---------------- lines + dots ---------------- */
.sj .full { position: absolute; left: 0; top: 0; width: 919px; height: 755px; pointer-events: none; }
.sj .full svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sj .full path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sj .line { position: absolute; pointer-events: none; }
.sj .line svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sj .line path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sj .line.mirror svg { transform: scaleX(-1); }
.sj .line circle { fill: var(--c, var(--sj-teal)); }
.sj .dot { position: absolute; border-radius: 50%; background: var(--sj-signal); }

/* ---------------- the Intelligence card → Qualified Account ---------------- */
.sj .halo { position: absolute; border-radius: 50%; background: var(--sj-halo, rgba(252, 219, 199, .4)); }
.sj .conn { position: absolute; width: 53.74px; height: 95.66px; border-radius: 20px; background: var(--sj-bright); }
.sj .card {
  position: absolute; overflow: hidden; --head: 0px;
  background: var(--sj-tan); border: 2px solid var(--sj-teal); border-radius: 20px;
  will-change: transform, width, height, left, top, border-radius;
}
.sj .card .head { position: absolute; left: 0; right: 0; top: 0; height: var(--head); background: var(--sj-tan); border-bottom: .807px solid var(--sj-tan2); }
.sj .card .body { position: absolute; left: 0; right: 0; bottom: 0; top: var(--head); background: var(--sj-white); }
.sj .card .title { position: absolute; left: 25.84px; top: 0; height: var(--head); display: flex; align-items: center; font-size: 24.22px; line-height: 1; text-transform: capitalize; white-space: nowrap; }
.sj .layer { position: absolute; inset: 0; pointer-events: none; }

/* Intelligence */
.sj .intel .logo { position: absolute; left: 0; right: 0; top: 159.4px; display: flex; justify-content: center; }
.sj .intel .logo img { width: 84px; height: 19.5px; }
.sj .intel .word { position: absolute; left: 0; right: 0; top: 205.2px; text-align: center; font-size: 41.36px; font-weight: 500; letter-spacing: -.02em; line-height: 1; }

/* Qualified Account (frames 6 / 19) — body only; a soft shadow under the card (Figma) */
.sj .card.qa-on { box-shadow: 0 20px 40px rgba(0, 0, 0, .07), 0 4px 10px rgba(0, 0, 0, .04); }
.sj .qa { top: var(--head); }
.sj .qa-logo { position: absolute; left: 25.84px; top: 19.38px; width: 51.67px; height: 51.67px; }
.sj .qa-logo svg { width: 100%; height: 100%; display: block; }
.sj .qa-name { position: absolute; left: 89.59px; top: 19.36px; font-size: 24.22px; font-weight: 500; color: var(--sj-ink-2); line-height: 1.2; }
.sj .qa-domain { position: absolute; left: 89.59px; top: 48.43px; font-size: 20.185px; color: var(--sj-grey); line-height: 1.2; }
.sj .qa-divider { position: absolute; left: 0; right: 0; top: 90.43px; height: .807px; background: var(--sj-tan2); }
.sj .qa-kv { position: absolute; left: 25.84px; font-size: 20.185px; color: var(--sj-grey); line-height: 1.2; }
.sj .qa-bar { position: absolute; left: 184.2px; width: 134.73px; height: 12.92px; border-radius: 19px; background: var(--sj-tan2); transform-origin: 0 50%; }

.sj .hot {
  position: absolute; width: 156.63px; height: 45.21px; border-radius: 48.44px; background: #fff;
  display: flex; align-items: center; gap: 9.69px; padding: 4.84px 12.92px 4.84px 4.84px;
  filter: drop-shadow(0 4.04px 4.84px rgba(0, 0, 0, .1)) drop-shadow(0 16.96px 8.48px rgba(0, 0, 0, .09)) drop-shadow(0 38.76px 11.71px rgba(0, 0, 0, .05));
}
.sj .hot img { width: 38.75px; height: 38.75px; flex: none; }
.sj .hot span { font-size: 16.148px; font-weight: 500; line-height: 1.2; white-space: nowrap; }

/* AI Writer (frame 19) */
.sj .writer { position: absolute; width: 283px; height: 320.15px; border-radius: 13.05px; box-shadow: 0 18px 40px rgba(0, 0, 0, .08), 0 4px 10px rgba(0, 0, 0, .05); }
.sj .writer .whead { position: absolute; left: 0; right: 0; top: 0; height: 46px; background: var(--sj-tan); border: .653px solid var(--sj-tan2); border-radius: 13.05px 13.05px 0 0;
  display: flex; align-items: center; justify-content: space-between; padding: 0 10.44px 0 15.66px; }
.sj .writer .whead p { font-size: 19.575px; line-height: 1; text-transform: capitalize; white-space: nowrap; }
.sj .writer .whead svg { width: 14px; height: 14px; display: block; margin-right: 6px; }
.sj .writer .wbody { position: absolute; left: 0; right: 0; top: 46px; bottom: 0; background: var(--sj-white); border: .653px solid var(--sj-tan2); border-top: 0; border-radius: 0 0 13.05px 13.05px; }
.sj .wr-avatar { position: absolute; left: 15.66px; top: 64.25px; width: 28.71px; height: 28.71px; border-radius: 50%; background: var(--sj-teal); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13.05px; font-weight: 500; }
.sj .wr-name { position: absolute; left: 54.16px; top: 62.29px; font-size: 13.05px; color: var(--sj-ink-2); line-height: 1.2; white-space: nowrap; }
.sj .wr-role { position: absolute; left: 54.16px; top: 80.56px; font-size: 11.745px; color: var(--sj-grey-2); line-height: 1.2; white-space: nowrap; }
.sj .wr-lead { position: absolute; left: 15.66px; top: 111.23px; width: 16.97px; height: 16.97px; }
.sj .wr-lead img { width: 100%; height: 100%; }
.sj .wr-personalize { position: absolute; left: 38.5px; top: 111.88px; font-size: 13.05px; line-height: 1.2; white-space: nowrap; }
.sj .wr-box { position: absolute; left: 15.66px; width: 254.42px; border-radius: 7.83px; border: .653px solid var(--sj-tan2); background: var(--sj-white); }
.sj .wr-box.tags { top: 136.02px; height: 41.72px; }
.sj .wr-box.mail { top: 186.5px; height: 121.74px; width: 255.45px; }
.sj .tag { position: absolute; display: flex; align-items: center; gap: 2.61px; height: 25.45px; padding: 0 9.135px; border-radius: 5.22px; background: var(--sj-orange-100); color: var(--sj-orange-500); font-size: 11.745px; line-height: normal; white-space: nowrap; }
.sj .tag svg { width: 10px; height: 10px; display: block; }
.sj .mail .lbl { position: absolute; left: 13.05px; top: 13.05px; font-size: 11.745px; color: var(--sj-grey); line-height: 1.2; white-space: nowrap; }
.sj .mail .subj { position: absolute; left: 61.34px; top: 13.05px; font-size: 11.745px; line-height: 1.2; white-space: nowrap; }
.sj .mail .div { position: absolute; left: 0; right: 0; top: 40.46px; height: .653px; background: var(--sj-tan2); }
.sj .mail .hi { position: absolute; left: 13.05px; top: 51.55px; font-size: 11.745px; line-height: 1.2; white-space: nowrap; }
.sj .mail .bar { position: absolute; left: 13.05px; height: 7.83px; border-radius: 19.6px; background: var(--sj-tan2); transform-origin: 0 50%; }
.sj .off { visibility: hidden; }
.sj .typing .on::after { content: ""; display: inline-block; width: 1.2px; height: .95em; margin-left: 1.5px; vertical-align: -.1em; background: currentColor; animation: sj-blink .7s steps(1) infinite; }
@keyframes sj-blink { 50% { opacity: 0; } }