/* Instagram campaign landing pages: compact, mobile-first, and free of unrelated site navigation. */
.dcj-instagram-landing {
  margin: 0;
  color: #25312d;
  background: #fbfaf6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

.dcj-instagram-landing *,
.dcj-instagram-landing *::before,
.dcj-instagram-landing *::after {
  box-sizing: border-box;
}

.dcj-landing {
  width: min(100% - 2rem, 70rem);
  margin-inline: auto;
  padding: 1.25rem 0 2rem;
}

.dcj-landing__hero {
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 5vw, 4rem);
  border: 1px solid #e5e3d9;
  border-radius: 1.5rem;
  background: linear-gradient(145deg, #f1f4eb, #fffdf7 72%);
}

.dcj-landing__hero-inner {
  max-width: 58rem;
  margin-inline: auto;
}

.dcj-landing__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin: 0 auto .9rem;
  color: #496b58;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dcj-landing__eyebrow::before,
.dcj-landing__eyebrow::after {
  width: clamp(1.5rem, 5vw, 3rem);
  height: 1px;
  background: #c5d1c4;
  content: "";
}

.dcj-landing h1 {
  max-width: 25ch;
  margin: 0 auto;
  color: #203d31;
  font-size: clamp(2rem, 6vw, 3.75rem);
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
}

.dcj-landing__intro {
  max-width: 50rem;
  margin: 1rem auto 1.5rem;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  text-align: center;
}

.dcj-landing__cover {
  display: block;
  width: min(100%, 36rem);
  height: auto;
  margin: 1.25rem auto 1.5rem;
  border: 1px solid #e5e3d9;
  border-radius: 1rem;
  box-shadow: 0 .75rem 2rem rgb(32 61 49 / 10%);
}

.dcj-landing__offer {
  width: min(100%, 48rem);
  margin-inline: auto;
  padding: clamp(1rem, 4vw, 1.75rem);
  border: 2px solid #89a58d;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 .5rem 1.5rem rgb(32 61 49 / 8%);
}

.dcj-landing__offer h2,
.dcj-landing__product h2 {
  margin: 0;
  color: #203d31;
  font-size: clamp(1.25rem, 4vw, 1.7rem);
  line-height: 1.25;
}

.dcj-landing__offer > p,
.dcj-landing__product-copy > p {
  margin: .6rem 0 1rem;
}

.dcj-landing__form :where(input[type="email"], input[type="text"]) {
  width: 100%;
  min-height: 3rem;
  font: inherit;
}

.dcj-landing__form :where(button, input[type="submit"]) {
  min-height: 3rem;
  padding: .7rem 1.2rem;
  border: 0;
  border-radius: .65rem;
  color: #fff;
  background: #315d43;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.dcj-landing__form :where(button, input[type="submit"]):hover {
  background: #244a34;
}

.dcj-landing__dependency-notice {
  padding: 1rem;
  border: 1px solid #8b5a20;
  border-radius: .5rem;
  color: #51320d;
  background: #fff4dc;
  font-weight: 600;
}

.dcj-landing__products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.dcj-landing__inside,
.dcj-landing__benefits {
  margin-top: 1.25rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid #e5e3d9;
  border-radius: 1.25rem;
  background: #fff;
}

.dcj-landing__section-heading {
  max-width: 42rem;
  margin: 0 auto 1.25rem;
  text-align: center;
}

.dcj-landing__section-heading h2,
.dcj-landing__benefits h2 {
  margin: 0;
  color: #203d31;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  line-height: 1.2;
  text-wrap: balance;
}

.dcj-landing__section-heading p {
  margin: .6rem 0 0;
}

.dcj-landing__previews {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.dcj-landing__preview {
  margin: 0;
  overflow: hidden;
  border: 1px solid #e5e3d9;
  border-radius: .9rem;
  background: #fbfaf6;
}

.dcj-landing__preview img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
}

.dcj-landing__preview figcaption {
  padding: .75rem 1rem;
  color: #203d31;
  font-weight: 700;
  text-align: center;
}

.dcj-landing__benefits ul {
  display: grid;
  gap: .75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.dcj-landing__benefits li {
  padding: .9rem 1rem .9rem 2.8rem;
  border-radius: .7rem;
  background: #f1f4eb;
  position: relative;
}

.dcj-landing__benefits li::before {
  position: absolute;
  left: 1rem;
  color: #315d43;
  content: "✓";
  font-weight: 800;
}

.dcj-landing__product {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 1.25rem;
  border: 1px solid #e5e3d9;
  border-radius: 1rem;
  background: #fff;
}

.dcj-landing__product--paperback {
  border-color: #b9c8bb;
  background: linear-gradient(155deg, #f0f3eb, #fff 72%);
}

.dcj-landing__product--printable {
  border-color: #d7c5a8;
  background: linear-gradient(155deg, #faf3e8, #fff 72%);
}

.dcj-landing__product-kind {
  margin: 0 0 .65rem;
  color: #496b58;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dcj-landing__product-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.dcj-landing__product-media {
  display: flex;
  width: 100%;
  height: clamp(10rem, 22vw, 13rem);
  align-items: center;
  justify-content: center;
  margin: 0 0 1rem;
}

.dcj-landing__product-media img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.dcj-landing__product-cover {
  border: 1px solid #e5e3d9;
  border-radius: .65rem;
  box-shadow: 0 .5rem 1.25rem rgb(32 61 49 / 12%);
}

.dcj-landing__product-image {
  border: 1px solid #e5e3d9;
  border-radius: .65rem;
}

.dcj-landing__product-copy .dcj-landing__button {
  margin-top: auto;
}

.dcj-landing__button {
  display: inline-flex;
  min-height: 2.9rem;
  align-items: center;
  justify-content: center;
  padding: .65rem 1rem;
  border-radius: .6rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.dcj-landing__button--secondary {
  border: 1px solid #496b58;
  color: #244a34;
  background: #fff;
}

.dcj-landing a:focus-visible,
.dcj-landing button:focus-visible,
.dcj-landing input:focus-visible {
  outline: 3px solid #c27b36;
  outline-offset: 3px;
}

.dcj-landing__back {
  margin: 1.5rem 0 0;
  text-align: center;
}

@media (min-width: 48rem) {
  .dcj-landing {
    padding-block: 2.5rem 3rem;
  }

  .dcj-landing__products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
  }

  .dcj-landing__previews {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .dcj-landing__benefits ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dcj-landing__product {
    padding: 1.75rem;
  }

  .dcj-landing__product-copy {
    flex: 1;
  }
}

@media (max-width: 47.99rem) {
  .dcj-landing__product-media {
    height: clamp(10rem, 38vw, 12rem);
  }

  .dcj-landing__product-copy .dcj-landing__button {
    width: 100%;
    margin-top: .25rem;
  }
}