.ar-entitlement-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 484px));
    align-items: stretch;
    gap: var(--ar-space-5);
    margin-top: var(--ar-space-5);
}

.ar-entitlement-card {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.ar-entitlement-card__frame {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr;
    height: 100%;
    overflow: hidden;
    border: 0;

    --ar-entitlement-cut-size: 24px;
    --ar-entitlement-cut-span: 48px;
    --ar-entitlement-inner-cut-size: 22px;
    --ar-entitlement-inner-cut-span: 44px;
    --ar-entitlement-border-color: rgba(215, 32, 47, 0.58);
    --ar-entitlement-inner-border-color: rgba(184, 192, 199, 0.24);
    --ar-entitlement-border-width: 1px;

    clip-path: polygon(
        var(--ar-entitlement-cut-size) 0,
        calc(100% - var(--ar-entitlement-cut-size)) 0,
        100% var(--ar-entitlement-cut-size),
        100% calc(100% - var(--ar-entitlement-cut-size)),
        calc(100% - var(--ar-entitlement-cut-size)) 100%,
        var(--ar-entitlement-cut-size) 100%,
        0 calc(100% - var(--ar-entitlement-cut-size)),
        0 var(--ar-entitlement-cut-size)
    );
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), transparent 20%),
        radial-gradient(circle at 82% 10%, rgba(215, 32, 47, 0.18), transparent 30%),
        linear-gradient(180deg, #15191d, #080a0d);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.48),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition:
        transform var(--ar-transition-med),
        box-shadow var(--ar-transition-med);
}

.ar-entitlement-card__frame::before,
.ar-entitlement-card__frame::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.ar-entitlement-card__frame::before {
    inset: 2px;
    z-index: 4;
    background:
        linear-gradient(var(--ar-entitlement-inner-border-color) 0 0)
            left var(--ar-entitlement-inner-cut-size) top 0 /
            calc(100% - var(--ar-entitlement-inner-cut-span)) var(--ar-entitlement-border-width)
            no-repeat,
        linear-gradient(
            45deg,
            transparent calc(50% - 1px),
            var(--ar-entitlement-inner-border-color) calc(50% - 1px),
            var(--ar-entitlement-inner-border-color) calc(50% + 1px),
            transparent calc(50% + 1px)
        )
            top right /
            var(--ar-entitlement-inner-cut-size) var(--ar-entitlement-inner-cut-size)
            no-repeat,
        linear-gradient(var(--ar-entitlement-inner-border-color) 0 0)
            right 0 top var(--ar-entitlement-inner-cut-size) /
            var(--ar-entitlement-border-width) calc(100% - var(--ar-entitlement-inner-cut-span))
            no-repeat,
        linear-gradient(
            -45deg,
            transparent calc(50% - 1px),
            var(--ar-entitlement-inner-border-color) calc(50% - 1px),
            var(--ar-entitlement-inner-border-color) calc(50% + 1px),
            transparent calc(50% + 1px)
        )
            bottom right /
            var(--ar-entitlement-inner-cut-size) var(--ar-entitlement-inner-cut-size)
            no-repeat,
        linear-gradient(var(--ar-entitlement-inner-border-color) 0 0)
            left var(--ar-entitlement-inner-cut-size) bottom 0 /
            calc(100% - var(--ar-entitlement-inner-cut-span)) var(--ar-entitlement-border-width)
            no-repeat,
        linear-gradient(
            45deg,
            transparent calc(50% - 1px),
            var(--ar-entitlement-inner-border-color) calc(50% - 1px),
            var(--ar-entitlement-inner-border-color) calc(50% + 1px),
            transparent calc(50% + 1px)
        )
            bottom left /
            var(--ar-entitlement-inner-cut-size) var(--ar-entitlement-inner-cut-size)
            no-repeat,
        linear-gradient(var(--ar-entitlement-inner-border-color) 0 0)
            left 0 top var(--ar-entitlement-inner-cut-size) /
            var(--ar-entitlement-border-width) calc(100% - var(--ar-entitlement-inner-cut-span))
            no-repeat,
        linear-gradient(
            -45deg,
            transparent calc(50% - 1px),
            var(--ar-entitlement-inner-border-color) calc(50% - 1px),
            var(--ar-entitlement-inner-border-color) calc(50% + 1px),
            transparent calc(50% + 1px)
        )
            top left /
            var(--ar-entitlement-inner-cut-size) var(--ar-entitlement-inner-cut-size)
            no-repeat;
}

