.pd-idea {
  --pd-idea-ink: #111114;
  --pd-idea-muted: #6e6e73;
  --pd-idea-border: rgba(0, 0, 0, .08);
  --pd-idea-surface: linear-gradient(145deg, rgba(255, 255, 255, .98) 0%, rgba(246, 246, 248, .94) 54%, rgba(232, 233, 237, .82) 100%);
  --pd-idea-glow: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 92% 100%, rgba(142, 142, 147, .24) 0%, rgba(142, 142, 147, 0) 45%);
  --pd-idea-line: linear-gradient(90deg, #111114 0%, #737377 45%, #d7d7dc 100%);
  background: var(--pd-idea-glow), var(--pd-idea-surface);
  border: 1px solid var(--pd-idea-border);
  border-radius: 22px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .065);
  box-sizing: border-box;
  clear: both;
  color: var(--pd-idea-ink);
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", sans-serif;
  margin: 2.45rem 0;
  max-width: 100%;
  overflow: hidden;
  padding: clamp(1.15rem, 2.5vw, 1.75rem);
  position: relative;
}

.pd-idea::before {
  background: var(--pd-idea-line);
  border-radius: 999px;
  content: "";
  display: block;
  height: 3px;
  left: clamp(1.15rem, 2.5vw, 1.75rem);
  position: absolute;
  top: clamp(.9rem, 2vw, 1.2rem);
  width: clamp(74px, 20%, 142px);
}

.pd-idea::after {
  color: rgba(0, 0, 0, .045);
  content: "“";
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(5.8rem, 12vw, 10rem);
  font-weight: 700;
  line-height: .75;
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  top: .35rem;
  z-index: 0;
}

.pd-idea__label {
  color: var(--pd-idea-muted);
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.1;
  margin: .85rem 0 .58rem;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

.pd-idea__text {
  color: inherit;
  display: block;
  font-size: clamp(1.35rem, 2.05vw, 2.1rem);
  font-weight: 720;
  letter-spacing: -.032em;
  line-height: 1.08;
  margin: 0;
  max-width: 760px;
  position: relative;
  text-wrap: balance;
  z-index: 1;
}

.pd-idea__text strong {
  font-weight: 780;
}

.pd-idea__text em {
  color: var(--pd-idea-muted);
  font-style: normal;
}

.pd-idea--large .pd-idea__text {
  font-size: clamp(1.75rem, 2.9vw, 2.8rem);
  line-height: 1.03;
}

.pd-idea--graphite {
  --pd-idea-ink: #f5f5f7;
  --pd-idea-muted: rgba(245, 245, 247, .62);
  --pd-idea-border: rgba(255, 255, 255, .12);
  --pd-idea-surface: linear-gradient(145deg, #111114 0%, #1d1d1f 52%, #303034 100%);
  --pd-idea-glow: radial-gradient(circle at 14% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 44%),
    radial-gradient(circle at 88% 100%, rgba(245, 245, 247, .12) 0%, rgba(245, 245, 247, 0) 48%);
  --pd-idea-line: linear-gradient(90deg, #f5f5f7 0%, #8e8e93 52%, #1d1d1f 100%);
  box-shadow: 0 25px 65px rgba(0, 0, 0, .18);
}

.pd-idea--blue {
  --pd-idea-border: rgba(24, 39, 55, .14);
  --pd-idea-surface: linear-gradient(145deg, rgba(255, 255, 255, .98) 0%, rgba(243, 245, 247, .95) 46%, rgba(210, 218, 226, .82) 100%);
  --pd-idea-glow: radial-gradient(circle at 16% 0%, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 88% 100%, rgba(20, 34, 48, .22) 0%, rgba(20, 34, 48, 0) 46%);
  --pd-idea-line: linear-gradient(90deg, #111820 0%, #2f4358 44%, #9aa4af 100%);
}

.pd-idea--center,
.pd-idea--wide {
  margin-left: auto;
  margin-right: auto;
}

.pd-idea--center {
  max-width: min(620px, 100%);
  text-align: center;
}

.pd-idea--center::before {
  left: 50%;
  transform: translateX(-50%);
}

.pd-idea--wide {
  max-width: min(760px, 100%);
}

.pd-idea--auto {
  clear: both;
  margin-bottom: 2.55rem;
  margin-top: 2.55rem;
}

@media (min-width: 860px) {
  .pd-idea--left:not(.pd-idea--auto),
  .pd-idea--right:not(.pd-idea--auto) {
    clear: none;
    max-width: min(40%, 340px);
  }

  .pd-idea--left:not(.pd-idea--auto) {
    float: left;
    margin: .4rem 2.15rem 1.35rem 0;
  }

  .pd-idea--right:not(.pd-idea--auto) {
    float: right;
    margin: .4rem 0 1.35rem 2.15rem;
  }
}

@media (max-width: 859px) {
  .pd-idea {
    clear: both;
    float: none;
    margin: 2rem 0;
    padding: 1.15rem;
    width: 100%;
  }

  .pd-idea::before {
    left: 1.15rem;
    top: .9rem;
  }

  .pd-idea__text {
    font-size: clamp(1.28rem, 6.1vw, 1.9rem);
  }
}