/* NMMB Bench Card — tilted green card with bank.svg illustration and caption.
   Mirrors .story__benchart from the static template (tmp/assets/css/style.css). */

.nmmb-benchcard {
    position: relative;
    overflow: hidden;
    margin-top: 2.5rem;
    margin-inline: auto;
    max-width: 420px;
    padding: 1.6rem 1.6rem 1.2rem;
    border-radius: 22px;
    background: linear-gradient(160deg, var(--green, #00913d) 0%, var(--green-deep, #006b2c) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.15) inset,
        0 1px 0 rgba(0, 0, 0, 0.06),
        0 24px 50px -22px rgba(0, 40, 12, 0.45);
    transition: transform 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.nmmb-benchcard--tilt {
    transform: rotate(-1.8deg);
}

.nmmb-benchcard::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-conic-gradient(from 0deg at 50% 30%,
            rgba(255, 255, 255, 0.05) 0deg 4deg,
            transparent 4deg 14deg);
    opacity: 0.9;
    pointer-events: none;
}

.nmmb-benchcard__img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.nmmb-benchcard__cap {
    position: relative;
    display: block;
    margin-top: 0.9rem;
    font-family: var(--mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lime, #c8dc28);
    text-align: right;
}

@media (min-width: 900px) {
    .nmmb-benchcard {
        margin: 3rem 0 0 auto;
    }
    .nmmb-benchcard--tilt {
        transform: rotate(-2.4deg);
    }
}

.nmmb-benchcard--tilt:hover {
    transform: rotate(0) scale(1.02);
}