.why-gold {
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(70% 80% at 4% 8%, color-mix(in srgb, var(--color-accent-soft), transparent 89%) 0%, transparent 72%),
    var(--color-bg);
}

.why-gold::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent), transparent 55%), transparent);
  content: "";
}

.why-gold__inner {
  display: grid;
  grid-template-columns: minmax(19rem, .82fr) minmax(34rem, 1.18fr);
  align-items: start;
  gap: clamp(3.5rem, 7vw, 8.5rem);
}

.why-gold__intro {
  display: grid;
  justify-items: start;
}

.why-gold h2 {
  max-width: 18ch;
  color: var(--color-text);
  font-size: clamp(2.35rem, 1.8rem + 1.62vw, 3.6rem);
  letter-spacing: -.052em;
}

.why-gold h2 > span {
  display: block;
}

.why-gold h2 em {
  display: block;
  margin-top: .08em;
  color: var(--color-accent);
  font-family: var(--font-serif);
  font-size: 1.14em;
  font-weight: 500;
  letter-spacing: -.025em;
}

@media (min-width: 68.0625rem) {
  .why-gold h2 > span {
    white-space: nowrap;
  }
}

.why-gold__copy {
  display: grid;
  gap: var(--space-sm);
  max-width: 43rem;
  margin-top: var(--space-lg);
}

.why-gold__copy p {
  margin: 0;
  color: var(--color-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
}

.why-gold__copy p + p {
  color: color-mix(in srgb, var(--color-body), var(--color-muted) 18%);
}

.why-gold__cta {
  margin-top: var(--space-lg);
}

.why-gold__principles {
  display: grid;
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--color-text), transparent 78%);
}

.why-gold__principle {
  position: relative;
  display: grid;
  grid-template-columns: clamp(5.8rem, 7.4vw, 8rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.4rem, 2.6vw, 2.75rem);
  min-height: clamp(10.5rem, 12vw, 13rem);
  padding-block: clamp(1.55rem, 2vw, 2.4rem);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text), transparent 78%);
}

.why-gold__principle::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  width: clamp(2.75rem, 5vw, 5.2rem);
  height: 1px;
  background: var(--color-accent);
  content: "";
}

.why-gold__icon {
  width: clamp(5.25rem, 6.8vw, 7.25rem);
  height: clamp(5.25rem, 6.8vw, 7.25rem);
  color: var(--color-accent);
  overflow: visible;
}

.why-gold__principle-copy {
  max-width: 34rem;
}

.why-gold__principle h3 {
  margin: 0 0 .45em;
  color: var(--color-text);
  font-size: clamp(1.18rem, 1.05rem + .38vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -.025em;
}

.why-gold__principle p {
  max-width: 48ch;
  margin: 0;
  color: var(--color-body);
  font-size: var(--text-sm);
  line-height: 1.65;
}

@media (max-width: 68rem) {
  .why-gold__inner {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .why-gold h2 {
    max-width: 18ch;
  }

  .why-gold__copy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    column-gap: var(--space-lg);
  }

  .why-gold__principles {
    width: min(100%, 58rem);
    margin-left: auto;
  }
}

@media (max-width: 47.5rem) {
  .why-gold__copy,
  .why-gold__principles {
    grid-template-columns: 1fr;
  }

  .why-gold__copy {
    gap: var(--space-sm);
  }

  .why-gold__principle {
    grid-template-columns: 4.75rem minmax(0, 1fr);
    align-items: center;
    min-height: 0;
    padding: var(--space-lg) 0;
  }

  .why-gold__icon {
    width: 4.4rem;
    height: 4.4rem;
  }

  .why-gold__cta {
    width: 100%;
  }
}