.ar-entitlement-card__frame::after {
    inset: 0;
    z-index: 5;
    background:
        linear-gradient(var(--ar-entitlement-border-color) 0 0)
            left var(--ar-entitlement-cut-size) top 0 /
            calc(100% - var(--ar-entitlement-cut-span)) var(--ar-entitlement-border-width)
            no-repeat,
        linear-gradient(
            45deg,
            transparent calc(50% - 1px),
            var(--ar-entitlement-border-color) calc(50% - 1px),
            var(--ar-entitlement-border-color) calc(50% + 1px),
            transparent calc(50% + 1px)
        )
            top right /
            var(--ar-entitlement-cut-size) var(--ar-entitlement-cut-size)
            no-repeat,
        linear-gradient(var(--ar-entitlement-border-color) 0 0)
            right 0 top var(--ar-entitlement-cut-size) /
            var(--ar-entitlement-border-width) calc(100% - var(--ar-entitlement-cut-span))
            no-repeat,
        linear-gradient(
            -45deg,
            transparent calc(50% - 1px),
            var(--ar-entitlement-border-color) calc(50% - 1px),
            var(--ar-entitlement-border-color) calc(50% + 1px),
            transparent calc(50% + 1px)
        )
            bottom right /
            var(--ar-entitlement-cut-size) var(--ar-entitlement-cut-size)
            no-repeat,
        linear-gradient(var(--ar-entitlement-border-color) 0 0)
            left var(--ar-entitlement-cut-size) bottom 0 /
            calc(100% - var(--ar-entitlement-cut-span)) var(--ar-entitlement-border-width)
            no-repeat,
        linear-gradient(
            45deg,
            transparent calc(50% - 1px),
            var(--ar-entitlement-border-color) calc(50% - 1px),
            var(--ar-entitlement-border-color) calc(50% + 1px),
            transparent calc(50% + 1px)
        )
            bottom left /
            var(--ar-entitlement-cut-size) var(--ar-entitlement-cut-size)
            no-repeat,
        linear-gradient(var(--ar-entitlement-border-color) 0 0)
            left 0 top var(--ar-entitlement-cut-size) /
            var(--ar-entitlement-border-width) calc(100% - var(--ar-entitlement-cut-span))
            no-repeat,
        linear-gradient(
            -45deg,
            transparent calc(50% - 1px),
            var(--ar-entitlement-border-color) calc(50% - 1px),
            var(--ar-entitlement-border-color) calc(50% + 1px),
            transparent calc(50% + 1px)
        )
            top left /
            var(--ar-entitlement-cut-size) var(--ar-entitlement-cut-size)
            no-repeat;
}

