/* ==========================================================================
   Sprad Landing — Design Tokens
   Quelle: Claude Design "Sprad Growth Landing v5" + Sprad-Brand-Audit
   Diese Datei wird global via Webflow Site-Settings → Custom Code → Head geladen.
   ========================================================================== */

:root {
  /* ---------- Brand / Accent ---------- */
  --sl-accent:        #00b4f7;
  --sl-accent-2:      #6ece53;
  --sl-accent-soft:   rgba(0, 180, 247, .14);
  --sl-accent-glow:   rgba(0, 180, 247, .35);

  /* Brand-Gradient — Signature-Element (Headlines, Underlines, Logo-Mark) */
  --sl-grad-blue-1:   #006d96;
  --sl-grad-blue-2:   #00b4f7;
  --sl-grad-green:    #6ece53;
  --sl-grad-blue-3:   #003e5c;
  --sl-brand-gradient: linear-gradient(90deg,
    var(--sl-grad-blue-1) 0%,
    var(--sl-grad-blue-2) 19%,
    var(--sl-grad-green)  77%,
    var(--sl-grad-blue-3) 100%
  );

  /* ---------- Backgrounds (Dark Theme) ---------- */
  --sl-dark:        #0e131f;
  --sl-dark-2:      #141a27;
  --sl-dark-3:      #1a2030;
  --sl-dark-card:   #171c2a;
  --sl-dark-line:   rgba(255, 255, 255, .06);
  --sl-dark-line-2: rgba(255, 255, 255, .10);
  --sl-dark-line-3: rgba(255, 255, 255, .16);

  /* ---------- Backgrounds (Beige/Light Sections) ---------- */
  --sl-beige:        #efebe1;
  --sl-beige-2:      #e6e1d4;
  --sl-beige-3:      #f5f1e8;
  --sl-beige-line:   rgba(11, 13, 16, .08);
  --sl-beige-line-2: rgba(11, 13, 16, .14);

  /* ---------- Text Colors ---------- */
  --sl-ink:        #e7ecf2;             /* light bodies on dark */
  --sl-ink-2:      #fff;                /* pure white headlines on dark */
  --sl-ink-dim:    rgba(255, 255, 255, .62);
  --sl-ink-faint:  rgba(255, 255, 255, .40);

  --sl-dark-ink:        #0b0e15;        /* near-black body on beige */
  --sl-dark-ink-dim:    #5b626c;
  --sl-dark-ink-faint:  #9aa1ac;

  /* ---------- Semantic / System Colors (Sprad-Brand Audit) ---------- */
  --sl-success:        #027a48;
  --sl-success-light:  #ecfdf3;
  --sl-error:          #b42318;
  --sl-error-light:    #fef3f2;

  /* ---------- Radii ---------- */
  --sl-r-sm:    8px;
  --sl-r-md:    12px;
  --sl-r-lg:    18px;
  --sl-r-xl:    24px;
  --sl-r-pill:  999px;

  /* ---------- Fonts ---------- */
  --sl-sans: 'Roboto', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sl-mono: 'Roboto', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ---------- Easing ---------- */
  --sl-ease-out:    cubic-bezier(.16, 1, .3, 1);
  --sl-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ---------- Layout ---------- */
  --sl-shell-max:        1320px;
  --sl-shell-max-narrow: 1100px;
  --sl-shell-pad:        32px;
  --sl-shell-pad-mobile: 20px;

  --sl-section-pad:        120px;
  --sl-section-pad-sm:     80px;
  --sl-section-pad-mobile: 72px;
}

/* Default-Font ist Roboto. Falls später eine alternative Schrift gewünscht ist,
   kann ein body-Attribut den Override setzen — Beispiel-Block bewusst gelöscht
   um Page-Weight klein zu halten. */

/* ==========================================================================
   Sprad Landing — Base Reset
   Minimal — Webflow lädt schon einen Reset; das hier ist nur, was sich auf
   unsere Sections (.sl-module) auswirken darf. Scoped via .sl-module Selector.
   ========================================================================== */

.sl-module,
.sl-module *,
.sl-module *::before,
.sl-module *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.sl-module a {
  color: inherit;
  text-decoration: none;
}

.sl-module button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

.sl-module img,
.sl-module svg {
  display: block;
  max-width: 100%;
}

.sl-module ::selection {
  background: var(--sl-accent);
  color: var(--sl-dark);
}

/* Smooth scroll nur wenn auf der Page mind. ein .sl-module existiert.
   Vermeidet, dass wir die Webflow-Site-weite Scroll-Behavior unbeabsichtigt ändern. */
html:has(.sl-module) {
  scroll-behavior: smooth;
}

/* ==========================================================================
   Sprad Landing — Typography
   Heading-Skala, Body, Eyebrow/Kicker, Sub-Lines. Scoped via .sl-module.
   ========================================================================== */

.sl-module {
  font-family: var(--sl-sans);
  line-height: 1.5;
  font-size: 16px;
  font-weight: 400;
  color: var(--sl-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Headlines ---------- */
.sl-h1 {
  font-weight: 500;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -.025em;
}

.sl-h2 {
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.sl-h3 {
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.sl-h4 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.01em;
}

/* ---------- Eyebrow / Kicker / Section Labels ---------- */
.sl-eyebrow {
  font-family: var(--sl-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--sl-ink-dim);
  text-transform: uppercase;
}

.sl-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sl-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--sl-ink-dim);
  text-transform: uppercase;
}

.sl-kicker .sl-kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sl-accent);
  box-shadow: 0 0 0 4px var(--sl-accent-soft);
}

/* ---------- Sub-Line / Body Lead ---------- */
.sl-sub {
  font-size: 18px;
  color: var(--sl-ink-dim);
  line-height: 1.55;
  max-width: 60ch;
}

.sl-sub.sl-sub-lg {
  font-size: 21px;
}

/* ---------- Gradient-Highlighted Inline Text ---------- */
/* Used z.B. in Quote-Texts: <span class="sl-hl">important phrase</span> */
.sl-hl {
  color: #fff;
  font-weight: 500;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 5' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' x2='1'><stop offset='0' stop-color='%23006d96'/><stop offset='.19' stop-color='%2300b4f7'/><stop offset='.77' stop-color='%236ece53'/><stop offset='1' stop-color='%23003e5c'/></linearGradient></defs><rect width='200' height='5' rx='2.5' fill='url(%23g)'/></svg>");
  background-repeat: no-repeat;
  background-size: calc(100% - 4px) 5px;
  background-position: 2px 98%;
  padding: 0 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Mobile underline: weniger Höhe */
@media (max-width: 720px) {
  .sl-hl {
    background-size: calc(100% - 4px) 3px;
  }
}

/* ---------- Brand-Logo-Block (Header) ---------- */
.sl-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.02em;
}

.sl-brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--sl-brand-gradient);
  display: grid;
  place-items: center;
  color: var(--sl-dark);
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0, 180, 247, .3);
}

/* ---------- Numbered-Reason header — big, bold, no box (canonical) ----------
   High specificity (.sl-module .sl-reason-num) so it overrides any local
   per-section chip styling. Just a large number above the claim. */
.sl-module .sl-reason-num {
  display: block;
  min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none;
  font-family: var(--sl-mono);
  font-weight: 400;
  font-size: clamp(40px, 3.6vw, 56px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--sl-accent);
  margin: 0 0 14px;
}
.sl-module.sl-section-beige .sl-reason-num { color: var(--sl-grad-blue-1); }

/* Highlighted claim word on beige sections: keep dark ink, keep the gradient underline */
.sl-section-beige .sl-hl {
  color: var(--sl-dark-ink);
  -webkit-text-fill-color: var(--sl-dark-ink);
}

/* More breathing room between claim and sub on the reason sections */
.sl-module--rzn .sl-section-head .sl-sub,
.sl-module--security-atlas .sl-section-head .sl-sub { margin-top: 26px; }

/* ==========================================================================
   Sprad Landing — Layout Primitives
   Container, Sections, Backgrounds. Scoped via .sl-module.
   ========================================================================== */

/* ---------- Shell (Container) ---------- */
.sl-shell {
  max-width: var(--sl-shell-max);
  margin: 0 auto;
  padding: 0 var(--sl-shell-pad);
}

.sl-shell.sl-shell-narrow {
  max-width: var(--sl-shell-max-narrow);
}

@media (max-width: 720px) {
  .sl-shell {
    padding: 0 var(--sl-shell-pad-mobile);
  }
}

/* ---------- Section Padding ---------- */
.sl-module {
  position: relative;
}

/* Default-Section: dark Hintergrund */
.sl-section {
  padding: var(--sl-section-pad) 0;
}

.sl-section.sl-section-sm {
  padding: var(--sl-section-pad-sm) 0;
}

@media (max-width: 720px) {
  .sl-section {
    padding: var(--sl-section-pad-mobile) 0;
  }
  .sl-section.sl-section-sm {
    padding: 56px 0;
  }
}

/* Beige-Section — alternierender Look (Y-Combinator-Style) */
.sl-section-beige {
  background: var(--sl-beige);
  color: var(--sl-dark-ink);
  position: relative;
}

.sl-section-dark {
  background: var(--sl-dark);
  color: var(--sl-ink);
  position: relative;
}

/* ---------- Section Head (Headline + Sub) ---------- */
.sl-section-head {
  margin-bottom: 64px;
  max-width: 880px;
}

.sl-section-head .sl-kicker {
  margin-bottom: 18px;
}

/* ---------- Background Decor (Hero Glow + Dots) ---------- */
.sl-bg-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.sl-bg-glow::before,
.sl-bg-glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .4;
}

.sl-bg-glow::before {
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0, 180, 247, .45) 0%, transparent 60%);
}

.sl-bg-glow::after {
  bottom: -30%;
  right: -10%;
  width: 50%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(110, 206, 83, .18) 0%, transparent 60%);
}

.sl-bg-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .6;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 85% 60% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 85% 60% at 50% 30%, #000 30%, transparent 80%);
  animation: slDotsDrift 24s ease-in-out infinite alternate;
}

@keyframes slDotsDrift {
  0%   { background-position: 0 0;       opacity: .6; }
  50%  {                                  opacity: .85; }
  100% { background-position: 22px 22px; opacity: .5; }
}

/* ---------- Reveal-Animation (Scroll-Triggered) ---------- */
.sl-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--sl-ease-out), transform .8s var(--sl-ease-out);
}

.sl-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sl-reveal-d1 { transition-delay: .1s; }
.sl-reveal-d2 { transition-delay: .2s; }
.sl-reveal-d3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .sl-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .sl-bg-dots { animation: none !important; }
}

/* ==========================================================================
   Sprad Landing — Component Base
   Buttons + Pills + Chips. Scoped via .sl-module.
   ========================================================================== */

/* ---------- Buttons ---------- */
.sl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--sl-r-pill);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  transition: all .2s var(--sl-ease-out);
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
}

.sl-btn-primary,
.sl-module .sl-btn-primary {
  background: var(--sl-accent);
  color: #fff !important;
}

.sl-btn-primary:hover,
.sl-module .sl-btn-primary:hover {
  background: #33c4fb;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px var(--sl-accent-glow);
}

.sl-btn-primary .sl-btn-arr,
.sl-module .sl-btn-primary .sl-btn-arr {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

.sl-btn-ghost,
.sl-module .sl-btn-ghost {
  color: #fff;
  background: transparent;
  border-color: var(--sl-dark-line-3);
}

.sl-btn-ghost:hover,
.sl-module .sl-btn-ghost:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .42);
  color: #fff;            /* Text bleibt weiß auf dunklem Grund (kein Vergrauen) */
}

/* on-beige Variante — wenn ein Button auf hellem Hintergrund sitzt */
.sl-section-beige .sl-btn-ghost {
  color: var(--sl-dark-ink);
  border-color: var(--sl-beige-line-2);
}
.sl-section-beige .sl-btn-ghost:hover {
  background: rgba(11, 14, 21, .05);
  border-color: var(--sl-beige-line-2);
  color: var(--sl-dark-ink);   /* auf Beige bleibt Text dunkel */
}

.sl-btn-lg {
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 500;
}

.sl-btn-arr {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .12);
  font-size: 11px;
}

.sl-btn-ghost .sl-btn-arr {
  background: rgba(255, 255, 255, .12);
}

.sl-section-beige .sl-btn-ghost .sl-btn-arr {
  background: rgba(11, 14, 21, .08);
}

/* ---------- Pills (Tag-Pills für Quote-Side, Filter, etc.) ---------- */
.sl-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: var(--sl-r-pill);
  background: rgba(0, 180, 247, .10);
  border: 1px solid rgba(0, 180, 247, .28);
  font-size: 13px;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
a.sl-pill { cursor: pointer; }
a.sl-pill:hover {
  background: rgba(0, 180, 247, .18);
  border-color: rgba(0, 180, 247, .5);
  transform: translateY(-1px);
}

.sl-pill-ico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sl-brand-gradient);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(0, 180, 247, .5);
  overflow: hidden;
}

.sl-pill-ico img {
  width: 14px;
  height: 14px;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18));
}

/* ---------- Chips (smaller tag elements) ---------- */
.sl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: var(--sl-r-pill);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--sl-dark-line-2);
  font-size: 12.5px;
  color: var(--sl-ink-dim);
  font-weight: 500;
  transition: .2s;
}

.sl-chip { text-decoration: none; }
a.sl-chip { cursor: pointer; }
.sl-chip:hover, a.sl-chip:hover {
  color: #fff;
  border-color: var(--sl-dark-line-3);
  background: rgba(255, 255, 255, .06);
  transform: translateY(-1px);
}

.sl-chip::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sl-accent);
  flex-shrink: 0;
  box-shadow: 0 0 4px var(--sl-accent);
}

.sl-chip.sl-chip-green::before {
  background: var(--sl-accent-2);
  box-shadow: 0 0 4px var(--sl-accent-2);
}

/* ==========================================================================
   Flow / Node diagram — reusable n8n/Make-style node language
   Dark-section component. Used in automate-hero + use-case cards so the
   "workflow of connected tool-nodes" looks identical everywhere.
   Each node = rounded glass card + tool-logo tile + label (+ optional sub).
   Connectors = thin line with chevron + a flowing accent dot.
   Branches = if/else fan-out off a logic node.
   ========================================================================== */
.sl-flow {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px;
}
.sl-flow::-webkit-scrollbar { display: none; }

