#regularCourseBanner[hidden], #blackMappingSidebar[hidden] {display:none!important}
#blackMappingPopup {
  --bf-gold:#ffce58;
  box-sizing:border-box;
  position:fixed;
  width:min(760px,calc(100% - 28px));
  max-width:none;
  max-height:calc(100dvh - 28px);
  padding:0;
  color:#f5f8f7;
  background:#090e10;
  border:1px solid #55604b;
  border-radius:16px;
  overflow:auto;
  box-shadow:0 24px 90px #000a;
}
#blackMappingPopup::backdrop {background:#030606d9;backdrop-filter:blur(5px)}
.bf-strip {
  padding:10px 42px 10px 24px;
  background:var(--bf-gold);
  color:#191508;
  font-size:11px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.bf-close {
  position:absolute;
  z-index:1;
  right:8px;
  top:4px;
  width:29px;
  height:28px;
  padding:0;
  background:#211b0d;
  color:#fff;
  border:0;
  border-radius:5px;
  font-size:19px;
}
.bf-body {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.bf-copy {padding:26px 0 26px 28px}
#blackMappingPopup h2 {
  margin:0 0 10px;
  color:#f5f8f7;
  font-size:clamp(29px,6vw,49px);
  line-height:.95;
  letter-spacing:-.045em;
  text-transform:uppercase;
}
.bf-gradient {color:#a0e9b4;background:linear-gradient(100deg,#76efca,#ffd96e);background-clip:text;-webkit-text-fill-color:transparent}
.bf-offer {margin:14px 0 16px;color:#eaf2ed;font-size:15px;line-height:1.4}
.bf-offer strong {color:var(--bf-gold)}
.bf-courses {list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px}
.bf-courses li {border-left:2px solid #92dfb4;padding-left:10px;color:#b9c9c3;font-size:12px;line-height:1.45}
.bf-courses li:last-child {border-color:var(--bf-gold)}
.bf-courses b {display:block;color:#f0f5f2;font-size:13px}
.bf-actions {display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.bf-cta, #blackMappingSidebar .course-link {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 12px;
  border-radius:6px;
  color:#1d180a;
  background:#ffce58;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}
.bf-cta:hover, #blackMappingSidebar .course-link:hover {background:#ffe091;color:#1d180a}
.bf-actions button {font-size:12px;background:transparent;color:#edf4f0}
.bf-art {
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
  padding:18px 16px;
  background:radial-gradient(ellipse at 44% 50%,#204639 0%,transparent 68%),radial-gradient(ellipse at 80% 54%,#3a223b 0%,transparent 68%);
}
#blackMappingPopup .bf-art img {
  display:block;
  width:49%;
  max-width:155px;
  height:auto;
  float:none;
  margin:0;
  filter:drop-shadow(0 12px 12px #0009);
}
#blackMappingPopup .bf-art img:first-child {transform:translate(5%,8%) rotate(-7deg);z-index:1}
#blackMappingPopup .bf-art img:last-child {transform:translate(-3%,-5%) rotate(7deg)}
#blackMappingSidebar {
  border-color:#6d6140;
  background:radial-gradient(ellipse at 100% 0%,#213e32 0%,transparent 65%),#101614;
  color:#f5f8f7;
}
.bf-sidebar-label {color:#c3d5cb;font-size:9px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.bf-sidebar-title {display:block;margin:5px 0 2px;font-size:19px;font-weight:900;line-height:1.02;letter-spacing:-.04em;text-transform:uppercase}
#blackMappingSidebar p {margin:7px 0 9px;font-size:12px;line-height:1.3}
#blackMappingSidebar p strong {color:#ffce58}
#blackMappingSidebar .course-link {width:100%;box-sizing:border-box}
@media(max-width:520px) {
  .bf-body {grid-template-columns:minmax(0,1fr)}
  .bf-copy {padding:18px}
  .bf-art {grid-row:1;padding:11px}
  #blackMappingPopup .bf-art img {width:auto;height:94px;max-width:45%}
}