.ar-entitlement-card:hover .ar-entitlement-card__frame,
.ar-entitlement-card:focus-visible .ar-entitlement-card__frame {
    --ar-entitlement-border-color: rgba(236, 52, 66, 0.86);

    box-shadow:
        0 30px 82px rgba(0, 0, 0, 0.58),
        0 0 36px rgba(215, 32, 47, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.ar-entitlement-card:hover .ar-entitlement-card__media,
.ar-entitlement-card:focus-visible .ar-entitlement-card__media {
    --ar-entitlement-media-border-color: rgba(236, 52, 66, 0.86);
}

.ar-entitlement-card__media {
    position: relative;
    margin: 18px 18px 0;
    aspect-ratio: 16 / 9.5;
    overflow: hidden;
    border: 0;

    --ar-entitlement-media-cut-size: 18px;
    --ar-entitlement-media-border-color: rgba(215, 32, 47, 0.42);
    clip-path: polygon(
        4.5% 0,
        95.5% 0,
        99.9% 7.6%,
        99.9% 92.4%,
        95.5% 99.8%,
        76.7% 99.8%,
        70.3% 88.2%,
        29.7% 88.2%,
        23.3% 99.8%,
        4.5% 99.8%,
        0.1% 92.4%,
        0.1% 7.6%
    );
    background:
        radial-gradient(circle at 72% 18%, rgba(215, 32, 47, 0.24), transparent 38%),
        linear-gradient(135deg, #1a2026, #07090c);
}

.ar-entitlement-card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    display: none;
    background:
        linear-gradient(var(--ar-entitlement-media-border-color) 0 0)
            left var(--ar-entitlement-media-cut-size) top 0 /
            calc(100% - (var(--ar-entitlement-media-cut-size) * 2)) 1px
            no-repeat,
        linear-gradient(
            45deg,
            transparent calc(50% - 1px),
            var(--ar-entitlement-media-border-color) calc(50% - 1px),
            var(--ar-entitlement-media-border-color) calc(50% + 1px),
            transparent calc(50% + 1px)
        )
            top right /
            var(--ar-entitlement-media-cut-size) var(--ar-entitlement-media-cut-size)
            no-repeat,
        linear-gradient(var(--ar-entitlement-media-border-color) 0 0)
            right 0 top var(--ar-entitlement-media-cut-size) /
            1px calc(100% - (var(--ar-entitlement-media-cut-size) * 2))
            no-repeat,
        linear-gradient(
            -45deg,
            transparent calc(50% - 1px),
            var(--ar-entitlement-media-border-color) calc(50% - 1px),
            var(--ar-entitlement-media-border-color) calc(50% + 1px),
            transparent calc(50% + 1px)
        )
            bottom right /
            var(--ar-entitlement-media-cut-size) var(--ar-entitlement-media-cut-size)
            no-repeat,
        linear-gradient(var(--ar-entitlement-media-border-color) 0 0)
            left var(--ar-entitlement-media-cut-size) bottom 0 /
            calc(50% - var(--ar-entitlement-media-notch-outer-half) - var(--ar-entitlement-media-cut-size)) 1px
            no-repeat,
        linear-gradient(
            45deg,
            transparent calc(50% - 1px),
            var(--ar-entitlement-media-border-color) calc(50% - 1px),
            var(--ar-entitlement-media-border-color) calc(50% + 1px),
            transparent calc(50% + 1px)
        )
            left calc(50% - var(--ar-entitlement-media-notch-outer-half)) bottom 0 /
            var(--ar-entitlement-media-notch-height) var(--ar-entitlement-media-notch-height)
            no-repeat,
        linear-gradient(var(--ar-entitlement-media-border-color) 0 0)
            left calc(50% - var(--ar-entitlement-media-notch-inner-half)) bottom var(--ar-entitlement-media-notch-height) /
            calc(var(--ar-entitlement-media-notch-inner-half) * 2) 1px
            no-repeat,
        linear-gradient(
            -45deg,
            transparent calc(50% - 1px),
            var(--ar-entitlement-media-border-color) calc(50% - 1px),
            var(--ar-entitlement-media-border-color) calc(50% + 1px),
            transparent calc(50% + 1px)
        )
            left calc(50% + var(--ar-entitlement-media-notch-inner-half)) bottom 0 /
            var(--ar-entitlement-media-notch-height) var(--ar-entitlement-media-notch-height)
            no-repeat,
        linear-gradient(var(--ar-entitlement-media-border-color) 0 0)
            right var(--ar-entitlement-media-cut-size) bottom 0 /
            calc(50% - var(--ar-entitlement-media-notch-outer-half) - var(--ar-entitlement-media-cut-size)) 1px
            no-repeat,
        linear-gradient(
            45deg,
            transparent calc(50% - 1px),
            var(--ar-entitlement-media-border-color) calc(50% - 1px),
            var(--ar-entitlement-media-border-color) calc(50% + 1px),
            transparent calc(50% + 1px)
        )
            bottom left /
            var(--ar-entitlement-media-cut-size) var(--ar-entitlement-media-cut-size)
            no-repeat,
        linear-gradient(var(--ar-entitlement-media-border-color) 0 0)
            left 0 top var(--ar-entitlement-media-cut-size) /
            1px calc(100% - (var(--ar-entitlement-media-cut-size) * 2))
            no-repeat,
        linear-gradient(
            -45deg,
            transparent calc(50% - 1px),
            var(--ar-entitlement-media-border-color) calc(50% - 1px),
            var(--ar-entitlement-media-border-color) calc(50% + 1px),
            transparent calc(50% + 1px)
        )
            top left /
            var(--ar-entitlement-media-cut-size) var(--ar-entitlement-media-cut-size)
            no-repeat;
}

.ar-entitlement-card__media-border {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ar-entitlement-card__media-border path {
    fill: none;
    stroke: var(--ar-entitlement-media-border-color);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.ar-entitlement-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.86;
    filter: saturate(0.95) contrast(1.08);
    transition:
        transform 520ms ease,
        opacity var(--ar-transition-med),
        filter var(--ar-transition-med);
}

.ar-entitlement-card:hover .ar-entitlement-card__media img,
.ar-entitlement-card:focus-visible .ar-entitlement-card__media img {
    transform: scale(1.018);
}

.ar-entitlement-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.42)),
        linear-gradient(135deg, rgba(215, 32, 47, 0.16), transparent 42%);
}