/* ---- Node ---- */
.sl-node {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 13px 8px 8px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 8px 18px -12px rgba(0,0,0,.6);
  flex-shrink: 0;
}
.sl-node__ico {
  width: 28px; height: 28px; border-radius: 7px;
  background: #f6f8fa;
  display: grid; place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 15px; line-height: 1;       /* emoji fallback */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.sl-node__ico img { width: 18px; height: 18px; object-fit: contain; display: block; }
.sl-node__ico--svg {
  background: linear-gradient(135deg, rgba(0,180,247,.24), rgba(52,229,195,.10));
  color: var(--sl-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.sl-node__ico--svg svg { width: 16px; height: 16px; }
/* Sprad's own brand tile (logo.dev has no clean Sprad mark) — gradient + white Atlas mark */
.sl-node__ico--brand {
  background: var(--sl-brand-gradient);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.sl-node__ico--brand img { filter: brightness(0) invert(1); }
/* "done / good" outcome tile — green */
.sl-node__ico--ok {
  background: linear-gradient(135deg, rgba(110,206,83,.28), rgba(52,229,195,.10));
  color: var(--sl-accent-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.sl-node__ico--ok svg { width: 16px; height: 16px; }
.sl-node__tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sl-node__t {
  font-size: 12.5px; font-weight: 500; color: #fff;
  letter-spacing: -.005em; line-height: 1.25; white-space: nowrap;
}
.sl-node__s {
  font-family: var(--sl-mono); font-size: 9px; letter-spacing: .06em;
  color: var(--sl-ink-faint); text-transform: uppercase; white-space: nowrap;
}

/* trigger node — entry point, blue-tinted */
.sl-node--trigger {
  background: linear-gradient(180deg, rgba(0,180,247,.16), rgba(0,180,247,.04));
  border-color: rgba(0,180,247,.32);
}
.sl-node--trigger .sl-node__s { color: rgba(123,213,255,.8); }

/* logic / decision node — branch point */
.sl-node--logic {
  background: linear-gradient(180deg, rgba(167,139,250,.14), rgba(167,139,250,.04));
  border-color: rgba(167,139,250,.3);
}
.sl-node--logic .sl-node__ico--svg {
  background: linear-gradient(135deg, rgba(167,139,250,.3), rgba(167,139,250,.08));
  color: #c4b5fd;
}
.sl-node--logic .sl-node__s { color: rgba(196,181,253,.8); }

/* ---- Connector ---- */
.sl-conn {
  position: relative;
  flex-shrink: 0;
  width: 26px; height: 2px;
  align-self: center;
  background: rgba(255,255,255,.16);
}
.sl-conn::after {
  content: "";
  position: absolute; right: -1px; top: 50%;
  width: 6px; height: 6px;
  border-top: 2px solid rgba(255,255,255,.28);
  border-right: 2px solid rgba(255,255,255,.28);
  transform: translateY(-50%) rotate(45deg);
}
.sl-conn__dot {
  position: absolute; top: 50%; left: 0;
  width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%;
  background: var(--sl-accent);
  box-shadow: 0 0 8px var(--sl-accent);
  opacity: 0;
  animation: slFlowDot 2.6s linear infinite;
}
@keyframes slFlowDot {
  0%   { left: 0;    opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ---- Branch (if / else fan-out) — smooth curved connectors, Miro/n8n style ---- */
.sl-branch {
  position: relative;
  flex-shrink: 0;
  display: flex; flex-direction: column;
  gap: 16px;
  padding-left: 50px;
}
.sl-branch__wire {                /* inline-SVG bezier fork with arrowheads */
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 50px; height: 108px;
  overflow: visible; pointer-events: none;
}
.sl-branch__wire path { fill: none; stroke: rgba(0,180,247,.6); }
.sl-branch__wire .sl-branch__wire-ok { stroke: rgba(110,206,83,.72); }
.sl-branch__wire circle { fill: var(--sl-accent); }
.sl-branch__row {
  position: relative;
  height: 46px;
  display: flex; align-items: center; gap: 9px;
}
.sl-branch__cond {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  font-family: var(--sl-mono); font-size: 9px; letter-spacing: .05em;
  padding: 3px 9px 3px 7px; border-radius: var(--sl-r-pill);
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  color: var(--sl-ink-dim); white-space: nowrap;
}
.sl-branch__cond::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(123,213,255,.95); box-shadow: 0 0 5px rgba(0,180,247,.5);
}
.sl-branch__row--ok .sl-branch__cond {
  color: rgba(176,228,158,.92);
  border-color: rgba(110,206,83,.28);
  background: rgba(110,206,83,.08);
}
.sl-branch__row--ok .sl-branch__cond::before {
  background: var(--sl-accent-2); box-shadow: 0 0 5px rgba(110,206,83,.6);
}

/* ---- Large variant (hero centerpiece) ---- */
.sl-flow--lg .sl-node { padding: 11px 16px 11px 10px; border-radius: 13px; gap: 11px; }
.sl-flow--lg .sl-node__ico { width: 34px; height: 34px; border-radius: 9px; font-size: 18px; }
.sl-flow--lg .sl-node__ico img { width: 22px; height: 22px; }
.sl-flow--lg .sl-node__ico--svg svg { width: 19px; height: 19px; }
.sl-flow--lg .sl-node__t { font-size: 14px; }
.sl-flow--lg .sl-node__s { font-size: 9.5px; }
.sl-flow--lg .sl-conn { width: 34px; }

/* Reduced motion — freeze flowing dots */
@media (prefers-reduced-motion: reduce) {
  .sl-conn__dot { animation: none; opacity: .9; left: 50%; }
}

/* ===== workspace-automate-page (Atlas Automation Hero + Why-Atlas comparison) — sl-aa-* + kept sl-wa__ featured/cta ===== */
.sl-aa-hero{position:relative;padding:148px 32px 96px;overflow:hidden}.sl-aa-bg-glow{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}.sl-aa-bg-glow::before,.sl-aa-bg-glow::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.4}.sl-aa-bg-glow::before{top:-12%;left:30%;width:55%;aspect-ratio:1;background:radial-gradient(circle, rgba(0,180,247,.40) 0%, transparent 60%)}.sl-aa-bg-glow::after{bottom:-30%;right:-8%;width:45%;aspect-ratio:1;background:radial-gradient(circle, rgba(110,206,83,.16) 0%, transparent 60%)}.sl-aa-bg-dots{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse 80% 55% at 35% 25%, #000 30%, transparent 80%)}.sl-aa-hero-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto}.sl-aa-kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--sl-mono);font-size:13px;font-weight:500;letter-spacing:.16em;color:var(--sl-ink-dim);text-transform:uppercase;margin-bottom:22px;white-space:nowrap}.sl-aa-kicker .sl-aa-dot{display:none}.sl-aa-hero-title{color:#fff;font-weight:600;font-size:clamp(38px,5.6vw,76px);line-height:1.02;letter-spacing:-.03em;max-width:18ch}.sl-aa-hero-title .sl-aa-hl{color:#fff;font-weight:600;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 5' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' x2='1'><stop offset='0' stop-color='%23006d96'/><stop offset='.19' stop-color='%2300b4f7'/><stop offset='.77' stop-color='%236ece53'/><stop offset='1' stop-color='%23003e5c'/></linearGradient></defs><rect width='200' height='5' rx='2.5' fill='url(%23g)'/></svg>");background-repeat:no-repeat;background-size:calc(100% - 4px) 6px;background-position:2px 96%;padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}.sl-aa-hero-sub{margin-top:24px;font-size:clamp(17px,1.5vw,21px);color:var(--sl-ink-dim);line-height:1.55;max-width:62ch}.sl-aa-hero-sub b{color:var(--sl-ink);font-weight:500}.sl-aa-ha-stagewrap{margin-top:40px;width:100%;display:flex;justify-content:flex-start}.sl-aa-ha-stage{position:relative;width:1200px;height:648px;flex-shrink:0;transform-origin:top left}.sl-aa-ha-wires{position:absolute;inset:0;width:1200px;height:648px;overflow:visible;z-index:1;pointer-events:none}.sl-aa-ha-surface{position:absolute;left:0;top:0;width:1200px;height:392px;border-radius:28px;overflow:hidden;z-index:2;background:linear-gradient(180deg,rgba(0,180,247,.10),rgba(0,180,247,.035));border:1px solid rgba(0,180,247,.40);box-shadow:0 0 80px -16px rgba(0,180,247,.40),inset 0 1px 0 rgba(255,255,255,.07)}.sl-aa-ha-watermark{position:absolute;right:-70px;bottom:-90px;width:380px;height:380px;opacity:.06;pointer-events:none;filter:grayscale(.2)}.sl-aa-ha-surface-pad{position:absolute;inset:0;padding:24px 28px}.sl-aa-ha-badge{display:flex;align-items:center;gap:14px;margin-bottom:20px}.sl-aa-ha-mark{width:46px;height:46px;border-radius:50%;background:url("https://cdn.prod.website-files.com/6846e62208b103688517c6a6/6846e62208b103688517ca1c_Vectors-Wrapper.svg") center/58% no-repeat,#00b4f7;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 0 22px rgba(0,180,247,.55);flex-shrink:0}.sl-aa-ha-badge .sl-aa-t{font-size:26px;font-weight:600;color:#fff;letter-spacing:-.015em;line-height:1.05}.sl-aa-ha-badge .sl-aa-s{font-family:var(--sl-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#7fd6fb;margin-left:10px}.sl-aa-ha-boxes{display:flex;gap:16px}.sl-aa-ha-box{position:relative;border-radius:18px;background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.085);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);padding:18px 20px;overflow:hidden}.sl-aa-ha-box.sl-aa-flows{width:704px;height:268px;display:flex;flex-direction:column}.sl-aa-ha-box.sl-aa-graph{width:436px;height:268px}.sl-aa-ha-box-head{margin-bottom:6px}.sl-aa-ha-box-cap{font-family:var(--sl-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sl-ink-faint);display:block;margin-bottom:7px}.sl-aa-ha-box-title{font-size:21px;font-weight:600;color:#fff;letter-spacing:-.015em;line-height:1.05}.sl-aa-ha-box-desc{font-size:13.5px;line-height:1.4;color:var(--sl-ink-dim);margin-top:5px;max-width:46ch}.sl-aa-ha-flow{position:relative;width:660px;height:140px;margin:auto}.sl-aa-ha-flow .sl-aa-net{position:absolute;left:0;top:0;width:660px;height:140px;overflow:visible;z-index:1}.sl-aa-ha-n{font-family:var(--sl-sans);font-size:13px;font-weight:500;padding:8px 11px;border-radius:9px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;position:absolute;z-index:3;background:#141a27;line-height:1}.sl-aa-ha-n.sl-aa-wf{background:#1a2130;border:1px solid var(--sl-dark-line-2);color:var(--sl-ink-dim)}.sl-aa-ha-n.sl-aa-llm{background-color:#141a27;background-image:linear-gradient(rgba(167,139,250,.18),rgba(167,139,250,.18));border:1px solid rgba(167,139,250,.4);color:#c4b5fd}.sl-aa-ha-n.sl-aa-agent{background-color:#141a27;background-image:linear-gradient(rgba(0,180,247,.16),rgba(0,180,247,.16));border:1px solid rgba(0,180,247,.4);color:#7fd6fb}.sl-aa-ha-n.sl-aa-agent i{width:13px;height:13px;border-radius:50%;background:url("https://cdn.prod.website-files.com/6846e62208b103688517c6a6/6846e62208b103688517ca1c_Vectors-Wrapper.svg") center/70% no-repeat,#00b4f7;display:inline-block;flex-shrink:0}.sl-aa-ha-n.sl-aa-io{background-color:#141a27;background-image:linear-gradient(rgba(110,206,83,.14),rgba(110,206,83,.14));border:1px solid rgba(110,206,83,.34);color:#9fe08a}.sl-aa-ha-n.sl-aa-router{background-color:#141a27;background-image:linear-gradient(rgba(255,196,84,.15),rgba(255,196,84,.15));border:1px solid rgba(255,196,84,.44);color:#ffd083}.sl-aa-ha-n.sl-aa-router svg{width:14px;height:14px}.sl-aa-ha-rows{display:flex;flex-direction:column;gap:7px;margin-top:6px;height:162px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 48%,rgba(0,0,0,.5) 76%,transparent 100%);mask-image:linear-gradient(to bottom,#000 48%,rgba(0,0,0,.5) 76%,transparent 100%)}.sl-aa-ha-row{display:flex;align-items:center;gap:9px}.sl-aa-ha-ent{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:rgba(0,180,247,.12);border:1px solid rgba(0,180,247,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);flex-shrink:0}.sl-aa-ha-ent .sl-aa-ei{width:22px;height:22px;border-radius:6px;background:rgba(0,180,247,.2);display:grid;place-items:center;color:#7fd6fb;flex-shrink:0}.sl-aa-ha-ent .sl-aa-ei svg{width:14px;height:14px}.sl-aa-ha-ent .sl-aa-et{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.01em;white-space:nowrap}.sl-aa-ha-conn{width:14px;height:1px;background:rgba(120,210,255,.3);flex-shrink:0}.sl-aa-ha-sub{display:inline-flex;align-items:center;gap:7px;padding:4px 5px 4px 11px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid var(--sl-dark-line-2);font-size:12.5px;font-weight:500;color:var(--sl-ink-dim);white-space:nowrap}.sl-aa-slog{position:relative;width:19px;height:19px;flex-shrink:0}.sl-aa-slog img{position:absolute;inset:0;width:100%;height:100%;padding:2px;border-radius:6px;background:#fff;object-fit:contain;box-shadow:0 0 0 1px rgba(255,255,255,.14);opacity:0;animation:slaa-hacyc var(--dur,12s) cubic-bezier(.45,0,.2,1) infinite;animation-delay:var(--d,0s)}.sl-aa-slog img.sl-aa-s1{animation-delay:calc(var(--d,0s) - var(--dur,12s)/3)}.sl-aa-slog img.sl-aa-s2{animation-delay:calc(var(--d,0s) - var(--dur,12s)*2/3)}.sl-aa-slog.sl-aa-solo img{animation:none;opacity:1}.sl-aa-slog .sl-aa-sprad{position:absolute;inset:0;border-radius:6px;background:linear-gradient(160deg,#1bb6f5,#0479c4);display:grid;place-items:center;color:#fff;font-weight:800;font-size:11px;line-height:1;box-shadow:0 0 0 1px rgba(255,255,255,.14)}.sl-aa-ha-row.sl-aa-more{margin-top:1px}.sl-aa-ha-more{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:10px;background:rgba(0,180,247,.07);border:1px solid rgba(0,180,247,.22);color:#7fd6fb;font-size:13px;font-weight:600}.sl-aa-ha-more .sl-aa-ei{width:20px;height:20px;border-radius:6px;background:rgba(0,180,247,.14);display:grid;place-items:center}.sl-aa-ha-more .sl-aa-ei svg{width:13px;height:13px}.sl-aa-ha-row.sl-aa-ghost .sl-aa-ha-ent{background:rgba(0,180,247,.09);border-color:rgba(0,180,247,.26)}.sl-aa-ha-row.sl-aa-ghost .sl-aa-ha-ent .sl-aa-ei{background:rgba(0,180,247,.16)}.sl-aa-ha-row.sl-aa-ghost .sl-aa-ha-ent .sl-aa-et{color:rgba(255,255,255,.82)}.sl-aa-ha-tool{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:11px;width:120px}.sl-aa-ha-tchip{padding:11px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--sl-dark-line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}.sl-aa-ha-ologo{position:relative;width:64px;height:64px}.sl-aa-ha-ologo img{position:absolute;inset:0;width:100%;height:100%;padding:14%;border-radius:14px;background:#fff;box-shadow:0 6px 16px -8px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);object-fit:contain;opacity:0;transform-origin:center;will-change:transform,opacity;animation:slaa-hacyc var(--dur,16s) cubic-bezier(.45,0,.2,1) infinite;animation-delay:var(--d,0s)}.sl-aa-ha-ologo img.sl-aa-s1{animation-delay:calc(var(--d,0s) - var(--dur,16s)/3)}.sl-aa-ha-ologo img.sl-aa-s2{animation-delay:calc(var(--d,0s) - var(--dur,16s)*2/3)}@keyframes slaa-hacyc{0%{opacity:0;transform:scale(.9)}7%{opacity:1;transform:scale(1)}30%{opacity:1;transform:scale(1)}40%{opacity:0;transform:scale(1.05)}100%{opacity:0;transform:scale(1.05)}}.sl-aa-ha-tcap{font-family:var(--sl-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-ink-faint);white-space:nowrap}.sl-aa-ha-stacklbl{position:absolute;left:0;right:0;top:628px;text-align:center;font-size:13px;letter-spacing:.02em;color:var(--sl-ink-faint)}.sl-aa-ha-stacklbl b{color:var(--sl-ink-dim);font-weight:500}.sl-aa-ha-eval{position:absolute;z-index:6;display:flex;align-items:center;gap:11px}.sl-aa-ha-eval-badge{position:relative;width:34px;height:34px;border-radius:50%;background:#0e1a12;border:1px solid rgba(110,206,83,.4);flex-shrink:0;box-shadow:0 0 16px rgba(110,206,83,.35)}.sl-aa-ha-eval-ring{position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:#6ece53;border-right-color:rgba(110,206,83,.45);animation:slaa-haspin 1.25s linear infinite}.sl-aa-ha-eval-check{position:absolute;inset:0;display:grid;place-items:center;color:#bff0a8;font-size:15px;font-weight:700;opacity:0;animation:slaa-hacheck 3.2s ease-in-out infinite}@keyframes slaa-haspin{to{transform:rotate(360deg)}}@keyframes slaa-hacheck{0%,38%{opacity:0;transform:scale(.5)}52%,86%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.5)}}.sl-aa-ha-eval-lbl{font-family:var(--sl-mono);font-size:12px;letter-spacing:.1em;color:#9fe08a;white-space:nowrap;line-height:1.3}.sl-aa-ha-eval-lbl small{display:block;font-size:10.5px;letter-spacing:.04em;color:var(--sl-ink-faint)}.sl-aa-cta{position:relative;margin-top:26px;max-width:1060px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px 10px 20px;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(0,180,247,.22);box-shadow:0 22px 54px -28px rgba(0,0,0,.7),0 0 0 1px rgba(0,180,247,.05),inset 0 1px 0 rgba(255,255,255,.06)}.sl-aa-cta-lead{display:flex;align-items:center;gap:11px;white-space:nowrap}.sl-aa-cta-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--sl-mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#7fd6fb;background:rgba(0,180,247,.1);border:1px solid rgba(0,180,247,.3);padding:5px 10px;border-radius:999px;white-space:nowrap}.sl-aa-cta-tag .sl-aa-dot{width:6px;height:6px;border-radius:50%;background:var(--sl-accent);box-shadow:0 0 0 4px var(--sl-accent-soft);animation:slaa-ctapulse 2.4s ease-in-out infinite}@keyframes slaa-ctapulse{0%,100%{box-shadow:0 0 0 3px var(--sl-accent-soft)}50%{box-shadow:0 0 0 6px rgba(0,180,247,.05)}}.sl-aa-cta-q{font-size:14.5px;font-weight:500;color:#fff;letter-spacing:-.01em;white-space:nowrap}.sl-aa-cta-badges{display:flex;gap:7px;flex-wrap:nowrap;flex:0 1 auto}.sl-aa-badge{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;cursor:pointer;position:relative;white-space:nowrap;background:rgba(255,255,255,.04);border:1px solid var(--sl-dark-line-2);font-size:13px;font-weight:500;color:var(--sl-ink);line-height:1;transition:transform .2s var(--sl-ease-out),border-color .2s,background .2s,box-shadow .2s,color .2s}.sl-aa-badge .sl-aa-bi{width:15px;height:15px;color:#7fd6fb;display:grid;place-items:center;flex-shrink:0;transition:transform .2s var(--sl-ease-out),color .2s}.sl-aa-badge .sl-aa-bi svg{width:15px;height:15px}.sl-aa-badge:hover{transform:translateY(-2px);border-color:rgba(0,180,247,.55);background:rgba(0,180,247,.1);color:#fff;box-shadow:0 10px 24px -14px var(--sl-accent-glow)}.sl-aa-badge:hover .sl-aa-bi{transform:scale(1.12)}.sl-aa-badge.sl-aa-active{border-color:var(--sl-accent);background:rgba(0,180,247,.16);color:#fff;box-shadow:0 0 0 1px var(--sl-accent),0 10px 26px -14px var(--sl-accent-glow)}.sl-aa-badge.sl-aa-active .sl-aa-bi{color:#bff0ff}.sl-aa-cta-go{display:inline-flex;align-items:center;gap:9px;margin-left:auto;padding:10px 18px;border-radius:999px;font-size:13.5px;font-weight:500;background:var(--sl-accent);color:#fff;opacity:.5;pointer-events:none;transition:opacity .25s,transform .2s,box-shadow .25s,background .2s;white-space:nowrap;flex-shrink:0}.sl-aa-cta-go .sl-aa-arr{width:18px;height:18px;display:inline-grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.22);font-size:11px}.sl-aa-cta-go.sl-aa-ready{opacity:1;pointer-events:auto;box-shadow:0 12px 28px -10px var(--sl-accent-glow);animation:slaa-goPop .4s var(--sl-ease-out)}.sl-aa-cta-go.sl-aa-ready:hover{background:#33c4fb;transform:translateY(-1px)}@keyframes slaa-goPop{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:scale(1)}}@media(max-width:960px){.sl-aa-cta-q{display:none}}@media(max-width:860px){.sl-aa-cta{border-radius:18px}.sl-aa-cta-badges{flex-wrap:wrap}.sl-aa-cta-go{margin-left:0;flex:1;justify-content:center}}@media(max-width:680px){.sl-aa-hero{padding:120px 20px 72px}}.sl-aa-cmp{--neg:#caa987;--neg-2:#a98f72;--neg-soft:rgba(202,169,135,.12);--neg-line:rgba(202,169,135,.34);--neg-err:#e0857a;--neg-bg:#13110d;--pos:#00b4f7;--pos-2:#6ece53;--pos-soft:rgba(0,180,247,.12);position:relative;background:var(--sl-dark)}.sl-aa-cmp-intro{max-width:1180px;margin:0 auto;padding:130px 32px 56px;text-align:center;position:relative;z-index:2}.sl-aa-cmp-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--sl-mono);font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--sl-ink-dim);margin-bottom:26px}.sl-aa-cmp-eyebrow .sl-aa-dot{display:none}.sl-aa-cmp-intro h2{color:#fff;font-weight:600;font-size:clamp(33px,4.8vw,66px);line-height:1.03;letter-spacing:-.03em;max-width:17ch;margin:0 auto;text-wrap:balance}.sl-aa-cmp-intro h2 .sl-aa-hl{background:linear-gradient(90deg,var(--sl-grad-blue-2) 10%,var(--sl-grad-green));-webkit-background-clip:text;background-clip:text;color:transparent}.sl-aa-cmp-hint{margin-top:34px;font-family:var(--sl-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sl-ink-faint);display:inline-flex;align-items:center;gap:10px}.sl-aa-cmp-hint .sl-aa-ar{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid var(--sl-dark-line-3);border-radius:50%;animation:slaa-cmpbob 1.8s ease-in-out infinite}@keyframes slaa-cmpbob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}.sl-aa-cmp-track{position:relative;height:340vh}.sl-aa-cmp-pin{position:sticky;top:0;height:100vh;overflow:hidden}.sl-aa-cmp-half{position:absolute;top:0;bottom:0;width:50%;z-index:0}.sl-aa-cmp-half.sl-aa-l{left:0;background:radial-gradient(120% 80% at 32% 42%, rgba(202,169,135,.07), transparent 62%), linear-gradient(180deg,#16130e,#100e0a)}.sl-aa-cmp-half.sl-aa-r{right:0;background:radial-gradient(120% 80% at 68% 42%, rgba(0,180,247,.10), transparent 62%), linear-gradient(180deg,#0e131f,#0a0f17)}.sl-aa-cmp-half::after{content:"";position:absolute;inset:0;opacity:.45;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(ellipse 72% 58% at 50% 42%,#000 30%,transparent 82%)}.sl-aa-cmp-half.sl-aa-l::after{background-image:radial-gradient(rgba(202,169,135,.07) 1px,transparent 1px)}.sl-aa-cmp-axis{position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px);z-index:6;background:linear-gradient(180deg,transparent,rgba(0,180,247,.5) 26%,rgba(110,206,83,.5) 74%,transparent)}.sl-aa-cmp-vs{position:absolute;left:50%;top:70%;transform:translate(-50%,-50%);z-index:9;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#0a0f17;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 7px rgba(10,15,23,.85),0 0 38px rgba(0,180,247,.28);font-family:var(--sl-mono);font-size:13px;letter-spacing:.12em;font-weight:600;color:#fff}.sl-aa-cmp-stage{position:absolute;top:31%;left:25%;width:460px;height:380px;z-index:3;transform:translate(-50%,-50%) scale(var(--s,1));transform-origin:center}.sl-aa-cmp-stage.sl-aa-r{left:75%}.sl-aa-board{position:absolute;inset:0}.sl-aa-cmp-band{position:absolute;left:0;right:0;top:0;bottom:0;z-index:7;pointer-events:none}.sl-aa-cmp-band::before{content:"";position:absolute;left:0;right:0;top:70%;transform:translateY(-50%);height:210px;background:linear-gradient(180deg,transparent,rgba(8,11,17,.5) 26%,rgba(8,11,17,.62) 50%,rgba(8,11,17,.5) 74%,transparent)}.sl-aa-cmp-rows{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden}.sl-aa-cmp-roll{position:absolute;left:0;right:0;top:70%;will-change:transform}.sl-aa-cmp-row{position:absolute;left:0;right:0;top:0;transform:translateY(-50%);display:grid;grid-template-columns:1fr 92px 1fr;align-items:center;will-change:transform,opacity}.sl-aa-cmp-w{display:flex;flex-direction:column;min-width:0}.sl-aa-cmp-w.sl-aa-neg{align-items:flex-end;text-align:right;padding-right:30px}.sl-aa-cmp-w.sl-aa-pos{align-items:flex-start;text-align:left;padding-left:30px}.sl-aa-cmp-word{font-weight:700;font-size:clamp(30px,4.6vw,72px);line-height:.98;letter-spacing:-.035em;white-space:nowrap;text-shadow:0 2px 30px rgba(8,11,17,.9),0 1px 4px rgba(8,11,17,.8)}.sl-aa-cmp-w.sl-aa-neg .sl-aa-cmp-word{color:var(--neg)}.sl-aa-cmp-w.sl-aa-pos .sl-aa-cmp-word{color:#fff}.sl-aa-cmp-row.sl-aa-cur .sl-aa-cmp-w.sl-aa-pos .sl-aa-cmp-word{text-shadow:0 0 34px rgba(0,180,247,.32)}.sl-aa-cmp-cap{margin-top:16px;font-size:14.5px;line-height:1.45;max-width:30ch}.sl-aa-cmp-w.sl-aa-neg .sl-aa-cmp-cap{color:rgba(202,169,135,.74);text-shadow:0 1px 8px rgba(8,11,17,.9)}.sl-aa-cmp-w.sl-aa-pos .sl-aa-cmp-cap{text-shadow:0 1px 8px rgba(8,11,17,.9)}.sl-aa-cmp-w.sl-aa-pos .sl-aa-cmp-cap{color:var(--sl-ink-dim)}.sl-aa-cmp-prog{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;gap:9px;z-index:9}.sl-aa-cmp-prog i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);transition:transform .35s var(--sl-ease-out),background .35s,box-shadow .35s}.sl-aa-cmp-prog i.sl-aa-on{background:#fff;box-shadow:0 0 11px rgba(0,180,247,.65);transform:scale(1.3)}.sl-aa-ocyc{position:relative;border-radius:11px;overflow:hidden}.sl-aa-ocyc img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:15%;border-radius:11px;background:#fff;opacity:0;animation:slaa-hacyc var(--dur,14s) cubic-bezier(.45,0,.2,1) infinite;animation-delay:var(--d,0s)}.sl-aa-ocyc img.sl-aa-s1{animation-delay:calc(var(--d,0s) - var(--dur,14s)/3)}.sl-aa-ocyc img.sl-aa-s2{animation-delay:calc(var(--d,0s) - var(--dur,14s)*2/3)}.sl-aa-neg-board .sl-aa-ocyc img{filter:grayscale(.4) brightness(.92)}.sl-aa-neg-board{position:absolute;inset:0;font-family:var(--sl-sans)}.sl-aa-nwire{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible}.sl-aa-nwire .sl-aa-solid{stroke:var(--neg-line);stroke-width:2;fill:none}.sl-aa-nwire .sl-aa-dash{stroke:var(--neg-line);stroke-width:1.8;fill:none;stroke-dasharray:5 6}.sl-aa-nwire .sl-aa-xerr circle{fill:#241310;stroke:var(--neg-err);stroke-width:1.5}.sl-aa-nwire .sl-aa-xerr path{stroke:var(--neg-err);stroke-width:2;stroke-linecap:round}.sl-aa-suite{position:absolute;left:128px;top:116px;width:208px;z-index:3;border-radius:16px;background:linear-gradient(180deg,#1d1810,#16110a);border:1px solid rgba(202,169,135,.5);box-shadow:0 16px 36px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05)}.sl-aa-suite-bar{display:flex;align-items:center;gap:6px;padding:11px 13px;border-bottom:1px solid rgba(202,169,135,.22)}.sl-aa-suite-bar .sl-aa-sd{width:8px;height:8px;border-radius:50%;background:rgba(202,169,135,.45)}.sl-aa-suite-bar b{margin-left:7px;font-family:var(--sl-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#dcc4a4;font-weight:600}.sl-aa-suite-bar .sl-aa-lock{margin-left:auto;width:22px;height:22px;display:grid;place-items:center;color:var(--neg)}.sl-aa-suite-bar .sl-aa-lock svg{width:13px;height:13px}.sl-aa-suite-mods{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px}.sl-aa-smod{position:relative;padding:12px 10px;border-radius:9px;background:rgba(202,169,135,.08);border:1px solid rgba(202,169,135,.24);font-size:12px;font-weight:600;color:#cbb191;transition:opacity .4s}.sl-aa-ai-sticker{position:absolute;top:-24px;right:-22px;z-index:7;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(125% 125% at 32% 24%, #6fdcff, #00b4f7 46%, #57b73a);color:#03222f;font-weight:800;font-size:18px;letter-spacing:-.01em;line-height:.9;box-shadow:0 0 0 4px #fff,0 0 0 5px rgba(0,40,60,.12),0 14px 26px -8px rgba(0,0,0,.55),inset 0 2px 5px rgba(255,255,255,.6),inset 0 -7px 13px rgba(0,55,85,.28);transform:rotate(-12deg) scale(.25);opacity:0;transform-origin:64% 36%;transition:transform .5s var(--sl-ease-out),opacity .35s;overflow:hidden}.sl-aa-ai-sticker .sl-aa-as-spark{position:absolute;top:9px;right:12px;width:11px;height:11px;color:#fff;filter:drop-shadow(0 1px 1px rgba(0,50,80,.4))}.sl-aa-ai-sticker b{font-weight:800}.sl-aa-ai-sticker::after{content:"";position:absolute;top:-50%;left:0;width:44%;height:200%;transform:translateX(-180%) rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:slaa-stickShine 4.2s ease-in-out infinite}@keyframes slaa-stickShine{0%,72%{transform:translateX(-180%) rotate(18deg)}86%{transform:translateX(360%) rotate(18deg)}100%{transform:translateX(360%) rotate(18deg)}}.sl-aa-suite-glitter{position:absolute;inset:0;border-radius:16px;z-index:4;pointer-events:none;opacity:0;overflow:hidden;transition:opacity .5s}.sl-aa-suite-glitter .sl-aa-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,rgba(111,220,255,.2) 47%,rgba(110,206,83,.15) 53%,transparent 68%);background-size:260% 100%;background-position:130% 0;animation:slaa-glitSweep 4.6s ease-in-out infinite}.sl-aa-suite-glitter .sl-aa-sp{position:absolute;color:#cdeeff;filter:drop-shadow(0 0 4px rgba(0,180,247,.75));animation:slaa-twinkle 2.6s ease-in-out infinite}.sl-aa-suite-glitter .sl-aa-sp svg{width:100%;height:100%;display:block}@keyframes slaa-glitSweep{0%{background-position:130% 0}58%,100%{background-position:-70% 0}}@keyframes slaa-twinkle{0%,100%{opacity:.12;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}.sl-aa-price-rise{position:absolute;left:50%;top:calc(100% + 14px);transform:translate(-50%,18px);width:max-content;z-index:4;text-align:center;opacity:0;transition:transform .5s var(--sl-ease-out),opacity .4s}.sl-aa-price-rise .sl-aa-pr-num{display:block;font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--neg)}.sl-aa-price-rise .sl-aa-pr-sub{display:block;margin-top:5px;font-size:11.5px;color:rgba(202,169,135,.72)}.sl-aa-island{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:10px;font-size:12px;font-weight:600;white-space:nowrap;color:#cbb191;background:linear-gradient(180deg,#1c1710,#15110b);border:1px solid rgba(202,169,135,.3);transition:opacity .4s}.sl-aa-island .sl-aa-nd{width:7px;height:7px;border-radius:50%;background:var(--neg-2)}.sl-aa-island.sl-aa-conn{border-style:solid}.sl-aa-island.sl-aa-off{border-style:dashed;opacity:.8}.sl-aa-island.sl-aa-det{border-style:dashed;opacity:.55;border-color:rgba(202,169,135,.22)}.sl-aa-island.sl-aa-err .sl-aa-nd{background:var(--neg-err);box-shadow:0 0 8px var(--neg-err)}.sl-aa-nlbl{position:absolute;z-index:2;font-family:var(--sl-mono);font-size:10px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:rgba(202,169,135,.62)}#slaa-cmpL[data-stage="1"] .sl-aa-island,#slaa-cmpL[data-stage="1"] .sl-aa-nlbl{opacity:.3}#slaa-cmpL[data-stage="1"] .sl-aa-smod{opacity:.62}#slaa-cmpL[data-stage="1"] .sl-aa-ai-sticker{opacity:1;transform:rotate(-12deg) scale(1)}#slaa-cmpL[data-stage="1"] .sl-aa-suite-glitter{opacity:1}#slaa-cmpL[data-stage="1"] .sl-aa-suite{border-color:rgba(0,180,247,.42);box-shadow:0 16px 36px -18px rgba(0,0,0,.7),0 0 30px -6px rgba(0,180,247,.4),inset 0 1px 0 rgba(255,255,255,.06)}#slaa-cmpL[data-stage="2"] .sl-aa-island,#slaa-cmpL[data-stage="2"] .sl-aa-nlbl{opacity:.28}#slaa-cmpL[data-stage="2"] .sl-aa-price-rise{opacity:1;transform:translate(-50%,0)}.sl-aa-pos-board{position:absolute;inset:0}.sl-aa-pwire{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;opacity:1;transition:opacity .45s}.sl-aa-pwire path{stroke:rgba(120,210,255,.42);stroke-width:2;fill:none}.sl-aa-pwire .sl-aa-glines,.sl-aa-pwire .sl-aa-tlines{transition:opacity .45s}.sl-aa-pwire .sl-aa-tlines{opacity:0}.sl-aa-pwire .sl-aa-tlines path{stroke:rgba(120,210,255,.55)}.sl-aa-pcore{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:3;width:96px;height:96px;border-radius:50%;background:url("https://cdn.prod.website-files.com/6846e62208b103688517c6a6/6846e62208b103688517ca1c_Vectors-Wrapper.svg") center/60% no-repeat,#00b4f7;box-shadow:0 0 0 1px rgba(0,180,247,.5),0 0 36px rgba(0,180,247,.5)}.sl-aa-pchip{position:absolute;z-index:2;width:62px;height:62px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--sl-dark-line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);padding:6px;transition:opacity .4s,transform .4s}.sl-aa-pchip .sl-aa-ocyc{width:100%;height:100%}.sl-aa-reason-boxes{position:absolute;inset:0;z-index:5;opacity:0;transform:translateY(30px);transition:opacity .45s,transform .55s var(--sl-ease-out);pointer-events:none}.sl-aa-dock{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:4}.sl-aa-dock path{stroke:rgba(0,180,247,.5);stroke-width:2;fill:none}.sl-aa-rb2{position:absolute;width:212px;border-radius:14px;background:linear-gradient(180deg,#0a1a27,#07101a);border:1px solid rgba(0,180,247,.6);padding:12px 13px 13px;box-shadow:0 20px 38px -14px rgba(0,0,0,.85),0 0 22px -10px rgba(0,180,247,.4),inset 0 1px 0 rgba(255,255,255,.06)}.sl-aa-rb2 .sl-aa-rc{font-family:var(--sl-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#7fd6fb;display:block;margin-bottom:4px}.sl-aa-rb2>svg{display:block;width:100%;height:auto;overflow:visible}.sl-aa-rzsym{fill:rgba(0,180,247,.18);stroke:#5fd0fb;stroke-width:1.5}.sl-aa-rzline{stroke:rgba(120,210,255,.5);stroke-width:2;fill:none}.sl-aa-rzdot{fill:#9fe08a}.sl-aa-rgnode{fill:rgba(0,180,247,.22);stroke:#7fd6fb;stroke-width:1.5}.sl-aa-rgroot{fill:rgba(0,180,247,.42);stroke:#cdeeff;stroke-width:1.6}.sl-aa-rgline{stroke:rgba(120,210,255,.42);stroke-width:1.5}.sl-aa-ppz{position:absolute;left:50%;top:246px;transform:translate(-50%,18px);z-index:4;text-align:center;opacity:0;transition:opacity .4s,transform .5s var(--sl-ease-out)}.sl-aa-ppz .sl-aa-pr-num{display:block;font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1;background:linear-gradient(90deg,var(--pos),var(--pos-2));-webkit-background-clip:text;background-clip:text;color:transparent}.sl-aa-ppz .sl-aa-pr-sub{display:block;margin-top:5px;font-size:11.5px;color:var(--sl-ink-dim)}#slaa-cmpR[data-stage="1"] .sl-aa-pchip,#slaa-cmpR[data-stage="2"] .sl-aa-pchip{opacity:.26;transform:translateY(calc(var(--rise,44px) * -1))}#slaa-cmpR[data-stage="1"] .sl-aa-pwire .sl-aa-glines,#slaa-cmpR[data-stage="2"] .sl-aa-pwire .sl-aa-glines{opacity:0}#slaa-cmpR[data-stage="1"] .sl-aa-pwire .sl-aa-tlines,#slaa-cmpR[data-stage="2"] .sl-aa-pwire .sl-aa-tlines{opacity:.4}#slaa-cmpR[data-stage="1"] .sl-aa-reason-boxes{opacity:1;transform:translateY(0)}#slaa-cmpR[data-stage="2"] .sl-aa-ppz{opacity:1;transform:translate(-50%,0)}@media(max-width:899px){.sl-aa-cmp-intro{padding:96px 22px 8px}.sl-aa-cmp-track{height:auto}.sl-aa-cmp-pin{position:static;height:auto;overflow:visible}.sl-aa-cmp-half,.sl-aa-cmp-axis,.sl-aa-cmp-vs,.sl-aa-cmp-stage,.sl-aa-cmp-prog,.sl-aa-cmp-band::before{display:none}.sl-aa-cmp-band{position:static}.sl-aa-cmp-rows{position:static;overflow:visible}.sl-aa-cmp-roll{position:static;top:auto;transform:none!important}.sl-aa-cmp-row{position:relative;top:auto!important;transform:none!important;opacity:1!important;filter:none!important;grid-template-columns:1fr;gap:4px;padding:40px 22px;border-top:1px solid var(--sl-dark-line);justify-items:center}.sl-aa-cmp-row>div:nth-child(2){display:none}.sl-aa-cmp-w.sl-aa-neg,.sl-aa-cmp-w.sl-aa-pos{align-items:center;text-align:center;padding:0}.sl-aa-cmp-w.sl-aa-neg{padding-bottom:18px;position:relative}.sl-aa-cmp-w.sl-aa-neg::after{content:"vs";position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-family:var(--sl-mono);font-size:11px;letter-spacing:.12em;color:var(--sl-ink-faint)}.sl-aa-cmp-word{font-size:clamp(32px,9vw,44px)!important;white-space:normal}}.sl-module--wa-page{background: var(--sl-dark);color: var(--sl-ink);}.sl-module--wa-page .sl-wa__featured{padding: 60px 0;background: var(--sl-dark-2);border-top: 1px solid var(--sl-dark-line);border-bottom: 1px solid var(--sl-dark-line);}.sl-module--wa-page .sl-wa__featured h2{color: #fff;text-align: center;margin-bottom: 36px;}.sl-module--wa-page .sl-wa__tpls{display: grid;grid-template-columns: repeat(3, 1fr);gap: 14px;}.sl-module--wa-page .sl-wa__tpl{padding: 22px 20px;border-radius: var(--sl-r-md);background: rgba(255,255,255,.03);border: 1px solid var(--sl-dark-line-2);transition: .25s;color: inherit;text-decoration: none;display: flex;flex-direction: column;gap: 8px;}.sl-module--wa-page .sl-wa__tpl:hover{background: rgba(255,255,255,.06);border-color: var(--sl-accent);transform: translateY(-2px);}.sl-module--wa-page .sl-wa__tpl-eyebrow{font-family: var(--sl-mono);font-size: 10.5px;letter-spacing: .08em;color: var(--sl-ink-faint);text-transform: uppercase;}.sl-module--wa-page .sl-wa__tpl h4{font-size: 15px;font-weight: 600;color: #fff;}.sl-module--wa-page .sl-wa__tpl p{font-size: 13px;color: var(--sl-ink-dim);line-height: 1.45;}.sl-module--wa-page .sl-wa__featured-foot{text-align: center;margin-top: 28px;}.sl-module--wa-page .sl-wa__featured-foot a{font-size: 14px;color: var(--sl-accent);border-bottom: 1px solid currentColor;padding-bottom: 1px;}.sl-module--wa-page .sl-wa__cta-section{padding: 100px 0 120px;text-align: center;position: relative;overflow: hidden;}.sl-module--wa-page .sl-wa__cta-section::before{content: "";position: absolute;inset: 0;pointer-events: none;background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,180,247,.12), transparent 70%);}.sl-module--wa-page .sl-wa__cta-section .sl-shell{position: relative;z-index: 2;}.sl-module--wa-page .sl-wa__cta-section h2{color: #fff;max-width: 20ch;margin: 0 auto 18px;}.sl-module--wa-page .sl-wa__cta-section p{color: var(--sl-ink-dim);max-width: 50ch;margin: 0 auto 28px;}.sl-module--wa-page .sl-wa__cta-section .sl-wa__cta{display: inline-flex;gap: 10px;flex-wrap: wrap;justify-content: center;}@media (max-width: 880px){.sl-module--wa-page .sl-wa__grid{grid-template-columns: 1fr;}.sl-module--wa-page .sl-wa__tpls{grid-template-columns: 1fr;}.sl-module--wa-page .sl-wa__hero{padding: 80px 0 56px;}}

/* ── Webflow base resets inside Sprad modules ──────────────────────────────
   Webflow's global stylesheet paints <table> white AND stripes even rows via
   `tr:nth-child(2n){background:#f9f9f9}` (specificity 0,1,1). Our modules are
   dark, so neutralize it. We MUST out-specify Webflow's nth-child rule, hence
   the `table tr` descendant + an explicit nth-child override (0,1,2 / 0,2,2 >
   0,1,1). Section-specific cell bgs (.sl-rc__td-atlas, …) are more specific and
   still win. */
.sl-module table,
.sl-module table thead, .sl-module table tbody,
.sl-module table tr, .sl-module table tr:nth-child(2n),
.sl-module table th, .sl-module table td { background-color: transparent; }

/* Atlas logo: Webflow's rich-text image optimizer rewrites EVERY <img src> (even
   external) and mangles the Atlas asset (double-encoded space → 404). Force the
   real logo via CSS content — Webflow never touches url() inside stylesheets. */
img.sl-atlas-logo { content: url(https://assets.sprad.io/atlas-logo.png); }

/* ============================================================================
   UC REASONS SYSTEM — shared by uc-performance-management, uc-skill-management,
   uc-onboarding-automation (extracted 2026-06-19)

   Naming: sl-r-* (reason rows), sl-r-viz (viz panel), sl-r-points (bullet list),
   sl-r-shot (screenshot layout), sl-r-mini (checkmark list), sl-r-atlasic (Atlas icon).
   Dark reasons use base styles; light reasons use the --light modifier.
   ============================================================================ */

/* ---- reason intro head (centered) ---- */
.sl-r__rhead { text-align: center; max-width: 760px; margin: 0 auto; padding: clamp(82px,10vh,120px) 0 clamp(8px,2vh,20px); }
.sl-r__rhead .sl-eyebrow { display: block; margin-bottom: 16px; }
.sl-r__rhead h2 { font-size: clamp(30px,3.6vw,48px); font-weight: 500; color: #fff; letter-spacing: -.03em; line-height: 1.06; margin: 0; }

/* ---- reason section row ---- */
.sl-r { padding: clamp(78px,10vh,128px) 0; border-top: 1px solid var(--sl-dark-line); overflow: hidden; }
.sl-r--light { background: var(--sl-beige); color: var(--sl-dark-ink); border-top: 0; }
.sl-r:has(.sl-r-shot) { padding-top: clamp(96px,12vh,152px); padding-bottom: clamp(96px,12vh,152px); }

/* ---- reason heading (left-aligned, max ~560px) ---- */
.sl-rhead { max-width: 620px; }
.sl-rhead .sl-reason-num { color: var(--sl-accent); font-weight: 300; letter-spacing: -.02em; font-size: clamp(24px,2.6vw,34px); display: block; margin-bottom: 8px; line-height: 1; }
.sl-r--light .sl-rhead .sl-reason-num { color: var(--sl-accent) !important; }
.sl-rhead h3 { font-size: clamp(26px,3vw,42px); font-weight: 500; color: #fff; letter-spacing: -.028em; line-height: 1.08; margin: 0 0 16px; }
.sl-r--light .sl-rhead h3 { color: var(--sl-dark-ink); }
.sl-rhead p { font-size: 16.5px; line-height: 1.6; color: var(--sl-ink-dim); margin: 0; max-width: 50ch; }
.sl-r--light .sl-rhead p { color: var(--sl-dark-ink-dim); }
.sl-rhead p strong { color: #fff; font-weight: 600; }
.sl-r--light .sl-rhead p strong { color: var(--sl-dark-ink); }

/* ---- layout A — header on top, 2-col body (viz left + points right) ---- */
.sl-r-body { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(36px,5vw,64px); align-items: center; margin-top: 40px; }
@media (max-width: 920px) { .sl-r-body { grid-template-columns: 1fr; gap: 32px; } }

/* ---- viz panel (glass card with glow) ---- */
.sl-r-viz { position: relative; border-radius: var(--sl-r-xl); overflow: hidden; min-height: 360px; padding: 32px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid var(--sl-dark-line-2); box-shadow: 0 30px 60px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05); }
.sl-r--light .sl-r-viz { background: #fff; border-color: var(--sl-beige-line); box-shadow: 0 30px 60px -40px rgba(11,13,16,.3); }
.sl-r-viz::before { content: ""; position: absolute; width: 64%; aspect-ratio: 1; top: -18%; left: 50%; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(0,180,247,.16), transparent 62%); }

/* ---- feature points list ---- */
.sl-r-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.sl-r-points li { display: flex; gap: 13px; align-items: flex-start; }
.sl-r-points .i { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(0,180,247,.1); border: 1px solid rgba(0,180,247,.22); color: var(--sl-accent); }
.sl-r-points .i svg { width: 16px; height: 16px; }
.sl-r-points b { display: block; font-size: 14.5px; font-weight: 500; color: #fff; margin-bottom: 3px; letter-spacing: -.01em; }
.sl-r--light .sl-r-points b { color: var(--sl-dark-ink); }
.sl-r-points span span { font-size: 13.5px; color: var(--sl-ink-dim); line-height: 1.5; }
.sl-r--light .sl-r-points span span { color: var(--sl-dark-ink-dim); }

/* ---- layout B — text left, big screenshot bleeding right ---- */
.sl-r-shot { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap: clamp(36px,5vw,64px); align-items: center; }
@media (max-width: 920px) { .sl-r-shot { grid-template-columns: 1fr; gap: 30px; } }
.sl-r-shot__media img { display: block; width: 124%; max-width: none; height: auto; border-radius: 16px; box-shadow: 0 44px 90px -42px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.05); }
.sl-r--light .sl-r-shot__media img { box-shadow: 0 44px 90px -44px rgba(11,13,16,.4), 0 0 0 1px rgba(11,13,16,.06); }
@media (max-width: 920px) { .sl-r-shot__media img { width: 100%; } }

/* ---- mini checkmark list (inside screenshot reasons) ---- */
.sl-r-mini { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.sl-r-mini li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--sl-ink); }
.sl-r--light .sl-r-mini li { color: var(--sl-dark-ink); }
.sl-r-mini svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--sl-accent); }
.sl-r--light .sl-r-mini svg { color: var(--sl-grad-blue-1); }

/* ---- Atlas icon — solid-blue circle (never the gradient) ---- */
.sl-r-atlasic { background: var(--sl-accent); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 10px 26px -8px rgba(0,180,247,.55); }
.sl-r-atlasic img { filter: brightness(0) invert(1); display: block; width: 56%; height: 56%; object-fit: contain; }

/* ============================================================================
   BENTO USE-CASE GRID — 4-col dark card grid with mini mockup visualisations.
   Used in uc-performance-management (reason 08) and uc-skill-management (reason 08).
   (extracted 2026-06-19)
   ============================================================================ */
.sl-bento { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: minmax(214px,auto); gap: 14px; margin-top: 40px; }
@media (max-width: 1080px) { .sl-bento { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 780px)  { .sl-bento { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px)  { .sl-bento { grid-template-columns: 1fr; } }
.sl-bento__card { position: relative; overflow: hidden; border-radius: var(--sl-r-lg); background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); padding: 22px 22px 20px; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .3s var(--sl-ease-out), border-color .25s, background .25s, box-shadow .35s; min-height: 214px; }
.sl-bento__card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.035); box-shadow: 0 18px 40px -22px rgba(0,0,0,.6); }
.sl-bento__card--big { grid-column: span 2; min-height: 252px; }
@media (max-width: 520px) { .sl-bento__card--big { grid-column: span 1; } }
.sl-bento__ey { font-family: var(--sl-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.38); font-weight: 500; margin: 0 0 10px; display: inline-block; }
.sl-bento__t { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: #fff; margin: 0 0 8px; }
.sl-bento__card--big .sl-bento__t { font-size: 19px; }
.sl-bento__d { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.52); margin: 0 0 14px; }
.sl-bento__viz { position: relative; flex: 1; margin: 4px 0 14px; min-height: 90px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.055); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.sl-bento__bot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.sl-bento__v { font-family: var(--sl-mono); font-size: 10.5px; letter-spacing: .04em; color: rgba(255,255,255,.32); font-weight: 500; }
.sl-bento__more { display: none; align-items: center; gap: 4px; font-size: 12px; color: rgba(255,255,255,.55); font-weight: 500; transition: color .2s; white-space: nowrap; }
.sl-bento__more::after { content: "→"; transition: transform .2s; }
.sl-bento__card:hover .sl-bento__more { color: var(--sl-accent); }
.sl-bento__card:hover .sl-bento__more::after { transform: translateX(2px); }
/* footer link pill */
.sl-bento__footer { text-align: center; margin-top: 40px; }
.sl-bento__link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: var(--sl-r-pill); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.16); font-size: 14px; font-weight: 500; color: #fff; text-decoration: none; transition: .2s; }
.sl-bento__link:hover { background: rgba(255,255,255,.08); border-color: rgba(0,180,247,.45); }
.sl-bento__arr { width: 18px; height: 18px; border-radius: 50%; background: var(--sl-accent); color: #fff; display: grid; place-items: center; font-size: 11px; }

/* ============================================================================
   BENTO MOCKUP SUB-COMPONENTS — mini animated UI cards inside .sl-bento__viz
   Used in uc-performance-management and uc-skill-management bento grids.
   (extracted 2026-06-19)
   ============================================================================ */

/* ---- document / review mockup ---- */
.sl-mk-doc__head { display: flex; align-items: center; gap: 8px; font-family: var(--sl-mono); font-size: 10.5px; color: rgba(255,255,255,.45); letter-spacing: .04em; margin-bottom: 8px; }
.sl-mk-doc__head::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: rgba(0,180,247,.5); flex-shrink: 0; }
.sl-mk-doc__person { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sl-mk-doc__av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg,#3a4658,#2a3445); }
.sl-mk-doc__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-mk-doc__name { font-size: 12px; color: rgba(255,255,255,.85); font-weight: 500; }
.sl-mk-doc__meta { font-family: var(--sl-mono); font-size: 10px; color: rgba(255,255,255,.35); margin-left: auto; }
.sl-mk-doc__lines { display: flex; flex-direction: column; gap: 4px; }
.sl-mk-doc__line { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); animation: slMkDocLine 6s var(--sl-ease-out) infinite; }
.sl-mk-doc__line[data-i="1"] { width: 100%; animation-delay: 0s; }
.sl-mk-doc__line[data-i="2"] { width: 84%; animation-delay: .4s; }
.sl-mk-doc__line[data-i="3"] { width: 62%; animation-delay: .8s; }
@keyframes slMkDocLine { 0%,100% { opacity: .4; } 20%,80% { opacity: 1; background: rgba(255,255,255,.14); } }
.sl-mk-doc__status { display: flex; align-items: center; gap: 6px; font-family: var(--sl-mono); font-size: 10px; color: rgba(52,229,195,.65); margin-top: 8px; letter-spacing: .04em; }
.sl-mk-doc__status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sl-accent-2); box-shadow: 0 0 6px rgba(52,229,195,.5); }
@media (prefers-reduced-motion: reduce) { .sl-mk-doc__line { animation: none !important; opacity: 1 !important; } }

/* ---- task-list mockup ---- */
.sl-mk-tasks { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.sl-mk-tasks__row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,.025); font-size: 11px; color: rgba(255,255,255,.65); }
.sl-mk-tasks__check { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(255,255,255,.25); flex-shrink: 0; display: grid; place-items: center; font-size: 8px; color: transparent; }
.sl-mk-tasks__row[data-done] .sl-mk-tasks__check { background: rgba(52,229,195,.45); border-color: rgba(52,229,195,.55); color: #0e131f; }
.sl-mk-tasks__row[data-done] { color: rgba(255,255,255,.35); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.2); }
.sl-mk-tasks__av { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: linear-gradient(135deg,#3a4658,#2a3445); }
.sl-mk-tasks__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-mk-tasks__row[data-done] .sl-mk-tasks__av { opacity: .55; }
.sl-mk-tasks__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-mk-tasks__meta { margin-left: auto; font-family: var(--sl-mono); font-size: 10px; color: rgba(255,255,255,.3); letter-spacing: .04em; }

/* ---- briefing panel mockup ---- */
.sl-mk-brief__head { display: flex; align-items: center; gap: 6px; font-family: var(--sl-mono); font-size: 10px; color: rgba(255,255,255,.42); letter-spacing: .06em; margin-bottom: 8px; }
.sl-mk-brief__head::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(0,180,247,.6); }
.sl-mk-brief__mgr { display: flex; align-items: center; gap: 9px; padding: 0 0 9px; margin-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.06); }
.sl-mk-brief__av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: linear-gradient(135deg,#3a4658,#2a3445); }
.sl-mk-brief__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-mk-brief__n { font-size: 12.5px; color: rgba(255,255,255,.85); font-weight: 600; }
.sl-mk-brief__r { font-family: var(--sl-mono); font-size: 9.5px; color: rgba(255,255,255,.4); letter-spacing: .03em; margin-top: 1px; }
.sl-mk-brief__row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 11.5px; color: rgba(255,255,255,.68); border-bottom: 1px solid rgba(255,255,255,.04); }
.sl-mk-brief__row:last-child { border-bottom: 0; }
.sl-mk-brief__i { width: 14px; height: 14px; border-radius: 3px; display: grid; place-items: center; font-size: 9px; font-weight: 700; flex-shrink: 0; }
.sl-mk-brief__i--warn { background: rgba(234,165,60,.15); color: rgba(234,165,60,.9); }
.sl-mk-brief__i--info { background: rgba(0,180,247,.15); color: rgba(207,234,255,.9); }
.sl-mk-brief__i--alert { background: rgba(229,81,70,.15); color: rgba(245,163,157,.9); }
.sl-mk-brief__i--ok { background: rgba(52,229,195,.15); color: rgba(52,229,195,.9); }
.sl-mk-brief__l { flex: 1; }
.sl-mk-brief__c { font-family: var(--sl-mono); font-size: 10.5px; color: rgba(255,255,255,.4); }

/* ---- calibration / rating-bar mockup ---- */
.sl-mk-cal__row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 10.5px; }
.sl-mk-cal__row:last-child { margin-bottom: 0; }
.sl-mk-cal__lbl { color: rgba(255,255,255,.6); width: 46px; flex-shrink: 0; }
.sl-mk-cal__track { flex: 1; height: 5px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
.sl-mk-cal__fill { height: 100%; border-radius: 3px; background: var(--sl-brand-gradient); }
.sl-mk-cal__flag { font-family: var(--sl-mono); font-size: 9px; color: rgba(234,165,60,.9); }

/* ---- risk/bars mockup (attrition + skill proficiency) ---- */
.sl-mk-risk__row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 10.5px; }
.sl-mk-risk__row:last-child { margin-bottom: 0; }
.sl-mk-risk__av { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: linear-gradient(135deg,#3a4658,#2a3445); }
.sl-mk-risk__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-mk-risk__name { color: rgba(255,255,255,.72); width: 60px; flex-shrink: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-mk-risk__track { flex: 1; height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; }
.sl-mk-risk__fill { height: 100%; border-radius: 2px; }
.sl-mk-risk__fill--high { width: 82%; background: linear-gradient(90deg, rgba(229,81,70,.4), rgba(229,81,70,.75)); }
.sl-mk-risk__fill--med  { width: 54%; background: linear-gradient(90deg, rgba(234,165,60,.35), rgba(234,165,60,.65)); }
.sl-mk-risk__fill--low  { width: 24%; background: linear-gradient(90deg, rgba(110,206,83,.3), rgba(110,206,83,.55)); }
.sl-mk-risk__pct { font-family: var(--sl-mono); font-size: 9.5px; color: rgba(255,255,255,.4); width: 22px; text-align: right; }

/* ============================================================================
   CONSTELLATION + SECURITY STATS — Atlas-core + connected tool logos animation,
   plus compliance/security stat cards. Used in uc-performance-management (09),
   uc-skill-management (09), uc-onboarding-automation (09).
   (extracted 2026-06-19)
   ============================================================================ */
.sl-cons { position: relative; width: 100%; max-width: 400px; aspect-ratio: 1; margin: 0 auto; }
.sl-cons svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sl-cons__line { stroke: rgba(0,180,247,.45); stroke-width: 1.4; stroke-dasharray: 2 7; stroke-linecap: round; }
.is-visible .sl-cons__line { animation: slConsFlow 1.9s linear infinite; }
.is-visible .sl-cons__line:nth-child(2){animation-delay:.3s}
.is-visible .sl-cons__line:nth-child(3){animation-delay:.6s}
.is-visible .sl-cons__line:nth-child(4){animation-delay:.9s}
.is-visible .sl-cons__line:nth-child(5){animation-delay:1.2s}
.is-visible .sl-cons__line:nth-child(6){animation-delay:1.5s}
@keyframes slConsFlow { to { stroke-dashoffset: -36; } }
.sl-cons__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 74px; height: 74px; border-radius: 50%; background: var(--sl-accent); display: grid; place-items: center; z-index: 3; box-shadow: 0 0 44px rgba(0,180,247,.5); }
.sl-cons__core img { width: 38px; height: 38px; filter: brightness(0) invert(1); }
.sl-cons__node { position: absolute; transform: translate(-50%,-50%); width: 48px; height: 48px; border-radius: 13px; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 22px -10px rgba(0,0,0,.55); z-index: 2; opacity: 0; }
.is-visible .sl-cons__node { animation: slConsNodeIn .5s var(--sl-ease-out) forwards; }
.is-visible .sl-cons__node:nth-of-type(2){animation-delay:.1s}
.is-visible .sl-cons__node:nth-of-type(3){animation-delay:.2s}
.is-visible .sl-cons__node:nth-of-type(4){animation-delay:.3s}
.is-visible .sl-cons__node:nth-of-type(5){animation-delay:.4s}
.is-visible .sl-cons__node:nth-of-type(6){animation-delay:.5s}
@keyframes slConsNodeIn { from { opacity: 0; transform: translate(-50%,-50%) scale(.8); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.sl-cons__node img { width: 26px; height: 26px; object-fit: contain; }

/* ---- security stat cards (2x2 grid) ---- */
.sl-sec-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 460px) { .sl-sec-stats { grid-template-columns: 1fr; } }
.sl-sec-stat { display: flex; align-items: center; gap: 15px; padding: 22px 24px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid var(--sl-dark-line-2); border-radius: 16px; }
.sl-sec-ico { width: 42px; height: 42px; border-radius: 11px; background: rgba(0,180,247,.12); color: var(--sl-accent); display: grid; place-items: center; flex-shrink: 0; }
.sl-sec-ico svg { width: 21px; height: 21px; }
.sl-sec-txt { font-size: 16px; color: #fff; font-weight: 600; letter-spacing: -.01em; }
.sl-sec-txt small { display: block; color: var(--sl-ink-dim); font-weight: 400; font-size: 13px; margin-top: 4px; letter-spacing: 0; line-height: 1.4; }

/* ---- trust logo row ---- */
.sl-sec-trust { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--sl-dark-line); }
.sl-sec-trust__lbl { text-align: center; font-family: var(--sl-mono); font-size: 11px; letter-spacing: .1em; color: var(--sl-ink-faint); text-transform: uppercase; margin-bottom: 22px; }
.sl-sec-trust__row { display: flex; gap: clamp(28px,5vw,60px); justify-content: center; align-items: center; flex-wrap: wrap; opacity: .7; }
.sl-sec-trust__row img { height: 28px; width: auto; object-fit: contain; filter: brightness(0) invert(1); }
@media (max-width: 760px) { .sl-sec-trust__row img { height: 22px; } }

/* ============================================================================
   BALANCE SEESAW — animated price-vs-value scale. Used in uc-performance-management
   (reason 10) and uc-skill-management (reason 10).
   (extracted 2026-06-19)
   ============================================================================ */
.sl-bal { position: relative; width: 100%; max-width: 800px; height: 380px; margin: 6px auto 0; }
.sl-bal__shadow { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); width: 160px; height: 13px; border-radius: 50%; background: rgba(11,13,16,.08); filter: blur(2px); }
.sl-bal__tip { position: absolute; left: 50%; bottom: 48px; width: 740px; height: 112px; margin-left: -370px; transform-origin: 50% 100%; transform: rotate(0deg); will-change: transform; }
@media (max-width: 800px) { .sl-bal__tip { width: 96%; margin-left: 0; left: 2%; } }
.is-visible .sl-bal__tip { animation: slBalTip 1.5s cubic-bezier(.2,.85,.25,1) 1.45s forwards; }
@keyframes slBalTip { 0% { transform: rotate(0deg); } 100% { transform: rotate(12deg); } }
.sl-bal__tri { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.sl-bal__on--l { position: absolute; bottom: 100%; left: 190px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; padding-bottom: 4px; }
@media (max-width: 800px) { .sl-bal__on--l { left: 25%; } }
.sl-bal__eyebrow { font-family: var(--sl-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--sl-dark-ink-faint); white-space: nowrap; margin-bottom: 6px; }
.sl-bal__amt { font-size: clamp(56px,8vw,86px); font-weight: 600; letter-spacing: -.04em; color: var(--sl-dark-ink); line-height: .86; white-space: nowrap; }
.sl-bal__amt span { font-size: .24em; color: var(--sl-dark-ink-dim); font-weight: 400; letter-spacing: 0; }
.sl-bal__blocks { position: absolute; bottom: 100%; left: 556px; transform: translateX(-50%); width: 222px; height: 176px; padding-bottom: 4px; }
@media (max-width: 800px) { .sl-bal__blocks { left: 75%; } }
.sl-bal__blk { position: absolute; width: 111px; height: 80px; border-radius: 13px; background: #fff; border: 1px solid var(--sl-beige-line); box-shadow: 0 6px 0 #ddd3bf; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; opacity: 0; will-change: transform, opacity; }
.sl-bal__blk--a { left: 0; bottom: 0; }
.sl-bal__blk--b { left: 111px; bottom: 0; }
.sl-bal__blk--c { left: 55px; bottom: 86px; }
.sl-bal__blk svg { width: 19px; height: 19px; color: var(--sl-accent); }
.sl-bal__blk b { font-size: 11.5px; font-weight: 600; color: var(--sl-dark-ink); line-height: 1.1; }
.sl-bal__blk small { font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: var(--sl-dark-ink-faint); }
.is-visible .sl-bal__blk { animation: slBalDrop .75s cubic-bezier(.2,.8,.3,1) forwards; }
.is-visible .sl-bal__blk--a { animation-delay: .25s; }
.is-visible .sl-bal__blk--b { animation-delay: .55s; }
.is-visible .sl-bal__blk--c { animation-delay: .85s; }
@keyframes slBalDrop { 0% { opacity: 0; transform: translateY(-88px) rotate(-5deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .sl-bal__tip { animation: none !important; transform: rotate(12deg); } .sl-bal__blk { animation: none !important; opacity: 1; transform: none; } }
/* val footer (pricing line + CTA) */
.sl-val__foot { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.sl-val__price { font-size: 14.5px; color: var(--sl-dark-ink-dim); }
.sl-val__price b { color: var(--sl-dark-ink); font-weight: 600; }
.sl-val__link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--sl-grad-blue-1); text-decoration: none; }
.sl-val__link:hover { gap: 11px; }

/* ============================================================================
   COMPARISON TABLE — feature comparison table. Used in uc-performance-management
   and uc-skill-management. (extracted 2026-06-19)
   ============================================================================ */
.sl-cmp { padding: clamp(88px,11vh,124px) 0; position: relative; overflow: hidden; border-top: 1px solid var(--sl-dark-line); }
.sl-cmp::before { content: ""; position: absolute; top: 0; left: 50%; width: 60%; aspect-ratio: 2; transform: translateX(-50%); background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(0,180,247,.10), transparent 65%); pointer-events: none; }
.sl-cmp .sl-shell { position: relative; z-index: 1; }
.sl-cmp .sl-section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.sl-cmp .sl-eyebrow { display: block; margin-bottom: 16px; }
.sl-cmp .sl-section-head p { color: var(--sl-ink-dim); font-size: 17px; line-height: 1.55; margin-top: 14px; }
.sl-cmp-scroll { overflow-x: auto; scrollbar-width: thin; border-radius: var(--sl-r-xl); }
.sl-cmp-scroll::-webkit-scrollbar { height: 8px; }
.sl-cmp-scroll::-webkit-scrollbar-thumb { background: var(--sl-dark-line-3); border-radius: 999px; }
.sl-cmp-table { width: 100%; min-width: 700px; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)); border: 1px solid var(--sl-dark-line-2); border-radius: var(--sl-r-xl); overflow: hidden; }
.sl-cmp-table th, .sl-cmp-table td { text-align: center; vertical-align: middle; }
.sl-cmp-table thead th { padding: 24px 16px 22px; border-bottom: 1px solid var(--sl-dark-line-2); }
.sl-cmp-table thead th:first-child { text-align: left; }
.sl-cmp__th-cap { display: flex; flex-direction: column; align-items: center; gap: 0; }
.sl-cmp__th-mark { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; }
.sl-cmp__th-mark img { max-width: 26px; max-height: 26px; object-fit: contain; }
.sl-cmp__th-mark--brand { background: var(--sl-accent); box-shadow: 0 8px 20px -8px rgba(0,180,247,.6); }
.sl-cmp__th-mark--brand img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.sl-cmp__th-mark--logo { background: #fff; width: 44px; height: 44px; }
.sl-cmp__th-mark--logo img { max-width: 28px; max-height: 28px; }
.sl-cmp__th-name { font-size: 14px; font-weight: 600; color: #fff; letter-spacing: -.01em; margin-top: 10px; }
.sl-cmp__col-brand { position: relative; background: linear-gradient(180deg, rgba(0,180,247,.10), rgba(0,180,247,.03)); }
.sl-cmp-table thead .sl-cmp__col-brand { box-shadow: inset 0 2px 0 var(--sl-accent); }
.sl-cmp-table thead th:first-child { width: 30%; }
.sl-cmp-table thead th:not(:first-child) { width: 17.5%; }
.sl-cmp-table tbody th { text-align: left; padding: 18px 20px; font-size: 14px; font-weight: 500; color: var(--sl-ink); line-height: 1.4; border-bottom: 1px solid var(--sl-dark-line); max-width: none; }
.sl-cmp-table tbody td { padding: 18px 14px; font-size: 12.5px; border-bottom: 1px solid var(--sl-dark-line); text-align: center; }
.sl-cmp-table tbody tr:last-child th, .sl-cmp-table tbody tr:last-child td { border-bottom: 0; }
.sl-cmp-table tbody tr:hover th, .sl-cmp-table tbody tr:hover td { background: rgba(255,255,255,.02); }
.sl-cmp__cell-yes { display: inline-grid; place-items: center; color: var(--sl-accent-2); }
.sl-cmp__cell-yes svg { width: 21px; height: 21px; }
.sl-cmp__cell-no { color: var(--sl-ink-faint); font-size: 18px; line-height: 1; }
.sl-cmp__cell-tx { font-family: var(--sl-mono); font-size: 10px; letter-spacing: .03em; color: var(--sl-ink-dim); text-transform: uppercase; }
.sl-cmp__cell-tx--dim { color: var(--sl-ink-faint); }
.sl-cmp-note { text-align: center; margin-top: 20px; font-family: var(--sl-mono); font-size: 11px; color: var(--sl-ink-faint); }

/* ============================================================================
   TOOL ORBIT — dual-ring spinning tool logos around an Atlas core. Used in
   uc-performance-management (reason 04) and uc-onboarding-automation (reason 06).
   (extracted 2026-06-19)
   ============================================================================ */
.sl-r-viz:has(.sl-orbit) { min-height: 500px; }
.sl-orbit { position: relative; width: 480px; height: 480px; max-width: 100%; }
.sl-orbit__r { position: absolute; border-radius: 50%; border: 1px dashed var(--sl-dark-line-3); }
.sl-orbit__r--out { inset: 0; opacity: .6; }
.sl-orbit__r--in { inset: 17%; }
.sl-orbit__spin { position: absolute; }
.sl-orbit__spin--out { inset: 0; animation: slOrbitCCW 58s linear infinite; }
.sl-orbit__spin--in  { inset: 17%; animation: slOrbitCW 36s linear infinite; }
@keyframes slOrbitCW  { to { transform: rotate(360deg); } }
@keyframes slOrbitCCW { to { transform: rotate(-360deg); } }
.sl-orbit__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 92px; height: 92px; border-radius: 50%; z-index: 5; }
.sl-orbit__core img { width: 48px; height: 48px; }
.sl-orbit-tool { position: absolute; border-radius: 15px; display: grid; place-items: center; background: #fff; box-shadow: 0 10px 22px -10px rgba(0,0,0,.55); }
.sl-orbit-tool img { object-fit: contain; display: block; }
.sl-orbit__spin--in .sl-orbit-tool { width: 58px; height: 58px; margin: -29px; animation: slOrbitCCW 36s linear infinite; }
.sl-orbit__spin--in .sl-orbit-tool img { width: 32px; height: 32px; }
.sl-orbit__spin--in .sl-orbit-tool:nth-child(1){top:0;left:50%}
.sl-orbit__spin--in .sl-orbit-tool:nth-child(2){top:50%;left:100%}
.sl-orbit__spin--in .sl-orbit-tool:nth-child(3){top:100%;left:50%}
.sl-orbit__spin--in .sl-orbit-tool:nth-child(4){top:50%;left:0}
.sl-orbit__spin--out .sl-orbit-tool { width: 52px; height: 52px; margin: -26px; opacity: .78; animation: slOrbitCW 58s linear infinite; }
.sl-orbit__spin--out .sl-orbit-tool img { width: 28px; height: 28px; }
.sl-orbit__spin--out .sl-orbit-tool:nth-child(1){top:0;left:50%}
.sl-orbit__spin--out .sl-orbit-tool:nth-child(2){top:15%;left:85%}
.sl-orbit__spin--out .sl-orbit-tool:nth-child(3){top:50%;left:100%}
.sl-orbit__spin--out .sl-orbit-tool:nth-child(4){top:85%;left:85%}
.sl-orbit__spin--out .sl-orbit-tool:nth-child(5){top:100%;left:50%}
.sl-orbit__spin--out .sl-orbit-tool:nth-child(6){top:85%;left:15%}
.sl-orbit__spin--out .sl-orbit-tool:nth-child(7){top:50%;left:0}
.sl-orbit__spin--out .sl-orbit-tool:nth-child(8){top:15%;left:15%}
.sl-orbit__pill { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 6; padding: 7px 13px; border-radius: var(--sl-r-pill); font-size: 11.5px; color: #fff; background: rgba(14,19,31,.94); border: 1px solid rgba(0,180,247,.3); box-shadow: 0 8px 20px -10px rgba(0,0,0,.6); }
.sl-orbit__pill::before { content: "✓ "; color: var(--sl-accent-2); }
@media (prefers-reduced-motion: reduce) {
  .sl-orbit__spin--out, .sl-orbit__spin--in,
  .sl-orbit__spin--in .sl-orbit-tool, .sl-orbit__spin--out .sl-orbit-tool { animation: none !important; }
}

/* ============================================================================
   ONBOARDING AUTOMATION — uc-onboarding-automation section-specific styles.
   All rules scoped under .sl-module--onb or .sl-onb-* prefix.
   Moved from section <style> block to keep CMS embed under 50 k chars.
   ============================================================================ */
.sl-module--onb { background: var(--sl-dark); color: var(--sl-ink); }
.sl-module--onb .sl-hl { white-space: nowrap; }

/* ---- reasons intro head ---- */
.sl-module--onb .sl-onb__rhead .sl-eyebrow { display: block; margin-bottom: 16px; }

@media (max-width: 920px) { .sl-onb-shot--flip { grid-template-columns: 1fr; } .sl-onb-shot--flip .sl-r-shot__media { order: 2; } .sl-onb-shot--flip .sl-r-shot__media img { margin-left: 0; } }

/* ===== 01 — PIPELINE FLOW (dark canvas) ===== */
.sl-onb-canvas { position: relative; width: 100%; margin-top: 40px; border-radius: var(--sl-r-xl); padding: 40px 32px; background: linear-gradient(180deg, #131a28, #0e131f); border: 1px solid var(--sl-dark-line-2); box-shadow: 0 40px 80px -44px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04); overflow-x: auto; scrollbar-width: none; }
.sl-onb-canvas::-webkit-scrollbar { display: none; }
.sl-onb-canvas::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6; border-radius: inherit; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask: radial-gradient(ellipse 78% 86% at 50% 50%, #000, transparent 84%); mask: radial-gradient(ellipse 78% 86% at 50% 50%, #000, transparent 84%); }
.sl-onb-canvas__label { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; font-family: var(--sl-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sl-ink-faint); margin-bottom: 30px; }
.sl-onb-canvas__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sl-accent); box-shadow: 0 0 6px var(--sl-accent); }
.sl-onb-flow { position: relative; z-index: 1; display: flex; align-items: center; gap: 0; min-width: 1080px; }
.sl-onb-node { display: flex; align-items: center; gap: 10px; padding: 10px 15px 10px 10px; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 8px 18px -14px rgba(0,0,0,.6); flex-shrink: 0; animation: slOnbNode 8s linear infinite; animation-delay: var(--d,0s); }
.sl-onb-node__ico { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; font-size: 16px; background: #f6f8fa; color: #0b0e15; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); overflow: hidden; }
.sl-onb-node__ico img { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; display: block; }
.sl-onb-node__ico--ok { background: linear-gradient(135deg, rgba(110,206,83,.4), rgba(52,229,195,.14)); color: var(--sl-accent-2); }
.sl-onb-node__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-onb-node__t { font-size: 13.5px; font-weight: 500; color: #fff; line-height: 1.2; white-space: nowrap; }
.sl-onb-node__s { font-family: var(--sl-mono); font-size: 9px; letter-spacing: .05em; color: var(--sl-ink-faint); text-transform: uppercase; }
.sl-onb-node--trigger { background: linear-gradient(180deg, rgba(0,180,247,.16), rgba(0,180,247,.04)); border-color: rgba(0,180,247,.32); }
.sl-onb-node--trigger .sl-onb-node__s { color: rgba(123,213,255,.85); }
.sl-onb-node--out { background: linear-gradient(180deg, rgba(110,206,83,.16), rgba(110,206,83,.03)); border-color: rgba(110,206,83,.32); }
@keyframes slOnbNode { 0%,100% { box-shadow: 0 8px 18px -14px rgba(0,0,0,.6); border-color: rgba(255,255,255,.1); } 7%,13% { box-shadow: 0 0 0 1px rgba(0,180,247,.45), 0 14px 30px -14px rgba(0,180,247,.55); border-color: rgba(0,180,247,.4); } }
.sl-onb-conn { position: relative; flex-shrink: 0; width: 38px; height: 2px; background: rgba(255,255,255,.16); align-self: center; }
.sl-onb-conn::after { content: ""; position: absolute; right: -1px; top: 50%; width: 6px; height: 6px; border-top: 2px solid rgba(255,255,255,.3); border-right: 2px solid rgba(255,255,255,.3); transform: translateY(-50%) rotate(45deg); }
.sl-onb-conn__dot { position: absolute; top: 50%; left: 0; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--sl-accent); box-shadow: 0 0 8px var(--sl-accent); opacity: 0; animation: slOnbDot 8s linear infinite; animation-delay: var(--d,0s); }
.sl-onb-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
@media (max-width: 760px) { .sl-onb-notes { grid-template-columns: 1fr; } }
.sl-onb-note { display: flex; align-items: flex-start; gap: 11px; padding: 18px 20px; border-radius: var(--sl-r-lg); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid var(--sl-dark-line-2); font-size: 14px; color: var(--sl-ink-dim); line-height: 1.5; }
.sl-onb-note strong { color: #fff; font-weight: 600; }
.sl-onb-note svg { width: 18px; height: 18px; color: var(--sl-accent); flex-shrink: 0; margin-top: 1px; }

/* ===== 02 — PREBOARDING COUNTDOWN ===== */
.sl-onb-pre { position: relative; width: 100%; max-width: 420px; padding-left: 26px; }
.sl-onb-pre::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, rgba(0,180,247,.5), rgba(110,206,83,.5)); border-radius: 2px; }
.sl-onb-pre__stop { position: relative; padding: 0 0 22px; }
.sl-onb-pre__stop:last-child { padding-bottom: 0; }
.sl-onb-pre__dot { position: absolute; left: -26px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--sl-dark-3); border: 2px solid var(--sl-accent); display: grid; place-items: center; }
.sl-onb-pre__dot--done { background: var(--sl-accent-2); border-color: var(--sl-accent-2); color: #0e131f; font-size: 9px; font-weight: 700; }
.sl-onb-pre__when { font-family: var(--sl-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: rgba(123,213,255,.9); margin-bottom: 4px; }
.sl-onb-pre__lbl { font-size: 13.5px; color: var(--sl-ink); line-height: 1.4; }
.sl-onb-pre__lbl b { color: #fff; font-weight: 600; }
.sl-onb-msg { margin-top: 11px; width: 100%; padding: 12px 13px; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(0,180,247,.3); box-shadow: 0 14px 30px -18px rgba(0,180,247,.4); animation: slOnbMsgIn 5.5s var(--sl-ease-out) infinite; }
@keyframes slOnbMsgIn { 0%,12% { opacity: 0; transform: translateY(10px); } 26%,90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
.sl-onb-msg__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sl-onb-msg__av { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; }
.sl-onb-msg__av img { width: 11px; height: 11px; }
.sl-onb-msg__name { font-size: 11.5px; font-weight: 700; color: #fff; }
.sl-onb-msg__app { font-family: var(--sl-mono); font-size: 8px; color: var(--sl-ink-faint); padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,.06); margin-left: auto; }
.sl-onb-msg__tx { font-size: 11.5px; color: var(--sl-ink-dim); line-height: 1.45; margin-bottom: 9px; }
.sl-onb-msg__tx b { color: #fff; font-weight: 600; }
.sl-onb-msg__btns { display: flex; gap: 6px; flex-wrap: wrap; }
.sl-onb-msg__btn { font-size: 10px; padding: 4px 10px; border-radius: var(--sl-r-pill); background: rgba(0,180,247,.14); border: 1px solid rgba(0,180,247,.3); color: rgba(123,213,255,.95); white-space: nowrap; }

/* ===== 04 — HIRE-TYPE TABS ===== */
.sl-onb-ex { margin-top: 40px; }
.sl-onb-tabs { display: flex; justify-content: center; gap: 8px; margin: 0 0 30px; flex-wrap: wrap; }
.sl-onb-tab { padding: 9px 18px; border-radius: var(--sl-r-pill); border: 1px solid var(--sl-dark-line-2); background: rgba(255,255,255,.03); color: var(--sl-ink-dim); font-size: 13px; font-weight: 500; cursor: pointer; transition: .2s; }
.sl-onb-tab:hover { border-color: var(--sl-dark-line-3); color: #fff; }
.sl-onb-tab.is-active { background: #fff; color: var(--sl-dark); border-color: #fff; }
.sl-onb-panel { display: none; }
.sl-onb-panel.is-active { display: block; animation: slOnbFade .45s var(--sl-ease-out); }
@keyframes slOnbFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sl-onb-hire { display: flex; align-items: center; gap: 13px; max-width: 1000px; margin: 0 auto 16px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); border: 1px solid var(--sl-dark-line-2); border-radius: var(--sl-r-lg); padding: 16px 20px; }
.sl-onb-hire-av { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #2a3445; }
.sl-onb-hire-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-onb-hire-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-onb-hire-name { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.sl-onb-hire-role { font-size: 13px; color: var(--sl-ink-dim); }
.sl-onb-hire-trigger { margin-left: auto; font-family: var(--sl-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--sl-r-pill); background: rgba(0,180,247,.1); border: 1px solid rgba(0,180,247,.28); color: rgba(123,213,255,.95); white-space: nowrap; }
@media (max-width: 560px) { .sl-onb-hire-trigger { display: none; } }
.sl-onb-tl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1000px; margin: 0 auto; align-items: stretch; }
@media (max-width: 820px) { .sl-onb-tl { grid-template-columns: 1fr; } }
.sl-onb-tl-col { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); border: 1px solid var(--sl-dark-line-2); border-radius: var(--sl-r-xl); padding: 20px 20px 18px; }
.sl-onb-tl-col--out { border-color: rgba(110,206,83,.28); }
.sl-onb-tl-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--sl-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sl-ink-faint); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--sl-dark-line); }
.sl-onb-tl-when { color: var(--sl-accent-2); font-weight: 600; }
.sl-onb-tl-when--sched { color: rgba(123,213,255,.9); }
.sl-onb-task { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 13px; color: var(--sl-ink); line-height: 1.4; }
.sl-onb-task-ico { width: 19px; height: 19px; border-radius: 5px; flex-shrink: 0; margin-top: 1px; display: grid; place-items: center; font-size: 11px; overflow: hidden; }
.sl-onb-task-ico img { width: 13px; height: 13px; object-fit: contain; border-radius: 3px; }
.sl-onb-task-ico--done { background: linear-gradient(135deg, rgba(110,206,83,.95), rgba(52,229,195,.6)); color: #0e131f; }
.sl-onb-task-ico--sched { background: rgba(255,255,255,.05); border: 1px solid var(--sl-dark-line-2); color: var(--sl-ink-faint); }
.sl-onb-task-ico--tool { background: #f6f8fa; }
.sl-onb-task-tx { flex: 1; min-width: 0; }
.sl-onb-task-tx b { font-weight: 600; color: #fff; }
.sl-onb-task-via { display: block; font-family: var(--sl-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--sl-ink-faint); margin-top: 2px; }
.sl-onb-task--sched .sl-onb-task-tx b { color: var(--sl-ink-dim); font-weight: 500; }

/* ===== 08 — GET STARTED STEPS (light) ===== */
.sl-onb-start-center { text-align: center; }
.sl-onb-start-time { display: inline-flex; align-items: center; gap: 8px; margin: 18px auto 40px; padding: 7px 16px; border-radius: var(--sl-r-pill); background: rgba(110,206,83,.12); border: 1px solid rgba(110,206,83,.3); font-size: 12.5px; color: #3f7d36; font-family: var(--sl-mono); letter-spacing: .03em; }
.sl-onb-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; text-align: left; }
@media (max-width: 880px) { .sl-onb-steps { grid-template-columns: 1fr; } }
.sl-onb-step { position: relative; background: #fff; border: 1px solid var(--sl-beige-line-2); border-radius: var(--sl-r-xl); padding: 30px 28px 28px; transition: border-color .25s, box-shadow .25s var(--sl-ease-out), transform .25s var(--sl-ease-out); overflow: hidden; }
.sl-onb-step:hover { border-color: rgba(0,180,247,.35); box-shadow: 0 24px 48px -24px rgba(0,180,247,.2); transform: translateY(-2px); }
.sl-onb-step--featured { background: linear-gradient(180deg, #fff, #fbf8ef); border-color: rgba(0,180,247,.35); }
.sl-onb-step-vis { position: relative; height: 132px; margin-bottom: 24px; border-radius: var(--sl-r-lg); background: linear-gradient(180deg, var(--sl-beige-3), var(--sl-beige)); border: 1px solid var(--sl-beige-line); overflow: hidden; display: grid; place-items: center; }
.sl-onb-step-num { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sl-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--sl-accent); text-transform: uppercase; margin-bottom: 12px; }
.sl-onb-step-num::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sl-accent); box-shadow: 0 0 6px var(--sl-accent); }
.sl-onb-step h4 { font-size: 19px; font-weight: 600; color: var(--sl-dark-ink); margin: 0 0 10px; letter-spacing: -.01em; }
.sl-onb-step p { font-size: 14px; color: var(--sl-dark-ink-dim); line-height: 1.55; margin: 0; }
.sl-onb-dock { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.sl-onb-dock-hub { width: 38px; height: 38px; border-radius: 11px; background: var(--sl-brand-gradient); display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(0,180,247,.12); z-index: 2; }
.sl-onb-dock-hub svg { width: 19px; height: 19px; color: #fff; }
.sl-onb-dock-tile { position: absolute; width: 34px; height: 34px; border-radius: 9px; background: #fff; border: 1px solid var(--sl-beige-line-2); box-shadow: 0 4px 12px rgba(11,13,16,.08); display: grid; place-items: center; opacity: 0; animation: slOnbDock 5s var(--sl-ease-out) infinite; animation-delay: var(--d,0s); }
.sl-onb-dock-tile img { width: 20px; height: 20px; object-fit: contain; }
.sl-onb-dock-tile--1 { top: 16%; left: 20%; --ox: -26px; --oy: -16px; }
.sl-onb-dock-tile--2 { top: 16%; right: 20%; --ox: 26px; --oy: -16px; }
.sl-onb-dock-tile--3 { bottom: 16%; left: 26%; --ox: -22px; --oy: 16px; --d: .8s; }
.sl-onb-dock-tile--4 { bottom: 16%; right: 26%; --ox: 22px; --oy: 16px; --d: 1.2s; }
@keyframes slOnbDock { 0%,100% { opacity: 0; transform: translate(var(--ox),var(--oy)) scale(.7); } 22%,80% { opacity: 1; transform: translate(0,0) scale(1); } }
.sl-onb-wire { display: flex; align-items: center; justify-content: center; gap: 0; }
.sl-onb-wire-node { width: 30px; height: 30px; border-radius: 9px; background: #fff; border: 1px solid var(--sl-beige-line-2); box-shadow: 0 6px 16px rgba(11,13,16,.07); display: grid; place-items: center; flex-shrink: 0; animation: slOnbWireNode 4.5s var(--sl-ease-out) infinite; animation-delay: var(--d,0s); }
.sl-onb-wire-node svg { width: 15px; height: 15px; color: var(--sl-grad-blue-1); }
.sl-onb-wire-node--brand { background: var(--sl-accent); border-color: transparent; animation: none; box-shadow: 0 0 0 3px rgba(0,180,247,.16), 0 6px 16px rgba(11,13,16,.1); }
.sl-onb-wire-node--brand svg { color: #fff; }
.sl-onb-wire-node--brand img { width: 15px; height: 15px; filter: brightness(0) invert(1); display: block; }
.sl-onb-wire-node--ok { animation-name: slOnbWireOk; }
.sl-onb-wire-node--ok svg { color: var(--sl-accent-2); }
@keyframes slOnbWireNode { 0%,100% { box-shadow: 0 6px 16px rgba(11,13,16,.07); } 30%,80% { box-shadow: 0 0 0 2px rgba(0,180,247,.3), 0 6px 16px rgba(11,13,16,.07); } }
@keyframes slOnbWireOk { 0%,100% { box-shadow: 0 6px 16px rgba(11,13,16,.07); } 30%,80% { box-shadow: 0 0 0 2px rgba(110,206,83,.4), 0 6px 16px rgba(11,13,16,.07); } }
.sl-onb-wire-link { width: 26px; height: 2px; background: var(--sl-beige-2); position: relative; overflow: hidden; flex-shrink: 0; }
.sl-onb-wire-link::after { content: ""; position: absolute; inset: 0; width: 45%; background: var(--sl-accent); animation: slOnbLineFlow 2s linear infinite; animation-delay: var(--d,0s); }
@keyframes slOnbLineFlow { 0% { left: -45%; } 100% { left: 100%; } }
.sl-onb-smsg { width: 84%; max-width: 210px; padding: 10px 12px; border-radius: 11px; background: #fff; border: 1px solid var(--sl-beige-line-2); box-shadow: 0 8px 20px rgba(11,13,16,.08); animation: slOnbSmsgIn 5s var(--sl-ease-out) infinite; }
@keyframes slOnbSmsgIn { 0%,20% { opacity: 0; transform: translateY(12px); } 36%,90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
.sl-onb-smsg-head { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.sl-onb-smsg-av { width: 22px; height: 22px; border-radius: 6px; background: var(--sl-brand-gradient); display: grid; place-items: center; }
.sl-onb-smsg-av img { width: 12px; height: 12px; filter: brightness(0) invert(1); }
.sl-onb-smsg-name { font-size: 11px; font-weight: 700; color: var(--sl-dark-ink); }
.sl-onb-smsg-app { font-family: var(--sl-mono); font-size: 8px; color: var(--sl-dark-ink-faint); padding: 1px 5px; border-radius: 4px; background: var(--sl-beige-3); }
.sl-onb-smsg-tx { font-size: 11.5px; color: var(--sl-dark-ink-dim); line-height: 1.4; margin-bottom: 8px; }
.sl-onb-smsg-tx b { color: var(--sl-dark-ink); font-weight: 600; }
.sl-onb-smsg-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--sl-r-pill); background: rgba(110,206,83,.14); border: 1px solid rgba(110,206,83,.3); font-size: 9.5px; color: #3f7d36; font-family: var(--sl-mono); }

/* ===== COMPARISON TABLE eyebrow ===== */
.sl-module--onb .sl-onb__cmp .sl-eyebrow { display: block; margin-bottom: 16px; }

@media (prefers-reduced-motion: reduce) {
  .sl-onb-node, .sl-onb-conn__dot, .sl-onb-msg,
  .sl-onb-dock-tile, .sl-onb-wire-node, .sl-onb-wire-link::after, .sl-onb-smsg { animation: none !important; }
  .sl-onb-msg, .sl-onb-smsg { opacity: 1; transform: none; }
}

/* ============================================================================
   ACTIVE SOURCING (UPS) — ups-reasons section-specific styles.
   All rules scoped under .sl-module--ups, .sl-ups-*, .sl-upn-*, .sl-upr-*.
   Moved from section <style> block to keep CMS embed under 50 k chars.
   ============================================================================ */
.sl-module--ups { background: var(--sl-dark); color: var(--sl-ink); }

/* ---- reasons intro head ---- */
.sl-ups__rhead { text-align: center; max-width: 780px; margin: 0 auto; padding: clamp(82px,10vh,120px) 0 clamp(8px,2vh,20px); }
.sl-module--ups .sl-ups__rhead .sl-eyebrow { display: block; margin-bottom: 16px; }
.sl-ups__rhead h2 { font-size: clamp(30px,3.6vw,48px); font-weight: 500; color: #fff; letter-spacing: -.03em; line-height: 1.06; margin: 0; }
.sl-ups__rhead p { font-size: 17px; line-height: 1.55; color: var(--sl-ink-dim); margin: 18px auto 0; max-width: 52ch; }

/* ---- reason section ---- */
.sl-ups-r { padding: clamp(70px,9vh,116px) 0; border-top: 1px solid var(--sl-dark-line); overflow: hidden; }
.sl-ups-rhead { max-width: 620px; }
.sl-module--ups .sl-ups-rhead .sl-reason-num { color: var(--sl-accent); font-weight: 300; letter-spacing: -.02em; font-size: clamp(24px,2.6vw,34px); display: block; margin-bottom: 8px; line-height: 1; }
.sl-ups-rhead h3 { font-size: clamp(25px,2.9vw,40px); font-weight: 500; color: #fff; letter-spacing: -.028em; line-height: 1.1; margin: 0 0 16px; }
.sl-ups-rhead p { font-size: 16.5px; line-height: 1.6; color: var(--sl-ink-dim); margin: 0; max-width: 50ch; }
.sl-ups-rhead p strong { color: #fff; font-weight: 600; }

/* layout — header on top, 2-col body below */
.sl-ups-body { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(36px,5vw,64px); align-items: center; margin-top: 40px; }
.sl-ups-body.is-rev .sl-ups-viz { order: 2; }
@media (max-width: 920px) { .sl-ups-body { grid-template-columns: 1fr; gap: 30px; } .sl-ups-body.is-rev .sl-ups-viz { order: 0; } }
.sl-ups-viz { position: relative; border-radius: var(--sl-r-xl); overflow: hidden; min-height: 340px; padding: 30px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid var(--sl-dark-line-2); box-shadow: 0 30px 60px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05); }
.sl-ups-viz::before { content: ""; position: absolute; width: 64%; aspect-ratio: 1; top: -18%; left: 50%; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(0,180,247,.16), transparent 62%); }
.sl-ups-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.sl-ups-points li { display: flex; gap: 13px; align-items: flex-start; }
.sl-ups-points .i { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(0,180,247,.1); border: 1px solid rgba(0,180,247,.22); color: var(--sl-accent); }
.sl-ups-points .i svg { width: 16px; height: 16px; }
.sl-ups-points b { display: block; font-size: 14.5px; font-weight: 500; color: #fff; margin-bottom: 3px; letter-spacing: -.01em; }
.sl-ups-points span span { font-size: 13.5px; color: var(--sl-ink-dim); line-height: 1.5; }

/* Atlas icon — solid-blue circle */
.sl-ups-atlasic { background: var(--sl-accent); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 10px 26px -8px rgba(0,180,247,.55); }
.sl-ups-atlasic img { filter: brightness(0) invert(1); display: block; width: 56%; height: 56%; object-fit: contain; }

/* ============ R1 — Active-Sourcing run ============ */
.sl-upr { width: 100%; max-width: 330px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--sl-dark-line-2); box-shadow: 0 30px 60px -32px rgba(0,0,0,.75); }
.sl-upr__head { display: flex; align-items: center; gap: 9px; padding: 13px 15px; border-bottom: 1px solid var(--sl-dark-line); background: rgba(0,180,247,.06); }
.sl-upr__ava { width: 27px; height: 27px; border-radius: 7px; flex-shrink: 0; background: var(--sl-accent); display: grid; place-items: center; box-shadow: 0 3px 10px -2px rgba(0,150,225,.7); }
.sl-upr__ava img { width: 14px; height: 14px; filter: brightness(0) invert(1); display: block; }
.sl-upr__t { font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.2; }
.sl-upr__t small { display: block; font-size: 10px; font-weight: 400; color: var(--sl-ink-faint); margin-top: 1px; }
.sl-upr__badge { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--sl-mono); font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sl-accent-2); background: rgba(110,206,83,.12); border: 1px solid rgba(110,206,83,.3); padding: 4px 9px; border-radius: var(--sl-r-pill); opacity: 0; }
.sl-upr__badge svg { width: 10px; height: 10px; }
.is-visible .sl-upr__badge { animation: slUprIn .45s var(--sl-ease-spring) 2.35s forwards; }
.sl-upr__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.sl-upr-row { display: flex; align-items: center; gap: 11px; font-size: 12px; color: var(--sl-ink-dim); }
.sl-upr-row__st { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.sl-upr-row__st .ld { position: absolute; inset: 0; display: grid; place-items: center; }
.sl-upr-row__st .ld i { display: block; width: 17px; height: 17px; border-radius: 50%; border: 2px solid rgba(0,180,247,.22); border-top-color: var(--sl-accent); animation: slUprSpin .75s linear infinite; }
.sl-upr-row__st .ck { position: absolute; inset: 0; border-radius: 50%; background: rgba(110,206,83,.18); color: #6ee08a; display: grid; place-items: center; opacity: 0; transform: scale(.3); }
.sl-upr-row__st .ck svg { width: 11px; height: 11px; }
.sl-upr-row__l { flex: 1; min-width: 0; }
.sl-upr-row__l b { color: #fff; font-weight: 600; }
.sl-upr-row__m { font-family: var(--sl-mono); font-size: 9.5px; color: var(--sl-ink-faint); flex-shrink: 0; }
.sl-upr-row__m--good { color: #8fe3a2; }
.is-visible .sl-upr-row:nth-child(1) .ld { animation: slUprFade .25s ease .65s forwards; } .is-visible .sl-upr-row:nth-child(1) .ck { animation: slUprCk .4s var(--sl-ease-spring) .65s forwards; }
.is-visible .sl-upr-row:nth-child(2) .ld { animation: slUprFade .25s ease 1.05s forwards; } .is-visible .sl-upr-row:nth-child(2) .ck { animation: slUprCk .4s var(--sl-ease-spring) 1.05s forwards; }
.is-visible .sl-upr-row:nth-child(3) .ld { animation: slUprFade .25s ease 1.45s forwards; } .is-visible .sl-upr-row:nth-child(3) .ck { animation: slUprCk .4s var(--sl-ease-spring) 1.45s forwards; }
.is-visible .sl-upr-row:nth-child(4) .ld { animation: slUprFade .25s ease 1.85s forwards; } .is-visible .sl-upr-row:nth-child(4) .ck { animation: slUprCk .4s var(--sl-ease-spring) 1.85s forwards; }
.is-visible .sl-upr-row:nth-child(5) .ld { animation: slUprFade .25s ease 2.25s forwards; } .is-visible .sl-upr-row:nth-child(5) .ck { animation: slUprCk .4s var(--sl-ease-spring) 2.25s forwards; }
.sl-upr__foot { margin-top: 2px; padding: 11px 14px 13px; border-top: 1px solid var(--sl-dark-line); display: flex; align-items: center; gap: -6px; }
.sl-upr__avs { display: flex; }
.sl-upr__avs i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #0e1722; background: #5b6b8c center/cover; display: block; opacity: 0; transform: scale(.4); }
.sl-upr__avs i + i { margin-left: -8px; }
.is-visible .sl-upr__avs i:nth-child(1) { animation: slUprCk .4s var(--sl-ease-spring) 2.45s forwards; }
.is-visible .sl-upr__avs i:nth-child(2) { animation: slUprCk .4s var(--sl-ease-spring) 2.55s forwards; }
.is-visible .sl-upr__avs i:nth-child(3) { animation: slUprCk .4s var(--sl-ease-spring) 2.65s forwards; }
.sl-upr__foot-tx { margin-left: 12px; font-size: 11.5px; color: var(--sl-ink-dim); opacity: 0; }
.sl-upr__foot-tx b { color: #fff; font-weight: 600; }
.is-visible .sl-upr__foot-tx { animation: slUprIn .4s ease 2.7s forwards; }
@keyframes slUprSpin { to { transform: rotate(360deg); } }
@keyframes slUprFade { to { opacity: 0; } }
@keyframes slUprCk { to { opacity: 1; transform: scale(1); } }
@keyframes slUprIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ============ R2 — scale pool / funnel ============ */
.sl-ups-viz--open { background: none !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; padding: 0 !important; min-height: 430px; }
.sl-ups-viz--open::before { display: none !important; }
.sl-ups-body:has(.sl-ups-viz--open) { align-items: flex-start; }
.sl-upn { position: relative; width: 100%; min-height: 430px; }
.sl-upn__pool { position: absolute; top: -252px; left: 0%; width: 158%; height: 392px; border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(rgba(0,180,247,.5) 1.1px, transparent 1.7px) 0 0 / 15px 15px,
    linear-gradient(120deg, rgba(0,180,247,.24), rgba(0,180,247,.05));
  border: 1px solid rgba(0,180,247,.4);
  box-shadow: inset 0 0 90px -22px rgba(0,180,247,.75), 0 30px 70px -30px rgba(0,180,247,.45); }
.sl-upn__pool::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--sl-dark) 0%, transparent 34%), linear-gradient(90deg, transparent 56%, var(--sl-dark) 98%); }
.sl-upn__pool-lbl { position: absolute; left: 26px; bottom: 26px; z-index: 4; }
.sl-upn__pool-lbl b { display: block; font-size: clamp(34px,4.6vw,52px); font-weight: 800; letter-spacing: -.025em; line-height: 1; background: var(--sl-brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.sl-upn__pool-lbl span { display: block; font-size: 12.5px; color: var(--sl-ink); margin-top: 7px; letter-spacing: .01em; }
.sl-upn__spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, #eafaff, var(--sl-accent)); box-shadow: 0 0 10px 2px rgba(0,180,247,.9); z-index: 1; animation: slUpnSpark 2.6s ease-in-out infinite; }
.sl-upn__stack { position: absolute; left: 0; right: 0; top: 174px; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 26px; }
.sl-upn__stage { border-radius: 14px; padding: 9px 18px; text-align: center; border: 1px solid rgba(0,180,247,.3);
  background: radial-gradient(rgba(0,180,247,.42) .9px, transparent 1.4px) 0 0 / 12px 12px, linear-gradient(135deg, rgba(0,180,247,.2), rgba(0,180,247,.05)); }
.sl-upn__stage b { font-size: 17px; font-weight: 800; color: #fff; line-height: 1; }
.sl-upn__stage span { display: block; font-size: 10.5px; color: var(--sl-ink-dim); margin-top: 3px; }
.sl-upn__stage--m1 { width: 60%; }
.sl-upn__stage--m2 { width: 42%; }
.sl-upn__node { width: 34%; min-width: 184px; border-radius: 14px; padding: 9px 16px; text-align: center;
  background: linear-gradient(135deg, rgba(110,206,83,.34), rgba(110,206,83,.1)); border: 1px solid rgba(110,206,83,.55);
  box-shadow: inset 0 0 40px -16px rgba(110,206,83,.8), 0 14px 30px -16px rgba(110,206,83,.5); }
.sl-upn__node b { color: #aef0b9; font-size: 15px; font-weight: 800; }
.sl-upn__node span { display: block; font-size: 9.5px; color: #bfe6c4; margin-top: 2px; }
.sl-upn__avs { display: flex; justify-content: center; margin-bottom: 5px; }
.sl-upn__avs i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #14301d; background: #5b6b8c center/cover; display: block; opacity: 0; transform: scale(.3); }
.sl-upn__avs i + i { margin-left: -7px; }
.is-visible .sl-upn__avs i:nth-child(1) { animation: slUpnPop .5s var(--sl-ease-spring) 1.7s forwards; }
.is-visible .sl-upn__avs i:nth-child(2) { animation: slUpnPop .5s var(--sl-ease-spring) 1.85s forwards; }
.is-visible .sl-upn__avs i:nth-child(3) { animation: slUpnPop .5s var(--sl-ease-spring) 2.0s forwards; }
.sl-upn__dots { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.sl-upn__dot { position: absolute; top: 95px; left: var(--x,48%); width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, #eafaff, var(--sl-accent)); box-shadow: 0 0 9px 2px rgba(0,180,247,.9);
  opacity: 0; animation: slUpnDrop var(--dur,3.6s) ease-in-out var(--d,0s) infinite; }
@keyframes slUpnDrop {
  0%   { opacity: 0; transform: translateY(0) scale(1); }
  7%   { opacity: 1; }
  24%  { transform: translateY(102px) scale(1); }
  31%  { transform: translateY(102px) scale(1.25); }
  36%  { transform: translateY(102px) scale(1); }
  55%  { transform: translateY(182px) scale(1); }
  62%  { transform: translateY(182px) scale(1.25); }
  67%  { transform: translateY(182px) scale(1); }
  86%  { transform: translateY(264px) scale(1); }
  92%  { opacity: 1; transform: translateY(264px) scale(1.3); }
  100% { opacity: 0; transform: translateY(264px) scale(.3); }
}
@keyframes slUpnPop { to { opacity: 1; transform: scale(1); } }
@keyframes slUpnSpark { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }

/* ============ R3 — control ============ */
.sl-ups-ctrl { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 14px; }
.sl-ups-ctrl__cards { display: flex; flex-direction: column; gap: 9px; }
.sl-ups-cc { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--sl-dark-line-2); }
.sl-ups-cc__av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: #5b6b8c center/cover; }
.sl-ups-cc__m { flex: 1; min-width: 0; }
.sl-ups-cc__n { font-size: 12.5px; color: #fff; font-weight: 600; }
.sl-ups-cc__r { font-size: 10.5px; color: var(--sl-ink-faint); }
.sl-ups-cc__vote { display: flex; gap: 6px; flex-shrink: 0; }
.sl-ups-cc__b { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; border: 1px solid var(--sl-dark-line-2); background: rgba(255,255,255,.04); color: var(--sl-ink-faint); }
.sl-ups-cc__b svg { width: 13px; height: 13px; }
.sl-ups-cc__b.up { background: rgba(110,206,83,.16); border-color: rgba(110,206,83,.4); color: #8fe3a2; }
.sl-ups-cc__b.down { background: rgba(229,81,70,.14); border-color: rgba(229,81,70,.35); color: #f0a39d; }
.sl-ups-ctrl__seg { padding: 11px 12px; border-radius: 11px; background: rgba(255,255,255,.03); border: 1px solid var(--sl-dark-line-2); }
.sl-ups-ctrl__lbl { font-family: var(--sl-mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--sl-ink-faint); margin-bottom: 8px; }
.sl-ups-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sl-ups-chip { font-size: 11.5px; padding: 5px 11px; border-radius: var(--sl-r-pill); background: rgba(255,255,255,.05); border: 1px solid var(--sl-dark-line-2); color: var(--sl-ink-dim); }
.sl-ups-chip.on { background: rgba(0,180,247,.16); border-color: rgba(0,180,247,.45); color: #fff; }

/* ============ R4 — shield / no-risk ============ */
.sl-ups-safe { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.sl-ups-safe__shield { position: relative; width: 96px; height: 96px; border-radius: 26px; display: grid; place-items: center; color: var(--sl-accent-2);
  background: radial-gradient(circle at 38% 30%, rgba(110,206,83,.22), rgba(110,206,83,.05)); border: 1.5px solid rgba(110,206,83,.4); box-shadow: 0 0 50px -10px rgba(110,206,83,.5); }
.sl-ups-safe__shield svg { width: 46px; height: 46px; }
.sl-ups-safe__pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #bfe6c4; font-weight: 500; padding: 7px 14px; border-radius: var(--sl-r-pill); background: rgba(110,206,83,.1); border: 1px solid rgba(110,206,83,.3); }
.sl-ups-safe__strike { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--sl-ink-faint); text-decoration: line-through; opacity: .65; }
.sl-ups-safe__strike svg { width: 14px; height: 14px; }
.sl-ups-safe__stack { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.sl-ups-safe__row { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid var(--sl-dark-line-2); font-size: 11.5px; color: var(--sl-ink); }
.sl-ups-safe__row .d { width: 7px; height: 7px; border-radius: 50%; background: var(--sl-accent-2); box-shadow: 0 0 8px var(--sl-accent-2); flex-shrink: 0; }
.sl-ups-safe__row small { margin-left: auto; font-family: var(--sl-mono); font-size: 9.5px; color: var(--sl-ink-faint); text-transform: uppercase; letter-spacing: .04em; }

/* ============ R5 — voice popup ============ */
.sl-ups-vp { width: 100%; max-width: 312px; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--sl-dark-line-2); box-shadow: 0 30px 60px -32px rgba(0,0,0,.75); }
.sl-ups-vp__head { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--sl-dark-line); background: rgba(0,180,247,.06); }
.sl-ups-vp__ava { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #36c6ff, #0089cf 78%); display: grid; place-items: center; box-shadow: 0 3px 10px -2px rgba(0,150,225,.7); }
.sl-ups-vp__ava svg { width: 14px; height: 14px; color: #fff; }
.sl-ups-vp__t { font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.2; }
.sl-ups-vp__t small { display: block; font-size: 10px; font-weight: 400; color: var(--sl-ink-faint); margin-top: 1px; }
.sl-ups-vp__live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sl-accent-2); }
.sl-ups-vp__live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sl-accent-2); box-shadow: 0 0 8px var(--sl-accent-2); animation: slUpsBlink 1.4s ease-in-out infinite; }
@keyframes slUpsBlink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.sl-ups-vp__body { padding: 15px; display: flex; flex-direction: column; gap: 11px; }
.sl-ups-vp__msg { max-width: 84%; padding: 9px 12px; border-radius: 13px; font-size: 12px; line-height: 1.4; opacity: 0; transform: translateY(8px); }
.sl-ups-vp__msg.ai { align-self: flex-start; background: rgba(255,255,255,.06); border: 1px solid var(--sl-dark-line-2); border-bottom-left-radius: 4px; color: var(--sl-ink); }
.sl-ups-vp__msg.user { align-self: flex-end; background: rgba(0,180,247,.16); border: 1px solid rgba(0,180,247,.4); border-bottom-right-radius: 4px; }
.sl-ups-vp__wave { display: inline-flex; align-items: center; gap: 2.5px; height: 16px; }
.sl-ups-vp__wave i { width: 2.5px; border-radius: 2px; background: var(--sl-accent); display: block; }
.sl-ups-vp__wave i:nth-child(1){height:6px} .sl-ups-vp__wave i:nth-child(2){height:13px} .sl-ups-vp__wave i:nth-child(3){height:9px} .sl-ups-vp__wave i:nth-child(4){height:15px} .sl-ups-vp__wave i:nth-child(5){height:7px} .sl-ups-vp__wave i:nth-child(6){height:11px} .sl-ups-vp__wave i:nth-child(7){height:5px}
.is-visible .sl-ups-vp__wave i { animation: slUpsWv .65s ease-in-out infinite; }
.sl-ups-vp__wave i:nth-child(2){animation-delay:.08s} .sl-ups-vp__wave i:nth-child(3){animation-delay:.16s} .sl-ups-vp__wave i:nth-child(4){animation-delay:.12s} .sl-ups-vp__wave i:nth-child(5){animation-delay:.2s} .sl-ups-vp__wave i:nth-child(6){animation-delay:.1s} .sl-ups-vp__wave i:nth-child(7){animation-delay:.18s}
@keyframes slUpsWv { 0%,100% { transform: scaleY(.32); } 50% { transform: scaleY(1); } }
.sl-ups-vp__res { align-self: stretch; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 11px; background: rgba(110,206,83,.1); border: 1px solid rgba(110,206,83,.32); font-size: 12px; color: #bfe6c4; font-weight: 500; opacity: 0; transform: translateY(8px); }
.sl-ups-vp__res .t { width: 17px; height: 17px; border-radius: 50%; background: rgba(110,206,83,.2); display: grid; place-items: center; color: #6ee08a; flex-shrink: 0; }
.sl-ups-vp__res .t svg { width: 10px; height: 10px; }
.sl-ups-vp__res b { color: #8fe3a2; margin-left: auto; font-weight: 700; }
.is-visible .sl-ups-vp__msg { animation: slUpsIn .5s var(--sl-ease-out) forwards; }
.is-visible .sl-ups-vp__msg:nth-child(2){ animation-delay:.45s } .is-visible .sl-ups-vp__msg:nth-child(3){ animation-delay:1.1s }
.is-visible .sl-ups-vp__res { animation: slUpsIn .5s var(--sl-ease-out) 1.6s forwards; }

/* ============ R6 — conversion + soon ============ */
.sl-ups-conv { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 20px; }
.sl-ups-conv__bars { display: flex; align-items: flex-end; gap: 30px; height: 196px; padding: 0 8px; }
.sl-ups-conv__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; height: 100%; }
.sl-ups-conv__bar { width: 100%; max-width: 74px; border-radius: 11px 11px 5px 5px; height: 0; }
.sl-ups-conv__col--a .sl-ups-conv__bar { background: rgba(255,255,255,.13); }
.sl-ups-conv__col--b .sl-ups-conv__bar { background: var(--sl-brand-gradient); box-shadow: 0 0 34px -6px rgba(0,180,247,.65); }
.is-visible .sl-ups-conv__col--a .sl-ups-conv__bar { height: 30%; transition: height .85s var(--sl-ease-spring) .25s; }
.is-visible .sl-ups-conv__col--b .sl-ups-conv__bar { height: 84%; transition: height 1.05s var(--sl-ease-spring) .5s; }
.sl-ups-conv__v { font-size: 15px; font-weight: 700; color: #fff; }
.sl-ups-conv__col--a .sl-ups-conv__v { color: var(--sl-ink-dim); }
.sl-ups-conv__cap { font-size: 10.5px; color: var(--sl-ink-faint); text-align: center; line-height: 1.3; }
.sl-ups-soon { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 13px; background: rgba(0,180,247,.06); border: 1px dashed rgba(0,180,247,.4); position: relative; }
.sl-ups-soon__badge { position: absolute; top: -9px; right: 13px; font-family: var(--sl-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #06210f; background: var(--sl-accent-2); padding: 3px 9px; border-radius: var(--sl-r-pill); box-shadow: 0 6px 14px -5px rgba(110,206,83,.6); }
.sl-ups-soon__av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: #5b6b8c center/cover; background-image: url(https://cdn.prod.website-files.com/6846e62208b103688517c6a6/69dba0cb4bce584e19f7d188_profile-image9.jpg); border: 2px solid rgba(255,255,255,.6); }
.sl-ups-soon__tx { font-size: 12px; color: var(--sl-ink); line-height: 1.4; }
.sl-ups-soon__tx b { color: #fff; font-weight: 600; }
@keyframes slUpsIn { to { opacity: 1; transform: translateY(0); } }

/* ====================== COMPARISON TABLE ===================== */
.sl-ups__cmp { padding: clamp(88px,11vh,124px) 0; position: relative; overflow: hidden; border-top: 1px solid var(--sl-dark-line); }
.sl-ups__cmp::before { content: ""; position: absolute; top: 0; left: 50%; width: 60%; aspect-ratio: 2; transform: translateX(-50%); background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(0,180,247,.10), transparent 65%); pointer-events: none; }
.sl-ups__cmp .sl-shell { position: relative; z-index: 1; }
.sl-ups__cmp .sl-section-head { text-align: center; max-width: 660px; margin: 0 auto 44px; }
.sl-module--ups .sl-ups__cmp .sl-eyebrow { display: block; margin-bottom: 16px; }
.sl-ups__cmp .sl-section-head p { color: var(--sl-ink-dim); font-size: 17px; line-height: 1.55; margin-top: 14px; }
.sl-ups__cmp-scroll { overflow-x: auto; scrollbar-width: thin; border-radius: var(--sl-r-xl); }
.sl-ups__cmp-scroll::-webkit-scrollbar { height: 8px; }
.sl-ups__cmp-scroll::-webkit-scrollbar-thumb { background: var(--sl-dark-line-3); border-radius: 999px; }
.sl-ups__table { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)); border: 1px solid var(--sl-dark-line-2); border-radius: var(--sl-r-xl); overflow: hidden; }
.sl-ups__table th, .sl-ups__table td { text-align: center; vertical-align: middle; }
.sl-ups__table thead th { padding: 24px 14px 22px; border-bottom: 1px solid var(--sl-dark-line-2); }
.sl-ups__table thead th:first-child { text-align: left; }
.sl-ups__th-cap { display: flex; flex-direction: column; align-items: center; gap: 0; }
.sl-ups__th-mark { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; }
.sl-ups__th-mark--brand { background: var(--sl-accent); box-shadow: 0 8px 20px -8px rgba(0,180,247,.6); }
.sl-ups__th-mark--brand img { width: 21px; height: 21px; filter: brightness(0) invert(1); }
.sl-ups__th-mark--ic { background: rgba(255,255,255,.06); border: 1px solid var(--sl-dark-line-2); color: var(--sl-ink-dim); }
.sl-ups__th-mark--ic svg { width: 21px; height: 21px; }
.sl-ups__th-name { font-size: 13.5px; font-weight: 600; color: #fff; letter-spacing: -.01em; margin-top: 10px; line-height: 1.2; }
.sl-ups__th-name small { display: block; font-weight: 400; font-size: 11px; color: var(--sl-ink-faint); margin-top: 2px; }
.sl-ups__col-brand { position: relative; background: linear-gradient(180deg, rgba(0,180,247,.10), rgba(0,180,247,.03)); }
.sl-ups__table thead .sl-ups__col-brand { box-shadow: inset 0 2px 0 var(--sl-accent); }
.sl-ups__table thead th:first-child { width: 26%; }
.sl-ups__table thead th:not(:first-child) { width: 18.5%; }
.sl-ups__table tbody th { text-align: left; padding: 17px 18px; font-size: 13.5px; font-weight: 500; color: var(--sl-ink); line-height: 1.4; border-bottom: 1px solid var(--sl-dark-line); }
.sl-ups__table tbody td { padding: 16px 12px; font-size: 12px; border-bottom: 1px solid var(--sl-dark-line); text-align: center; }
.sl-ups__table tbody tr:last-child th, .sl-ups__table tbody tr:last-child td { border-bottom: 0; }
.sl-ups__table tbody tr:hover th, .sl-ups__table tbody tr:hover td { background: rgba(255,255,255,.02); }
.sl-ups__cell-yes { display: inline-grid; place-items: center; color: var(--sl-accent-2); } .sl-ups__cell-yes svg { width: 20px; height: 20px; }
.sl-ups__cell-no { color: var(--sl-ink-faint); font-size: 17px; line-height: 1; }
.sl-ups__cell-tx { font-family: var(--sl-mono); font-size: 10px; letter-spacing: .02em; color: var(--sl-ink-dim); text-transform: uppercase; line-height: 1.3; }
.sl-ups__cell-tx--dim { color: var(--sl-ink-faint); }
.sl-ups__cell-tx--good { color: #8fe3a2; }
.sl-ups__col-brand .sl-ups__cell-tx { color: #cfeaff; }
.sl-ups__cmp-note { text-align: center; margin-top: 20px; font-family: var(--sl-mono); font-size: 11px; color: var(--sl-ink-faint); }

/* ====================== PRICING (beige) ===================== */
.sl-ups__price { background: var(--sl-beige); color: var(--sl-dark-ink); padding: clamp(88px,11vh,128px) 0; position: relative; overflow: hidden; --ups-navy: #003e5c; }
.sl-ups__price .sl-eyebrow { color: var(--sl-grad-blue-1); display: block; margin-bottom: 16px; }
.sl-ups__price .sl-section-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.sl-ups__price .sl-h2 { color: var(--sl-dark-ink); }
.sl-ups__price .sl-h2 .sl-hl { color: var(--sl-dark-ink); }
.sl-ups__price .sl-section-head p { color: var(--sl-dark-ink-dim); font-size: 17px; line-height: 1.55; margin-top: 14px; }
.sl-ups__price-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px,4vw,52px); align-items: center; max-width: 940px; margin: 0 auto; }
@media (max-width: 860px) { .sl-ups__price-grid { grid-template-columns: 1fr; gap: 36px; } }
.sl-ups-cost { background: #fff; border: 1px solid var(--sl-beige-line); border-radius: var(--sl-r-xl); padding: 30px 30px 26px; box-shadow: 0 30px 64px -42px rgba(11,13,16,.5); }
.sl-ups-cost__lbl { font-family: var(--sl-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sl-dark-ink-faint); margin-bottom: 22px; }
.sl-ups-cost__bars { display: flex; align-items: flex-end; gap: 20px; height: 240px; }
.sl-ups-cost__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 10px; }
.sl-ups-cost__amt { font-size: 16px; font-weight: 700; color: var(--sl-dark-ink); letter-spacing: -.01em; white-space: nowrap; }
.sl-ups-cost__col--brand .sl-ups-cost__amt { color: var(--ups-navy); }
.sl-ups-cost__bar { width: 100%; max-width: 78px; border-radius: 11px 11px 5px 5px; height: 0; }
.sl-ups-cost__col--hh .sl-ups-cost__bar { background: linear-gradient(180deg, #d8cdb4, #c7bca3); }
.sl-ups-cost__col--lk .sl-ups-cost__bar { background: linear-gradient(180deg, #c0d2dd, #a9c2d0); }
.sl-ups-cost__col--brand .sl-ups-cost__bar { background: var(--sl-brand-gradient); box-shadow: 0 14px 30px -12px rgba(0,180,247,.6); }
.is-visible .sl-ups-cost__col--hh .sl-ups-cost__bar { height: 92%; transition: height 1s var(--sl-ease-out) .15s; }
.is-visible .sl-ups-cost__col--lk .sl-ups-cost__bar { height: 50%; transition: height 1s var(--sl-ease-out) .35s; }
.is-visible .sl-ups-cost__col--brand .sl-ups-cost__bar { height: 13%; transition: height 1s var(--sl-ease-out) .55s; }
.sl-ups-cost__cap { font-size: 11.5px; color: var(--sl-dark-ink-dim); text-align: center; line-height: 1.35; font-weight: 500; }
.sl-ups-cost__cap small { display: block; color: var(--sl-dark-ink-faint); font-weight: 400; font-size: 10.5px; margin-top: 2px; }
.sl-ups-offer__lbl { font-family: var(--sl-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ups-navy); margin-bottom: 14px; }
.sl-ups-offer__price { font-size: clamp(40px,5.2vw,58px); font-weight: 800; letter-spacing: -.03em; color: var(--ups-navy); line-height: .95; }
.sl-ups-offer__price span { font-size: .42em; font-weight: 500; color: var(--sl-dark-ink-dim); letter-spacing: 0; }
.sl-ups-offer__plus { margin-top: 10px; font-size: 17px; font-weight: 600; color: var(--sl-dark-ink); }
.sl-ups-offer__plus b { color: var(--ups-navy); }
.sl-ups-offer__chips { display: flex; flex-direction: column; gap: 10px; margin: 22px 0; }
.sl-ups-offer__chip { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--sl-dark-ink); line-height: 1.4; }
.sl-ups-offer__chip svg { width: 16px; height: 16px; color: var(--ups-navy); flex-shrink: 0; margin-top: 2px; }
.sl-ups-offer__cta .sl-btn { width: 100%; justify-content: center; }
.sl-ups-offer__note { margin-top: 12px; font-size: 12px; color: var(--sl-dark-ink-faint); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .sl-upr__badge, .sl-upr-row__st .ck, .sl-upr__avs i, .sl-upr__foot-tx, .sl-upn__avs i, .sl-ups-vp__msg, .sl-ups-vp__res { opacity: 1 !important; transform: none !important; animation: none !important; }
  .sl-upr-row__st .ld { display: none; }
  .sl-upn__dot, .sl-upn__spark { display: none; }
  .sl-ups-conv__bar, .sl-ups-cost__bar { transition: none !important; }
  .sl-ups-vp__wave i { transform: scaleY(.6); }
}

/* ===========================================================================
   CASCADE OVERRIDE — re-assert section paddings to beat Webflow inline reset
   The Webflow site head has `.sl-module *{padding:0;margin:0}` which kills
   all our section paddings (specificity 0,1,1,0 = same as `.sl-r`, but loaded
   later → wins). Below: prefix with `.sl-module` to add a class (specificity
   0,2,0,0 = 20) and win the cascade. Mirrors the canonical rules above 1:1.
   ROOT FIX: remove the inline reset from Webflow Designer Head Code.
   =========================================================================== */

/* Reason wrappers (uc-onboarding-automation, uc-performance-management, uc-skill-management) */
.sl-module .sl-r { padding: clamp(78px,10vh,128px) 0; }
.sl-module .sl-r__rhead { padding: clamp(82px,10vh,120px) 0 clamp(8px,2vh,20px); }
.sl-module .sl-r:has(.sl-r-shot) { padding-top: clamp(96px,12vh,152px); padding-bottom: clamp(96px,12vh,152px); }

/* UPS / People Search */
.sl-module .sl-ups-r { padding: clamp(70px,9vh,116px) 0; }
.sl-module .sl-ups__rhead { padding: clamp(82px,10vh,120px) 0 clamp(8px,2vh,20px); }

/* UC Detail (review-summary-pulse and Cluster-A pattern) */
.sl-module .sl-ucd__hero { padding: clamp(108px,14vh,150px) 0 clamp(84px,10vh,116px); }
.sl-module .sl-ucd__how { padding: clamp(92px,11vh,128px) 0; }
.sl-module .sl-ucd__ex { padding: clamp(92px,11vh,128px) 0; }
.sl-module .sl-ucd__start { padding: clamp(92px,11vh,128px) 0; }
.sl-module .sl-ucd__cmp { padding: clamp(92px,11vh,128px) 0; }

/* Comparison block */
.sl-module .sl-cmp { padding: clamp(88px,11vh,124px) 0; }

/* Final CTA */
.sl-module.sl-module--final-cta { padding: 140px 0; }

/* Part-of-workspace / platform-map */
.sl-module.sl-module--pow { padding: 120px 0; }
.sl-module.sl-module--pmap { padding: 96px 0 100px; }

/* Atlas Apply page paddings */
.sl-module.sl-module--aah { padding: clamp(96px,12vh,140px) 0 clamp(72px,9vh,108px); }
.sl-module.sl-module--aaj { padding: clamp(80px,10vh,120px) 0; }
.sl-module.sl-module--aar { padding: clamp(96px,12vh,140px) 0; }
.sl-module.sl-module--aai { padding: clamp(80px,10vh,120px) 0; }
.sl-module.sl-module--aap { padding: clamp(80px,10vh,120px) 0; }
.sl-module.sl-module--aac { padding: clamp(96px,12vh,140px) 0; }

/* Trust-strip */
.sl-module.sl-module--trust-strip { padding: 8px 0 56px; }

/* Security block */
.sl-module.sl-module--security { padding: clamp(90px,11vh,128px) 0; }

/* Hero quote */
.sl-module.sl-module--hero-quote { padding: clamp(120px,14vh,160px) 0 clamp(80px,10vh,120px); }

/* Section-head margins (eyebrows + headers commonly inside .sl-section-head) */
.sl-module .sl-section-head { margin-bottom: 48px; }

/* UPS reasons head + body — restore breathing */
.sl-module .sl-ups-rhead { margin-bottom: 0; }
.sl-module .sl-ups-body { margin-top: 40px; }

/* Reason body grids */
.sl-module .sl-r-body { margin-top: 40px; }

/* ===========================================================================
   AUTO-GENERATED PADDING OVERRIDES — defeats Webflow .sl-module * reset
   Each rule re-asserts the simple .sl-xxx padding under .sl-module parent
   (specificity 0,2,0,0 beats Webflow's 0,1,1,0)
   =========================================================================== */
.sl-module .sl-btn-lg { padding: 13px 24px; }
.sl-module .sl-branch__cond { padding: 3px 9px 3px 7px; }
.sl-module .sl-aa-ha-surface-pad { padding: 24px 28px; }
.sl-module .sl-aa-ha-box { padding: 18px 20px; }
.sl-module .sl-aa-ha-n { padding: 8px 11px; }
.sl-module .sl-aa-ha-ent { padding: 6px 10px; }
.sl-module .sl-aa-ha-sub { padding: 4px 5px 4px 11px; }
.sl-module .sl-aa-ha-more { padding: 7px 11px; }
.sl-module .sl-aa-ha-tchip { padding: 11px; }
.sl-module .sl-aa-cta { padding: 10px 12px 10px 20px; }
.sl-module .sl-aa-cta-tag { padding: 5px 10px; }
.sl-module .sl-aa-badge { padding: 8px 13px; }
.sl-module .sl-aa-cta-go { padding: 10px 18px; }
.sl-module .sl-aa-hero { padding: 120px 20px 72px; }
.sl-module .sl-aa-cmp-intro { padding: 130px 32px 56px; }
.sl-module .sl-aa-suite-bar { padding: 11px 13px; }
.sl-module .sl-aa-suite-mods { padding: 12px; }
.sl-module .sl-aa-smod { padding: 12px 10px; }
.sl-module .sl-aa-island { padding: 8px 11px; }
.sl-module .sl-aa-pchip { padding: 6px; }
.sl-module .sl-aa-rb2 { padding: 12px 13px 13px; }
.sl-module .sl-aa-cmp-row { padding: 40px 22px; }
.sl-module .sl-bento__card { padding: 22px 22px 20px; }
.sl-module .sl-bento__viz { padding: 12px 14px; }
.sl-module .sl-bento__link { padding: 10px 22px; }
.sl-module .sl-mk-tasks__row { padding: 5px 8px; }
.sl-module .sl-mk-brief__mgr { padding: 0 0 9px; }
.sl-module .sl-mk-brief__row { padding: 4px 0; }
.sl-module .sl-sec-stat { padding: 22px 24px; }
.sl-module .sl-orbit__pill { padding: 7px 13px; }
.sl-module .sl-onb-node { padding: 10px 15px 10px 10px; }
.sl-module .sl-onb-note { padding: 18px 20px; }
.sl-module .sl-onb-pre__stop { padding: 0 0 22px; }
.sl-module .sl-onb-msg { padding: 12px 13px; }
.sl-module .sl-onb-msg__app { padding: 1px 6px; }
.sl-module .sl-onb-msg__btn { padding: 4px 10px; }
.sl-module .sl-onb-tab { padding: 9px 18px; }
.sl-module .sl-onb-hire { padding: 16px 20px; }
.sl-module .sl-onb-hire-trigger { padding: 5px 11px; }
.sl-module .sl-onb-tl-col { padding: 20px 20px 18px; }
.sl-module .sl-onb-task { padding: 8px 0; }
.sl-module .sl-onb-start-time { padding: 7px 16px; }
.sl-module .sl-onb-step { padding: 30px 28px 28px; }
.sl-module .sl-onb-smsg { padding: 10px 12px; }
.sl-module .sl-onb-smsg-app { padding: 1px 5px; }
.sl-module .sl-onb-smsg-pill { padding: 3px 9px; }
.sl-module .sl-ups-viz { padding: 30px; }
.sl-module .sl-ups-points { padding: 0; }
.sl-module .sl-upr__head { padding: 13px 15px; }
.sl-module .sl-upr__badge { padding: 4px 9px; }
.sl-module .sl-upr__body { padding: 12px 14px; }
.sl-module .sl-upr__foot { padding: 11px 14px 13px; }
.sl-module .sl-upn__stage { padding: 9px 18px; }
.sl-module .sl-upn__node { padding: 9px 16px; }
.sl-module .sl-ups-cc { padding: 10px 12px; }
.sl-module .sl-ups-ctrl__seg { padding: 11px 12px; }
.sl-module .sl-ups-chip { padding: 5px 11px; }
.sl-module .sl-ups-safe__pill { padding: 7px 14px; }
.sl-module .sl-ups-safe__row { padding: 8px 11px; }
.sl-module .sl-ups-vp__head { padding: 13px 15px; }
.sl-module .sl-ups-vp__body { padding: 15px; }
.sl-module .sl-ups-vp__msg { padding: 9px 12px; }
.sl-module .sl-ups-vp__res { padding: 10px 12px; }
.sl-module .sl-ups-conv__bars { padding: 0 8px; }
.sl-module .sl-ups-soon { padding: 12px 14px; }
.sl-module .sl-ups-soon__badge { padding: 3px 9px; }
.sl-module .sl-ups-cost { padding: 30px 30px 26px; }

/* ----- gaps: illustration/flow containers whose base padding was being zeroed by the
   Webflow head reset `.sl-module *{padding:0}` (tie on specificity, reset loaded later → won).
   Without these, the reason-illustration canvases collapsed (e.g. .sl-onb-canvas 181px→71px,
   .sl-r-viz padding 32px→0). Re-declare at .sl-module .X specificity (0,2,0,0) to win. ----- */
.sl-module .sl-onb-canvas { padding: 40px 32px; }
.sl-module .sl-r-viz { padding: 32px; }
.sl-module .sl-node { padding: 8px 13px 8px 8px; }
.sl-module .sl-chip { padding: 5px 12px 5px 10px; }
.sl-module .sl-pill { padding: 6px 12px 6px 8px; }
.sl-module .sl-flow { padding: 2px; }
.sl-module .sl-ups__cmp { padding: clamp(88px,11vh,124px) 0; }
.sl-module .sl-ups__price { padding: clamp(88px,11vh,128px) 0; }
/* longhand paddings the first pass missed (it only matched shorthand `padding:`) */
.sl-module .sl-onb-pre { padding-left: 26px; }
.sl-module .sl-branch { padding-left: 50px; }
.sl-module .sl-sec-trust { padding-top: 30px; }
.sl-module .sl-bal__on--l { padding-bottom: 4px; }
.sl-module .sl-bal__blocks { padding-bottom: 4px; }
.sl-module .sl-onb-tl-h { padding-bottom: 12px; }

/* ----- bigger reason index numbers (01..10): the old clamp maxed at 34px which read
   as tiny above the large reason headlines. Bump uniformly across every UC page
   namespace (.sl-rhead / .sl-ups-rhead / .sl-pm-rhead / .sl-sm-rhead). (0,2,0,0) wins
   the tie vs the per-namespace rules by source order. ----- */
.sl-module .sl-reason-num { font-size: clamp(40px,4.2vw,56px); font-weight: 300; }

/* ----- onboarding section intro head ("10 reasons …") was left-aligned; center it like .sl-r__rhead ----- */
.sl-module--onb .sl-onb__rhead { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }

/* ----- screenshot illustrations: Webflow `.w-richtext img{max-width:100%}` was clamping our
   intended 124% overflow down to the column width (screenshots looked small on LIVE). Win on
   specificity + go a touch wider; flipped rows (media on the LEFT) overflow off the left edge. ----- */
.sl-module .sl-r-shot__media img { width: 130%; max-width: none; }
.sl-module .sl-onb-shot--flip .sl-r-shot__media img { margin-left: -30%; }

/* ----- balance (reason 10): the "One-time setup" chip styles were dropped in the refactor, so the
   badge rendered as bare text. Reconstruct to match the sibling .sl-bal__blk cards. ----- */
.sl-module .sl-onb-bal__model { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sl-module .sl-onb-bal__chip { padding: 9px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--sl-beige-line); box-shadow: 0 6px 0 #ddd3bf; font-size: 14.5px; font-weight: 600; color: var(--sl-dark-ink); white-space: nowrap; }
.sl-module .sl-onb-bal__chipsub { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--sl-dark-ink-faint); }

/* ----- a touch more air above the mini checklist under reason copy ----- */
.sl-module .sl-r-mini { margin-top: 28px; }



/* ===== Webflow head reset zeroes margin on `.sl-module *` (same as padding). Re-assert
   single-bare-class margins at (0,2,0) so intended spacing/centering survives on LIVE. ===== */
.sl-module .sl-conn__dot { margin-top: -3px; }
.sl-module .sl-aa-kicker { margin-bottom: 22px; }
.sl-module .sl-aa-hero-sub { margin-top: 24px; }
.sl-module .sl-aa-ha-stagewrap { margin-top: 40px; }
.sl-module .sl-aa-ha-box-desc { margin-top: 5px; }
.sl-module .sl-aa-ha-rows { margin-top: 6px; }
.sl-module .sl-aa-cta { margin-top: 26px; }
.sl-module .sl-aa-cta-go { margin-left: auto; }
.sl-module .sl-aa-cmp-intro { margin: 0 auto; }
.sl-module .sl-aa-cmp-hint { margin-top: 34px; }
.sl-module .sl-aa-cmp-cap { margin-top: 16px; }
.sl-module .sl-r__rhead { margin: 0 auto; }
.sl-module .sl-bento { margin-top: 40px; }
.sl-module .sl-bento__ey { margin: 0 0 10px; }
.sl-module .sl-bento__t { margin: 0 0 8px; }
.sl-module .sl-bento__d { margin: 0 0 14px; }
.sl-module .sl-bento__viz { margin: 4px 0 14px; }
.sl-module .sl-bento__bot { margin-top: auto; }
.sl-module .sl-bento__footer { margin-top: 40px; }
.sl-module .sl-mk-doc__head { margin-bottom: 8px; }
.sl-module .sl-mk-doc__person { margin-bottom: 8px; }
.sl-module .sl-mk-doc__meta { margin-left: auto; }
.sl-module .sl-mk-doc__status { margin-top: 8px; }
.sl-module .sl-mk-tasks__meta { margin-left: auto; }
.sl-module .sl-mk-brief__head { margin-bottom: 8px; }
.sl-module .sl-mk-brief__mgr { margin-bottom: 7px; }
.sl-module .sl-mk-brief__r { margin-top: 1px; }
.sl-module .sl-mk-cal__row { margin-bottom: 7px; }
.sl-module .sl-mk-risk__row { margin-bottom: 8px; }
.sl-module .sl-cons { margin: 0 auto; }
.sl-module .sl-sec-trust { margin-top: 44px; }
.sl-module .sl-sec-trust__lbl { margin-bottom: 22px; }
.sl-module .sl-bal { margin: 6px auto 0; }
.sl-module .sl-bal__tip { margin-left: -370px; }
.sl-module .sl-bal__eyebrow { margin-bottom: 6px; }
.sl-module .sl-val__foot { margin-top: 40px; }
.sl-module .sl-cmp__th-name { margin-top: 10px; }
.sl-module .sl-cmp-note { margin-top: 20px; }
.sl-module .sl-onb-canvas { margin-top: 40px; }
.sl-module .sl-onb-canvas__label { margin-bottom: 30px; }
.sl-module .sl-onb-conn__dot { margin-top: -3px; }
.sl-module .sl-onb-notes { margin-top: 28px; }
.sl-module .sl-onb-pre__when { margin-bottom: 4px; }
.sl-module .sl-onb-msg { margin-top: 11px; }
.sl-module .sl-onb-msg__head { margin-bottom: 8px; }
.sl-module .sl-onb-msg__app { margin-left: auto; }
.sl-module .sl-onb-msg__tx { margin-bottom: 9px; }
.sl-module .sl-onb-ex { margin-top: 40px; }
.sl-module .sl-onb-tabs { margin: 0 0 30px; }
.sl-module .sl-onb-hire { margin: 0 auto 16px; }
.sl-module .sl-onb-hire-trigger { margin-left: auto; }
.sl-module .sl-onb-tl { margin: 0 auto; }
.sl-module .sl-onb-tl-h { margin-bottom: 16px; }
.sl-module .sl-onb-task-ico { margin-top: 1px; }
.sl-module .sl-onb-task-via { margin-top: 2px; }
.sl-module .sl-onb-start-time { margin: 18px auto 40px; }
.sl-module .sl-onb-step-vis { margin-bottom: 24px; }
.sl-module .sl-onb-step-num { margin-bottom: 12px; }
.sl-module .sl-onb-smsg-head { margin-bottom: 9px; }
.sl-module .sl-onb-smsg-tx { margin-bottom: 8px; }
.sl-module .sl-ups__rhead { margin: 0 auto; }
.sl-module .sl-upr__badge { margin-left: auto; }
.sl-module .sl-upr__foot { margin-top: 2px; }
.sl-module .sl-upr__foot-tx { margin-left: 12px; }
.sl-module .sl-upn__avs { margin-bottom: 5px; }
.sl-module .sl-ups-ctrl__lbl { margin-bottom: 8px; }
.sl-module .sl-ups-vp__live { margin-left: auto; }
.sl-module .sl-ups__th-name { margin-top: 10px; }
.sl-module .sl-ups__cmp-note { margin-top: 20px; }
.sl-module .sl-ups__price-grid { margin: 0 auto; }
.sl-module .sl-ups-cost__lbl { margin-bottom: 22px; }
.sl-module .sl-ups-offer__lbl { margin-bottom: 14px; }
.sl-module .sl-ups-offer__plus { margin-top: 10px; }
.sl-module .sl-ups-offer__chips { margin: 22px 0; }
.sl-module .sl-ups-offer__note { margin-top: 12px; }

/* ----- comparison table: provider names + cell values should read in normal case, not the
   aggressive all-caps (user: "wie in der Originalversion"). Also a touch more air between the
   provider logo and its label, and between the table and the footnote. ----- */
.sl-module .sl-ups__table th, .sl-module .sl-ups__table td,
.sl-module .sl-ups__th-name, .sl-module .sl-ups__th-name small,
.sl-module .sl-ups__cell-tx { text-transform: none; }
.sl-module .sl-ups__th-name { letter-spacing: -.01em; }
.sl-module .sl-ups__cell-tx { letter-spacing: normal; }
.sl-module .sl-ups__th-name { margin-top: 15px; }
.sl-module .sl-ups__cmp-note { margin-top: 30px; }
/* same for the onboarding/perf/skill "How Sprad compares" table (.sl-cmp-table) */
.sl-module .sl-cmp-table th, .sl-module .sl-cmp-table td,
.sl-module .sl-cmp__th-name, .sl-module .sl-cmp__cell-tx { text-transform: none; }
.sl-module .sl-cmp__th-name { letter-spacing: -.01em; margin-top: 14px; }
.sl-module .sl-cmp__cell-tx { letter-spacing: normal; }

/* people-search reason numbers were pinned to 34px by .sl-module--ups .sl-ups-rhead
   .sl-reason-num (higher specificity than the global rule) → match the uniform 56px used on
   onboarding / performance-management / skill-management. */
.sl-module--ups .sl-ups-rhead .sl-reason-num { font-size: clamp(40px,4.2vw,56px); font-weight: 300; }

/* ===== Round-2 polish over all "X reasons" UC pages ===== */
/* A2 reason headlines a touch bolder (uniform) */
.sl-module .sl-rhead h3, .sl-module .sl-ups-rhead h3 { font-weight: 600; }
/* A6 balance (reason 10): more air between "One-time setup" chip and "then usage-based", less muted */
.sl-module .sl-onb-bal__model { gap: 8px; }
.sl-module .sl-onb-bal__chipsub { color: var(--sl-dark-ink-dim); }
/* A7+A8 comparison tables: Webflow richtext forces `table{display:block}` → table-layout +
   column widths die and the 4 columns collapse left (empty space right) + logos look broken.
   Force display:table so columns fill 100% of the container. Affects ups + sl-cmp tables. */
.sl-module .sl-ups__table, .sl-module .sl-cmp-table { display: table; width: 100%; }
/* A7 provider-logo marks: a touch more inner padding so logos aren't edge-to-edge, keep rounded */
.sl-module .sl-ups__th-mark, .sl-module .sl-cmp__th-mark { padding: 9px; }
.sl-module .sl-ups__th-mark--brand img, .sl-module .sl-cmp__th-mark--brand img { width: 18px; height: 18px; }
/* A3 onboarding intro head: 2-line title, more air above/below + under the logos */
.sl-module--onb .sl-onb__rhead { padding: clamp(48px,6vh,78px) 0 clamp(18px,3vh,30px); max-width: 860px; }
.sl-module--onb .sl-onb__rhead h2 { max-width: 24ch; margin-left: auto; margin-right: auto; }
/* WS-feedback: integrations ticker — row gap = chip gap (14px), button up, more space above the heading
   (the ws-body inline style sets padding:0 0 96px → needs !important to add a top gap) */
.integrations-block .int-rows { gap: 8px; margin-bottom: 0; }
.integrations-block { padding-top: 48px !important; }
.integrations-block .int-cta { margin-top: 16px; }
/* hover lift of a logo chip was being clipped — let the rows not clip + lift the chip above its neighbours */
.integrations-block .int-row { overflow: visible; }
.integrations-block .int-chip { position: relative; }
.integrations-block .int-chip:hover { z-index: 3; }
/* Secure section ("built for the most regulated industries"): give the headline more horizontal room (2–3 lines) */
.sl-module--security .sl-h2 { max-width: 26ch; }
/* Atlas reasons 05 + 07: wider headline so the longer DE wraps to 2 lines (no awkward break after the em-dash).
   The atlas-body has inline max-widths on these heads → needs !important to widen them. */
.sl-section-head { max-width: 900px !important; }
.sl-rc__head { max-width: 960px !important; }
/* WS-feedback: HR-automation flow-graph — first node sat flush against the left edge; give breathing room */
.flowgraph { padding-left: 14px; padding-right: 14px; box-sizing: border-box; }
/* Atlas Step-2 recipe cards: restore the small icons (Review drafts / Onboarding / Rejections / Attrition watch) */
.sl-module .sl-aht-recipe__ic { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-right: 8px; color: var(--sl-accent); vertical-align: -2px; flex-shrink: 0; }
.sl-module .sl-aht-recipe__ic svg { width: 15px; height: 15px; display: block; }
/* PS reason-02 talent-pool on mobile: contain it (no upward bleed over the text), keep it one piece */
@media (max-width: 920px) {
  /* pull the whole viz (pool + the 3 funnel cards) up so it doesn't overlap the text below;
     the big pool goes up the most. faded so the text above stays readable. */
  .sl-module .sl-upn { margin-top: -168px; min-height: 250px; }
  .sl-module .sl-upn__pool { top: -160px; width: 124%; height: 280px; opacity: .45; }
  .sl-module--ups .sl-ups-rhead, .sl-module--ups .sl-ups-feat { position: relative; z-index: 2; }
}
.sl-module--onb .sl-onb__rhead .sl-eyebrow { margin-bottom: 20px; }
/* A3 a touch more space under the big reason number */
.sl-module .sl-reason-num { margin-bottom: 14px; }
/* A4 flipped screenshot rows (reason 05): give the media the WIDE column so it's as big as 07 */
@media (min-width: 921px) { .sl-module .sl-onb-shot--flip { grid-template-columns: minmax(0,1.22fr) minmax(0,.78fr); } }
/* A5 reason 09: integrations graphic left, the 4 security boxes right (desktop) */
@media (min-width: 921px) { .sl-module .sl-r-09grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(36px,5vw,60px); align-items: center; } }
/* G1 workspace quote: Webflow's .w-richtext blockquote default adds a 5px grey left border ("Strich") — remove it */
.w-richtext blockquote.qf-text, blockquote.qf-text { border-left: 0 !important; padding-left: 0 !important; }
/* G3 Webflow footer rendered white text on its light bg (invisible). Force readable dark text. */
.footer, .footer * { color: #2b2b2b !important; }
/* G2: a stray "woman-talking.webp" photo was set as the integrations-ticker row background — remove it */
.int-row, .int-row.left, .int-row.right { background-image: none !important; }
/* G4: make the "10 reasons to hire Atlas" header bigger (scoped override beats the inline rule) */
.sl-module--rzn-nav .rzn-nav__h2 { font-size: clamp(40px,5vw,64px); }
.sl-module--rzn-nav .rzn-nav__ten { font-size: clamp(58px,7.2vw,104px); }
/* the comparison table read narrow — let it use a wider container than the standard shell */
.sl-module--ups .sl-ups__cmp .sl-shell { max-width: 1480px; }
/* people-search reason illustrations sat at ~50% width → give the .sl-ups-viz column the
   larger share (it's DOM-first, so it's col1 by default and col2 on reversed rows) so the
   cards inside render bigger. Desktop-only; mobile keeps the single-column stack. */
@media (min-width: 921px) {
  .sl-module--ups .sl-ups-body { grid-template-columns: 1fr 1fr; }
  .sl-module--ups .sl-ups-body.is-rev { grid-template-columns: 1fr 1fr; }
  /* A9 reason-02 talent-pool: was width:158% top:-252px → bled off-screen right + overlapped the
     heading above. Contain it within the panel + pull it down. */
  /* PS reason-02 talent-pool: sits high on the right, bleeds toward the screen edge, fades out
     top+right via ::after — feels like an endless candidate pool. */
  .sl-module .sl-upn__pool { width: 158%; top: -200px; height: 312px; }
  .sl-module--ups .sl-ups-viz { min-height: 420px; }
}

/* ----- platform-map ("Bigger Picture") sub-area chips: app.js (initPlatformMap) turns the
   data-mod chips into clickable links to their use-case page + adds .sl-linked. Give them the
   interactive affordance + hover. ----- */
.sl-module .pmap__chip.sl-linked { cursor: pointer; color: #fff; transition: border-color .16s, background .16s, color .16s, transform .16s; }
.sl-module .pmap__chip.sl-linked:hover { border-color: rgba(0,180,247,.55); background: rgba(0,180,247,.16); transform: translateY(-1px); }

/* ===== Webflow body-bg-white safety: ensure dark hero sections render dark even when body bg is white ===== */
.sl-module.sl-module--aah { background: var(--sl-dark); color: var(--sl-ink); }

/* ==========================================================================
   UNIVERSAL GRADIENT UNDERLINE (thin, BEHIND the text) — reusable highlight.
   Generalised from .sl-aa-hl so any heading can use <span class="sl-uline">…</span>.
   ========================================================================== */
.sl-uline { color: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 5' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' x2='1'><stop offset='0' stop-color='%23006d96'/><stop offset='.19' stop-color='%2300b4f7'/><stop offset='.77' stop-color='%236ece53'/><stop offset='1' stop-color='%23003e5c'/></linearGradient></defs><rect width='200' height='5' rx='2.5' fill='url(%23g)'/></svg>");
  background-repeat: no-repeat; background-size: calc(100% - 4px) 5px; background-position: 2px 94%;
  padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ==========================================================================
   HOMEPAGE · 3 GRÜNDE   (sections/home-reasons.html carries HTML only)
   Reuses the global reason-row system (.sl-r / .sl-rhead / .sl-r-body / …);
   only the three per-reason vizzes are defined here.
   ========================================================================== */
.sl-module.sl-module--why{ background: var(--sl-dark); color: var(--sl-ink); padding-top: 116px; position: relative; overflow: hidden; }
/* hero → section transition: a soft blue glow bleeding down from the top edge */
.sl-module.sl-module--why::before{ content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 130%; height: 360px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 46% 100% at 50% -4%, rgba(0,180,247,.20) 0%, rgba(0,180,247,.06) 38%, transparent 72%); }
.sl-module--why .sl-shell, .sl-module--why .sl-r{ position: relative; z-index: 1; }
.sl-module--why .why-head{ text-align: left; max-width: 760px; margin: 0; padding-bottom: 56px; }
.sl-module--why .why-head .sl-eyebrow{ display: inline-block; margin-bottom: 10px; }
.sl-module--why .why-head h2{ color: #fff; }
.sl-module--why .why-3{ font-weight: 800; font-size: 1.34em; letter-spacing: -.02em;
  background: var(--sl-brand-gradient); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; animation: why3Shift 7s ease-in-out infinite; }
@keyframes why3Shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.sl-module--why .why-head p{ color: var(--sl-ink-dim); font-size: 17px; line-height: 1.55; margin-top: 16px; }
.sl-module--why .sl-r:first-of-type{ border-top: 0; }

/* ----- reason 01 — HR-Team (docked) → Atlas → two ways ----- */
.sl-module--why .why-br{ display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.sl-module--why .why-br__team{ display: flex; flex-direction: column; align-items: center; gap: 11px; position: relative; flex-shrink: 0; }
.sl-module--why .why-br__avs{ display: flex; position: relative; }
.sl-module--why .why-br__avs img{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #131925; margin-left: -13px; box-shadow: 0 2px 7px rgba(0,0,0,.35); }
.sl-module--why .why-br__avs img:first-child{ margin-left: 0; }
/* small round Atlas badge docked to the bottom-right of the team — the team is the origin of the two branches */
/* the Atlas logo PNG is already a round blue badge → show it bare, just bigger (no bg, no border, no ring) */
.sl-module--why .why-br__en{ position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; }
.sl-module--why .why-br__en img{ width: 28px; height: 28px; display: block; border-radius: 50%; box-shadow: 0 3px 10px -2px rgba(0,0,0,.5); }
.sl-module--why .why-br__lbl-sm{ font-size: 12px; color: var(--sl-ink-dim); font-weight: 500; white-space: nowrap; }
.sl-module--why .why-br__wire{ width: 46px; height: 150px; flex-shrink: 0; overflow: visible; }
.sl-module--why .why-br__wire path{ fill: none; stroke: rgba(0,180,247,.55); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.sl-module--why .sl-r-viz.is-visible .why-br__wire path{ animation: whyBrWire .7s var(--sl-ease-out) .5s forwards; }
.sl-module--why .why-br__wire path.w2{ stroke: rgba(110,206,83,.55); }
.sl-module--why .sl-r-viz.is-visible .why-br__wire path.w2{ animation-delay: .75s; }
@keyframes whyBrWire { to { stroke-dashoffset: 0; } }
.sl-module--why .why-br__paths{ display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sl-module--why .why-br__path{ border: 1px solid var(--sl-dark-line-2); border-radius: 13px; padding: 14px 16px; background: rgba(255,255,255,.04); opacity: 0; transform: translateX(-10px); }
.sl-module--why .sl-r-viz.is-visible .why-br__path{ animation: whyBrPath .5s var(--sl-ease-out) forwards; }
.sl-module--why .sl-r-viz.is-visible .why-br__path--ws{ animation-delay: .8s; }
.sl-module--why .sl-r-viz.is-visible .why-br__path--auto{ animation-delay: 1.05s; }
@keyframes whyBrPath { to { opacity: 1; transform: none; } }
.sl-module--why .why-br__phead{ display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #fff; }
.sl-module--why .why-br__phead i{ width: 23px; height: 23px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; }
.sl-module--why .why-br__phead i svg{ width: 13px; height: 13px; }
.sl-module--why .why-br__path--ws .why-br__phead i{ background: rgba(0,180,247,.16); color: var(--sl-accent); }
.sl-module--why .why-br__path--auto .why-br__phead i{ background: rgba(110,206,83,.16); color: var(--sl-accent-2); }
.sl-module--why .why-br__chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sl-module--why .why-br__chips a, .sl-module--why .why-br__chips span{ font-size: 11.5px; color: var(--sl-ink-dim); background: rgba(255,255,255,.05); border: 1px solid var(--sl-dark-line-2); padding: 4px 9px; border-radius: 999px; text-decoration: none; transition: color .16s, border-color .16s, background .16s; }
.sl-module--why .why-br__chips a:hover{ color: #fff; border-color: rgba(0,180,247,.5); background: rgba(0,180,247,.12); }
.sl-module--why .why-cap{ text-align: center; margin-top: 24px; font-size: 13px; color: var(--sl-ink-dim); }
.sl-module--why .why-cap b{ color: #fff; font-weight: 600; }

/* ----- reason 02 — business-impact chart, small HR-driven cap ----- */
.sl-module--why .why-chart{ width: 100%; max-width: 380px; margin: 0 auto; padding-top: 40px; }
.sl-module--why .why-chart__bars{ display: flex; align-items: flex-end; gap: 16px; height: 180px; padding: 0 4px 0; border-bottom: 1px solid var(--sl-beige-line); }
.sl-module--why .why-chart__bar{ flex: 1; height: 0; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, rgba(0,180,247,.55), rgba(0,180,247,.22)); align-self: flex-end; transition: height 1s var(--sl-ease-out); }
.sl-module--why .sl-r-viz.is-visible .why-chart__bar{ height: var(--h, 50%); }
.sl-module--why .why-chart__bar:nth-child(1){ transition-delay: .15s; }
.sl-module--why .why-chart__bar:nth-child(2){ transition-delay: .28s; }
.sl-module--why .why-chart__bar:nth-child(3){ transition-delay: .41s; }
.sl-module--why .why-chart__bar:nth-child(4){ transition-delay: .54s; }
.sl-module--why .why-chart__bar--hr{ transition-delay: .67s; position: relative; overflow: visible; }
.sl-module--why .why-chart__hrcap{ position: absolute; left: 0; right: 0; top: 0; height: 24%; border-radius: 6px 6px 0 0;
  background: var(--sl-brand-gradient); box-shadow: 0 0 0 1px rgba(110,206,83,.3), 0 10px 22px -8px rgba(52,201,139,.55);
  transform: scaleY(0); transform-origin: bottom; opacity: 0; transition: transform .55s var(--sl-ease-spring) 1.2s, opacity .3s ease 1.2s; }
.sl-module--why .sl-r-viz.is-visible .why-chart__hrcap{ transform: scaleY(1); opacity: 1; }
.sl-module--why .why-chart__hrlbl{ position: absolute; left: 50%; top: -25px; transform: translateX(-50%); white-space: nowrap; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: #fff; background: var(--sl-brand-gradient); padding: 3px 10px; border-radius: 999px; box-shadow: 0 7px 16px -6px rgba(0,180,247,.55); opacity: 0; transition: opacity .35s ease 1.5s; }
.sl-module--why .sl-r-viz.is-visible .why-chart__hrlbl{ opacity: 1; }
.sl-module--why .why-chart__note{ font-size: 11.5px; color: var(--sl-dark-ink-faint); margin-top: 18px; line-height: 1.45; }
.sl-module--why .why-chart__note b{ color: var(--sl-dark-ink-dim); font-weight: 600; }
.sl-module--why .why-chart__kpis{ display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.sl-module--why .why-kpi{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #0b7a55; background: rgba(52,201,139,.12); border: 1px solid rgba(52,201,139,.3); padding: 7px 13px; border-radius: 999px; }
.sl-module--why .why-kpi svg{ width: 13px; height: 13px; }

/* ----- reason 03 — busy-work flips manual → automated ----- */
.sl-module--why .why-bw{ width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; gap: 9px; }
.sl-module--why .why-bw__row{ display: flex; align-items: center; gap: 11px; padding: 12px 15px; border-radius: 11px; background: rgba(255,255,255,.04); border: 1px solid var(--sl-dark-line-2); font-size: 13px; color: var(--sl-ink-dim); position: relative; }
.sl-module--why .why-bw__row:nth-child(1){ --d: 0s; }
.sl-module--why .why-bw__row:nth-child(2){ --d: .35s; }
.sl-module--why .why-bw__row:nth-child(3){ --d: .7s; }
.sl-module--why .why-bw__row:nth-child(4){ --d: 1.05s; }
.sl-module--why .why-bw__row:nth-child(5){ --d: 1.4s; }
.sl-module--why .why-bw__dot{ width: 9px; height: 9px; border-radius: 50%; background: #e0524a; flex-shrink: 0; animation: whyBwDot 6s ease-in-out infinite var(--d); }
.sl-module--why .why-bw__t{ flex: 1; min-width: 0; animation: whyBwText 6s ease-in-out infinite var(--d); }
.sl-module--why .why-bw__tag{ font-family: var(--sl-mono); font-size: 10.5px; letter-spacing: .03em; flex-shrink: 0; position: relative; display: inline-grid; justify-items: end; }
.sl-module--why .why-bw__tag span{ grid-area: 1/1; white-space: nowrap; }
.sl-module--why .why-bw__tag .m{ color: #e0857f; animation: whyBwM 6s ease-in-out infinite var(--d); }
.sl-module--why .why-bw__tag .a{ color: var(--sl-accent-2); opacity: 0; animation: whyBwA 6s ease-in-out infinite var(--d); }
@keyframes whyBwDot { 0%,18% { background: #e0524a; box-shadow: 0 0 0 0 rgba(224,82,74,.2); } 42%,82% { background: #34c98b; box-shadow: 0 0 7px rgba(52,201,139,.6); } 100% { background: #e0524a; } }
@keyframes whyBwText { 0%,18% { color: var(--sl-ink-dim); } 42%,82% { color: #fff; } 100% { color: var(--sl-ink-dim); } }
@keyframes whyBwM { 0%,18% { opacity: 1; } 38%,86% { opacity: 0; } 100% { opacity: 1; } }
@keyframes whyBwA { 0%,22% { opacity: 0; } 42%,82% { opacity: 1; } 96%,100% { opacity: 0; } }
.sl-module--why .why-bw__foot{ margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--sl-dark-line); font-size: 12.5px; color: var(--sl-ink-dim); }
.sl-module--why .why-bw__foot b{ color: #fff; font-weight: 600; }

/* ----- final CTA ----- */
.sl-module--why .why-cta{ text-align: center; }
.sl-module--why .why-cta h3{ font-size: clamp(24px,2.6vw,32px); font-weight: 600; color: #fff; letter-spacing: -.02em; margin: 0 0 22px; }
.sl-module--why .why-cta__btns{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .sl-module--why .why-3{ animation: none; }
  .sl-module--why .why-br__path{ opacity: 1 !important; transform: none !important; animation: none !important; }
  .sl-module--why .why-br__wire path{ stroke-dashoffset: 0 !important; animation: none !important; }
  .sl-module--why .why-chart__bar{ height: var(--h,50%) !important; transition: none; }
  .sl-module--why .why-chart__hrcap{ transform: none !important; opacity: 1 !important; }
  .sl-module--why .why-chart__hrlbl{ opacity: 1 !important; }
  .sl-module--why .why-bw__dot, .sl-module--why .why-bw__t, .sl-module--why .why-bw__tag{ animation: none !important; }
}

/* ==========================================================================
   Utility: .blurred-background — frosted-glass Backdrop (z.B. fuer Menue/Overlay).
   Blurrt, was hinter dem Element liegt, + leichter transluzenter Tint fuer Kontrast.
   Tint bei Bedarf pro Einsatz ueberschreiben (background-color).
   ========================================================================== */
.blurred-background{
  background-color: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
}
/* dunkle Variante, falls auf dunklem Grund genutzt */
.blurred-background.is-dark{
  background-color: rgba(14, 19, 31, .6);
}

/* ==========================================================================
   Fix: Workspace-v2-Seite nutzt Webflow-native .btn-ghost (eigenes --ink-System).
   Eine generische Regel `a:hover{color:#32343a}` graute den Ghost-Button-Text auf
   Hover (er ist ein <a>, und .btn-ghost:hover setzte keine Farbe). .btn-ghost:hover
   (0,2,0) schlägt a:hover (0,1,1) -> Text bleibt hell auf Dunkel. on-beige bleibt dunkel.
   (.btn-ghost + --ink existieren nur auf dieser Seite -> kein Effekt anderswo.)
   ========================================================================== */
.btn-ghost:hover{ color:var(--ink); border-color:rgba(255,255,255,.42); }
nav.top.on-beige .btn-ghost:hover{ color:var(--dark-ink); border-color:var(--beige-line-2); }


/* ==========================================================================
   WEBFLOW-LEAK-GUARD — neutralisiert Template-/Altlast-CSS auf Live-Seiten
   (UC-Template-Wrapper vererbt u.a. text-align:center; Webflow setzt eigene
   Heading-Farben/-Weights). Sections setzen Abweichungen explizit.
   ========================================================================== */
.sl-module { text-align: left; }
/* KEINE heading-Regeln hier: (0,1,1) wuerde Section-Zentrierungen wie
   .hic-h2/.nx2c__h2 { text-align:center } (0,1,0) ueberstimmen — gelernt 2026-07-19.
   Die Modul-Basis oben kappt die Template-Vererbung bereits. */
/* Doppelklassig (0,2,0): schlaegt Template-Embed-Kopien von .sl-module{color:var(--sl-ink)},
   egal in welcher Ladereihenfolge. */
.sl-module.sl-section-white { background: #fff; color: var(--sl-dark-ink); }
.sl-module.sl-section-cream { background: var(--nx-cream, #f8f5f2); color: var(--sl-dark-ink); }
/* ==========================================================================
   Sprad Landing — NX Theme  ("New Experience", Redesign 2026-07)
   Helleres PastaHR-inspiriertes Layer ÜBER dem bestehenden --sl- System.
   Cream-Canvas + farbige Sky-Panels + Float-Cards. Alles auf .sl-module gescoped.
   Dunkle Kontrast-Blöcke (Hero, Big-Picture) bringen ihr eigenes Scoped-CSS mit.
   ========================================================================== */

/* ---------- Cream canvas section ---------- */
.sl-section-cream {
  background: var(--nx-cream, #f6f2ea);
  color: var(--sl-dark-ink);
}
.sl-section-cream .sl-h1,
.sl-section-cream .sl-h2,
.sl-section-cream .sl-h3 { color: var(--sl-dark-ink); }
.sl-section-cream .sl-sub { color: var(--sl-dark-ink-dim); }
/* gradient-underline phrase keeps DARK text on the light canvas (default .sl-hl is white for dark sections) */
.sl-section-cream .sl-hl,
.sl-section-cream .nx-h-xl .sl-hl { color: var(--sl-dark-ink); -webkit-text-fill-color: var(--sl-dark-ink); }

/* Universeller heller Grundton (Jürgen 2026-07-18): #f8f5f2 ersetzt das alte Beige —
   gilt ab sofort überall (auch Original-Sections via --sl-beige-Override). */
:root { --nx-cream: #f8f5f2; --nx-cream-2: #f1ece6; --nx-ink: #14161c; --nx-card: #f8f4ee; --sl-beige: #f8f5f2; --sl-beige-2: #f1ece6; --sl-beige-3: #fbf9f7; }

/* Weiße Section (PastaHR-Wechsel: weiß ↔ cream). Karten auf Weiß tragen
   den zarten Cream/Rosé-Ton (--nx-card) — NICHT cream auf cream. */
.sl-section-white { background: #fff; color: var(--sl-dark-ink); }
.sl-section-white .sl-hl { color: var(--sl-dark-ink); -webkit-text-fill-color: var(--sl-dark-ink); }

/* ---------- Blue eyebrow (PastaHR-Stil, klein, kräftig) ---------- */
.nx-eyebrow {
  font-family: var(--sl-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--sl-grad-blue-2);
  margin: 0 0 18px;
  display: inline-flex; align-items: center; gap: 8px;
}
.nx-eyebrow--dim { color: #4f7fa0; }

/* ---------- Section heading helpers ---------- */
.nx-center { text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; }
/* 1:1 wie das Original-Headline-System (.sl-h1/.sl-h2): weight 500 — damit
   die .sl-hl-Phrase (ebenfalls 500) nahtlos in der Headline sitzt. */
.nx-h-xl {
  font-size: clamp(34px, 4.6vw, 60px); line-height: 1.06; letter-spacing: -.02em;
  font-weight: 500; margin: 0 0 20px;
}
.nx-lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--sl-dark-ink-dim); margin: 0; }

/* ---------- Demo/ghost text link (PastaHR "Jetzt Demo →") ---------- */
.nx-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 16px; font-weight: 500; color: var(--nx-ink); text-decoration: none;
  transition: gap .2s var(--sl-ease-out);
}
.nx-link .nx-link__arr {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px;
  border: 1px solid rgba(11,14,21,.18); color: var(--nx-ink);
  transition: transform .25s var(--sl-ease-out), background .2s, border-color .2s;
}
.nx-link:hover { gap: 16px; }
.nx-link:hover .nx-link__arr { background: var(--nx-ink); color: #fff; border-color: var(--nx-ink); transform: rotate(-2deg); }

/* ==========================================================================
   SKY PANELS  — weiche Farbverläufe hinter Mock-UI Screenshots
   ========================================================================== */
.nx-sky {
  position: relative; border-radius: var(--sl-r-xl);
  overflow: hidden; isolation: isolate;
  min-height: 480px;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.nx-sky::before { /* soft cloud wisps */
  content: ""; position: absolute; inset: -20%; z-index: -1; opacity: .35;
  background:
    radial-gradient(60% 45% at 25% 25%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(50% 40% at 80% 70%, rgba(255,255,255,.55), transparent 70%);
  filter: blur(6px);
}
.nx-sky--green  { background: url(https://cdn.prod.website-files.com/6846e62208b103688517c6a6/6a5acc2c12d7108d8d94d57e_paint-bg6-green.webp) center/cover no-repeat; }
.nx-sky--gold   { background: url(https://cdn.prod.website-files.com/6846e62208b103688517c6a6/6a5acc2ca13ec6a59fd1f465_paint-bg3-yellow.webp) center/cover no-repeat; }
.nx-sky--blue   { background: url(https://cdn.prod.website-files.com/6846e62208b103688517c6a6/6a5acc2c3c81d378d0dc4270_paint-bg1-blue.webp) center/cover no-repeat; }
.nx-sky--violet { background: url(https://cdn.prod.website-files.com/6846e62208b103688517c6a6/6a5acc2c7feef56a6502da53_paint-bg5-dark-blue.webp) center/cover no-repeat; }
.nx-sky--rose   { background: url(https://cdn.prod.website-files.com/6846e62208b103688517c6a6/6a5acc2c3adf8fadfa9d77c6_paint-bg2-yellow-orange.webp) center/cover no-repeat; }

/* the overhanging screenshot frame */
.nx-shot {
  width: 100%; max-width: 560px; border-radius: 14px;
  background: #fff; border: 1px solid rgba(11,14,21,.07);
  box-shadow: 0 30px 60px -30px rgba(20,30,50,.5), 0 8px 20px -12px rgba(20,30,50,.3);
  overflow: hidden;
}
.nx-shot__bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  border-bottom: 1px solid rgba(11,14,21,.06); background: #fbfbfc;
}
.nx-shot__dot { width: 10px; height: 10px; border-radius: 50%; background: #e0e2e6; }
.nx-shot__dot:nth-child(1){ background:#ff6058; } .nx-shot__dot:nth-child(2){ background:#ffbd2e; } .nx-shot__dot:nth-child(3){ background:#28c840; }
.nx-shot__url { margin-left: 8px; height: 20px; flex: 1; border-radius: 6px; background: #eef0f2; }
.nx-shot__body { padding: 18px; }

/* small floating card that overhangs the panel */
.nx-float {
  position: absolute; background: #fff; border-radius: 14px;
  border: 1px solid rgba(11,14,21,.06);
  box-shadow: 0 20px 45px -20px rgba(20,30,50,.45);
  padding: 14px 16px; z-index: 3;
}
.nx-float--tr { top: 34px; right: 20px; }
.nx-float--br { bottom: 30px; right: 26px; }
.nx-float--bl { bottom: 40px; left: 18px; }

/* skeleton lines for placeholder UI */
.nx-sk { height: 10px; border-radius: 5px; background: #e8eaee; display: block; }
.nx-sk + .nx-sk { margin-top: 9px; }
.nx-sk--60 { width: 60%; } .nx-sk--40 { width: 40%; } .nx-sk--80 { width: 80%; } .nx-sk--30 { width: 30%; }
.nx-av { width: 40px; height: 40px; border-radius: 50%; background: #d3d7de center/cover no-repeat; flex: none; }
.nx-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.nx-badge--green { background: var(--sl-success-light); color: var(--sl-success); }
.nx-badge--blue  { background: rgba(0,180,247,.12); color: #0784b8; }
.nx-badge--amber { background: #fef3d6; color: #a06a12; }
.nx-badge--red   { background: var(--sl-error-light); color: var(--sl-error); }

/* ==========================================================================
   FEATURE BLOCK  — 2-spaltig: kurzer Text | Sky-Panel (alternierend)
   ========================================================================== */
.nx-feat { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: center; }
.nx-feat + .nx-feat { margin-top: 172px; }
.nx-feat--rev .nx-feat__text { order: 2; }
.nx-feat--rev .nx-feat__media { order: 1; }
.nx-feat__ico {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--nx-ink); color: #fff; margin-bottom: 24px;
}
.nx-feat__ico svg { width: 24px; height: 24px; }
.nx-feat__ico--light { background: #fff; color: var(--nx-ink); border: 1px solid rgba(11,14,21,.1); }
.nx-feat h3 { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; margin: 0 0 20px; }
.nx-feat__text p { font-size: 18px; line-height: 1.6; color: var(--sl-dark-ink-dim); margin: 0 0 28px; max-width: 30em; }

@media (max-width: 900px) {
  .nx-feat { grid-template-columns: 1fr; gap: 36px; }
  .nx-feat + .nx-feat { margin-top: 104px; }
  .nx-feat--rev .nx-feat__text { order: 2; } .nx-feat--rev .nx-feat__media { order: 1; }
  .nx-sky { min-height: 360px; padding: 28px; }
}

/* ==========================================================================
   PROBLEM SECTION  — Status Quo, 3 Nachteil-Cards
   ========================================================================== */
.nx-prob__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: 56px; }
.nx-prob__card {
  background: var(--nx-cream-2); border-radius: var(--sl-r-lg);
  padding: 34px 30px 30px; text-align: center;
  border: 1px solid rgba(11,14,21,.05);
}
.nx-prob__card h4 { font-size: 19px; font-weight: 600; margin: 0 0 26px; color: var(--sl-dark-ink); }
.nx-prob__viz { min-height: 190px; display: grid; place-items: center; }
@media (max-width: 860px) { .nx-prob__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   COMPLIANCE SECTION  — 2 große helle Cards
   ========================================================================== */
.nx-comp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 56px; }
.nx-comp__card {
  background: var(--nx-cream-2); border-radius: var(--sl-r-xl);
  padding: 48px; text-align: center; border: 1px solid rgba(11,14,21,.05);
}
.nx-comp__viz { min-height: 240px; display: grid; place-items: center; margin-bottom: 8px; }
.nx-comp__card h4 { font-size: 22px; font-weight: 600; margin: 0 0 14px; }
.nx-comp__card p { font-size: 15px; line-height: 1.6; color: var(--sl-dark-ink-dim); max-width: 32em; margin: 0 auto; }
@media (max-width: 860px) { .nx-comp__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FEATURE GRID  — "Entdecke weitere Funktionen", 6 Cards
   ========================================================================== */
.nx-fgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: 56px; }
.nx-fgrid__card {
  position: relative;
  background: var(--nx-cream-2); border-radius: var(--sl-r-lg);
  padding: 26px; border: 1px solid rgba(11,14,21,.05);
  transition: transform .3s var(--sl-ease-out), box-shadow .3s;
}
.nx-fgrid__card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(20,30,50,.4); }
.nx-fgrid__viz { min-height: 210px; border-radius: var(--sl-r-md); background: #fff; border: 1px solid rgba(11,14,21,.05); margin-bottom: 22px; padding: 18px; overflow: hidden; position: relative; }
.nx-fgrid__card h4 { font-size: 19px; font-weight: 600; margin: 0 0 8px; }
.nx-fgrid__card p { font-size: 14.5px; line-height: 1.55; color: var(--sl-dark-ink-dim); margin: 0; }
@media (max-width: 860px) { .nx-fgrid { grid-template-columns: 1fr; } }

/* ==========================================================================
   STAT STRIP  — kleine Kennzahlen-Reihe
   ========================================================================== */
.nx-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 56px; }
.nx-stat { text-align: center; }
.nx-stat b { display: block; font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.nx-stat span { display: block; margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sl-dark-ink-faint); }

/* ---------- gentle float loop for overhanging cards ---------- */
@keyframes nxBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.nx-bob { animation: nxBob 5s var(--sl-ease-out) infinite; }
.nx-bob--slow { animation-duration: 7s; }
@media (prefers-reduced-motion: reduce) { .nx-bob { animation: none; } }

/* GENERATED by build/build_home_usecases.py — home-usecases section styles.
   Central (bundled into the global stylesheet); the section HTML carries NO <style>.
   1:1 port of the /workspace usecases-rich boxes, on the global --sl- tokens.
   Every selector scoped under #home-uc so it beats the legacy Webflow head reset
   .sl-module *{margin:0;padding:0}. */
#home-uc .fg-cyc{display:inline-block;width:27px;height:27px;position:relative;vertical-align:middle;flex-shrink:0;transform:translate(3px,0)}
#home-uc .fg-cyc .ti{position:absolute;inset:0;border-radius:6px;display:grid;place-items:center;
  color:#fff;font-size:8.5px;font-weight:700;font-family:var(--sl-mono);letter-spacing:-.02em;
  opacity:0;transform:scale(.6) rotate(-8deg);transition:opacity .45s var(--sl-ease-out), transform .45s var(--sl-ease-spring);
  box-shadow:0 2px 5px rgba(11,13,16,.18)}
#home-uc .fg-cyc .ti.on{opacity:1;transform:none}
#home-uc .fg-cyc .ti img{width:18px;height:18px;display:block}
#home-uc .fg-cyc .ti-logo{background:#fff;border:1px solid rgba(11,13,16,.08)}
#home-uc .fg-cyc .ti-logo img{width:19px;height:19px;object-fit:contain;border-radius:4px}
#home-uc .fg-cyc .ti-atlas{background:rgba(0,180,247,.14)!important;border:1px solid rgba(0,180,247,.30)}
#home-uc .fg-cyc .ti-atlas img{width:19px;height:19px}
#home-uc .fg-dark .fg-cyc .ti-logo{background:#fff;border-color:rgba(255,255,255,.14)}
#home-uc .fg-cyc-lg{width:44px!important;height:44px!important;transform:translate(4px,0)!important}
#home-uc .fg-cyc-lg .ti{border-radius:11px}
#home-uc .fg-cyc-lg .ti img, #home-uc .fg-cyc-lg .ti-logo img, #home-uc .fg-cyc-lg .ti-atlas img{width:30px!important;height:30px!important;border-radius:6px}
/* ============================================================
   RICH USE-CASES — themed areas (lighter section)
   ============================================================ */
#home-uc{background:#f7f4ed;color:var(--sl-dark-ink);position:relative}
#home-uc .section-head{text-align:center;margin:0 auto 52px;max-width:820px}
#home-uc .section-head .kicker{justify-content:center}
#home-uc .h2{color:var(--sl-dark-ink)}
#home-uc .section-head .sub{color:var(--sl-dark-ink-dim)}
#home-uc .uc-areas{display:flex;flex-direction:column;gap:22px}

#home-uc .uc-area{
  --area:#0094d6; --area-soft:rgba(0,148,214,.10); --area-line:rgba(0,148,214,.30);
  background:#fff;border:1px solid var(--sl-beige-line);border-radius:26px;
  padding:36px 38px;position:relative;overflow:hidden;
  transition:box-shadow .35s var(--sl-ease-out), border-color .3s, transform .35s var(--sl-ease-out);
}
#home-uc .uc-area:hover{box-shadow:0 40px 80px -56px rgba(11,13,16,.28)}

#home-uc .uc-area-head{display:flex;align-items:center;gap:14px;margin-bottom:28px;flex-wrap:wrap}
#home-uc .uc-area-num{font-family:var(--sl-mono);font-size:13px;font-weight:600;color:var(--area);letter-spacing:.02em;
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--area-soft)}
#home-uc .uc-area-title{font-size:23px;font-weight:600;letter-spacing:-.02em;color:var(--sl-dark-ink)}
#home-uc .uc-area-sub{font-size:13px;color:var(--sl-dark-ink-faint);margin-left:-6px}
#home-uc .uc-area-link{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;
  color:var(--sl-dark-ink);padding:9px 15px;border-radius:999px;border:1px solid var(--sl-beige-line-2);transition:.2s}
#home-uc .uc-area-link:hover{background:var(--area-soft);border-color:var(--area-line);color:var(--area)}
#home-uc .uc-area-link .arr{width:18px;height:18px;border-radius:50%;background:var(--sl-dark-ink);color:#fff;
  display:grid;place-items:center;font-size:11px;transition:.2s}
#home-uc .uc-area-link:hover .arr{background:var(--area);transform:translateX(2px)}

/* featured row */
#home-uc .uc-feature{display:grid;grid-template-columns:1fr 1.04fr;gap:38px;align-items:center}
#home-uc .uc-feat-info{display:flex;flex-direction:column;gap:15px;align-items:flex-start}
#home-uc .uc-feat-top{display:flex;align-items:center;gap:13px}
#home-uc .uc-feat-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--area);
  background:var(--area-soft);flex-shrink:0}
#home-uc .uc-feat-ico svg{width:25px;height:25px}
#home-uc .uc-feat-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--sl-mono);font-size:10.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--area);font-weight:600;
  padding:5px 11px;border-radius:999px;background:var(--area-soft);border:1px solid var(--area-line)}
#home-uc .uc-feat-h{font-size:clamp(23px,2.4vw,31px);font-weight:600;letter-spacing:-.022em;line-height:1.14;color:var(--sl-dark-ink)}
#home-uc .uc-feat-p{font-size:15px;color:var(--sl-dark-ink-dim);line-height:1.55;max-width:44ch}
#home-uc .uc-feat-tags{display:flex;flex-wrap:wrap;gap:7px}
#home-uc .uc-feat-tags span{font-size:12px;color:var(--sl-dark-ink-dim);padding:5px 11px;border-radius:999px;
  background:var(--sl-beige-3);border:1px solid var(--sl-beige-line)}
#home-uc .uc-feat-cta{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--area);margin-top:4px}
#home-uc .uc-feat-cta .arr{width:21px;height:21px;border-radius:50%;background:var(--area);color:#fff;
  display:grid;place-items:center;font-size:11px;transition:transform .2s}
#home-uc .uc-feat-cta:hover .arr{transform:translateX(3px)}

/* divider + minis */
#home-uc .uc-divider{height:1px;background:var(--sl-beige-line);margin:32px 0 24px;position:relative}
#home-uc .uc-divider::after{content:"";position:absolute;left:0;top:0;width:56px;height:1px;background:var(--area);opacity:.55}
#home-uc .uc-minis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
#home-uc .uc-mini{display:flex;flex-direction:column;gap:9px;padding:18px 18px 16px;border-radius:16px;
  border:1px solid var(--sl-beige-line);background:var(--sl-beige-3);transition:.25s var(--sl-ease-out);
  cursor:pointer;position:relative;overflow:hidden}
#home-uc .uc-mini:hover{background:#fff;border-color:var(--area-line);transform:translateY(-3px);
  box-shadow:0 20px 36px -24px rgba(11,13,16,.28)}
#home-uc .uc-mini-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--area);background:var(--area-soft)}
#home-uc .uc-mini-ico svg{width:19px;height:19px}
#home-uc .uc-mini-h{font-size:15px;font-weight:600;color:var(--sl-dark-ink);letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
#home-uc .uc-mini-p{font-size:12.5px;color:var(--sl-dark-ink-dim);line-height:1.45}
#home-uc .uc-mini .mini-anim{margin-top:auto;padding-top:6px}
#home-uc .uc-mini.more{justify-content:center;background:linear-gradient(140deg,var(--area-soft),transparent 80%);
  border-style:dashed;border-color:var(--area-line)}
#home-uc .uc-mini.more .uc-mini-h{color:var(--area);font-size:14.5px}
#home-uc .uc-mini.more .uc-mini-p{color:var(--area);opacity:.8}
#home-uc .uc-mini.more .uc-mini-arrow{position:absolute;top:16px;right:16px;color:var(--area);font-size:15px}

#home-uc .uc-all{text-align:center;margin-top:40px}
#home-uc .uc-all-btn{display:inline-flex;align-items:center;gap:11px;padding:15px 28px;border-radius:999px;
  background:var(--sl-dark-ink);color:#fff;font-size:15.5px;font-weight:500;transition:.25s var(--sl-ease-out)}
#home-uc .uc-all-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -16px rgba(11,13,16,.5)}
#home-uc .uc-all-btn b{font-weight:700}
#home-uc .uc-all-btn .arr{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.16);
  display:grid;place-items:center;font-size:12px}
#home-uc .uc-all-note{margin-top:12px;font-size:13px;color:var(--sl-dark-ink-faint)}

@media(max-width:900px){#home-uc .uc-feature{grid-template-columns:1fr;gap:26px}#home-uc .uc-area{padding:28px 22px}}

/* ===== Process-animation component kit ===== */
#home-uc .proc{
  background:linear-gradient(180deg,#fff,#fbfaf5);border:1px solid var(--sl-beige-line-2);border-radius:18px;
  box-shadow:0 36px 70px -46px rgba(11,13,16,.45);overflow:hidden;position:relative;
}
#home-uc .proc-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--sl-beige-line);background:#fff}
#home-uc .proc-bar .pb-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;
  background:var(--area);flex-shrink:0}
#home-uc .proc-bar .pb-ico svg{width:16px;height:16px}
#home-uc .proc-bar .pb-title{font-size:13px;font-weight:600;color:var(--sl-dark-ink)}
#home-uc .proc-bar .pb-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;
  color:var(--sl-dark-ink-faint);font-family:var(--sl-mono);letter-spacing:.02em}
#home-uc .proc-bar .pb-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sl-accent-2);
  box-shadow:0 0 6px var(--sl-accent-2);animation:liveBlink 1.7s infinite}
@keyframes liveBlink{0%,100%{opacity:1}50%{opacity:.25}}
#home-uc .proc-body{padding:16px;display:flex;flex-direction:column;gap:10px;min-height:248px}

#home-uc .proc [data-step]{opacity:0;transform:translateY(9px);
  transition:opacity .5s var(--sl-ease-out), transform .5s var(--sl-ease-out)}
#home-uc .proc [data-step].on{opacity:1;transform:none}

/* person row */
#home-uc .pr{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--sl-beige-line);background:#fff}
#home-uc .pr-av{width:36px;height:36px;border-radius:50%;background-size:cover;background-position:center;
  flex-shrink:0;border:1px solid var(--sl-beige-line)}
#home-uc .pr-meta{min-width:0}
#home-uc .pr-name{font-size:13px;font-weight:600;color:var(--sl-dark-ink);line-height:1.2}
#home-uc .pr-role{font-size:11.5px;color:var(--sl-dark-ink-faint)}
#home-uc .pr-pill{margin-left:auto;font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;white-space:nowrap}
#home-uc .pr-pill.area{background:var(--area-soft);color:var(--area)}
#home-uc .pr-pill.done{background:rgba(52,229,195,.16);color:#08a47e;display:inline-flex;align-items:center;gap:5px}

/* chat bubble */
#home-uc .cb-row{display:flex;align-items:flex-end;gap:9px}
#home-uc .cb-row.end{justify-content:flex-end}
#home-uc .cb{max-width:80%;padding:11px 14px;border-radius:15px;font-size:13px;line-height:1.45}
#home-uc .cb.ask{background:var(--area);color:#fff;border-bottom-right-radius:5px}
#home-uc .cb.ans{background:#fff;border:1px solid var(--sl-beige-line);color:var(--sl-dark-ink);border-bottom-left-radius:5px}
#home-uc .cb-av{width:30px;height:30px;border-radius:50%;flex-shrink:0;background-size:cover;background-position:center;
  border:1px solid var(--sl-beige-line)}
#home-uc .cb-atlas{width:30px;height:30px;border-radius:9px;flex-shrink:0;background:var(--sl-brand-gradient);
  display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,180,247,.3)}
#home-uc .cb-atlas img{width:18px;height:18px}
#home-uc .cb .src{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:10.5px;
  color:var(--sl-dark-ink-faint);background:var(--sl-beige-3);padding:4px 9px;border-radius:7px;border:1px solid var(--sl-beige-line)}
#home-uc .cb .src::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--area)}

/* progress bars */
#home-uc .pgs{display:flex;flex-direction:column;gap:6px;padding:4px 2px}
#home-uc .pgs-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--sl-dark-ink-dim)}
#home-uc .pgs-top b{color:var(--sl-dark-ink);font-weight:600}
#home-uc .pgs-track{height:9px;border-radius:5px;background:var(--sl-beige-2);overflow:hidden}
#home-uc .pgs-fill{height:100%;width:0;border-radius:5px;background:var(--area);transition:width 1.1s var(--sl-ease-out) .15s}
#home-uc .proc [data-step].on .pgs-fill{width:var(--w,70%)}

/* checklist */
#home-uc .ck{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--sl-dark-ink);
  padding:9px 12px;border-radius:11px;border:1px solid var(--sl-beige-line);background:#fff}
#home-uc .ck-box{width:21px;height:21px;border-radius:7px;border:1.5px solid var(--sl-beige-line-2);
  display:grid;place-items:center;color:#fff;flex-shrink:0;font-size:11px;transition:.3s .15s}
#home-uc .proc [data-step].on .ck-box{background:var(--sl-accent-2);border-color:var(--sl-accent-2)}

/* generic card (summary / survey) */
#home-uc .pcard{padding:13px 15px;border-radius:12px;border:1px solid var(--area-line);
  background:linear-gradient(180deg,#fff,var(--area-soft))}
#home-uc .pcard-h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--sl-dark-ink);margin-bottom:7px}
#home-uc .pcard-h .dot{width:7px;height:7px;border-radius:50%;background:var(--area)}
#home-uc .pcard-p{font-size:12.5px;color:var(--sl-dark-ink-dim);line-height:1.45}
#home-uc .stars{display:flex;gap:3px;margin-top:4px}
#home-uc .stars svg{width:17px;height:17px;color:#f5a623}

/* mini anim: connected pulsing nodes */
#home-uc .mini-anim{display:flex;align-items:center;gap:0;height:12px}
#home-uc .mini-anim .mn{width:9px;height:9px;border-radius:50%;background:var(--area);opacity:.3;animation:mnPulse 2.2s infinite}
#home-uc .mini-anim .mn:nth-child(3){animation-delay:.4s}
#home-uc .mini-anim .mn:nth-child(5){animation-delay:.8s}
#home-uc .mini-anim .ml{height:2px;background:var(--area);opacity:.2;width:30px}
@keyframes mnPulse{0%,100%{opacity:.22;transform:scale(.78)}50%{opacity:1;transform:scale(1)}}

/* ============================================================
   USE-CASES v2 — clean, frameless, neutral
   ============================================================ */
#home-uc .uc-legend{display:flex;gap:20px;justify-content:center;margin-top:22px;flex-wrap:wrap}
#home-uc .uc-legend span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--sl-dark-ink-dim)}
#home-uc .uc-legend .lg{width:9px;height:9px;border-radius:3px}
#home-uc .uc-legend b{color:var(--sl-dark-ink);font-weight:600}

#home-uc .uc-area-head{display:flex;align-items:center;gap:12px;margin-bottom:26px}
#home-uc .uc-area-name{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:700;color:var(--sl-dark-ink);letter-spacing:-.02em}
#home-uc .uc-area-name .d{width:9px;height:9px;border-radius:50%;background:var(--area)}
#home-uc .uc-area-head .uc-area-link{margin-left:auto;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:13px;font-weight:500;
  color:var(--sl-dark-ink-dim);padding:7px 13px;border-radius:999px;border:1px solid var(--sl-beige-line);background:transparent;transition:.2s}
#home-uc .uc-area-head .uc-area-link:hover{color:var(--sl-dark-ink);border-color:var(--sl-beige-line-2);background:var(--sl-beige-3)}
#home-uc .uc-area-head .uc-area-link .arr{width:auto;height:auto;background:none;color:inherit;font-size:13px;transition:transform .2s}
#home-uc .uc-area-head .uc-area-link:hover .arr{transform:translateX(2px)}

#home-uc .uc-feature{display:grid;grid-template-columns:1fr 1.02fr;gap:40px;align-items:center}
#home-uc .uc-feat-info{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
#home-uc .uc-feat-info .uc-feat-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;background:#11151c}
#home-uc .uc-feat-info .uc-feat-ico svg{width:23px;height:23px}
#home-uc .uc-feat-top{display:flex;align-items:center;gap:13px;margin-bottom:8px}
#home-uc .uc-type{display:inline-flex;align-items:center;white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;border:none;color:var(--area);background:var(--area-soft)}
#home-uc .uc-type .d{width:6px;height:6px;border-radius:50%;background:var(--area)}
#home-uc .uc-feat-info .uc-feat-h{font-size:clamp(24px,2.5vw,33px);font-weight:600;letter-spacing:-.025em;line-height:1.12;color:var(--sl-dark-ink)}
#home-uc .uc-feat-info .uc-feat-p{font-size:15px;color:var(--sl-dark-ink-dim);line-height:1.55;max-width:42ch}
#home-uc .uc-btn{display:inline-flex;align-items:center;gap:9px;margin-top:4px;padding:11px 20px;border-radius:999px;
  background:var(--sl-accent);color:#fff;font-size:14px;font-weight:500;transition:.2s var(--sl-ease-out)}
#home-uc .uc-btn:hover{background:#33c4fb;transform:translateY(-1px);box-shadow:0 8px 20px -6px var(--sl-accent-glow)}
#home-uc .uc-btn .arr{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:11px;transition:transform .2s}
#home-uc .uc-btn:hover .arr{transform:translateX(2px)}

/* frameless process steps */
#home-uc .fsteps{position:relative;display:flex;flex-direction:column;gap:10px}
#home-uc .fsteps::before{content:"";position:absolute;left:36px;top:28px;bottom:28px;width:2px;
  background:linear-gradient(var(--area),transparent);opacity:.3;z-index:0}
#home-uc .fstep{display:flex;align-items:center;gap:13px;padding:12px 15px;border-radius:14px;
  border:1px solid var(--sl-beige-line);background:#faf9f5;position:relative;z-index:1;
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--sl-ease-out), transform .5s var(--sl-ease-out)}
#home-uc .fstep.on{opacity:1;transform:none}
#home-uc .fstep-av{width:42px;height:42px;border-radius:50%;background-size:cover;background-position:center;
  flex-shrink:0;border:2px solid #fff;box-shadow:0 1px 5px rgba(11,13,16,.14)}
#home-uc .fstep-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#11151c;color:#fff;flex-shrink:0}
#home-uc .fstep-ico svg{width:20px;height:20px}
#home-uc .fstep-tx{flex:1;min-width:0}
#home-uc .fstep-t{font-size:13.5px;font-weight:600;color:var(--sl-dark-ink);line-height:1.25}
#home-uc .fstep-s{font-size:11.5px;color:var(--sl-dark-ink-faint);margin-top:1px}
#home-uc .fstep-pill{margin-left:auto;font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;white-space:nowrap;flex-shrink:0}
#home-uc .fstep-pill.tint{background:var(--area-soft);color:var(--area)}
#home-uc .fstep-pill.warn{background:rgba(194,65,12,.12);color:#c2410c}
#home-uc .fstep-pill.ok{background:rgba(15,140,95,.13);color:#0b7a55;display:inline-flex;align-items:center;gap:5px}
#home-uc .fstep.result{background:#fff;border-color:var(--area-line);box-shadow:0 12px 26px -18px rgba(11,13,16,.34)}
#home-uc .fstep .stars{display:flex;gap:2px;margin-top:3px}
#home-uc .fstep .stars svg{width:14px;height:14px;color:#f5a623}

/* minis (lighter, neutral icons, no dot-anim) */
#home-uc .uc-minis{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-top:46px}
#home-uc .uc-mini{display:flex;flex-direction:column;gap:9px;padding:18px;border-radius:14px;
  border:1px solid var(--sl-beige-line);background:#f5f3ed;transition:.2s var(--sl-ease-out);cursor:pointer;overflow:visible}
#home-uc .uc-mini:hover{background:#fff;border-color:var(--sl-beige-line-2);transform:none;box-shadow:0 16px 32px -24px rgba(11,13,16,.3)}
#home-uc .uc-mini-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#11151c;background:#fff;border:1px solid var(--sl-beige-line)}
#home-uc .uc-mini-ico svg{width:18px;height:18px}
#home-uc .uc-mini-h{font-size:14.5px;font-weight:600;color:var(--sl-dark-ink);letter-spacing:-.01em}
#home-uc .uc-mini-p{font-size:12.5px;color:var(--sl-dark-ink-dim);line-height:1.45}
#home-uc .uc-mini.more{justify-content:center;background:transparent;border-style:dashed;border-color:var(--sl-beige-line-2)}
#home-uc .uc-mini.more .uc-mini-h{color:var(--sl-dark-ink)}
#home-uc .uc-mini.more .uc-mini-p{color:var(--sl-dark-ink-faint)}
#home-uc .uc-mini.more .uc-mini-arrow{position:absolute;top:16px;right:16px;color:var(--sl-dark-ink-faint);font-size:15px}

/* "Got a process" box */
#home-uc .uc-extra{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;
  background:#11151c;color:#fff;border-radius:24px;padding:46px 48px;margin-top:22px;position:relative;overflow:hidden}
#home-uc .uc-extra::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 75% at 88% 25%, rgba(0,180,247,.16), transparent 60%)}
#home-uc .uc-extra-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
#home-uc .uc-extra-ey{display:inline-flex;align-items:center;gap:8px;font-family:var(--sl-mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--sl-ink-dim);
  padding:6px 12px;border-radius:999px;border:1px solid var(--sl-dark-line-2);background:rgba(255,255,255,.03)}
#home-uc .uc-extra-ey .d{width:6px;height:6px;border-radius:50%;background:var(--sl-accent)}
#home-uc .uc-extra-h{font-size:clamp(26px,2.8vw,38px);font-weight:600;letter-spacing:-.025em;line-height:1.1;color:#fff}
#home-uc .uc-extra-p{font-size:15px;color:var(--sl-ink-dim);line-height:1.55;max-width:42ch}
#home-uc .uc-extra-cta{display:inline-flex;align-items:center;gap:9px;margin-top:4px;padding:13px 22px;border-radius:999px;
  background:var(--sl-accent);color:#fff;font-size:14.5px;font-weight:500;transition:.2s var(--sl-ease-out)}
#home-uc .uc-extra-cta:hover{transform:translateY(-1px);box-shadow:0 16px 32px -12px var(--sl-accent-glow)}
#home-uc .uc-extra-cta .arr{transition:transform .2s}
#home-uc .uc-extra-cta:hover .arr{transform:translateX(3px)}
#home-uc .uc-extra-demo{position:relative;z-index:2}
#home-uc .uc-prompt{display:flex;align-items:center;gap:11px;padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid var(--sl-dark-line-2);margin-bottom:12px}
#home-uc .uc-prompt .pi{width:30px;height:30px;border-radius:9px;background:var(--sl-brand-gradient);display:grid;place-items:center;flex-shrink:0}
#home-uc .uc-prompt .pi img{width:18px;height:18px}
#home-uc .uc-prompt .pt{font-size:13.5px;color:#fff;min-height:18px;line-height:1.35}
#home-uc .uc-prompt .car{display:inline-block;width:1.5px;height:14px;background:var(--sl-accent);margin-left:1px;vertical-align:-2px;animation:cblink 1s steps(1) infinite}
@keyframes cblink{50%{opacity:0}}
#home-uc .fsteps.dark{gap:9px}
#home-uc .fsteps.dark::before{background:linear-gradient(var(--sl-accent),transparent);opacity:.45}
#home-uc .fsteps.dark .fstep{background:rgba(255,255,255,.045);border-color:var(--sl-dark-line-2)}
#home-uc .fsteps.dark .fstep-t{color:#fff}
#home-uc .fsteps.dark .fstep-s{color:var(--sl-ink-faint)}
#home-uc .fsteps.dark .fstep-ico{background:rgba(255,255,255,.1)}
#home-uc .fsteps.dark .fstep-pill.tint{background:rgba(0,180,247,.16);color:#7fdcff}

/* ===== distinct process flows (right side) ===== */
#home-uc .fsteps.flow{gap:7px;max-width:350px;width:100%;margin:0 auto 18px}
#home-uc .fsteps.flow::before{display:none}
#home-uc .fsteps.flow [data-step]{opacity:0;transform:translateY(9px);transition:opacity .5s var(--sl-ease-out), transform .5s var(--sl-ease-out)}
#home-uc .fsteps.flow [data-step].on{opacity:1;transform:none}
#home-uc .fsteps.flow [data-step].on .pgs-fill{width:var(--w,70%)}
#home-uc .flow-trigger{display:inline-flex;align-items:center;gap:10px;align-self:center;padding:9px 14px;border-radius:12px;
  background:#fff;border:1px solid var(--sl-beige-line);box-shadow:0 6px 16px -10px rgba(11,13,16,.25)}
#home-uc .flow-trigger .ft-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--sl-beige-3);color:#11151c;background-size:cover;background-position:center;flex-shrink:0}
#home-uc .flow-trigger .ft-ic svg{width:15px;height:15px}
#home-uc .flow-trigger .ft-s{font-size:10.5px;color:var(--sl-dark-ink-faint);line-height:1.3}
#home-uc .flow-trigger .ft-n{font-size:13px;font-weight:600;color:var(--sl-dark-ink);line-height:1.3}
#home-uc .flow-conn{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:-1px 0}
#home-uc .flow-conn .ll{width:2px;height:12px;background:var(--sl-beige-line-2)}
#home-uc .flow-conn .lc{width:22px;height:22px;border-radius:50%;background:#16b364;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 4px rgba(22,179,100,.16);margin:3px 0}
#home-uc .flow-conn .lc svg{width:12px;height:12px}
#home-uc .flow-tag{align-self:center;background:#11151c;color:#fff;font-size:12px;font-weight:600;padding:7px 15px;border-radius:999px}
#home-uc .flow-card{background:#fff;border:1px solid var(--sl-beige-line);border-radius:14px;padding:14px 16px;box-shadow:0 14px 30px -22px rgba(11,13,16,.34)}
#home-uc .flow-card-h{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;color:var(--sl-dark-ink)}
#home-uc .flow-card-h .meta{font-size:11px;color:var(--sl-dark-ink-faint);font-weight:500;display:inline-flex;align-items:center;gap:5px}
#home-uc .flow-card-sep{height:1px;background:var(--sl-beige-line);margin:11px -16px}
#home-uc .flow-lbl{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--sl-dark-ink-faint);margin-bottom:7px}
#home-uc .flow-ins{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--area);background:var(--area-soft);padding:8px 11px;border-radius:9px;margin-bottom:6px}
#home-uc .flow-ins .n{font-family:var(--sl-mono);font-size:11px;color:var(--sl-dark-ink-faint)}
#home-uc .flow-sum{font-size:12px;color:var(--sl-dark-ink-dim);line-height:1.5}
#home-uc .av-stack{display:flex;align-items:center;margin-left:auto}
#home-uc .av-stack .a{width:30px;height:30px;border-radius:50%;border:2px solid #fff;background-size:cover;background-position:center;margin-left:-9px;box-shadow:0 1px 3px rgba(0,0,0,.16)}
#home-uc .av-stack .a:first-child{margin-left:0}
#home-uc .fstep .co-status{margin-left:auto;font-size:11.5px;font-weight:600;white-space:nowrap}
#home-uc .fstep .co-status.ok{color:#0b7a55}
#home-uc .fstep .co-status.book{color:var(--sl-accent)}
#home-uc .jrow{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--sl-dark-ink);padding:5px 0}
#home-uc .jck{color:#16b364;display:grid;place-items:center;font-size:13px;font-weight:800;flex-shrink:0;width:16px}
#home-uc .jpulse{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--sl-dark-ink)}
#home-uc .cb-line{display:flex;gap:8px;align-items:flex-end;margin-top:9px}
#home-uc .cb-line.end{justify-content:flex-end}
#home-uc .cb{max-width:82%;padding:9px 12px;border-radius:13px;font-size:12.5px;line-height:1.4}
#home-uc .cb.me{background:var(--area-soft);color:var(--sl-dark-ink);border-bottom-right-radius:4px}
#home-uc .cb.bot{background:var(--sl-beige-3);color:var(--sl-dark-ink);border-bottom-left-radius:4px}
#home-uc .cb.ok{background:rgba(15,140,95,.13);color:#0b7a55;font-weight:600}
#home-uc .cb-src{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:10px;color:var(--sl-dark-ink-faint);background:#fff;border:1px solid var(--sl-beige-line);padding:3px 7px;border-radius:6px;width:max-content}
#home-uc .cb-av{width:26px;height:26px;border-radius:50%;background-size:cover;background-position:center;flex-shrink:0}
#home-uc .hd-ic{width:24px;height:24px;border-radius:7px;background:var(--sl-brand-gradient);display:grid;place-items:center;flex-shrink:0}
#home-uc .hd-ic img{width:14px;height:14px}
#home-uc .src-slot{align-self:center;display:flex;align-items:center;justify-content:center}
#home-uc .src-badge{display:inline-flex;align-items:center;background:#11151c;color:#fff;font-size:13px;font-weight:600;
  padding:7px 16px;border-radius:999px;position:relative;overflow:hidden;transition:padding .45s var(--sl-ease-spring), background-color .55s ease}
#home-uc .src-badge .src-txt{white-space:nowrap;max-width:340px;overflow:hidden;
  transition:opacity .32s var(--sl-ease-out), transform .32s var(--sl-ease-out), max-width .45s var(--sl-ease-spring)}
#home-uc .src-badge.loading .src-txt{
  background:linear-gradient(90deg,#fff 0%,#fff 38%,#5b6470 50%,#fff 62%,#fff 100%);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:txtShine 1.7s linear infinite}
@keyframes txtShine{0%{background-position:130% 0}100%{background-position:-130% 0}}
#home-uc .src-tick{width:0;opacity:0;overflow:hidden;flex-shrink:0;color:#fff;display:grid;place-items:center;
  transition:width .45s var(--sl-ease-spring), opacity .35s}
#home-uc .src-tick svg{width:18px;height:18px}
#home-uc .src-badge.done{width:36px;height:36px;padding:0;border-radius:50%;background:#16b364;justify-content:center}
#home-uc .src-badge.done .src-txt{opacity:0;max-width:0;transition:opacity .12s ease, max-width .3s var(--sl-ease-spring)}
#home-uc .src-badge.fading .src-txt{opacity:0;transition:opacity .22s ease}
#home-uc .src-badge.done .src-tick{width:18px;opacity:1}
/* Active Sourcing icon variant (remove data-variant="icon" on #recruitFlow to revert to badge) */
#home-uc .src-bigicon{display:none}
#home-uc #recruitFlow[data-variant="icon"] .r-brief, #home-uc #recruitFlow[data-variant="icon"] .r-brief + .flow-conn, #home-uc #recruitFlow[data-variant="icon"] .src-slot{display:none}
#home-uc #recruitFlow[data-variant="icon"] .src-bigicon{display:grid;place-items:center;align-self:center;width:62px;height:62px;border-radius:18px;background:#11151c;color:#fff}
#home-uc #recruitFlow[data-variant="icon"] .src-bigicon svg{width:30px;height:30px}
#home-uc .r-rest > *{opacity:0;transform:translateY(9px);transition:opacity .5s var(--sl-ease-out), transform .5s var(--sl-ease-out)}
#home-uc .r-rest > *.on{opacity:1;transform:none}
#home-uc .r-ats{margin-top:12px}
#home-uc .ats-ind{width:18px;height:18px;border-radius:50%;border:2px solid var(--sl-beige-line-2);border-top-color:var(--area);animation:spin .8s linear infinite;flex-shrink:0;box-sizing:border-box}
#home-uc .r-ats.done .ats-ind{border:none;background:#16b364;color:#fff;display:grid;place-items:center;animation:none}
#home-uc .r-ats.done .ats-ind::after{content:"";width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
#home-uc .flow-tag.shine{position:relative;overflow:hidden}
#home-uc .flow-tag.shine::after{content:"";position:absolute;top:0;left:0;height:100%;width:55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-130%);animation:tagShine 2.8s ease-in-out infinite}
@keyframes tagShine{0%{transform:translateX(-130%)}60%,100%{transform:translateX(240%)}}
#home-uc .tag-tx{position:relative;z-index:1;transition:opacity .25s}
#home-uc .rc-stat{display:flex;align-items:center;gap:12px}
#home-uc .rc-num{font-size:23px;font-weight:700;color:var(--sl-dark-ink);letter-spacing:-.02em;min-width:44px;line-height:1}
#home-uc .rc-lbl{font-size:12px;color:var(--sl-dark-ink-dim);flex:1;line-height:1.3}
#home-uc .flow-card.small{padding:11px 13px;display:flex;align-items:center;gap:11px}
#home-uc .flow-card.small .ats-tx{flex:1;min-width:0}
#home-uc .ats-spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--sl-beige-line-2);border-top-color:var(--area);animation:spin .8s linear infinite;flex-shrink:0}

@media(max-width:900px){
  #home-uc .uc-extra{grid-template-columns:1fr;gap:28px;padding:34px 26px}
}
/* shared flow upgrades */
#home-uc .fsteps.flow{min-height:300px;justify-content:center}
#home-uc .ic-atlas-sm{width:19px;height:19px;border-radius:5px;background:rgba(0,180,247,.14);color:#fff;display:inline-grid;place-items:center;font-size:10px;font-weight:700;flex-shrink:0;overflow:hidden}
#home-uc .ic-atlas-sm img{width:15px;height:15px;object-fit:contain;display:block}
#home-uc .sum-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--sl-dark-ink);padding:7px 0}
#home-uc .sum-row + .sum-row{border-top:1px solid var(--sl-beige-line)}
#home-uc .sum-av{width:25px;height:25px;border-radius:50%;background-size:cover;background-position:center;flex-shrink:0;border:1px solid var(--sl-beige-line)}
#home-uc .sum-row .tag{margin-left:auto;font-size:11px;font-weight:600;color:var(--sl-dark-ink-faint);white-space:nowrap}
#home-uc .flow-card.small .fstep-ico{width:30px;height:30px;border-radius:9px}
#home-uc .flow-card.small .fstep-ico svg{width:16px;height:16px}
#home-uc .flow-card .stars{display:flex;gap:2px}
#home-uc .flow-card .stars svg{width:15px;height:15px;color:#f5a623}
#home-uc .teams-card{padding:0;overflow:hidden}
#home-uc .teams-bar{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--sl-beige-line);font-size:12.5px;font-weight:600;color:var(--sl-dark-ink);background:#f3f2f7}
#home-uc .teams-bar .meta{margin-left:auto;font-size:11px;color:var(--sl-dark-ink-faint);font-weight:500}
#home-uc .teams-logo{width:20px;height:20px;flex-shrink:0;border-radius:5px}
#home-uc .teams-body{padding:14px;display:flex;flex-direction:column;gap:10px}
#home-uc .atlas-flat{width:27px;height:27px;border-radius:8px;background:#fff;border:1px solid var(--sl-beige-line);display:grid;place-items:center;flex-shrink:0}
#home-uc .atlas-flat img{width:16px;height:16px}
#home-uc .atlas-flat.sm{width:24px;height:24px;border-radius:7px}
/* Teams window */
#home-uc .teams-win{display:flex;width:100%;border:1px solid var(--sl-beige-line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 16px 34px -22px rgba(11,13,16,.36)}
#home-uc .tw-rail{width:46px;background:#2b2b40;display:flex;flex-direction:column;align-items:center;gap:16px;padding:14px 0;flex-shrink:0}
#home-uc .tw-railitem{width:22px;height:22px;color:#c8c8d8;display:grid;place-items:center;opacity:.55;position:relative}
#home-uc .tw-railitem svg{width:18px;height:18px}
#home-uc .tw-railitem.active{opacity:1;color:#fff}
#home-uc .tw-railitem.active::before{content:"";position:absolute;left:-12px;top:0;bottom:0;width:3px;border-radius:2px;background:#7b83eb}
#home-uc .tw-main{flex:1;display:flex;flex-direction:column;min-width:0}
#home-uc .tw-head{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--sl-beige-line)}
#home-uc .tw-ava{width:28px;height:28px;border-radius:50%;background:#5b5fc7;color:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:700;flex-shrink:0}
#home-uc .tw-name{font-size:13px;font-weight:600;color:var(--sl-dark-ink);line-height:1.2}
#home-uc .tw-sub{font-size:11px;color:var(--sl-dark-ink-faint)}
#home-uc .tw-msgs{padding:14px;display:flex;flex-direction:column;gap:9px}
#home-uc .tw-msg{display:flex;align-items:flex-end;gap:8px}
#home-uc .tw-msg.out{justify-content:flex-end}
#home-uc .tw-bub{max-width:80%;padding:9px 12px;font-size:12.5px;line-height:1.4;border-radius:8px;color:var(--sl-dark-ink)}
#home-uc .tw-msg.in .tw-bub{background:#f0f0f4}
#home-uc .tw-msg.out .tw-bub{background:#e3e4f8}
#home-uc .tw-bub b{font-weight:700}
#home-uc .tw-bub.ok{color:#0b7a55;font-weight:600}
#home-uc .tw-bub .cb-src{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:10px;color:var(--sl-dark-ink-faint);background:#fff;border:1px solid var(--sl-beige-line);padding:3px 7px;border-radius:6px;width:max-content}
/* "Got a process" — clean white card */
#home-uc .uc-extra{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;background:#fff;border:1px solid var(--sl-beige-line);border-radius:24px;padding:40px 42px;margin-top:22px;overflow:visible}
#home-uc .uc-extra::before{display:none}
#home-uc .uc-extra-head{display:flex;flex-direction:column;gap:14px}
#home-uc .uc-extra .uc-extra-h{color:var(--sl-dark-ink);font-size:clamp(23px,2.5vw,32px);font-weight:600;letter-spacing:-.025em;line-height:1.14}
#home-uc .uc-extra .uc-extra-p{color:var(--sl-dark-ink-dim);font-size:15px;line-height:1.55;max-width:40ch}
#home-uc .uc-extra-form{display:flex;flex-direction:column}
#home-uc .uc-input{width:100%;min-height:96px;resize:none;border:1px solid var(--sl-beige-line-2);border-radius:14px;padding:14px 16px;font:inherit;font-size:14.5px;line-height:1.5;color:var(--sl-dark-ink);background:var(--sl-beige-3);outline:none;transition:.2s}
#home-uc .uc-input::placeholder{color:var(--sl-dark-ink-faint)}
#home-uc .uc-input:focus{border-color:var(--sl-accent);background:#fff;box-shadow:0 0 0 3px var(--sl-accent-soft)}
#home-uc .uc-sugs{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
#home-uc .uc-sug{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid var(--sl-beige-line-2);background:#fff;color:var(--sl-dark-ink-dim);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;transition:.18s}
#home-uc .uc-sug::before{content:"+";color:var(--sl-accent);font-weight:700;font-size:13px}
#home-uc .uc-sug:hover{border-color:var(--sl-accent);color:var(--sl-dark-ink);background:var(--sl-accent-soft)}
#home-uc .uc-submit{align-self:flex-start;margin-top:18px;display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:999px;background:var(--sl-accent);color:#fff;font:inherit;font-size:14.5px;font-weight:500;border:none;cursor:pointer;transition:.2s var(--sl-ease-out)}
#home-uc .uc-submit:hover{background:#33c4fb;transform:translateY(-1px);box-shadow:0 10px 24px -8px var(--sl-accent-glow)}
@media(max-width:900px){#home-uc .uc-extra{grid-template-columns:1fr;gap:24px;padding:30px 24px}}



#home-uc.usecases-rich{ padding:110px 0; font-family:var(--sl-sans,'Roboto',system-ui,sans-serif); }
/* CTA button text always white on the blue button (beat any inherited link colour) */
#home-uc .uc-btn, #home-uc .uc-btn:hover, #home-uc .uc-btn:visited{ color:#fff; }
#home-uc .uc-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
#home-uc .section-head{text-align:center;margin:0 auto 52px;max-width:820px}
#home-uc .h2{font-size:clamp(30px,4vw,44px);font-weight:600;letter-spacing:-.022em;line-height:1.1;margin:0;color:var(--sl-dark-ink)}
#home-uc .sub{font-size:17px;line-height:1.55;margin:16px 0 0;color:var(--sl-dark-ink-dim)}
#home-uc .kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--sl-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sl-dark-ink-faint);margin-bottom:14px}
#home-uc .kicker .kdot{width:6px;height:6px;border-radius:50%;background:var(--sl-accent);box-shadow:0 0 0 4px var(--sl-accent-soft)}
#home-uc .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--sl-ease-out),transform .7s var(--sl-ease-out)}
#home-uc .reveal.in{opacity:1;transform:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:720px){#home-uc.usecases-rich{padding:80px 0}}

/* ---- Referral-flow extras (channels, LinkedIn suggestions, share, rewards) ---- */
#home-uc .rf-chans{display:inline-flex;align-items:center;gap:5px}
#home-uc .rf-chans i{width:23px;height:23px;border-radius:7px;background:#fff;border:1px solid var(--sl-beige-line);display:grid;place-items:center;overflow:hidden}
#home-uc .rf-chans i img, #home-uc .rf-chans i svg{width:16px;height:16px;object-fit:contain;display:block}
#home-uc .rf-li{display:flex;align-items:center;gap:9px;margin-top:9px;padding:8px 10px;border-radius:9px;background:var(--sl-beige-3);border:1px solid var(--sl-beige-line);font-size:11.5px;font-weight:500;color:var(--sl-dark-ink-dim)}
#home-uc .rf-li__ic{width:22px;height:22px;border-radius:6px;background:#0a66c2;color:#fff;display:grid;place-items:center;flex-shrink:0}
#home-uc .rf-li__ic svg{width:13px;height:13px}
#home-uc .rf-li__avs{margin-left:auto;display:inline-flex}
#home-uc .rf-li__avs span{width:22px;height:22px;border-radius:50%;background-size:cover;background-position:center;border:2px solid #fff;margin-left:-7px;box-shadow:0 1px 2px rgba(11,13,16,.12)}
#home-uc .rf-share{display:flex;align-items:center;gap:13px}
#home-uc .rf-share__badge{width:34px;height:34px;border-radius:50%;background:#16b364;color:#fff;display:grid;place-items:center;flex-shrink:0;box-shadow:0 0 0 4px rgba(22,179,100,.16)}
#home-uc .rf-share__badge svg{width:18px;height:18px}
#home-uc .rf-share__chans{display:inline-flex;gap:8px}
#home-uc .rf-chip{width:32px;height:32px;border-radius:9px;background:#fff;border:1px solid var(--sl-beige-line);display:grid;place-items:center;overflow:hidden;opacity:.4;transform:scale(.9);animation:rfPop 4.4s ease-in-out infinite}
#home-uc .rf-chip img, #home-uc .rf-chip svg{width:19px;height:19px;object-fit:contain;display:block}
#home-uc .rf-ic-rounded{border-radius:5px}
#home-uc .rf-chip:nth-child(1){animation-delay:.0s}
#home-uc .rf-chip:nth-child(2){animation-delay:.4s}
#home-uc .rf-chip:nth-child(3){animation-delay:.8s}
#home-uc .rf-chip:nth-child(4){animation-delay:1.2s}
#home-uc .rf-chip:nth-child(5){animation-delay:1.6s}
@keyframes rfPop{0%,10%{opacity:.4;transform:scale(.9)}20%,52%{opacity:1;transform:scale(1)}70%,100%{opacity:.4;transform:scale(.9)}}
#home-uc .rf-reward{display:flex;flex-direction:column;gap:9px;padding:12px 14px;position:relative;overflow:hidden}
#home-uc .rf-reward__top{display:flex;align-items:center;gap:10px}
#home-uc .rf-reward__award{width:30px;height:30px;border-radius:9px;background:linear-gradient(180deg,#ffd76a,#f5a623);color:#7a4a00;display:grid;place-items:center;flex-shrink:0}
#home-uc .rf-reward__award svg{width:17px;height:17px}
#home-uc .rf-reward__pts{margin-left:auto;font-weight:700;font-size:15px;color:#16b364;letter-spacing:-.01em}
#home-uc .rf-reward__rows{display:flex;gap:8px}
#home-uc .rf-reward__row{flex:1;display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--sl-dark-ink-dim);padding:7px 10px;border-radius:8px;background:var(--sl-beige-3);border:1px solid var(--sl-beige-line)}
#home-uc .rf-reward__row b{margin-left:auto;color:#16b364;font-weight:700}
#home-uc .rf-reward__row svg{width:14px;height:14px;flex-shrink:0;color:var(--sl-dark-ink-faint)}
#home-uc .rf-confetti{position:absolute;top:8px;right:58px;width:64px;height:34px;pointer-events:none}
#home-uc .rf-confetti i{position:absolute;top:14px;width:5px;height:5px;border-radius:1px;opacity:0;animation:rfConf 4.4s ease-in-out infinite}
#home-uc .rf-confetti i:nth-child(1){left:8%;background:#00b4f7;animation-delay:.25s}
#home-uc .rf-confetti i:nth-child(2){left:34%;background:#6ece53;animation-delay:.45s}
#home-uc .rf-confetti i:nth-child(3){left:60%;background:#f5a623;animation-delay:.32s}
#home-uc .rf-confetti i:nth-child(4){left:84%;background:#a78bfa;animation-delay:.55s}
@keyframes rfConf{0%,16%{opacity:0;transform:translateY(8px) rotate(0)}26%{opacity:1}55%,100%{opacity:0;transform:translateY(-16px) rotate(180deg)}}