/* The offer banner dropped into post bodies as raw HTML. Superblog's
   sanitizer strips class and style attributes from post content, so nothing
   in the markup can be targeted by name. The selectors instead recognize the
   banner by its shape — a div holding a media div (img) next to a body div
   whose paragraphs carry the heypocket.com CTA link — because href, src and
   alt do survive sanitization. The markup keeps its pkt-offer-* classes for
   readability, but they never reach the page. */
/* Flat selectors only: the upload pipeline's minifier drops nested rules. */
.prose div:has(> div > img):has(> div > p > a[href^="https://heypocket.com/"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    overflow: hidden;
    margin: 2.5rem 0;
    border-radius: 1rem;
    background: var(--ink);
}
/* Media half. */
.prose div:has(> div > p > a[href^="https://heypocket.com/"]) > div:has(> img) {
    flex: 1 1 260px;
    min-width: 240px;
}
.prose div:has(> div > p > a[href^="https://heypocket.com/"]) > div > img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
}
/* Copy half: eyebrow, title, note, CTA, stock chip — in that order. */
.prose div:has(> div > img) > div:has(> p > a[href^="https://heypocket.com/"]) {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    box-sizing: border-box;
    padding: 2.25rem 2rem;
}
.prose div:has(> div > img) > div:has(> p > a[href^="https://heypocket.com/"]) > p {
    margin: 0;
}
.prose div:has(> div > img) > div:has(> p > a[href^="https://heypocket.com/"]) > p:nth-of-type(1) {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.prose div:has(> div > img) > div:has(> p > a[href^="https://heypocket.com/"]) > p:nth-of-type(2) {
    font-size: 1.65rem;
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
}
.prose div:has(> div > img) > div:has(> p > a[href^="https://heypocket.com/"]) > p:nth-of-type(2) span {
    color: #6db1ff;
}
.prose div:has(> div > img) > div:has(> p > a[href^="https://heypocket.com/"]) > p:nth-of-type(3) {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
}
.prose div:has(> div > img) > div > p > a[href^="https://heypocket.com/"] {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.85rem 1.75rem;
    border-radius: 999px;
    background: var(--post-accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.1s linear;
}
.prose div:has(> div > img) > div > p > a[href^="https://heypocket.com/"]:hover {
    filter: brightness(1.15);
}
.prose div:has(> div > img) > div:has(> p > a[href^="https://heypocket.com/"]) > p:last-of-type {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}
.prose div:has(> div > img) > div:has(> p > a[href^="https://heypocket.com/"]) > p:last-of-type strong {
    color: #fff;
    font-weight: 600;
}