/* Live "campaigns" mock-up (blocks/mockup-campaign-header); built on mockup-kit.css, 750x900 design grid. */

.sg-mkch {
  --mk-w: 750;
  --mk-h: 900;
  background: #302f35;
}

.sg-mkch__card {
  left: calc(76 * var(--u));
  top: calc(60 * var(--u));
  width: calc(494 * var(--u));
  height: calc(900 * var(--u));
  padding: calc(34 * var(--u)) calc(30 * var(--u)) 0 calc(31 * var(--u));
  border-radius: calc(14 * var(--u));
}

.sg-mkch__camp { height: calc(250 * var(--u)); }

.sg-mkch__title {
  font-size: calc(24.5 * var(--u));
  font-weight: 600;
  letter-spacing: -.005em;
  color: #22232a;
  white-space: nowrap;
}

.sg-mkch__banner {
  position: relative;
  margin-top: calc(13 * var(--u));
  height: calc(123 * var(--u));
  border-radius: calc(5 * var(--u));
  overflow: hidden;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.sg-mkch__people {
  display: flex;
  justify-content: flex-end;
  margin-top: calc(12 * var(--u));
}

.sg-mkch .sg-mk-avatars { --mk-av: calc(52 * var(--u)); }

.sg-mkch .sg-mk-avatar { margin-left: calc(-16 * var(--u)); }

.sg-mkch .sg-mk-avatar:first-child { margin-left: 0; }

.sg-mkch .sg-mk-avatar--more {
  position: relative;
  overflow: hidden;
  font-size: calc(19 * var(--u));
  color: #8752ef;
  background: #eee9ff;
}

.sg-mkch__n {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- banners ---- */

.sg-mkch__banner--classic { background: #f3f2f0; }

.sg-mkch__brand {
  position: absolute;
  left: calc(14 * var(--u));
  top: calc(14 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  font-size: calc(14.5 * var(--u));
  font-weight: 500;
  color: #111;
  white-space: nowrap;
}

.sg-mkch__brand svg {
  display: block;
  width: calc(13 * var(--u));
  height: calc(17 * var(--u));
}

.sg-mkch__headline {
  position: absolute;
  left: calc(15 * var(--u));
  top: calc(67 * var(--u));
  font-size: calc(20.5 * var(--u));
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #111;
  white-space: nowrap;
}

.sg-mkch__script {
  font-family: "Bradley Hand", "Segoe Script", "Brush Script MT", cursive;
  font-style: italic;
  font-weight: 700;
  font-size: 1.2em;
  letter-spacing: .01em;
  color: #fd5b48;
}

.sg-mkch__collage {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(216 * var(--u));
  height: 100%;
  object-fit: cover;
}

.sg-mkch__banner--ai > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sg-mkch__ai-logo {
  position: absolute;
  left: calc(12 * var(--u));
  top: calc(9 * var(--u));
  font-size: calc(9.5 * var(--u));
  font-weight: 700;
  color: #111;
}

.sg-mkch__ai-logo::before {
  content: "";
  display: inline-block;
  width: calc(4 * var(--u));
  height: calc(4 * var(--u));
  margin-right: calc(1.5 * var(--u));
  background: #111;
  vertical-align: calc(1 * var(--u));
}

.sg-mkch__ai-text {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(38 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(9 * var(--u));
  color: #0a0a0a;
}

.sg-mkch__ai-title {
  font-size: calc(22.5 * var(--u));
  letter-spacing: -.01em;
  white-space: nowrap;
}

.sg-mkch__ai-btn {
  height: calc(18 * var(--u));
  padding: 0 calc(13 * var(--u));
  border-radius: calc(9 * var(--u));
  background: #06080a;
  color: #fff;
  font-size: calc(8.5 * var(--u));
  font-weight: 500;
}

.sg-mkch__banner--hire { background: #f5fe8d; }

.sg-mkch__banner--hire svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sg-mkch__hire-a { font-weight: 900; fill: #050505; }
.sg-mkch__hire-b { font-weight: 400; fill: #050505; }

/* ---- cursor ---- */

.sg-mkch__cursor {
  left: calc(550 * var(--u));
  top: calc(523 * var(--u));
  animation: sg-mkch-cursor var(--mk-loop) cubic-bezier(.62, 0, .3, 1) var(--mk-delay) infinite both;
}

.sg-mkch .sg-mk-cursor__arrow {
  animation-name: sg-mkch-press;
}

.sg-mkch .sg-mk-cursor__pill {
  left: calc(35 * var(--u));
  top: calc(61 * var(--u));
  height: calc(42 * var(--u));
  padding: 0 calc(15 * var(--u));
  border-width: calc(2 * var(--u));
  border-radius: calc(9 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 500;
}

/* ---- loop: the cursor picks each campaign in turn; it lights up and gains one recipient ---- */

.sg-mkch__camp:nth-child(1) .sg-mkch__banner { animation-name: sg-mkch-pick-1; }
.sg-mkch__camp:nth-child(2) .sg-mkch__banner { animation-name: sg-mkch-pick-2; }
.sg-mkch__camp:nth-child(3) .sg-mkch__banner { animation-name: sg-mkch-pick-3; }
.sg-mkch__camp:nth-child(1) .sg-mkch__n:first-child { animation-name: sg-mkch-old-1; }
.sg-mkch__camp:nth-child(1) .sg-mkch__n:last-child { animation-name: sg-mkch-new-1; }
.sg-mkch__camp:nth-child(2) .sg-mkch__n:first-child { animation-name: sg-mkch-old-2; }
.sg-mkch__camp:nth-child(2) .sg-mkch__n:last-child { animation-name: sg-mkch-new-2; }
.sg-mkch__camp:nth-child(3) .sg-mkch__n:first-child { animation-name: sg-mkch-old-3; }
.sg-mkch__camp:nth-child(3) .sg-mkch__n:last-child { animation-name: sg-mkch-new-3; }

.sg-mkch__n:last-child { opacity: 0; }

@keyframes sg-mkch-cursor {
  0%, 7% { transform: translate3d(0, 0, 0); }
  16%, 30% { transform: translate3d(calc(-250 * var(--u)), calc(-338 * var(--u)), 0); }
  38%, 52% { transform: translate3d(calc(-250 * var(--u)), calc(-88 * var(--u)), 0); }
  60%, 78% { transform: translate3d(calc(-250 * var(--u)), calc(162 * var(--u)), 0); }
  90%, 100% { transform: translate3d(0, 0, 0); }
}

@keyframes sg-mkch-press {
  0%, 16.5% { transform: scale(1); }
  18% { transform: scale(.86); }
  19.5%, 38.5% { transform: scale(1); }
  40% { transform: scale(.86); }
  41.5%, 60.5% { transform: scale(1); }
  62% { transform: scale(.86); }
  63.5%, 100% { transform: scale(1); }
}

@keyframes sg-mkch-pick-1 {
  0%, 17.5% { box-shadow: 0 0 0 0 rgba(119, 59, 250, 0); transform: none; }
  19%, 34% { box-shadow: 0 0 0 calc(4 * var(--u)) #773bfa; transform: scale(1.015); }
  37%, 100% { box-shadow: 0 0 0 0 rgba(119, 59, 250, 0); transform: none; }
}

@keyframes sg-mkch-pick-2 {
  0%, 39.5% { box-shadow: 0 0 0 0 rgba(119, 59, 250, 0); transform: none; }
  41%, 56% { box-shadow: 0 0 0 calc(4 * var(--u)) #773bfa; transform: scale(1.015); }
  59%, 100% { box-shadow: 0 0 0 0 rgba(119, 59, 250, 0); transform: none; }
}

@keyframes sg-mkch-pick-3 {
  0%, 61.5% { box-shadow: 0 0 0 0 rgba(119, 59, 250, 0); transform: none; }
  63%, 80% { box-shadow: 0 0 0 calc(4 * var(--u)) #773bfa; transform: scale(1.015); }
  83%, 100% { box-shadow: 0 0 0 0 rgba(119, 59, 250, 0); transform: none; }
}

@keyframes sg-mkch-old-1 {
  0%, 19% { opacity: 1; transform: none; }
  22%, 92% { opacity: 0; transform: translate3d(0, -60%, 0); }
  95%, 100% { opacity: 1; transform: none; }
}

@keyframes sg-mkch-new-1 {
  0%, 19% { opacity: 0; transform: translate3d(0, 60%, 0); }
  22%, 92% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translate3d(0, 60%, 0); }
}

@keyframes sg-mkch-old-2 {
  0%, 41% { opacity: 1; transform: none; }
  44%, 92% { opacity: 0; transform: translate3d(0, -60%, 0); }
  95%, 100% { opacity: 1; transform: none; }
}

@keyframes sg-mkch-new-2 {
  0%, 41% { opacity: 0; transform: translate3d(0, 60%, 0); }
  44%, 92% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translate3d(0, 60%, 0); }
}

@keyframes sg-mkch-old-3 {
  0%, 63% { opacity: 1; transform: none; }
  66%, 92% { opacity: 0; transform: translate3d(0, -60%, 0); }
  95%, 100% { opacity: 1; transform: none; }
}

@keyframes sg-mkch-new-3 {
  0%, 63% { opacity: 0; transform: translate3d(0, 60%, 0); }
  66%, 92% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translate3d(0, 60%, 0); }
}

/* ---- static close-up of the same card (blocks/mockup-campaign-assign): 616x390 grid, card zoomed 0.93 ---- */

.sg-mkch--assign {
  --mk-w: 616;
  --mk-h: 390;
  background: #efebfc;
}

.sg-mkch__zoom {
  --u: calc(100cqw / 616 * .93);
  position: absolute;
  left: calc(-43.7 * 100cqw / 616);
  top: calc(-38.8 * 100cqw / 616);
  width: calc(750 * var(--u));
  height: calc(900 * var(--u));
}

.sg-mkch--assign .sg-mk-loop,
.sg-mkch--assign .sg-mkch__cursor { animation: none; }

.sg-mkch--assign .sg-mkch__cursor {
  left: calc(513 * var(--u));
  top: calc(303 * var(--u));
}

/* ---- "Priority" card (blocks/mockup-campaign-priority): 942x390 grid, same card and banners zoomed 0.864 ---- */

.sg-mkch--prio {
  --mk-w: 942;
  --mk-h: 390;
  background: #09090b;
}

.sg-mkch__zoom--prio {
  --u: calc(100cqw / 942 * .864);
  left: calc(257 * 100cqw / 942);
  top: calc(24 * 100cqw / 942);
}

.sg-mkch--prio .sg-mkch__card {
  left: 0;
  top: 0;
  padding-top: calc(33 * var(--u));
  border-radius: calc(13 * var(--u));
}

.sg-mkch--prio .sg-mkch__title { font-size: calc(28 * var(--u)); }

.sg-mkch--prio .sg-mkch__title + .sg-mkch__banner { margin-top: calc(27 * var(--u)); }

.sg-mkch__level {
  display: flex;
  justify-content: flex-end;
  margin: calc(12 * var(--u)) 0 calc(23 * var(--u));
}

.sg-mkch__lvl {
  height: calc(36 * var(--u));
  padding: 0 calc(10 * var(--u));
  font-size: calc(18.5 * var(--u));
  color: #fb6a4f;
  background: #fbdfca;
  border-radius: calc(2 * var(--u));
  animation: sg-mk-in-pop .5s var(--mk-ease-out) .45s both;
  transform-origin: 100% 50%;
}

.sg-mkch__lvl--high {
  margin-top: calc(6 * var(--u));
  color: #1f9d55;
  background: #d0fedc;
}