.plan-card{background:color-mix(in srgb, var(--surface-inverse) 8%, transparent);border:1px solid color-mix(in srgb, var(--surface-inverse) 14%, transparent);box-shadow:0 8px 24px color-mix(in srgb, var(--ink) 10%, transparent);border-radius:32px;flex-direction:column;gap:16px;width:100%;max-width:320px;margin:0 auto 4px;padding:18px 18px 24px;display:flex;box-shadow:0 48px 48px -24px #3333330a,0 24px 24px -12px #3333330a}.is-desktop .plan-card,.is-mobile .plan-card{max-width:776px}.carousel-container .plan-card{max-width:320px;margin:0 0 48px auto}.is-mobile .carousel-container .plan-card{margin:0 0 4px}.plan-card .card-header{border-radius:20px;overflow:hidden}.plan-card .card-header .plan-image:hover{border-color:var(--border);box-shadow:0 1px 3px -1.5px #33333329,0 5px 5px -2.5px #33333314}.is-desktop .plan-card .card-header .plan-image{width:100%;height:300px}.is-mobile .plan-card .card-header .plan-image{width:100%;height:220px}.carousel-container .plan-card .card-header .plan-image{width:100%;height:178px}.plan-card .card-header .promotion-ribbon:before{border-width:60px 60px 0 0}.plan-card .card-header .promotion-ribbon .icon{top:10px;left:10px}.plan-card .card-body{color:var(--text);flex-direction:column;gap:10px;display:flex}.plan-card .card-body .plan-description,.plan-card .card-body .plan-title{-webkit-line-clamp:2;text-overflow:ellipsis;-webkit-box-orient:vertical;min-height:2lh;display:-webkit-box;overflow:hidden}.plan-card .card-body .details-container,.plan-card .card-body .details-container .servings-rating-container,.plan-card .card-body .details-container .serving-size,.plan-card .card-body .details-container .rating{justify-content:space-between;align-items:center;display:flex}.plan-card .card-body .details-container .servings-rating-container{gap:8px}.plan-card .card-body .details-container .servings-rating-container .icon{color:var(--primary);font-size:14px}.plan-card .card-body .details-container .serving-size,.plan-card .card-body .details-container .rating{gap:4px}.plan-card .card-body .duration{color:var(--neutral-mid);border:1px solid var(--neutral-mid);border-radius:999px}.plan-card .card-footer .view-plan-btn{border:1px solid var(--border-muted);text-align:center;border-radius:8px;width:100%;padding:8px;display:block;box-shadow:0 1px 2px #3333330a,0 2px 4px #3333330a}.plan-card .card-footer .view-plan-btn:hover{border:1px solid var(--border);box-shadow:0 1px 3px -1.5px #33333329,0 5px 5px -2.5px #33333314}.plan-card:hover{border-color:var(--border);box-shadow:0 96px 96px -32px #3333330f,0 48px 48px -24px #3333330a}.plan-card .price-badge{top:10px;right:10px}.theme-dark .plan-card{background:var(--surface);border-color:var(--surface-hover)}.plan-card{box-shadow:0 0 0 1px color-mix(in srgb, var(--surface-inverse) 22%, transparent),inset 0 3px 0 0 color-mix(in srgb, var(--surface-inverse) 95%, transparent),inset 2.5px 0 0 0 color-mix(in srgb, var(--surface-inverse) 52%, transparent),inset 0 -2px 0 0 color-mix(in srgb, var(--info-surface-deep) 34%, transparent),inset -1.5px 0 0 0 color-mix(in srgb, var(--info-surface-deep) 22%, transparent);transition:box-shadow .32s cubic-bezier(.2,.8,.2,1)}.plan-card:hover{box-shadow:0 0 0 1px color-mix(in srgb, var(--surface-inverse) 40%, transparent),inset 0 3px 0 0 var(--surface-inverse),inset 2.5px 0 0 0 color-mix(in srgb, var(--surface-inverse) 62%, transparent),inset 0 -2px 0 0 color-mix(in srgb, var(--info-surface-deep) 36%, transparent),inset -1.5px 0 0 0 color-mix(in srgb, var(--info-surface-deep) 24%, transparent),inset 0 8px 18px -10px color-mix(in srgb, var(--surface-inverse) 25%, transparent)}.theme-dark .plan-card{box-shadow:0 0 0 1px color-mix(in srgb, var(--surface-inverse) 18%, transparent),inset 0 3px 0 0 color-mix(in srgb, var(--surface-inverse) 72%, transparent),inset 2.5px 0 0 0 color-mix(in srgb, var(--surface-inverse) 38%, transparent),inset 0 -2px 0 0 color-mix(in srgb, var(--ink) 55%, transparent),inset -1.5px 0 0 0 color-mix(in srgb, var(--ink) 38%, transparent)}.theme-dark .plan-card:hover{box-shadow:0 0 0 1px color-mix(in srgb, var(--surface-inverse) 36%, transparent),inset 0 3px 0 0 color-mix(in srgb, var(--surface-inverse) 86%, transparent),inset 2.5px 0 0 0 color-mix(in srgb, var(--surface-inverse) 48%, transparent),inset 0 -2px 0 0 color-mix(in srgb, var(--ink) 60%, transparent),inset -1.5px 0 0 0 color-mix(in srgb, var(--ink) 42%, transparent),inset 0 8px 18px -10px color-mix(in srgb, var(--surface-inverse) 20%, transparent)}.carousel-container .plan-card{box-shadow:0 0 0 1px color-mix(in srgb, var(--surface-inverse) 22%, transparent),inset 0 3px 0 0 color-mix(in srgb, var(--surface-inverse) 95%, transparent),inset 2.5px 0 0 0 color-mix(in srgb, var(--surface-inverse) 52%, transparent),inset 0 -2px 0 0 color-mix(in srgb, var(--info-surface-deep) 34%, transparent),inset -1.5px 0 0 0 color-mix(in srgb, var(--info-surface-deep) 22%, transparent)}.carousel-container .plan-card:hover{box-shadow:0 0 0 1px color-mix(in srgb, var(--surface-inverse) 40%, transparent),inset 0 3px 0 0 var(--surface-inverse),inset 2.5px 0 0 0 color-mix(in srgb, var(--surface-inverse) 62%, transparent),inset 0 -2px 0 0 color-mix(in srgb, var(--info-surface-deep) 36%, transparent),inset -1.5px 0 0 0 color-mix(in srgb, var(--info-surface-deep) 24%, transparent),inset 0 8px 18px -10px color-mix(in srgb, var(--surface-inverse) 25%, transparent)}.theme-dark .carousel-container .plan-card{box-shadow:0 0 0 1px color-mix(in srgb, var(--surface-inverse) 18%, transparent),inset 0 3px 0 0 color-mix(in srgb, var(--surface-inverse) 72%, transparent),inset 2.5px 0 0 0 color-mix(in srgb, var(--surface-inverse) 38%, transparent),inset 0 -2px 0 0 color-mix(in srgb, var(--ink) 55%, transparent),inset -1.5px 0 0 0 color-mix(in srgb, var(--ink) 38%, transparent)}.theme-dark .carousel-container .plan-card:hover{box-shadow:0 0 0 1px color-mix(in srgb, var(--surface-inverse) 36%, transparent),inset 0 3px 0 0 color-mix(in srgb, var(--surface-inverse) 86%, transparent),inset 2.5px 0 0 0 color-mix(in srgb, var(--surface-inverse) 48%, transparent),inset 0 -2px 0 0 color-mix(in srgb, var(--ink) 60%, transparent),inset -1.5px 0 0 0 color-mix(in srgb, var(--ink) 42%, transparent),inset 0 8px 18px -10px color-mix(in srgb, var(--surface-inverse) 20%, transparent)}@media (prefers-reduced-motion:reduce){.plan-card{transition:none}}