.membership-booking {
            width: 100%;
            padding: 0.5rem;
            color: var(--color-foreground, hsl(var(--foreground)));
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            font-optical-sizing: auto;
        }

        .membership-booking .membership-booking__group {
            max-width: 80rem;
            margin-inline: auto;
            padding: clamp(1rem, 2vw, 1.5rem);
            border-width: 1px;
            border-style: solid;
            border-radius: 0.75rem;
        }

        .membership-booking .membership-booking__group + .membership-booking__group {
            margin-top: 1.5rem;
        }

        .membership-booking .membership-booking__heading {
            margin: 0 0 1rem;
            color: var(--color-foreground, hsl(var(--foreground)));
            font-size: 1.25rem;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.025em;
            text-align: center;
            text-wrap: balance;
            overflow-wrap: anywhere;
        }

        .membership-booking .membership-booking__plans {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
        }

        .membership-booking .membership-booking__card {
            display: flex;
            flex: 1 1 15rem;
            flex-direction: column;
            min-width: 0;
            max-width: 22rem;
            box-sizing: border-box;
            padding: 1.125rem;
            border-width: 1px;
            border-style: solid;
            border-radius: 0.75rem;
            background: var(--color-card, hsl(var(--card)));
            color: var(--color-foreground, hsl(var(--foreground)));
            text-align: left;
            text-decoration: none;
            overflow-wrap: anywhere;
            -webkit-tap-highlight-color: transparent;
        }

        .membership-booking .membership-booking__card:focus-visible {
            outline: 2px solid var(--primary-500, var(--color-primary, hsl(var(--primary))));
            outline-offset: 4px;
        }

        .membership-booking .membership-booking__name {
            margin: 0;
            color: var(--color-foreground, hsl(var(--foreground)));
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.3;
            letter-spacing: -0.02em;
            text-wrap: balance;
        }

        .membership-booking .membership-booking__description {
            margin: 0.5rem 0 0;
            color: var(--color-muted-foreground, hsl(var(--muted-foreground)));
            font-size: 0.8125rem;
            line-height: 1.5;
            text-wrap: pretty;
        }

        .membership-booking .membership-booking__details {
            margin-top: auto;
            padding-top: 1.25rem;
        }

        .membership-booking .membership-booking__pricing {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 0.25rem 0.5rem;
        }

        .membership-booking .membership-booking__price {
            font-size: 1.75rem;
            font-weight: 600;
            line-height: 1.1;
            letter-spacing: -0.035em;
            font-variant-numeric: tabular-nums;
        }

        .membership-booking .membership-booking__period,
        .membership-booking .membership-booking__tax,
        .membership-booking .membership-booking__renewal {
            color: var(--color-muted-foreground, hsl(var(--muted-foreground)));
            font-size: 0.75rem;
            line-height: 1.5;
        }

        .membership-booking .membership-booking__tax {
            margin: 0.375rem 0 0;
        }

        .membership-booking .membership-booking__renewal {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            margin: 0.75rem 0 0;
            padding-top: 0.75rem;
            border-top-width: 1px;
            border-top-style: solid;
        }

        .membership-booking .membership-booking__renewal svg {
            width: 1rem;
            height: 1rem;
            flex-shrink: 0;
            margin-top: 0.125rem;
        }

        .membership-booking .membership-booking__action {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            min-height: 2.75rem;
            margin-top: 1rem;
            padding: 0.625rem 0.875rem;
            border-radius: 0.5rem;
            font-size: 0.8125rem;
            font-weight: 600;
            line-height: 1.4;
            text-align: center;
            transition: opacity 150ms ease, transform 150ms ease;
        }

        .membership-booking .membership-booking__action svg {
            width: 1.125rem;
            height: 1.125rem;
            flex-shrink: 0;
        }

        @media (hover: hover) {
            .membership-booking .membership-booking__card:hover .membership-booking__action {
                opacity: 0.88;
            }
        }

        .membership-booking .membership-booking__card:active .membership-booking__action {
            opacity: 0.8;
            transform: scale(0.98);
            transition-duration: 80ms;
        }

        .membership-booking .membership-booking__empty {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 8rem;
            padding: 1.5rem;
            border: 1px dashed var(--color-border, hsl(var(--border)));
            border-radius: 0.75rem;
            background: color-mix(in srgb, var(--color-muted, hsl(var(--muted))) 50%, transparent);
            color: var(--color-muted-foreground, hsl(var(--muted-foreground)));
            font-size: 0.9375rem;
            text-align: center;
        }

        @media (prefers-reduced-motion: reduce) {
            .membership-booking .membership-booking__action {
                transition: none !important;
                transform: none !important;
            }
        }

        @media (prefers-contrast: more) {
            .membership-booking .membership-booking__group,
            .membership-booking .membership-booking__card,
            .membership-booking .membership-booking__renewal,
            .membership-booking .membership-booking__empty {
                border-color: var(--color-foreground, hsl(var(--foreground)));
            }
        }