body.xn-campaign--planner {
  --xn-paper: #f1eee7;
  --xn-surface: #fffdf8;
  --xn-ink: #16292a;
  --xn-muted: #667272;
  --xn-line: rgba(22, 41, 42, .15);
  --xn-accent: #e95d3f;
  --xn-accent-ink: #fff;
  --xn-secondary: #173f3c;
}

.xn-campaign--planner .xn-planner-hero {
  background:
    radial-gradient(circle at 10% 12%, rgba(233, 93, 63, .14), transparent 28%),
    radial-gradient(circle at 90% 80%, rgba(23, 63, 60, .12), transparent 35%),
    #f1eee7;
}

.xn-campaign--planner .xn-planner-hero h1 em {
  color: var(--xn-accent);
  font-style: italic;
  font-weight: 500;
}

.xn-campaign--planner .xn-planner-preview {
  display: grid;
  max-width: 610px;
  margin: 32px 0 18px;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.xn-campaign--planner .xn-planner-preview span {
  padding: 14px 10px;
  border: 1px solid var(--xn-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .5);
  font-size: .75rem;
  font-weight: 750;
  text-align: center;
}

.xn-campaign--planner .xn-planner-preview b {
  display: block;
  color: var(--xn-accent);
  font-size: .68rem;
}

.xn-campaign--planner .xn-lead-card {
  box-shadow: 10px 10px 0 #173f3c;
}

.xn-campaign--planner .xn-planner-gallery {
  background: #173f3c;
  color: #fff;
}

.xn-campaign--planner .xn-planner-gallery .xn-lede {
  color: rgba(255, 255, 255, .68);
}

.xn-campaign--planner .xn-planner-gallery__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: repeat(2, 260px);
  gap: 14px;
}

.xn-campaign--planner .xn-planner-gallery__grid .xn-image-card {
  min-height: 0;
}

.xn-campaign--planner .xn-planner-gallery__large {
  grid-row: 1 / 3;
}

.xn-campaign--planner .xn-design-visit-image {
  min-height: 560px;
}

.xn-campaign--planner .xn-quiz__error {
  margin: 10px 0 0;
  color: #b42318;
  font-size: .78rem;
  font-weight: 750;
}

@media (max-width: 760px) {
  .xn-campaign--planner .xn-planner-preview {
    grid-template-columns: 1fr;
  }

  .xn-campaign--planner .xn-planner-preview span {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
  }

  .xn-campaign--planner .xn-planner-preview b {
    display: inline;
  }

  .xn-campaign--planner .xn-planner-gallery__grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 330px);
  }

  .xn-campaign--planner .xn-planner-gallery__large {
    grid-row: auto;
  }
}