.pm-teaser {
position: relative;
} .pm-teaser::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 6em;
pointer-events: none;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--pm-bg, #fff));
}
.pm-cta,
.pm-thankyou {
margin: 1.5em 0 2em;
padding: 1.75em 1.5em;
border: 1px solid rgba(0, 0, 0, .12);
border-radius: 12px;
text-align: center;
background: rgba(0, 0, 0, .025);
}
.pm-cta__badge {
display: inline-block;
margin-bottom: .75em;
padding: .2em .7em;
border-radius: 999px;
font-size: .75em;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: #8a5a00;
background: #fff1cc;
}
.pm-cta__title {
margin: 0 0 .4em;
font-size: 1.25em;
font-weight: 700;
line-height: 1.3;
}
.pm-cta__text {
margin: 0 auto 1.2em;
max-width: 34em;
opacity: .85;
}
.pm-cta .pm-cta__button,
.pm-thankyou .pm-cta__button {
display: inline-block;
padding: .75em 1.6em;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
color: #fff;
background: var(--pm-accent, #1d6b4f);
transition: filter .15s ease;
}
.pm-cta .pm-cta__button:hover,
.pm-cta .pm-cta__button:focus,
.pm-thankyou .pm-cta__button:hover {
filter: brightness(1.12);
color: #fff;
}
.pm-cta__login {
margin: 1em 0 0;
font-size: .9em;
}
@media (prefers-color-scheme: dark) {
.pm-cta,
.pm-thankyou {
border-color: rgba(255, 255, 255, .15);
background: rgba(255, 255, 255, .04);
}
}