.ar-entitlement-card__media-placeholder {
    width: 100%;
    height: 100%;
    background:
        url("/assets/images/graphics/goldwing-outline-watermark.svg") center / 68% auto no-repeat,
        radial-gradient(circle at 70% 25%, rgba(215, 32, 47, 0.20), transparent 42%),
        linear-gradient(135deg, #1a2026, #07090c);
    opacity: 0.74;
}

.ar-entitlement-card__body {
    position: relative;
    z-index: 6;
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    gap: var(--ar-space-3);
    padding: calc(var(--ar-space-5) + 8px) 28px 28px;
}

.ar-entitlement-card__mark {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    height: 44px;
    margin: -24px 0 0;
    pointer-events: none;
}

.ar-entitlement-card__mark img {
    display: block;
    width: min(38%, 150px);
    min-width: 96px;
    height: auto;
    align-self: flex-start;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.62));
}

.ar-entitlement-card__title {
    margin: 0;
    color: var(--ar-text);
    font-family: var(--ar-font-display);
    font-size: clamp(1.25rem, 2.4vw, 1.85rem);
    font-weight: 900;
    letter-spacing: 0.035em;
    line-height: 1.06;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.42);
}

.ar-entitlement-card__description {
    margin: 0;
    color: var(--ar-text-muted);
    font-size: clamp(1rem, 2vw, 1.18rem);
    line-height: 1.45;
}

.ar-entitlement-card__cta {
    display: flex;
    align-items: center;
    align-self: end;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    padding: 1rem var(--ar-space-4);
    border: 1px solid rgba(236, 52, 66, 0.82);
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(156, 14, 24, 0.98), rgba(95, 4, 12, 0.98)),
        var(--ar-red);
    color: #fff;
    font-family: var(--ar-font-display);
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 28px rgba(215, 32, 47, 0.20);
    transition:
        background-color var(--ar-transition-fast),
        box-shadow var(--ar-transition-fast);
}

.ar-entitlement-card:hover .ar-entitlement-card__cta,
.ar-entitlement-card:focus-visible .ar-entitlement-card__cta {
    background:
        linear-gradient(180deg, rgba(205, 30, 43, 0.98), rgba(124, 7, 17, 0.98)),
        var(--ar-red-bright);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 34px rgba(215, 32, 47, 0.32);
}

.ar-entitlement-card__included {
    margin: var(--ar-space-3) var(--ar-space-3) 0;
    padding-top: var(--ar-space-3);
    border-top: 1px solid rgba(184, 192, 199, 0.22);
    color: var(--ar-text-muted);
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.35;
    text-align: center;
}

@media (max-width: 560px) {
    .ar-entitlement-card__media {
        margin: 14px 14px 0;
    }

    .ar-entitlement-card__body {
        padding: calc(var(--ar-space-4) + 8px) 22px 22px;
    }

    .ar-entitlement-card__cta {
        font-size: 1.1rem;
    }
}