/* ============ Fonts ============ */
/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #fff;
  font-family: "Roobert", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; }
button { border: 0; background: none; font: inherit; cursor: pointer; }
h1, h2, h3, p { font-weight: inherit; }

.desktop {
  position: relative;
  width: 100%;
  max-width: 1728px;
  margin: 0 auto;
  padding-bottom: 120px;
  background: #fff;
  overflow: hidden;
}

/* ============ Header ============ */
.header {
  width: calc(100% - 32px);
  max-width: 1696px;
  height: 33px;
  margin: 16px auto 0;
  padding-left: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-left {
  height: 33px;
  display: flex;
  align-items: center;
  gap: 44px;
}
.logo-dock { width: 85.844px; height: 18px; }
.nav {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.nav-item { display: flex; align-items: center; gap: 4px; }
/* ---- Product dropdown: instant, no transition, generous hover zone ---- */
.nav-item.has-menu {
  position: relative;
  padding: 7px 10px;
  margin: -7px -10px;
  border-radius: 8px;
  cursor: pointer;
}
.nav-item.has-menu:hover { background: rgba(18, 23, 34, 0.04); }
.nav-menu {
  display: none;
  position: absolute;
  left: -14px;
  top: 100%;
  padding-top: 12px; /* transparent bridge so the hover never drops */
  z-index: 50;
}
.nav-item.has-menu:hover .nav-menu { display: block; }
.nav-menu-panel {
  display: flex;
  gap: 56px;
  padding: 28px 56px 32px 36px;
  background: #fff;
  border-radius: 16px;
  box-shadow:
    0 12px 32px 0 rgba(18, 23, 34, 0.1),
    0 2px 6px 0 rgba(18, 23, 34, 0.05),
    0 0 0 0.5px rgba(18, 23, 34, 0.1);
}
.nav-menu-col { display: flex; flex-direction: column; }
.nav-menu-heading {
  margin-bottom: 12px;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(18, 23, 34, 0.35);
  white-space: nowrap;
}
.nav-menu-item {
  padding: 8px 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 19.2px;
  color: #121722;
  white-space: nowrap;
}
.nav-menu-item:hover { color: #0068f9; }
.nav-link {
  font-weight: 500;
  font-size: 16px;
  line-height: 19.2px;
  color: #121722;
  white-space: nowrap;
}
.nav-caret { position: relative; width: 12px; height: 16px; }
.nav-caret img {
  position: absolute;
  left: 4.5px;
  top: 6.5px;
  width: 7px;
  height: 4px;
}
.header-right {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-top: 1px;
}
.btn {
  height: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 17px;
  line-height: 22px;
  color: #121722;
  white-space: nowrap;
}
.btn-ghost {
  background: #fff;
  border-radius: 6px;
  padding: 7px 20px 9px;
}
.btn-outline {
  background: #fff;
  border-radius: 100px;
  padding: 7px 20px 9px;
  /* même logique de bump que le CTA bleu, en gris */
  box-shadow:
    0 0.5px 1px 0 rgba(0, 0, 0, 0.08),
    inset 0 -1px 0 0 rgba(18, 23, 34, 0.1),
    inset 0 0 0 0.5px rgba(18, 23, 34, 0.15);
}
.btn-primary {
  background: #0068f9;
  border-radius: 100px;
  padding: 7px 20px 9px;
  color: #fff;
  box-shadow:
    0 0.5px 1px 0 rgba(0, 0, 0, 0.25),
    inset 0 -1px 0 0 rgba(11, 68, 147, 0.22),
    inset 0 0 0 0.5px rgba(11, 68, 147, 0.25);
}
/* hover: a light lift, nothing loud; pressed: inset shadow so it sinks */
.btn-ghost:hover { background: #f4f4f5; }
.btn-outline:hover { background: #f7f7f8; }
.btn-primary:hover,
.btn-generate:hover { background: #1372ff; }
.btn-ghost:active {
  background: #eeeeef;
  box-shadow: inset 0 2px 4px rgba(18, 23, 34, 0.1);
}
.btn-outline:active {
  background: #f2f2f3;
  box-shadow:
    inset 0 0 0 0.5px rgba(18, 23, 34, 0.15),
    inset 0 2px 4px rgba(18, 23, 34, 0.12);
}
.btn-primary:active,
.btn-generate:active {
  background: #005fe4;
  box-shadow:
    inset 0 0 0 0.5px rgba(11, 68, 147, 0.35),
    inset 0 2px 5px rgba(4, 36, 78, 0.4);
}

/* ============ Hero layout ============ */
/* --s scales the artwork panel (browser mock + chat) at breakpoints; the
   text column resizes through font steps instead of scaling */
.hero {
  --s: 1;
  /* the design height (878 x --s) is the max: short screens shrink the
     panel so the logo bar stays above the fold with some margin below;
     the artwork keeps its top anchoring and simply crops at the bottom.
     Floor: the chat must never ride up over the white browser content —
     528 x --s (its design top) + 240px reserved below it (chat + logo bar);
     below that height the page scrolls instead of shrinking further */
  --panel-h: min(calc(878px * var(--s)), max(calc(100dvh - 90px), calc(528px * var(--s) + 240px)));
  width: 100%;
  margin: 16px auto 0;
  padding: 0 16px 40px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.hero-left {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  height: var(--panel-h);
  padding: 0 16px 23px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-title {
  max-width: 100%;
  font-weight: 500;
  font-size: 60px;
  line-height: 64px;
  text-align: center;
  color: #121722;
}
.hero-sub {
  margin-top: 16px;
  width: 449px;
  max-width: 100%;
  font-weight: 400;
  font-size: 22px;
  line-height: 32px;
  text-align: center;
  color: rgba(18, 23, 34, 0.8);
}
/* mobile-only CTAs (replace the prompt widget under the subhead) */
.hero-ctas {
  display: none;
  margin-top: 32px;
  gap: 12px;
}

/* ---- Prompt widget ---- */
.prompt-widget {
  margin-top: 40px;
  width: 420px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.prompt-tabs {
  position: relative;
  width: 100%;
  height: 67px;
  margin-bottom: -27px;
  padding: 2px 2px 26px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  background: #fafafa;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 30px 30px 0 0;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.14);
  overflow: clip;
}
.prompt-tab {
  margin-top: 1px;
  /* 12px inline (Figma had 15) so all four labels, "Customer onboarding"
     included, fit the 490px widget */
  padding: 8px 12px 10px;
  border-bottom: 2px solid transparent;
  opacity: 0.6;
  cursor: pointer;
  /* opacity deliberately not transitioned: hover/active go dark instantly */
  transition: border-color 0.25s ease, margin 0.25s ease;
}
.prompt-tab:hover { opacity: 1; }
.prompt-tab.is-active {
  margin-top: 0;
  border-bottom-color: #0068f9;
  opacity: 1;
}
/* animated mode: per-tab border replaced by one sliding indicator */
.prompt-tabs.js .prompt-tab.is-active { border-bottom-color: transparent; }
.tab-indicator {
  position: absolute;
  top: 39px;
  height: 2px;
  background: #0068f9;
  pointer-events: none;
}
.prompt-tabs.ind-ready .tab-indicator {
  transition:
    left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.prompt-tab span {
  font-weight: 400;
  font-size: 15px;
  line-height: 16.8px;
  text-align: center;
  color: #121722;
  white-space: nowrap;
}
.prompt-card {
  position: relative;
  width: 100%;
  height: 135px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  border-radius: 16px 16px 30px 30px;
  box-shadow:
    0 2px 10px 0 rgba(0, 0, 0, 0.05),
    0 4px 4px 0 rgba(0, 0, 0, 0.01),
    0 0 0 0.5px rgba(0, 0, 0, 0.25);
}
.prompt-input {
  position: relative;
  height: 35px;
  border-radius: 4px;
}
.prompt-field {
  width: 100%;
  height: 100%;
  padding: 8px 12px 7px 10px;
  background: none;
  border: 0;
  outline: none;
  border-radius: 4px;
  font-family: "Roobert", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: #121722;
  caret-color: #0068f9;
}
.prompt-ghost-wrap {
  position: absolute;
  left: 10px;
  top: 8px;
  height: 20px;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.prompt-input.has-value .prompt-ghost-wrap { display: none; }
.prompt-ghost {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: #121722;
  white-space: pre;
}
.prompt-caret {
  flex-shrink: 0;
  width: 1px;
  height: 16px;
  background: #0068f9;
  /* static reference (Figma): caret sits at the start of the line */
  position: absolute;
  left: 0;
  top: 2px;
}
/* animated mode: the caret follows the end of the typed text */
.prompt-input.js .prompt-caret {
  position: static;
  animation: caret-blink 1.1s step-end infinite;
}
/* focused: the field's own caret takes over — never two carets at once,
   the ghost stays put as a plain placeholder until typing hides it */
.prompt-input.js:focus-within .prompt-caret { display: none; }
.prompt-input.js.is-typing .prompt-caret { animation: none; }
@keyframes caret-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}
.prompt-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.btn-generate {
  height: 36px;
  padding: 7px 14px 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0068f9;
  border-radius: 18px;
  font-weight: 600;
  font-size: 16px;
  line-height: 19.2px;
  color: #fff;
  white-space: nowrap;
  box-shadow:
    0 0.5px 1px 0 rgba(0, 0, 0, 0.25),
    inset 0 -1px 0 0 rgba(11, 68, 147, 0.22),
    inset 0 0 0 0.5px rgba(11, 68, 147, 0.25);
}
.btn-generate-arrow { position: relative; width: 16px; height: 16px; }
.btn-generate-arrow img {
  position: absolute;
  left: 2px;
  top: 4px;
  width: 12px;
  height: 10px;
}

/* ============ Hero right ============ */
.hero-right {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  height: var(--panel-h);
  overflow: hidden;
  border-radius: 16px;
}
/* the photo scales and shifts with the artwork cluster so the
   browser/portrait composition holds; the panel edge does the cropping
   (identical at full width where --s is 1 and the shift is 0) */
.hero-bg,
.hero-overlay {
  position: absolute;
  left: calc(-658px * var(--s) + (100% - 848px * var(--s)) * 0.354);
  top: calc(-6px * var(--s));
  width: calc(1864px * var(--s));
  height: calc(947px * var(--s));
  object-fit: cover;
  max-width: none;
}
.hero-overlay { pointer-events: none; }
/* responsive scale for the artwork cluster; the horizontal shift keeps the
   design's left/right margin ratio around the browser (0 at full width) */
.screens-fit {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translateX(calc((100% - 848px * var(--s)) * 0.354)) scale(var(--s));
  transform-origin: 0 0;
}

/* ---- Mini browser (native 1120px design, scaled to the 602.427px slot) ---- */
/* one shared zoom: the container dips to 0.95, the visible screen is swapped
   at the bottom of the dip (both at the exact same scale), then it comes back */
.screens {
  position: absolute;
  inset: 0;
  z-index: 0; /* isolates the screens below the portrait overlay */
  transform-origin: 388.21px 309.4px; /* center of the browser slot */
  transition: transform 0.17s ease-out;
}
.screens.is-zooming {
  transform: scale(0.95);
  transition-timing-function: ease-in;
}
/* /b: a touch softer dip */
.mode-b .screens.is-zooming { transform: scale(0.97); }
/* /b: the glow ring stays on the changed element with its gradient frozen
   mid-sweep — visible, but nothing moves */
.mode-b .ob-phases.is-glow::after,
.mode-b .pb-thumb.is-glow::after {
  animation: none;
  background-position: 50% 0;
}
.browser {
  position: absolute;
  left: 87px;
  top: 112px;
  width: 602.427px;
  height: 394.805px;
  background: #fff;
  border-radius: 6.455px;
  overflow: clip;
  box-shadow:
    0 2.152px 5.379px 0 rgba(18, 23, 34, 0.05),
    0 0.538px 1.076px 0 rgba(18, 23, 34, 0.1),
    0 0 0 0.269px rgba(18, 23, 34, 0.15);
}
.browser.is-off {
  visibility: hidden;
  pointer-events: none;
}
/* hero screens swap instantly on tab change — no slide, no fade */
/* applied for one frame while a scenario resets a screen, so the reset
   state lands instantly instead of playing the transitions backwards */
.browser.no-anim,
.browser.no-anim * {
  transition: none !important;
}
.browser-inner {
  width: 1120px;
  min-height: 734px;
  display: flex;
  flex-direction: column;
  background: #fff;
  transform: scale(0.537881);
  transform-origin: 0 0;
}
.browser-titlebar {
  flex-shrink: 0;
  width: 100%;
  height: 44.09px;
  padding: 4px 4px 4.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  box-shadow: inset 0 -0.5px 0 #d9d5cd;
}
.browser-titlebar-left {
  width: 555px;
  padding: 2px 1px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.browser-simbol {
  display: flex;
  align-items: flex-end;
  padding: 7px;
  border-radius: 4px;
}
.browser-simbol img { width: 24px; height: 16px; }
.browser-title {
  height: 30px;
  padding: 6px 0 7px;
  font-weight: 500;
  font-size: 14px;
  line-height: 16.8px;
  color: #121722;
  white-space: nowrap;
}
.browser-titlebar-right {
  width: 557px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.browser-avatars { display: flex; align-items: center; }
.browser-avatar-slot { position: relative; display: block; width: 16px; height: 24px; }
.browser-avatar-slot img,
.browser-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.browser-avatar-slot img { position: absolute; left: 0; top: 0; max-width: none; }
.browser-share {
  height: 31.6px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: #0068f9;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  line-height: 16.8px;
  color: #fff;
  white-space: nowrap;
}
.browser-tabs {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  padding: 0 8px;
  display: flex;
  align-items: flex-start;
  box-shadow: inset 0 -0.5px 0 0 rgba(0, 0, 0, 0.13);
}
.browser-tab {
  height: 42.6px;
  padding: 11px 16px 0 18px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  border-bottom: 1px solid transparent;
}
.browser-tab.is-active { border-bottom-color: #0068f9; }
/* each glyph sits at its Figma size inside a fixed 16px box */
.tab-ico {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.browser-tab img { opacity: 0.6; }
.browser-tab.is-active img { opacity: 1; }
.browser-tab span {
  font-weight: 500;
  font-size: 14px;
  line-height: 16.8px;
  color: rgba(18, 23, 34, 0.6);
  white-space: nowrap;
}
.browser-tab.is-active span { color: #121722; }
.browser-content {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: clip;
}
.browser-hero {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  /* roomier band: more air above/below the Acme <-> VIV marks, and extra
     blue at the bottom so the first section sits on it */
  padding: 52px 0 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #f4fbff;
}
/* pull the content up so the light blue passes behind section 1 — and keep
   the cards ABOVE the (position:relative) blue band so it stays behind */
.browser-cards { position: relative; z-index: 1; margin-top: -72px; }
.browser-hero p {
  font-weight: 500;
  font-size: 46px;
  line-height: 55.2px;
  color: #121722;
  white-space: nowrap;
}
/* the two companies' marks — circular, abstract, overlapping (Figma-style
   partnership avatars with a white ring so the overlap reads) */
.deal-logos { display: flex; align-items: center; }
.deal-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #f4fbff;
}
.deal-logo + .deal-logo { margin-left: -16px; }
/* same overlapping circles, avatar-sized, in the window title bar —
   center with the title text (the bar itself is flex-end) */
.deal-marks {
  display: flex;
  align-items: center;
  align-self: center;
  padding: 0 6px;
}
.deal-marks img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px #fff;
}
.deal-marks img + img { margin-left: -7px; }
.browser-cards {
  width: 100%;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card {
  width: 1056px;
  background: #fff;
  border-radius: 10px;
  box-shadow:
    0 1px 1px 0 rgba(18, 23, 34, 0.1),
    0 0 0 0.5px rgba(18, 23, 34, 0.15);
}
.card h3 {
  height: 27.89px;
  font-weight: 500;
  font-size: 22px;
  line-height: 26.4px;
  color: #121722;
  white-space: nowrap;
}
.card-split {
  padding: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.success-box {
  width: 374.03px;
  height: 253px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #f4fbff;
  border-radius: 3px;
}
.success-list { display: flex; flex-direction: column; gap: 6px; }
.success-list p {
  height: 20.45px;
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  color: #121722;
  white-space: nowrap;
}
.success-footer { display: flex; align-items: center; gap: 8px; }
.success-footer img { width: 16px; height: 16px; }
.success-footer span {
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  color: rgba(18, 23, 34, 0.6);
  white-space: nowrap;
}
.steps-box {
  flex: 1;
  min-width: 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.steps-header {
  height: 27.89px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.steps-progress { display: flex; align-items: center; gap: 8px; }
.steps-track {
  display: block;
  width: 60px;
  height: 6px;
  background: rgba(18, 23, 34, 0.1);
  border-radius: 9999px;
  overflow: clip;
}
.steps-fill {
  display: block;
  width: 40px;
  height: 6px;
  background: #0068f9;
  border-radius: 9999px;
}
.steps-count {
  width: 24px;
  font-weight: 400;
  font-size: 14px;
  line-height: 16.8px;
  text-align: right;
  color: rgba(18, 23, 34, 0.5);
  white-space: nowrap;
}
.steps-list { display: flex; flex-direction: column; }
.step-row {
  padding: 10px 0 10.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset 0 -0.5px 0 rgba(18, 23, 34, 0.06);
}
.step-row.is-last { padding: 10px 0; box-shadow: none; }
.step-left { display: flex; align-items: center; gap: 12px; }
.step-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(18, 23, 34, 0.2);
  border-radius: 50%;
}
.step-check.is-done { border: 0; background: #0068f9; }
.step-check img { width: 11px; height: 11px; }
.step-label {
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  color: #121722;
  white-space: nowrap;
}
.step-label.is-done {
  color: rgba(18, 23, 34, 0.4);
  text-decoration: line-through;
}
.step-chip {
  height: 32.6px;
  padding: 0 12px 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 16.8px;
  color: #121722;
  white-space: nowrap;
  box-shadow: 0 0 0 0.5px rgba(18, 23, 34, 0.15);
}
.step-chip img { width: 14px; height: 14px; }
.step-right { display: flex; align-items: center; gap: 10px; }
.step-status {
  height: 24.6px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  background: rgba(18, 23, 34, 0.06);
  border-radius: 9999px;
  font-weight: 500;
  font-size: 14px;
  line-height: 16.8px;
  color: rgba(18, 23, 34, 0.6);
  white-space: nowrap;
}
.step-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

/* ---- Hero deal room: tab panels, Business Case, Order Form, CFO cursor ---- */
.browser-cards.dp-panel { display: none; }
.browser-cards.dp-panel.is-on { display: flex; }

/* Business Case — document listing */
.bcase-card {
  width: 1056px;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.bcase-list { display: flex; flex-direction: column; }
.bcase-row {
  display: flex;
  gap: 24px;
  padding: 15px 0;
  box-shadow: inset 0 -0.5px 0 rgba(18, 23, 34, 0.08);
}
.bcase-row:last-child { box-shadow: none; }
.bcase-k {
  width: 240px;
  flex-shrink: 0;
  font-weight: 500;
  font-size: 16px;
  color: #121722;
  white-space: nowrap;
}
.bcase-v { font-size: 16px; color: rgba(18, 23, 34, 0.7); }

/* Order Form — pricing with a Sign CTA */
.order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.order-sign {
  height: 40px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0068f9;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  box-shadow: inset 0 0 0 0.5px rgba(11, 68, 147, 0.25), 0 0.5px 1px rgba(0,0,0,0.2);
}
.order-signed { display: none; align-items: center; gap: 6px; }
.order-signed img { width: 11px; height: 11px; }
.order-sign.is-signed { background: #0f9b6b; }
.order-sign.is-signed .order-sign-label { display: none; }
.order-sign.is-signed .order-signed { display: inline-flex; }

/* CFO/CEO cursor (native px inside the scaled mini-browser) */
.deal-cur {
  position: absolute;
  left: 0; top: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.3, 0.1, 0.25, 1), opacity 0.3s ease;
  will-change: transform;
}
.deal-cur.is-on { opacity: 1; }
.deal-cur img { display: block; width: 18px; height: 21px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.deal-cur-tag {
  position: absolute;
  left: 15px; top: 19px;
  padding: 2px 8px 3px;
  background: #0068f9;
  border-radius: 4px 12px 12px 12px;
  font-family: "Inter", -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}
.deal-cur--cfo .deal-cur-tag { background: #4db5ff; }
.deal-cur--ceo .deal-cur-tag { background: #0068f9; }
.deal-cur.is-click img { animation: deal-press 0.34s ease; }
.deal-cur::after {
  content: "";
  position: absolute; left: 5px; top: 5px; width: 16px; height: 16px;
  border-radius: 50%; background: rgba(0,104,249,0.4); opacity: 0;
  transform: translate(-50%,-50%) scale(0.2);
}
.deal-cur.is-click::after { animation: deal-ripple 0.5s ease-out; }
@keyframes deal-press { 0%,100%{transform:scale(1)} 42%{transform:scale(0.78)} }
@keyframes deal-ripple { 0%{opacity:0.55;transform:translate(-50%,-50%) scale(0.2)} 100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)} }

/* ============ Sales Room story: 5 Figma steps, shown one at a time ============ */
/* deliberately abrupt — no transitions, no fades: each step just replaces the
   previous one, so the sequence reads as clear discrete stages. Each step ships
   its own browser chrome, so on this screen the frame hides its own chrome and
   the window takes the design's native 736px height (zoom, not transform, so
   step 5 scrolls naturally). */
/* the frame keeps its own chrome (33 + 35 = 68px) and the window takes the
   design's page height (736 - 68 = 668), so everything stays inside the frame
   and nothing jumps between steps */
.sl-frame.sr-mode .sl-window { height: 668px; padding-top: 0; }
/* steps 1-4 ship a duplicate browser chrome — pull it out of view */
.sr-fit[data-step="1"],
.sr-fit[data-step="2"],
.sr-fit[data-step="3"],
.sr-fit[data-step="4"] { margin-top: -68px; }
.sr-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
}
.sr-fit { display: none; }
.sr-fit.is-on { display: block; }
/* the final step is taller than the window — the viewer scrolls inside it */
.sr-stage.is-scrollable { overflow-y: auto; overscroll-behavior: contain; }
.sr-stage.is-scrollable::-webkit-scrollbar { width: 0; height: 0; }

/* ---- Pricing card ---- */
.card-pricing {
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pricing-table {
  position: relative;
  width: 976.05px;
  height: 289px;
}
.pt-row {
  position: absolute;
  left: 0;
  width: 100%;
  height: 52px;
  box-shadow: inset 0 -0.5px 0 rgba(18, 23, 34, 0.06);
}
.pt-row.pt-head {
  top: 0;
  height: 31px;
  box-shadow: inset 0 -0.5px 0 rgba(18, 23, 34, 0.12);
}
.pt-row:nth-of-type(2) { top: 30.76px; }
.pt-row:nth-of-type(3) { top: 82.45px; }
.pt-row:nth-of-type(4) { top: 134.16px; }
.pt-row:nth-of-type(5) { top: 185.85px; }
.pt-row.is-last { top: 237.94px; height: 51px; box-shadow: none; }
.pt-row p {
  position: absolute;
  top: 16.16px;
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  color: #121722;
  white-space: nowrap;
}
.pt-row.pt-head p {
  top: -0.52px;
  font-size: 14px;
  line-height: 16.8px;
  color: rgba(18, 23, 34, 0.5);
}
.pt-row.is-last p { top: 15.78px; }
.pt-c1 { left: 16px; }
.pt-c2 { left: 292.12px; }
.pt-c3 { left: 456.4px; }
.pt-c4 { left: 635.62px; }
.pt-c5 { left: 961.55px; transform: translateX(-100%); text-align: right; }
.pt-name { font-weight: 500; }
.pt-row b { font-weight: 500; }
.pt-row .dim { color: rgba(18, 23, 34, 0.5); }

/* ---- Onboarding screen (native 1120px, same scale wrapper; header and
        tab strip reuse the .browser-* components) ---- */
.ob-content { width: 100%; padding: 32px; }
.ob-card {
  width: 1056px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: #fff;
  border-radius: 10px;
  box-shadow:
    0 1px 1px 0 rgba(18, 23, 34, 0.1),
    0 0 0 0.5px rgba(18, 23, 34, 0.15);
}
.ob-card h3 {
  font-weight: 500;
  font-size: 22px;
  line-height: 26.4px;
  color: #121722;
  white-space: nowrap;
}
.ob-phases {
  position: relative;
  width: 992px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #f4fbff;
  border-radius: 10px;
  transition: box-shadow 0.45s ease;
}
.ob-grid {
  display: grid;
  grid-template-columns: 304px 304px 304px;
  gap: 16px;
  height: 106px;
}
.ob-phase {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border-radius: 10px;
}
.ob-phase-name {
  font-weight: 500;
  font-size: 18px;
  line-height: 21.6px;
  color: #121722;
  white-space: nowrap;
}
.ob-dates { display: flex; align-items: center; gap: 8px; }
.ob-dates img { width: 12px; height: 12px; }
.ob-date {
  padding: 3px 10px;
  background: #f4fbff;
  border-radius: 9999px;
  font-weight: 500;
  font-size: 14px;
  line-height: 16.8px;
  color: #121722;
  white-space: nowrap;
}
.ob-section { display: flex; flex-direction: column; gap: 12px; }
.ob-sec-head { display: flex; align-items: center; justify-content: space-between; }
.ob-progress { display: flex; align-items: center; gap: 8px; }
.ob-track {
  display: block;
  width: 60px;
  height: 6px;
  background: rgba(18, 23, 34, 0.1);
  border-radius: 9999px;
  overflow: clip;
}
.ob-fill { display: block; height: 6px; background: #0068f9; border-radius: 9999px; }
.ob-fill--dark { background: #121722; border-radius: 0; }
.ob-count {
  width: 24px;
  font-weight: 400;
  font-size: 14px;
  line-height: 16.8px;
  text-align: right;
  color: rgba(18, 23, 34, 0.5);
  white-space: nowrap;
}
.ob-rows { display: flex; flex-direction: column; }
.ob-row {
  padding: 10px 0 10.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset 0 -0.5px 0 rgba(18, 23, 34, 0.06);
}
.ob-row.is-last { padding: 10px 0; box-shadow: none; }
.ob-row-left { display: flex; align-items: center; gap: 12px; }
.ob-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(18, 23, 34, 0.2);
  border-radius: 50%;
}
.ob-check.is-done { border: 0; background: #0068f9; }
.ob-check img { width: 11px; height: 11px; }
.ob-label {
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  color: #121722;
  white-space: nowrap;
}
.ob-label.is-done { color: rgba(18, 23, 34, 0.4); text-decoration: line-through; }
.ob-chip {
  padding: 7px 12px 7px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 16.8px;
  color: #121722;
  white-space: nowrap;
  box-shadow: 0 0 0 0.5px rgba(18, 23, 34, 0.15);
}
.ob-chip img { width: 14px; height: 14px; }
.ob-row-right { display: flex; align-items: center; gap: 10px; }
.ob-status {
  padding: 3px 10px;
  background: rgba(18, 23, 34, 0.06);
  border-radius: 9999px;
  font-weight: 500;
  font-size: 14px;
  line-height: 16.8px;
  color: rgba(18, 23, 34, 0.6);
  white-space: nowrap;
}
.ob-avatar-ph {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(18, 23, 34, 0.08);
}
/* ---- Playbooks screen (native 1120px, same scale wrapper) ---- */
.pb-create {
  height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  background: #0068f9;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  line-height: 16.8px;
  color: #fff;
  white-space: nowrap;
}
.pb-hero {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 262px;
  display: flex;
  align-items: flex-start;
}
.pb-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 928px;
  height: 262px;
  pointer-events: none;
  box-shadow: inset 0 -0.5px 0 rgba(0, 0, 0, 0.13);
}
.pb-hero-left {
  width: 693px;
  height: 262px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.pb-hero-left h2 {
  height: 56px;
  font-weight: 500;
  font-size: 46px;
  line-height: 55.2px;
  color: #121722;
  white-space: nowrap;
}
.pb-hero-left p {
  height: 20px;
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  color: rgba(18, 23, 34, 0.6);
  white-space: nowrap;
}
/* VIV/AI-branded abstract banner art (was a flat gray box) */
.pb-hero-img {
  position: relative;
  width: 427px;
  height: 262px;
  overflow: hidden;
  background:
    radial-gradient(80% 120% at 12% 18%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 120% at 92% 92%, rgba(4, 20, 60, 0.55), rgba(4, 20, 60, 0) 60%),
    linear-gradient(135deg, #2b6fff 0%, #0846c8 48%, #0a2a86 100%);
}
.pb-hero-img::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -70px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.04) 66%);
  mix-blend-mode: soft-light;
}
.pb-hero-img::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: -40px;
  width: 150px;
  height: 150px;
  border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22);
}
.pb-tabs {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  padding: 0 8px;
  display: flex;
  align-items: flex-start;
  box-shadow: inset 0 -0.5px 0 0 rgba(0, 0, 0, 0.13);
}
.pb-tab {
  height: 41px;
  padding: 11px 16px 0;
  border-bottom: 1px solid transparent;
}
.pb-tab.is-active { border-bottom-color: #0068f9; }
.pb-tab span {
  font-weight: 500;
  font-size: 14px;
  line-height: 16.8px;
  color: rgba(18, 23, 34, 0.6);
  white-space: nowrap;
}
.pb-tab.is-active span { color: #121722; }
.pb-content {
  width: 100%;
  padding: 0 24px 8px;
}
.pb-section {
  padding: 24px 0 24.5px;
  box-shadow: inset 0 -0.5px 0 rgba(18, 23, 34, 0.09);
}
.pb-section h3 {
  height: 27px;
  font-weight: 500;
  font-size: 22px;
  line-height: 26.4px;
  color: #121722;
  white-space: nowrap;
}
.pb-grid {
  margin-top: 16px;
  width: 880px;
  height: 179px;
  display: grid;
  grid-template-columns: 208px 208px 208px 208px;
  column-gap: 16px;
}
.pb-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pb-thumb {
  position: relative;
  width: 208px;
  height: 130px;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.45s ease;
  background: #0068f9; /* flat — per-card color set below */
}
/* the title lives on the cover */
.pb-cover-title {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 13px;
  font-weight: 500;
  font-size: 15px;
  line-height: 19px;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* one subtle flat shape per cover (no gradient) */
/* abstract generative pattern in the upper band (bars / waves / grid), in
   translucent white so it reads on any flat colour */
.pb-thumb::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 58%;
}
/* flat palette, mixed so neighbours and the two rows never repeat */
.pb-thumb.pb-c1 { background: #0068f9; }
.pb-thumb.pb-c2 { background: #6d4bd8; }
.pb-thumb.pb-c3 { background: #0f9b8e; }
.pb-thumb.pb-c4 { background: #17233b; }
.pb-thumb.pb-c5 { background: #d9542f; }
.pb-thumb.pb-c6 { background: #3557b8; }
.pb-thumb.pb-c7 { background: #2d7d46; }
/* per-colour motif (same set reused on the ported screens below) */
.pb-thumb.pb-c1::before { background: repeating-linear-gradient(0deg, rgba(255,255,255,0.24) 0 1.5px, transparent 1.5px 7px); }
.pb-thumb.pb-c2::before { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.2) 0 2px, transparent 2px 9px); }
.pb-thumb.pb-c3::before { background: repeating-linear-gradient(0deg, rgba(255,255,255,0.18) 0 1.5px, transparent 1.5px 8px), repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 1.5px, transparent 1.5px 8px); }
.pb-thumb.pb-c4::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.16) 0 1.5px, transparent 1.5px 11px), repeating-linear-gradient(0deg, rgba(255,255,255,0.16) 0 1.5px, transparent 1.5px 11px); }
.pb-thumb.pb-c5::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.26) 0 2px, transparent 2px 6px); }
.pb-thumb.pb-c6::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 1.5px, transparent 1.5px 6px), repeating-linear-gradient(0deg, rgba(255,255,255,0.18) 0 1.5px, transparent 1.5px 6px); }
.pb-thumb.pb-c7::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.24) 0 1.5px, transparent 1.5px 5px); }
.pb-card-info { display: flex; flex-direction: column; gap: 4px; }
.pb-card-title {
  width: 208px;
  height: 19px;
  overflow: clip;
  font-weight: 500;
  font-size: 14px;
  line-height: 19.25px;
  color: #121722;
  white-space: nowrap;
}
.pb-card-meta { display: flex; align-items: center; gap: 12px; }
.pb-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 400;
  font-size: 13px;
  line-height: 15.6px;
  color: rgba(18, 23, 34, 0.5);
  white-space: nowrap;
}
.pb-stat img { width: 13px; height: 13px; }
/* the AI-created card: space reserved in col 1; siblings sit one slot left
   at rest and slide to their Figma spots when it lands */
.pb-card.pb-shift {
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.pb-grid.no-new .pb-card.pb-shift { transform: translateX(-224px); }
#pbNewCard { transition: opacity 0.4s ease 0.15s; }
.pb-grid.no-new #pbNewCard { opacity: 0; transition-delay: 0s; }
.pb-thumb.is-glow { box-shadow: 0 0 0 1.5px #0068f9; }
.pb-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(0, 104, 249, 0) 35%, rgba(0, 104, 249, 0.14) 50%, rgba(0, 104, 249, 0) 65%);
  background-size: 250% 100%;
}
.pb-thumb.is-glow::after {
  opacity: 1;
  animation: step-sweep 1.2s ease-out;
}

/* ---- Course screen (lesson/quiz view, native 1120 like the others) ---- */
.co-top {
  flex-shrink: 0;
  width: 100%;
  height: 48px;
  padding: 0 12px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #121722;
}
.co-top-left { display: flex; align-items: center; gap: 12px; }
.co-x {
  position: relative;
  width: 14px;
  height: 14px;
  opacity: 0.7;
}
.co-x::before,
.co-x::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 0;
  width: 1.5px;
  height: 14px;
  background: #fff;
}
.co-x::before { transform: rotate(45deg); }
.co-x::after { transform: rotate(-45deg); }
.co-top-left p {
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  color: #fff;
  white-space: nowrap;
}
.co-top-right { display: flex; align-items: center; gap: 14px; }
.co-est {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
}
.co-pct {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  font-weight: 500;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
}
.co-save {
  height: 30px;
  padding: 0 12px;
  background: #0068f9;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
}
.co-stepper {
  flex-shrink: 0;
  width: 100%;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  box-shadow: inset 0 -0.5px 0 rgba(0, 0, 0, 0.13);
}
.co-step {
  padding: 6px 12px;
  border-radius: 9999px;
  font-weight: 500;
  font-size: 13px;
  line-height: 15.6px;
  color: rgba(18, 23, 34, 0.55);
  white-space: nowrap;
}
.co-step.is-done {
  background: #f0f6ff;
  color: rgba(18, 23, 34, 0.45);
  text-decoration: line-through;
}
.co-step.is-active {
  background: #0068f9;
  color: #fff;
}
.co-body { width: 100%; padding: 32px; }
.co-quiz {
  width: 1056px;
  padding: 32px 36px;
  background: #fff;
  border-radius: 12px;
  box-shadow:
    0 0 0 1.5px #0068f9,
    0 1px 1px 0 rgba(18, 23, 34, 0.1);
}
.co-quiz h3 {
  font-weight: 500;
  font-size: 22px;
  line-height: 26.4px;
  color: #121722;
}
.co-qhead {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.co-qcount {
  font-weight: 500;
  font-size: 14px;
  color: #121722;
}
.co-mand {
  font-size: 13px;
  color: rgba(18, 23, 34, 0.45);
}
.co-qbar {
  margin-top: 8px;
  width: 100%;
  height: 3px;
  background: rgba(18, 23, 34, 0.08);
  border-radius: 9999px;
  overflow: clip;
}
.co-qbar i {
  display: block;
  width: 40%;
  height: 3px;
  background: #0068f9;
  border-radius: 9999px;
}
.co-qgrid {
  margin-top: 28px;
  display: flex;
  gap: 40px;
}
.co-qleft { flex: 1; min-width: 0; }
.co-question {
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  color: #121722;
}
.co-opt {
  margin-top: 12px;
  height: 46px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  box-shadow: 0 0 0 0.5px rgba(18, 23, 34, 0.2);
  font-size: 15px;
  color: #121722;
  white-space: nowrap;
}
.co-opt:first-of-type { margin-top: 20px; }
.co-opt.is-picked { box-shadow: 0 0 0 1.5px #0068f9; }
.co-radio {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(18, 23, 34, 0.25);
  border-radius: 50%;
}
.co-opt.is-picked .co-radio {
  border: 5px solid #0068f9;
}
.co-qvisual {
  position: relative;
  flex-shrink: 0;
  width: 330px;
  height: 250px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1c2434 0%, #0d1118 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-qlogo {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0068f9;
  border-radius: 14px;
  font-weight: 600;
  font-size: 32px;
  color: #fff;
}
.co-qchip {
  position: absolute;
  left: -18px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: #fff;
  border-radius: 10px;
  box-shadow:
    0 6px 20px rgba(18, 23, 34, 0.18),
    0 0 0 0.5px rgba(18, 23, 34, 0.1);
  font-weight: 500;
  font-size: 13px;
  color: #121722;
  white-space: nowrap;
}
.co-qnav {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.co-prev {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  box-shadow: 0 0 0 0.5px rgba(18, 23, 34, 0.2);
  font-weight: 500;
  font-size: 14px;
  color: #121722;
}
.co-next {
  height: 36px;
  padding: 0 16px;
  background: #0068f9;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  color: #fff;
}
.co-nextsec {
  margin-top: 32px;
  font-weight: 500;
  font-size: 22px;
  line-height: 26.4px;
  color: rgba(18, 23, 34, 0.35);
}

/* each updated date cell flickers (staggered from script.js) so the actual
   change is impossible to miss */
.ob-date.is-flash { animation: date-flash 0.9s ease-out; }
@keyframes date-flash {
  0%, 30% { background: #0068f9; color: #fff; }
  100% { background: #f4fbff; color: #121722; }
}
.mode-b .ob-date.is-flash { animation: none; }

/* glow on the phases box when dates update */
.ob-phases::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(0, 104, 249, 0) 35%, rgba(0, 104, 249, 0.14) 50%, rgba(0, 104, 249, 0) 65%);
  background-size: 250% 100%;
}
.ob-phases.is-glow { box-shadow: 0 0 0 1.5px #0068f9; }
.ob-phases.is-glow::after { opacity: 1; animation: step-sweep 1.2s ease-out; }

/* ---- Chat ---- */
/* follows the browser's scaled position; --chat-s floors the text scale so
   the conversation stays legible on small screens */
.chat {
  position: absolute;
  --chat-s: max(var(--s), 0.75);
  left: calc((100% - 848px * var(--s)) * 0.354 + 87px * var(--s));
  /* capped so the conversation never rides over the logo bar when the
     panel crops on short/narrow screens — it moves up instead */
  top: min(calc(528px * var(--s)), calc(var(--panel-h) - 240px));
  width: 295.649px;
  z-index: 1; /* keeps the conversation above the portrait overlay */
  transform: scale(var(--chat-s));
  transform-origin: 0 0;
}
.chat-bubble-row {
  width: 100%;
  padding-left: 45.484px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
/* attachment chip above the bubble (playbook: importing a deck) */
.chat-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 5px 10px 5px 7px;
  background: rgba(242, 242, 242, 0.3);
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
  border-radius: 10px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 11.5px;
  line-height: 16px;
  color: #fff;
}
.chat-attach.is-hidden { display: none; }
.chat-attach img { width: 16px; height: 16px; }
.chat-bubble {
  width: fit-content; /* hugs the longest line; explicit \n breaks keep it tight */
  max-width: 250.165px;
  white-space: pre-line;
  padding: 7.31px 12.996px;
  background: rgba(242, 242, 242, 0.3);
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
  border-radius: 16.244px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 12.183px;
  line-height: 17.057px;
  letter-spacing: -0.0893px;
  color: #fff;
}
.chat-response {
  width: 100%;
  margin-top: 11.371px; /* Figma gap between the bubble and the AI block */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #fff;
}
.chat-response-muted {
  padding-top: 4.873px;
  opacity: 0.5;
  font-weight: 400;
  font-size: 10.559px;
  line-height: 13.808px;
  white-space: nowrap;
}
.chat-response-text {
  padding: 1.624px 0;
  font-weight: 400;
  font-size: 12.183px;
  line-height: 17.057px;
  white-space: nowrap;
}

/* ---- Slack notifications (deal tab story) ---- */
/* same anchoring as the chat: bottom-left of the browser, scaled with it */
.slack-stack {
  position: absolute;
  --chat-s: max(var(--s), 0.75);
  left: calc((100% - 848px * var(--s)) * 0.354 + 87px * var(--s));
  /* same cap as .chat — never over the logo bar */
  top: min(calc(528px * var(--s)), calc(var(--panel-h) - 240px));
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  transform: scale(var(--chat-s));
  transform-origin: 0 0;
}
.slack-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px 8px 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow:
    0 5px 16px rgba(18, 23, 34, 0.12),
    0 0 0 0.5px rgba(18, 23, 34, 0.08);
}
.slack-note.is-hidden { display: none; }
/* stream-in: a quick snappy pop when a note lands (fires with the click) */
.slack-note.slack-in { animation: slack-in 0.32s cubic-bezier(0.34, 1.5, 0.5, 1) both; }
@keyframes slack-in {
  from { opacity: 0; transform: translateY(12px) scale(0.88); }
  to { opacity: 1; transform: none; }
}
.slack-note img { width: 15px; height: 15px; opacity: 0.85; }
.slack-note p {
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  color: #121722;
  white-space: nowrap;
}
.slack-note b { font-weight: 500; }

/* ---- Logo bar ---- */
.logo-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 75.352px;
  padding: 24px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
}
/* progressive blur: stacked backdrop layers, blur doubling toward the bottom */
.pblur {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pblur i { position: absolute; inset: 0; }
.pblur i:nth-child(1) {
  -webkit-backdrop-filter: blur(0.5px);
  backdrop-filter: blur(0.5px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 12.5%, #000 25%, rgba(0,0,0,0) 37.5%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 12.5%, #000 25%, rgba(0,0,0,0) 37.5%);
}
.pblur i:nth-child(2) {
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 12.5%, #000 25%, #000 37.5%, rgba(0,0,0,0) 50%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 12.5%, #000 25%, #000 37.5%, rgba(0,0,0,0) 50%);
}
.pblur i:nth-child(3) {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%, #000 37.5%, #000 50%, rgba(0,0,0,0) 62.5%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%, #000 37.5%, #000 50%, rgba(0,0,0,0) 62.5%);
}
.pblur i:nth-child(4) {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 37.5%, #000 50%, #000 62.5%, rgba(0,0,0,0) 75%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 37.5%, #000 50%, #000 62.5%, rgba(0,0,0,0) 75%);
}
.pblur i:nth-child(5) {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 62.5%, #000 75%, rgba(0,0,0,0) 87.5%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 62.5%, #000 75%, rgba(0,0,0,0) 87.5%);
}
.pblur i:nth-child(6) {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 62.5%, #000 75%, #000 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 62.5%, #000 75%, #000 100%);
}
.logo-bar > *:not(.pblur) { position: relative; }
/* ---- Dock AI onboarding overlay (from the reference embed; the landing
        design itself is untouched — this only exists above it when open) ---- */
#dock-ai-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  background: rgba(18, 23, 34, 0.45);
  align-items: center;
  justify-content: center;
}
#dock-ai-overlay.open {
  display: flex;
}
#dock-ai-frame {
  width: min(440px, 92vw);
  height: 600px;
  max-height: 92vh;
  border: 0;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(18, 23, 34, 0.25);
}

.logo-bar-text {
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  color: #fff;
  white-space: nowrap;
}

/* ============ Chat / Next-Steps animation ============ */
/* the user bubble pops in with NO transition: animating its opacity makes
   Chrome paint the backdrop blur a beat late, so it lands instantly and
   the blur is there from the first frame; only the AI response animates */
.chat-response {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.chat-bubble-row.is-hidden,
.chat-response.is-hidden {
  opacity: 0;
  transform: translateY(5px);
}
.chat-bubble.is-hidden {
  opacity: 0;
}
.chat-response p {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.chat-response p.is-off {
  opacity: 0;
  transform: translateY(4px);
}
.chat-response p.is-working {
  opacity: 1;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.5) 42%, #fff 50%, rgba(255, 255, 255, 0.5) 58%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: chat-shimmer 1.4s linear infinite;
}
@keyframes chat-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -130% 0; }
}

@keyframes step-sweep {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

.ob-fill { transition: width 0.5s ease; }

/* ============ Slides — "Meet Dock" section (Figma 11:1990) ============ */
.slides {
  width: 1296px;
  max-width: calc(100% - 32px);
  margin: 100px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.slides-heading { width: 100%; padding: 0 24px; }
.slides-heading p {
  font-weight: 500;
  font-size: 40px;
  line-height: 46px;
  color: #121722;
}
.slides-dim { color: rgba(18, 23, 34, 0.5); }

/* the artwork is a fixed 1296x803 design; --sls (set from script.js) scales
   it continuously with the container width */
.slides-hero {
  position: relative;
  width: 100%;
  height: calc(912px * var(--sls, 1));
  border-radius: 16px;
  overflow: hidden;
}
.sl-fit {
  position: absolute;
  left: 0;
  top: 0;
  width: 1296px;
  height: 970px;
  transform: scale(var(--sls, 1));
  transform-origin: 0 0;
}

/* ---- A / B / C selector (same family as the prompt tabs) ---- */
/* transparent tab row, frame width; the frame overlaps its bottom ~1px so
   the active tab's underline meets the frame at the seam (no panel bg/shadow
   — the chrome frame keeps its own rounded corners) */
.sl-tabs {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  width: 1248px;
  padding: 2px 2px 0;
  display: none; /* hidden for now — the section focuses on the Sales Room story */
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}
/* same tab treatment as the prompt widget (the reference): 12px inline
   padding, a subtle lift on the active tab, transitioned */
.sl-tab {
  margin-top: 1px;
  padding: 8px 12px 10px;
  border-bottom: 2px solid transparent;
  opacity: 0.6;
  cursor: pointer;
  transition: border-color 0.25s ease, margin 0.25s ease;
}
.sl-tab:hover { opacity: 1; }
.sl-tab.is-active {
  margin-top: 0;
  border-bottom-color: #0068f9;
  opacity: 1;
}
.sl-tab span {
  font-weight: 400;
  font-size: 15px;
  line-height: 16.8px;
  text-align: center;
  color: #121722;
  white-space: nowrap;
}

/* ---- step debugger (dev aid): jump between the story steps ---- */
.sr-debug {
  width: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(18, 23, 34, 0.45);
}
.sr-debug button {
  padding: 3px 10px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 0 0.5px rgba(18, 23, 34, 0.2);
  font-size: 12px;
  color: #121722;
}
.sr-debug button:hover { background: #f4f4f5; }

/* ---- Chrome-style browser frame ---- */
.sl-frame {
  position: absolute;
  left: 50%;
  top: 2px; /* tabs hidden: the chrome tops the panel; 2px keeps its top ring/shadow clear of the overflow crop */
  transform: translateX(-50%);
  width: 1248px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px; /* chrome UI frame keeps rounded corners all around */
  overflow: clip;
  box-shadow:
    0 0 0 0.969px rgba(0, 0, 0, 0.1),
    0 16.48px 17.45px -11.633px rgba(0, 0, 0, 0.08);
}
.sl-chrome {
  padding-top: 4px;
  display: flex;
  align-items: flex-end;
  background: #f4f4f4;
}
.sl-dots {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 13px;
}
.sl-tabbar { display: flex; align-items: flex-end; }
/* inverted-radius fillets flanking the mac tab */
.sl-fillet {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  background: #fff;
}
.sl-fillet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f7f7f7;
}
.sl-fillet--l::before { border-bottom-right-radius: 100px; }
.sl-fillet--r::before { border-bottom-left-radius: 100px; }
.sl-mactab {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 10px;
  background: #fff;
  border-radius: 8px 8px 0 0;
}
.sl-mactab-ico {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
}
.sl-mactab-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
  color: #000;
  white-space: nowrap;
}
.sl-urlbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  background: #fff;
  box-shadow: inset 0 -0.5px 0 rgba(18, 23, 34, 0.12);
}
.sl-nav { display: flex; align-items: center; }
.sl-navico { width: 27px; height: 27px; }
.sl-flip { transform: scaleX(-1); }
.sl-address {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 3px;
  background: #f4f4f4;
  border-radius: 40px;
}
.sl-address-badge {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 100px;
}
.sl-address-text {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  color: #000;
  white-space: nowrap;
}
.sl-actions { display: flex; align-items: center; }
.sl-actico {
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
}
.sl-divider {
  flex-shrink: 0;
  width: 2px;
  height: 16px;
  margin: 0 4px 0 3px;
  background: #d8d8d8;
  border-radius: 100px;
}

/* ---- The page inside the browser: deal room components at 0.90625 ---- */
.sl-window {
  position: relative;
  height: 818px;
  padding-top: 2px;
  background: #fff;
  overflow: hidden;
}
/* one scene per product tab — only the active one renders; each screen
   fills the frame width and bleeds off the bottom edge (overflow clipped) */
.sl-scene { display: none; }
.sl-scene.is-on { display: block; }
/* the ported marketing screens are 1120px native — scale up to fill the
   1248px frame width (1248/1120 = 1.114286). Text sizes inside the partials
   are shrunk by ~0.814 so, once scaled, every label renders at the same
   visual size as the Sales Room (which effectively renders at 0.906) */
.sl-mkfit {
  width: 1120px;
  transform: scale(1.114286);
  transform-origin: 0 0;
}
/* the ported screens carry their own 12px radius + shadow ring; inside the
   chrome that doubles the border and rounds the top corners — flatten it so
   the screen meets the URL bar square (top radius 0) */
.sl-mkfit .mk-screen {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.sl-scale {
  width: 1376.993px;
  transform: scale(0.90625);
  transform-origin: 0 0;
}
.sl-page {
  width: 100%;
  height: 903px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0 0 12px 12px;
  overflow: clip;
  /* no ring here — the chrome frame already draws the border; the URL-bar
     separator above the titlebar is the single line over the header */
}
.sl-page .browser-titlebar-left { padding-left: 12px; }
.sl-shero {
  flex-shrink: 0;
  width: 100%;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #fff;
}
.sl-shero p {
  font-weight: 500;
  font-size: 46px;
  line-height: 55.2px;
  color: #121722;
  white-space: nowrap;
}
.sl-cards {
  width: 100%;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
/* ---- Business Case card (drafted by Dock AI in the Sales Room scene) ---- */
.bc-card {
  position: relative;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.bc-head { display: flex; align-items: center; justify-content: space-between; }
.bc-draft {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  background: #0068f9;
  border-radius: 9999px;
  font-weight: 500;
  font-size: 15px;
  color: #fff;
  white-space: nowrap;
  box-shadow: inset 0 0 0 0.5px rgba(11, 68, 147, 0.25), 0 0.5px 1px rgba(0,0,0,0.2);
}
.bc-empty-lines { display: flex; flex-direction: column; gap: 12px; }
.bc-empty-lines span {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f0f1f3 0%, #f7f8f9 50%, #f0f1f3 100%);
  background-size: 200% 100%;
  animation: bc-shimmer 1.6s linear infinite;
}
.bc-empty-lines span:nth-child(1) { width: 92%; }
.bc-empty-lines span:nth-child(2) { width: 84%; }
.bc-empty-lines span:nth-child(3) { width: 63%; }
@keyframes bc-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
/* state toggle */
.bc-card.is-empty .bc-body { display: none; }
.bc-card:not(.is-empty) .bc-empty-lines,
.bc-card:not(.is-empty) .bc-draft { display: none; }
.bc-body { display: flex; flex-direction: column; gap: 14px; }
.bc-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 13px;
  color: #0068f9;
}
.bc-line {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #121722;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.bc-line b { font-weight: 600; }
.bc-line.is-in { opacity: 1; transform: none; }
/* AI suggestion chip */
.bc-suggest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
  padding: 10px 10px 10px 14px;
  background: #f4f8ff;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 104, 249, 0.18);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.bc-suggest.is-in { opacity: 1; transform: none; }
.bc-suggest-txt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
  font-size: 14px;
  color: #121722;
}
.bc-add {
  flex-shrink: 0;
  height: 30px;
  padding: 0 14px;
  background: #0068f9;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  color: #fff;
}
/* competitor comparison — added on click, expands in */
.bc-compete {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.5s ease, opacity 0.4s ease;
}
.bc-compete.is-in { grid-template-rows: 1fr; opacity: 1; }
.bc-compete > .bc-cmp-row:first-child { margin-top: 4px; }
.bc-compete { overflow: hidden; }
.bc-cmp-row {
  min-height: 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: center;
  padding: 9px 4px;
  font-size: 14px;
  color: #121722;
  box-shadow: inset 0 -0.5px 0 rgba(18, 23, 34, 0.08);
}
.bc-cmp-head { font-weight: 500; color: rgba(18, 23, 34, 0.5); font-size: 13px; }
.bc-yes { color: #0f9b6b; font-weight: 500; }
.bc-no { color: rgba(18, 23, 34, 0.45); }
/* shimmer ring while the AI drafts / adds */
.bc-card.is-glow { box-shadow: 0 0 0 1.5px #0068f9, 0 1px 1px rgba(18,23,34,0.1); }
.bc-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 10px;
  opacity: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(0,104,249,0) 35%, rgba(0,104,249,0.14) 50%, rgba(0,104,249,0) 65%);
  background-size: 250% 100%;
}
.bc-card.is-glow::after { opacity: 1; animation: step-sweep 1.2s ease-out; }

/* ---- Order form sign strip ---- */
.bc-sign {
  margin-top: 20px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: inset 0 0.5px 0 rgba(18, 23, 34, 0.1);
}
.bc-sign-left { display: flex; align-items: center; gap: 8px; flex: 1; }
.bc-sign-left span { font-size: 16px; color: #121722; }
.bc-sign-left b { font-weight: 600; }
.bc-sign-btn {
  height: 36px;
  padding: 0 18px;
  background: #0068f9;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  color: #fff;
  box-shadow: inset 0 0 0 0.5px rgba(11, 68, 147, 0.25), 0 0.5px 1px rgba(0,0,0,0.2);
}
.bc-signed {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #121722;
}
.bc-signed b { font-weight: 600; }
.bc-signed-check {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #0f9b6b; border-radius: 50%;
}
.bc-sign.is-signed .bc-sign-btn { display: none; }
.bc-sign.is-signed .bc-signed { display: flex; }

.sl-page .success-box { background: #f9f9f9; }
.sl-page .success-footer span { color: #0068f9; }
/* the plan card the AI creates in the cursor scene: while hidden it takes
   no space (Pricing sits in its spot), then it pops in INSTANTLY when the
   AI lands — no fade, no sliding; only the glow ring animates */
#slCard {
  position: relative;
  transition: box-shadow 0.45s ease;
}
#slCard.is-off { display: none; }
#slCard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9.063px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(0, 104, 249, 0) 35%, rgba(0, 104, 249, 0.14) 50%, rgba(0, 104, 249, 0) 65%);
  background-size: 250% 100%;
}
#slCard.is-glow {
  box-shadow:
    0 0 0 1.5px #0068f9,
    0 0.906px 1.813px 0 rgba(18, 23, 34, 0.1);
}
#slCard.is-glow::after {
  opacity: 1;
  animation: step-sweep 1.4s ease-out;
}

/* ---- Figma-style multiplayer cursors ---- */
.sl-cursors {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
/* movement is driven frame-by-frame from script.js (curved tweens plus a
   permanent low-amplitude wander); show/hide and the chat bubbles are
   deliberately instant — no fades on cursors */
.sl-cursor {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  will-change: transform;
}
.sl-cursor.is-on { opacity: 1; }
.sl-cursor img { width: 18px; height: 21px; }
.sl-cur-tag,
.sl-cur-msg {
  position: absolute;
  left: 15px;
  top: 19px;
  border-radius: 4px 12px 12px 12px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #fff;
}
.sl-cur-tag {
  padding: 2px 7px 3px;
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
}
.sl-cur-tag--ai {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
}
.sl-cur-tag--ai img { width: 11px; height: 11px; }
.sl-cur-msg {
  width: max-content;
  max-width: 250px;
  padding: 7px 12px 8px;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 16.5px;
  opacity: 0;
}
.sl-cursor.is-say .sl-cur-msg { opacity: 1; transform: none; }
.sl-cursor.is-say .sl-cur-tag { opacity: 0; }
.sl-cur--buyer .sl-cur-tag,
.sl-cur--buyer .sl-cur-msg { background: #4db5ff; }
.sl-cur--seller .sl-cur-tag,
.sl-cur--seller .sl-cur-msg { background: #0068f9; }
.sl-cur--ai .sl-cur-tag,
.sl-cur--ai .sl-cur-msg { background: #121722; }

/* heading steps down with the viewport like the rest of the page */
@media (max-width: 1240px) {
  .slides-heading p { font-size: 34px; line-height: 40px; }
}
@media (max-width: 640px) {
  .slides { margin-top: 64px; }
  .slides-heading { padding: 0 8px; }
  .slides-heading p { font-size: 26px; line-height: 32px; }
}

/* ============ Responsive ============ */
/* The 1728px layout is the max state. Text steps down by breakpoint; the
   artwork panel (browser mock + chat) shrinks through --s only when the
   column can no longer fit it. */
/* below ~1560 the logo row can't hold one line: caption gets its own row,
   the logos spread the full width — same space-between principle as the
   single-row default */
@media (max-width: 1560px) {
  .logo-bar { padding: 20px 24px; column-gap: 12px; justify-content: space-between; }
  .logo-bar-text { width: 100%; text-align: center; }
}
@media (max-width: 1440px) {
  .hero-title { font-size: 52px; line-height: 58px; }
  .hero-sub { font-size: 21px; line-height: 30px; }
}
@media (max-width: 1240px) {
  .hero { --s: 0.9; }
  .hero-title { font-size: 46px; line-height: 52px; }
  .hero-sub { font-size: 19px; line-height: 28px; }
  .header-left { gap: 32px; }
  .nav { gap: 28px; }
}
/* stacked: text column above the artwork panel (the panel starts below
   the fold anyway, so the viewport-height cap no longer applies) */
@media (max-width: 1080px) {
  .hero { flex-direction: column; --s: 1; --panel-h: calc(878px * var(--s)); margin-top: 8px; }
  .hero-left { flex: none; width: 100%; height: auto; padding: 48px 16px 56px; }
  .hero-right { flex: none; width: 100%; }
  .hero-title { font-size: 50px; line-height: 56px; }
  .hero-sub { font-size: 20px; line-height: 29px; }
}
@media (max-width: 900px) {
  .nav { display: none; }
}
@media (max-width: 740px) {
  .hero { --s: 0.85; }
}
/* mobile: prompt widget replaced by plain CTAs under the subhead */
@media (max-width: 640px) {
  .header-right { display: none; }
  .prompt-widget { display: none; }
  .hero-ctas { display: flex; }
  .hero-ctas .btn { height: 44px; padding: 0 22px; font-size: 16px; }
  .hero { --s: 0.8; }
  .hero-left { padding: 36px 8px 44px; }
  .hero-title { font-size: clamp(30px, 8.5vw, 44px); line-height: 1.14; }
  .hero-sub { margin-top: 12px; font-size: 17px; line-height: 25px; }
  .logo-bar { padding: 16px 20px; gap: 10px 12px; justify-content: space-between; }
  .logo-bar-text { width: 100%; text-align: center; }
  /* shrink the logos instead of dropping any — all five stay visible */
  .logo-bar img { zoom: 0.7; }
}
@media (max-width: 520px) {
  .hero { --s: 0.66; }
  .logo-bar { padding: 12px; }
}
@media (max-width: 430px) {
  .hero { --s: 0.56; }
  .logo-bar img { zoom: 0.62; }
}
@media (max-width: 360px) {
  .hero { --s: 0.47; }
  .logo-bar img { zoom: 0.55; }
}

/* screens statiques Content Library / Sales Training (Figma 16:1752 / 16:1895)
   pixel-perfect, proportions conservées : l'image emplit la largeur du frame */
.sl-static { width: 100%; }
.sl-static img { display: block; width: 100%; height: auto; }

/* screens DOM statiques : natif 1260px, scalés au frame (1248/1260) */
.sl-static--dom { width: 1260px; transform: scale(0.990476); transform-origin: 0 0; }

/* Deal Room : la page du step 3 finit 1px avant le bord de clip du frame —
   le fond de la scène reprend la couleur de page pour absorber la bande */
.sl-scene[data-screen="deal"] { background: #fffefb; }