/* Pricing page — feature highlight cards */

.pricing-feature-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid rgb(226 232 240 / 0.9);
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 48%, #f1f5f9 100%);
    padding: 1.25rem 0.875rem;
    text-align: center;
    box-shadow:
        0 1px 2px rgb(15 23 42 / 0.04),
        inset 0 1px 0 rgb(255 255 255 / 0.9);
}

@media (min-width: 640px) {
    .pricing-feature-card {
        padding: 1.5rem 1rem;
    }
}

.pricing-feature-card__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 90% 70% at 50% 0%,
        rgb(148 163 184 / 0.14) 0%,
        transparent 68%
    );
}

.pricing-feature-card__grid {
    position: absolute;
    inset: -10% -5% auto;
    height: 55%;
    pointer-events: none;
    background-image:
        linear-gradient(rgb(148 163 184 / 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgb(148 163 184 / 0.09) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 85% 90% at 50% 0%, black 10%, transparent 72%);
    mask-image: radial-gradient(ellipse 85% 90% at 50% 0%, black 10%, transparent 72%);
}

.pricing-feature-card__body {
    position: relative;
    z-index: 1;
}

.pricing-feature-card__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 0.875rem;
    border-radius: 0.75rem;
    background: rgb(255 255 255 / 0.85);
    border: 1px solid rgb(226 232 240 / 0.95);
    box-shadow:
        0 1px 2px rgb(15 23 42 / 0.04),
        inset 0 1px 0 rgb(255 255 255 / 1);
}

.pricing-feature-card__icon {
    width: 1.375rem;
    height: 1.375rem;
    color: #94a3b8;
    transform-origin: center;
    will-change: transform;
}

.pricing-feature-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: #0f172a;
}

.pricing-feature-card__sub {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #64748b;
}

/* Icon animations */
.pricing-feature-card__icon--pulse {
    animation: pricing-feature-pulse 2.6s ease-in-out infinite;
}

.pricing-feature-card__icon--float {
    animation: pricing-feature-float 3s ease-in-out infinite;
}

.pricing-feature-card__icon--wiggle {
    animation: pricing-feature-wiggle 3.2s ease-in-out infinite;
}

.pricing-feature-card__icon--spin {
    animation: pricing-feature-spin 6s linear infinite;
}

.pricing-feature-card__icon--rise {
    animation: pricing-feature-rise 2.8s ease-in-out infinite;
}

@keyframes pricing-feature-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.14); }
}

@keyframes pricing-feature-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes pricing-feature-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}

@keyframes pricing-feature-spin {
    to { transform: rotate(360deg); }
}

@keyframes pricing-feature-rise {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-feature-card__icon--pulse,
    .pricing-feature-card__icon--float,
    .pricing-feature-card__icon--wiggle,
    .pricing-feature-card__icon--spin,
    .pricing-feature-card__icon--rise {
        animation: none !important;
    }
}