/* Live "create a campaign" app screen (blocks/mockup-campaign-create); mockup-kit.css, 2000x1125 design grid. */

.sg-mkcc {
  --mk-w: 2000;
  --mk-h: 1125;
  background: #fff;
  color: #1b1c1f;
}

.sg-homepage_features-tab-image.sg-mk-host { aspect-ratio: 16 / 9; }

.sg-mkcc__stage { font-size: calc(20 * var(--u)); }

.sg-mkcc svg { display: block; flex: none; }

/* ---- nav bar ---- */

.sg-mkcc__nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100 * var(--u));
  padding: 0 calc(133 * var(--u));
  background: #f2f4f4;
  display: flex;
  align-items: center;
}

.sg-mkcc__logo {
  width: calc(124 * var(--u));
  height: auto;
  margin-right: calc(55 * var(--u));
}

.sg-mkcc__menu {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  white-space: nowrap;
}

.sg-mkcc__menu span {
  height: calc(50 * var(--u));
  padding: 0 calc(20 * var(--u));
  border-radius: calc(10 * var(--u));
  display: flex;
  align-items: center;
}

.sg-mkcc__menu span:first-child { background: #fff; }

.sg-mkcc__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
}

.sg-mkcc__sub {
  height: calc(50 * var(--u));
  padding: 0 calc(14 * var(--u));
  gap: calc(8 * var(--u));
  border-radius: calc(10 * var(--u));
  background: #f0ebfd;
  color: #773bfa;
}

.sg-mkcc__sub svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

.sg-mkcc__sync { width: calc(36 * var(--u)); height: calc(36 * var(--u)); margin: 0 calc(10 * var(--u)); }

.sg-mkcc__ai { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }

.sg-mkcc__me {
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  border-radius: 50%;
  object-fit: cover;
}

/* ---- page header and tabs ---- */

.sg-mkcc__head {
  position: absolute;
  left: calc(133 * var(--u));
  right: calc(134 * var(--u));
  top: calc(160 * var(--u));
  display: flex;
  align-items: flex-start;
}

