.pca-card--corner-cut {
    --pca-card-cut-size: clamp(1.75rem, 2.5vw, 2.5rem);
    --pca-card-cut-run: calc(var(--pca-card-cut-size) * 0.604);
    --pca-card-cut-radius: var(--border-radius);

    position: relative;
    border-radius: var(--border-radius);
    background: var(--pca-card-surface, var(--bg-light));
    clip-path: polygon(
        0 var(--border-radius),
        calc(var(--border-radius) * 0.08) calc(var(--border-radius) * 0.08),
        var(--border-radius) 0,
        calc(100% - var(--border-radius)) 0,
        calc(100% - var(--border-radius) * 0.08) calc(var(--border-radius) * 0.08),
        100% var(--border-radius),
        100% calc(100% - var(--pca-card-cut-size) - var(--pca-card-cut-radius) * 0.279),
        calc(100% - var(--pca-card-cut-radius) * 0.035) calc(100% - var(--pca-card-cut-size) - var(--pca-card-cut-radius) * 0.13),
        calc(100% - var(--pca-card-cut-radius) * 0.144) calc(100% - var(--pca-card-cut-size) + var(--pca-card-cut-radius) * 0.239),
        calc(100% - var(--pca-card-cut-run) + var(--pca-card-cut-radius) * 0.292) calc(100% - var(--pca-card-cut-radius) * 0.480),
        calc(100% - var(--pca-card-cut-run) - var(--pca-card-cut-radius) * 0.20) calc(100% - var(--pca-card-cut-radius) * 0.08),
        calc(100% - var(--pca-card-cut-run) - var(--pca-card-cut-radius) * 0.564) 100%,
        var(--border-radius) 100%,
        calc(var(--border-radius) * 0.08) calc(100% - var(--border-radius) * 0.08),
        0 calc(100% - var(--border-radius))
    );
}

@supports (clip-path: shape(from 0 0, line to 100% 0, close)) {
    .pca-card--corner-cut {
        clip-path: shape(
            from 0 var(--border-radius),
            curve to var(--border-radius) 0 with 0 0,
            line to calc(100% - var(--border-radius)) 0,
            curve to 100% var(--border-radius) with 100% 0,
            line to 100% calc(100% - var(--pca-card-cut-size) - var(--pca-card-cut-radius) * 0.279),
            curve to
                calc(100% - var(--pca-card-cut-radius) * 0.144)
                calc(100% - var(--pca-card-cut-size) + var(--pca-card-cut-radius) * 0.239)
                with 100% calc(100% - var(--pca-card-cut-size)),
            line to
                calc(100% - var(--pca-card-cut-run) + var(--pca-card-cut-radius) * 0.292)
                calc(100% - var(--pca-card-cut-radius) * 0.480),
            curve to
                calc(100% - var(--pca-card-cut-run) - var(--pca-card-cut-radius) * 0.564)
                100%
                with calc(100% - var(--pca-card-cut-run)) 100%,
            line to var(--border-radius) 100%,
            curve to 0 calc(100% - var(--border-radius)) with 0 100%,
            close
        );
    }
}

@media (max-width: 767px) {
    .pca-card--corner-cut {
        --pca-card-cut-size: clamp(1.5rem, 6vw, 2rem);
    }
}