.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__buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .6em;
}
.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);
}
} .pm-badge {
display: inline-flex;
align-items: center;
gap: .3em;
padding: .2em .55em;
border-radius: 999px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: max(11px, .42em);
font-weight: 700;
line-height: 1.3;
letter-spacing: .05em;
text-transform: uppercase;
vertical-align: middle;
white-space: nowrap;
color: var(--pm-badge-color, #1d2327);
background: var(--pm-badge-bg, #f0c33c);
}
.pm-badge--title {
position: relative;
top: -.12em;
}
.pm-badge--before {
margin-inline-end: .45em;
}
.pm-badge--after {
margin-inline-start: .45em;
}
.pm-badge__icon {
flex: none;
width: 1em;
height: 1em;
}
.pm-thumb,
.pm-has-badge {
position: relative;
display: block;
}
.pm-badge--thumb {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
font-size: 12px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}