.sg-mkcc__h1 {
  font-size: calc(34.5 * var(--u));
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.sg-mkcc__lead {
  margin-top: calc(9 * var(--u));
  font-size: calc(16.5 * var(--u));
  color: #5d5e63;
  white-space: nowrap;
}

.sg-mkcc__actions {
  margin-left: auto;
  display: flex;
  gap: calc(9 * var(--u));
}

.sg-mkcc__btn {
  height: calc(61 * var(--u));
  padding: 0 calc(16 * var(--u));
  border: calc(1 * var(--u)) solid #e3e4e6;
  border-radius: calc(8 * var(--u));
  background: #fff;
  font-size: calc(22.5 * var(--u));
}

.sg-mkcc__btn--dark {
  gap: calc(18 * var(--u));
  border-color: #050505;
  background: #050505;
  color: #fff;
}

.sg-mkcc__btn--dark svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

.sg-mkcc__tabs {
  position: absolute;
  left: calc(135 * var(--u));
  top: calc(260 * var(--u));
  width: calc(1730 * var(--u));
  height: calc(60 * var(--u));
  padding: calc(6 * var(--u));
  border-radius: calc(10 * var(--u));
  background: #f2f4f4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.sg-mkcc__tabs span {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(7 * var(--u));
  white-space: nowrap;
}

.sg-mkcc__tabs span:first-child { background: #fff; box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .05); }

/* ---- form rows ---- */

.sg-mkcc__row {
  position: absolute;
  left: calc(135 * var(--u));
  width: calc(1730 * var(--u));
  display: grid;
  grid-template-columns: calc(876 * var(--u)) 1fr;
  border-bottom: calc(1.5 * var(--u)) solid #ededee;
}

.sg-mkcc__row--name { top: calc(338 * var(--u)); height: calc(77 * var(--u)); }
.sg-mkcc__row--visual { top: calc(437 * var(--u)); height: calc(374 * var(--u)); }
.sg-mkcc__flow {
  position: absolute;
  left: calc(135 * var(--u));
  top: calc(811 * var(--u));
  width: calc(1730 * var(--u));
}

.sg-mkcc__flow .sg-mkcc__row {
  position: static;
  width: auto;
  padding: calc(23 * var(--u)) 0 calc(15 * var(--u));
}

.sg-mkcc__label {
  padding-top: calc(8 * var(--u));
  padding-right: calc(40 * var(--u));
}

.sg-mkcc__label b {
  display: block;
  font-size: calc(19.5 * var(--u));
  font-weight: 600;
}

.sg-mkcc__label span {
  display: block;
  margin-top: calc(9 * var(--u));
  font-size: calc(17 * var(--u));
  line-height: 1.3;
  color: #5d5e63;
}

.sg-mkcc__input {
  height: calc(61 * var(--u));
  padding: 0 calc(16 * var(--u));
  border: calc(1.5 * var(--u)) solid #e6e7e9;
  border-radius: calc(7 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  color: #9c9da1;
  white-space: nowrap;
}

.sg-mkcc__drop {
  height: calc(170 * var(--u));
  border: calc(1.5 * var(--u)) dashed #e3e4e6;
  border-radius: calc(7 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sg-mkcc__drop svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin: calc(4 * var(--u)) 0 calc(17 * var(--u)); }

.sg-mkcc__drop b { font-size: calc(19.5 * var(--u)); font-weight: 600; white-space: nowrap; }

.sg-mkcc__drop span { margin-top: calc(9 * var(--u)); font-size: calc(16.5 * var(--u)); color: #77787d; white-space: nowrap; }

.sg-mkcc__canva {
  margin-top: calc(9 * var(--u));
  height: calc(81 * var(--u));
  border: calc(1.5 * var(--u)) solid #cdbcfb;
  border-radius: calc(7 * var(--u));
  background: #f0ebfd;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  color: #773bfa;
  font-size: calc(23.5 * var(--u));
  white-space: nowrap;
}

.sg-mkcc__canva svg { width: calc(39 * var(--u)); height: calc(39 * var(--u)); }

.sg-mkcc__size-label { margin-top: calc(25 * var(--u)); font-size: calc(16.5 * var(--u)); color: #8a8b90; }

.sg-mkcc__size {
  margin-top: calc(14 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
}

.sg-mkcc__size .sg-mkcc__input {
  width: calc(277 * var(--u));
  height: calc(50 * var(--u));
  color: #1b1c1f;
}

.sg-mkcc__size .sg-mkcc__input i { font-style: normal; color: #9c9da1; font-size: calc(17 * var(--u)); }

.sg-mkcc__size .sg-mkcc__input i:last-child { margin-left: auto; }

.sg-mkcc__lock {
  width: calc(33 * var(--u));
  height: calc(33 * var(--u));
  border-radius: calc(5 * var(--u));
  background: #f0ebfd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sg-mkcc__lock svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }

/* ---- preview ---- */

.sg-mkcc__preview {
  position: relative;
  margin-top: calc(35 * var(--u));
  height: calc(240 * var(--u));
  border: calc(1.5 * var(--u)) solid #e9ebec;
  border-radius: calc(14 * var(--u));
  background: #fff;
}

.sg-mkcc__pbar {
  height: calc(96 * var(--u));
  border-radius: calc(13 * var(--u)) calc(13 * var(--u)) 0 0;
  padding: 0 calc(16 * var(--u));
  background: #f2f4f4;
  border-bottom: calc(1.5 * var(--u)) solid #e9ebec;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  white-space: nowrap;
  color: #2c2d31;
}

.sg-mkcc__sel {
  flex: 0 1 auto;
  min-width: 0;
  height: calc(60 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(16 * var(--u));
  border: calc(1.5 * var(--u)) solid #e6e7e9;
  border-radius: calc(8 * var(--u));
  background: #fff;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  color: #1b1c1f;
}

.sg-mkcc__chev { margin-left: auto; width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

.sg-mkcc__sel--user { width: calc(415 * var(--u)); padding-left: calc(8 * var(--u)); }
.sg-mkcc__sel--sm { width: calc(165 * var(--u)); }
.sg-mkcc__sel--md { width: calc(276 * var(--u)); }

.sg-mkcc__sel img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; object-fit: cover; }

.sg-mkcc__send {
  margin-left: auto;
  height: calc(60 * var(--u));
  padding: 0 calc(16 * var(--u));
  border: calc(1.5 * var(--u)) solid #e6e7e9;
  border-radius: calc(8 * var(--u));
  background: #fff;
  gap: calc(10 * var(--u));
  font-size: calc(23 * var(--u));
  color: #1b1c1f;
}

.sg-mkcc__send svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }

.sg-mkcc__mail {
  position: relative;
  height: calc(140 * var(--u));
}

.sg-mkcc__dots {
  position: absolute;
  left: calc(14 * var(--u));
  top: calc(36 * var(--u));
  display: flex;
  gap: calc(9 * var(--u));
}

.sg-mkcc__dots i { width: calc(19 * var(--u)); height: calc(19 * var(--u)); border-radius: 50%; background: #161819; }

.sg-mkcc__bar {
  position: absolute;
  left: calc(110 * var(--u));
  top: calc(24 * var(--u));
  width: calc(1300 * var(--u));
  height: calc(44 * var(--u));
  border-radius: calc(10 * var(--u));
  background: #f2f4f4;
}

.sg-mkcc__pop {
  position: absolute;
  left: calc(1267 * var(--u));
  top: calc(88 * var(--u));
  width: calc(445 * var(--u));
  height: calc(120 * var(--u));
  padding: calc(16 * var(--u)) calc(14 * var(--u));
  border: calc(1.5 * var(--u)) solid #ececee;
  border-radius: calc(8 * var(--u));
  background: #fff;
  box-shadow: 0 calc(6 * var(--u)) calc(24 * var(--u)) rgba(20, 20, 30, .08);
  animation: sg-mk-in-up .6s var(--mk-ease-out) .5s both;
}

.sg-mkcc__pop b { display: block; font-size: calc(19.5 * var(--u)); font-weight: 600; white-space: nowrap; }

.sg-mkcc__pop .sg-mkcc__input { margin-top: calc(12 * var(--u)); height: calc(56 * var(--u)); }